@instructure/ui-list 10.0.1-snapshot-6 → 10.0.1-snapshot-7

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.0.1-snapshot-6](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.0.1-snapshot-6) (2024-08-09)
+## [10.0.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.0.0...v10.0.1-snapshot-7) (2024-08-09)
 
 **Note:** Version bump only for package @instructure/ui-list
 

package/es/InlineList/InlineListItem/__new-tests__/InlineListItem.test.js

@@ -0,0 +1,53 @@
+var _InlineListItem, _InlineListItem2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import { InlineListItem } from '../index';
+describe('<InlineListItem />', () => {
+  it('should render children', async () => {
+    render(_InlineListItem || (_InlineListItem = /*#__PURE__*/React.createElement(InlineListItem, null, "hello")));
+    const listItem = screen.getByRole('listitem');
+    expect(listItem).toHaveTextContent('hello');
+  });
+  it('should render delimiter', async () => {
+    const _render = render(_InlineListItem2 || (_InlineListItem2 = /*#__PURE__*/React.createElement(InlineListItem, {
+        delimiter: "slash"
+      }, "List item"))),
+      container = _render.container;
+    const listItem = container.querySelector('span[class$="delimiter"]');
+    expect(listItem).toHaveAttribute('aria-hidden', 'true');
+  });
+  it('should call elementRef', async () => {
+    const elementRef = vi.fn();
+    render( /*#__PURE__*/React.createElement(InlineListItem, {
+      elementRef: elementRef
+    }, "List item"));
+    const listItem = screen.getByRole('listitem');
+    expect(elementRef).toHaveBeenCalledWith(listItem);
+  });
+});

package/es/InlineList/__new-tests__/InlineList.test.js

@@ -0,0 +1,81 @@
+var _InlineList$Item, _InlineList$Item2, _InlineList$Item3, _InlineList$Item4, _InlineList$Item5, _InlineList$Item6, _InlineList, _InlineList2, _InlineList3, _InlineList4;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import { InlineList } from '../index';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+describe('<InlineList />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render list items and filter out null/falsy children', async () => {
+    render( /*#__PURE__*/React.createElement(InlineList, null, _InlineList$Item || (_InlineList$Item = /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 1")), _InlineList$Item2 || (_InlineList$Item2 = /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 2")), _InlineList$Item3 || (_InlineList$Item3 = /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 3")), _InlineList$Item4 || (_InlineList$Item4 = /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 4")), null && (_InlineList$Item5 || (_InlineList$Item5 = /*#__PURE__*/React.createElement(InlineList.Item, null, "ignore me 1"))), false && (_InlineList$Item6 || (_InlineList$Item6 = /*#__PURE__*/React.createElement(InlineList.Item, null, "ignore me 2")))));
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems.length).toEqual(4);
+  });
+  it('should render a delimiter when delimiter="pipe"', async () => {
+    const _render = render(_InlineList || (_InlineList = /*#__PURE__*/React.createElement(InlineList, {
+        delimiter: "pipe"
+      }, /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 1"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 2"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 3"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 4")))),
+      container = _render.container;
+    const delimiters = container.querySelectorAll('span[aria-hidden="true"]');
+    expect(delimiters.length).toEqual(4);
+    delimiters.forEach(delimiter => {
+      expect(delimiter.getAttribute('class')).toContain('inlineListItem__delimiter');
+    });
+  });
+  it('should warn when itemSpacing is set when delimiter is set to anything other than none', async () => {
+    render(_InlineList2 || (_InlineList2 = /*#__PURE__*/React.createElement(InlineList, {
+      delimiter: "pipe",
+      itemSpacing: "large"
+    }, /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 1"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 2"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 3"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 4"))));
+    const warning = `Warning: [InlineList] \`itemSpacing\` has no effect inside Lists with the \`delimiter\` prop set to anything other than \`none\`.`;
+    expect(consoleErrorMock.mock.calls[0][0]).toBe(warning);
+  });
+  it('should render an ordered list', async () => {
+    render(_InlineList3 || (_InlineList3 = /*#__PURE__*/React.createElement(InlineList, {
+      as: "ol"
+    }, /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 1"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 2"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 3"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 4"))));
+    const list = screen.getByRole('list');
+    expect(list.tagName).toBe('OL');
+  });
+  it('should meet a11y standards', async () => {
+    const _render2 = render(_InlineList4 || (_InlineList4 = /*#__PURE__*/React.createElement(InlineList, null, /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 1"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 2"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 3"), /*#__PURE__*/React.createElement(InlineList.Item, null, "List item 4")))),
+      container = _render2.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/es/{InlineList/InlineListItem/InlineListItemLocator.js → List/ListItem/__new-tests__/ListItem.test.js}

@@ -1,3 +1,4 @@
+var _ListItem;
 /*
  * The MIT License (MIT)
  *
@@ -21,13 +22,24 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { locator } from '@instructure/ui-test-locator';
-import { InlineListLocator } from '../InlineListLocator';
-import { InlineListItem } from './index';
 
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-export const InlineListItemLocator = locator(InlineListItem.selector, {
-  findNestedOptions: (...args) => {
-    return InlineListLocator.find(...args);
-  }
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import { ListItem } from '../index';
+describe('<ListItem />', () => {
+  it('should render children', async () => {
+    render(_ListItem || (_ListItem = /*#__PURE__*/React.createElement(ListItem, null, "hello")));
+    const listItem = screen.getByRole('listitem');
+    expect(listItem).toHaveTextContent('hello');
+  });
+  it('should call elementRef', async () => {
+    const elementRef = vi.fn();
+    render( /*#__PURE__*/React.createElement(ListItem, {
+      elementRef: elementRef
+    }, "List item"));
+    const listItem = screen.getByRole('listitem');
+    expect(elementRef).toHaveBeenCalledWith(listItem);
+  });
 });

package/es/List/__new-tests__/List.test.js

@@ -0,0 +1,70 @@
+var _List$Item, _List$Item2, _List$Item3, _List$Item4, _List$Item5, _List$Item6, _List, _List2, _List3;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import { List } from '../index';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+describe('<List />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render list items and filter out null/falsy children', async () => {
+    render( /*#__PURE__*/React.createElement(List, null, _List$Item || (_List$Item = /*#__PURE__*/React.createElement(List.Item, null, "List item 1")), _List$Item2 || (_List$Item2 = /*#__PURE__*/React.createElement(List.Item, null, "List item 2")), _List$Item3 || (_List$Item3 = /*#__PURE__*/React.createElement(List.Item, null, "List item 3")), _List$Item4 || (_List$Item4 = /*#__PURE__*/React.createElement(List.Item, null, "List item 4")), null && (_List$Item5 || (_List$Item5 = /*#__PURE__*/React.createElement(List.Item, null, "ignore me 1"))), false && (_List$Item6 || (_List$Item6 = /*#__PURE__*/React.createElement(List.Item, null, "ignore me 2")))));
+    const listItems = screen.getAllByRole('listitem');
+    expect(listItems.length).toEqual(4);
+  });
+  it('should warn when itemSpacing is set when delimiter is set to anything other than none', async () => {
+    render(_List || (_List = /*#__PURE__*/React.createElement(List, {
+      delimiter: "dashed",
+      itemSpacing: "large"
+    }, /*#__PURE__*/React.createElement(List.Item, null, "List item 1"), /*#__PURE__*/React.createElement(List.Item, null, "List item 2"), /*#__PURE__*/React.createElement(List.Item, null, "List item 3"), /*#__PURE__*/React.createElement(List.Item, null, "List item 4"))));
+    const warning = `Warning: [List] \`itemSpacing\` has no effect inside Lists with the \`delimiter\` prop set to anything other than \`none\`.`;
+    expect(consoleErrorMock.mock.calls[0][0]).toBe(warning);
+  });
+  it('should render an ordered list', async () => {
+    render(_List2 || (_List2 = /*#__PURE__*/React.createElement(List, {
+      as: "ol"
+    }, /*#__PURE__*/React.createElement(List.Item, null, "List item 1"), /*#__PURE__*/React.createElement(List.Item, null, "List item 2"), /*#__PURE__*/React.createElement(List.Item, null, "List item 3"), /*#__PURE__*/React.createElement(List.Item, null, "List item 4"))));
+    const list = screen.getByRole('list');
+    expect(list.tagName).toBe('OL');
+  });
+  it('should meet a11y standards', async () => {
+    const _render = render(_List3 || (_List3 = /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(List.Item, null, "List item 1"), /*#__PURE__*/React.createElement(List.Item, null, "List item 2"), /*#__PURE__*/React.createElement(List.Item, null, "List item 3"), /*#__PURE__*/React.createElement(List.Item, null, "List item 4")))),
+      container = _render.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/lib/InlineList/InlineListItem/__new-tests__/InlineListItem.test.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+require("@testing-library/jest-dom");
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _index = require("../index");
+var _InlineListItem, _InlineListItem2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<InlineListItem />', () => {
+  it('should render children', async () => {
+    (0, _react2.render)(_InlineListItem || (_InlineListItem = /*#__PURE__*/_react.default.createElement(_index.InlineListItem, null, "hello")));
+    const listItem = _react2.screen.getByRole('listitem');
+    expect(listItem).toHaveTextContent('hello');
+  });
+  it('should render delimiter', async () => {
+    const _render = (0, _react2.render)(_InlineListItem2 || (_InlineListItem2 = /*#__PURE__*/_react.default.createElement(_index.InlineListItem, {
+        delimiter: "slash"
+      }, "List item"))),
+      container = _render.container;
+    const listItem = container.querySelector('span[class$="delimiter"]');
+    expect(listItem).toHaveAttribute('aria-hidden', 'true');
+  });
+  it('should call elementRef', async () => {
+    const elementRef = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.InlineListItem, {
+      elementRef: elementRef
+    }, "List item"));
+    const listItem = _react2.screen.getByRole('listitem');
+    expect(elementRef).toHaveBeenCalledWith(listItem);
+  });
+});

package/lib/InlineList/__new-tests__/InlineList.test.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+require("@testing-library/jest-dom");
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _index = require("../index");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _InlineList$Item, _InlineList$Item2, _InlineList$Item3, _InlineList$Item4, _InlineList$Item5, _InlineList$Item6, _InlineList, _InlineList2, _InlineList3, _InlineList4;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<InlineList />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render list items and filter out null/falsy children', async () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.InlineList, null, _InlineList$Item || (_InlineList$Item = /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 1")), _InlineList$Item2 || (_InlineList$Item2 = /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 2")), _InlineList$Item3 || (_InlineList$Item3 = /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 3")), _InlineList$Item4 || (_InlineList$Item4 = /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 4")), null && (_InlineList$Item5 || (_InlineList$Item5 = /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "ignore me 1"))), false && (_InlineList$Item6 || (_InlineList$Item6 = /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "ignore me 2")))));
+    const listItems = _react2.screen.getAllByRole('listitem');
+    expect(listItems.length).toEqual(4);
+  });
+  it('should render a delimiter when delimiter="pipe"', async () => {
+    const _render = (0, _react2.render)(_InlineList || (_InlineList = /*#__PURE__*/_react.default.createElement(_index.InlineList, {
+        delimiter: "pipe"
+      }, /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 1"), /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 2"), /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 3"), /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 4")))),
+      container = _render.container;
+    const delimiters = container.querySelectorAll('span[aria-hidden="true"]');
+    expect(delimiters.length).toEqual(4);
+    delimiters.forEach(delimiter => {
+      expect(delimiter.getAttribute('class')).toContain('inlineListItem__delimiter');
+    });
+  });
+  it('should warn when itemSpacing is set when delimiter is set to anything other than none', async () => {
+    (0, _react2.render)(_InlineList2 || (_InlineList2 = /*#__PURE__*/_react.default.createElement(_index.InlineList, {
+      delimiter: "pipe",
+      itemSpacing: "large"
+    }, /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 1"), /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 2"), /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 3"), /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 4"))));
+    const warning = `Warning: [InlineList] \`itemSpacing\` has no effect inside Lists with the \`delimiter\` prop set to anything other than \`none\`.`;
+    expect(consoleErrorMock.mock.calls[0][0]).toBe(warning);
+  });
+  it('should render an ordered list', async () => {
+    (0, _react2.render)(_InlineList3 || (_InlineList3 = /*#__PURE__*/_react.default.createElement(_index.InlineList, {
+      as: "ol"
+    }, /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 1"), /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 2"), /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 3"), /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 4"))));
+    const list = _react2.screen.getByRole('list');
+    expect(list.tagName).toBe('OL');
+  });
+  it('should meet a11y standards', async () => {
+    const _render2 = (0, _react2.render)(_InlineList4 || (_InlineList4 = /*#__PURE__*/_react.default.createElement(_index.InlineList, null, /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 1"), /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 2"), /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 3"), /*#__PURE__*/_react.default.createElement(_index.InlineList.Item, null, "List item 4")))),
+      container = _render2.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/lib/{InlineList/InlineListItem/InlineListItemLocator.js → List/ListItem/__new-tests__/ListItem.test.js}

@@ -1,12 +1,12 @@
 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.InlineListItemLocator = void 0;
-var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-var _InlineListLocator = require("../InlineListLocator");
-var _index = require("./index");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+require("@testing-library/jest-dom");
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _index = require("../index");
+var _ListItem;
 /*
  * The MIT License (MIT)
  *
@@ -30,10 +30,18 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-const InlineListItemLocator = exports.InlineListItemLocator = (0, _locator.locator)(_index.InlineListItem.selector, {
-  findNestedOptions: (...args) => {
-    return _InlineListLocator.InlineListLocator.find(...args);
-  }
+describe('<ListItem />', () => {
+  it('should render children', async () => {
+    (0, _react2.render)(_ListItem || (_ListItem = /*#__PURE__*/_react.default.createElement(_index.ListItem, null, "hello")));
+    const listItem = _react2.screen.getByRole('listitem');
+    expect(listItem).toHaveTextContent('hello');
+  });
+  it('should call elementRef', async () => {
+    const elementRef = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.ListItem, {
+      elementRef: elementRef
+    }, "List item"));
+    const listItem = _react2.screen.getByRole('listitem');
+    expect(elementRef).toHaveBeenCalledWith(listItem);
+  });
 });

package/lib/List/__new-tests__/List.test.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+require("@testing-library/jest-dom");
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+var _index = require("../index");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _List$Item, _List$Item2, _List$Item3, _List$Item4, _List$Item5, _List$Item6, _List, _List2, _List3;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<List />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  it('should render list items and filter out null/falsy children', async () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.List, null, _List$Item || (_List$Item = /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 1")), _List$Item2 || (_List$Item2 = /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 2")), _List$Item3 || (_List$Item3 = /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 3")), _List$Item4 || (_List$Item4 = /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 4")), null && (_List$Item5 || (_List$Item5 = /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "ignore me 1"))), false && (_List$Item6 || (_List$Item6 = /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "ignore me 2")))));
+    const listItems = _react2.screen.getAllByRole('listitem');
+    expect(listItems.length).toEqual(4);
+  });
+  it('should warn when itemSpacing is set when delimiter is set to anything other than none', async () => {
+    (0, _react2.render)(_List || (_List = /*#__PURE__*/_react.default.createElement(_index.List, {
+      delimiter: "dashed",
+      itemSpacing: "large"
+    }, /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 1"), /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 2"), /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 3"), /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 4"))));
+    const warning = `Warning: [List] \`itemSpacing\` has no effect inside Lists with the \`delimiter\` prop set to anything other than \`none\`.`;
+    expect(consoleErrorMock.mock.calls[0][0]).toBe(warning);
+  });
+  it('should render an ordered list', async () => {
+    (0, _react2.render)(_List2 || (_List2 = /*#__PURE__*/_react.default.createElement(_index.List, {
+      as: "ol"
+    }, /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 1"), /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 2"), /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 3"), /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 4"))));
+    const list = _react2.screen.getByRole('list');
+    expect(list.tagName).toBe('OL');
+  });
+  it('should meet a11y standards', async () => {
+    const _render = (0, _react2.render)(_List3 || (_List3 = /*#__PURE__*/_react.default.createElement(_index.List, null, /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 1"), /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 2"), /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 3"), /*#__PURE__*/_react.default.createElement(_index.List.Item, null, "List item 4")))),
+      container = _render.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-list",
-  "version": "10.0.1-snapshot-6",
+  "version": "10.0.1-snapshot-7",
   "description": "Components for displaying vertical or horizontal lists.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,21 +24,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "10.0.1-snapshot-6",
-    "@instructure/emotion": "10.0.1-snapshot-6",
-    "@instructure/shared-types": "10.0.1-snapshot-6",
-    "@instructure/ui-prop-types": "10.0.1-snapshot-6",
-    "@instructure/ui-react-utils": "10.0.1-snapshot-6",
-    "@instructure/ui-testable": "10.0.1-snapshot-6",
-    "@instructure/ui-view": "10.0.1-snapshot-6",
+    "@instructure/console": "10.0.1-snapshot-7",
+    "@instructure/emotion": "10.0.1-snapshot-7",
+    "@instructure/shared-types": "10.0.1-snapshot-7",
+    "@instructure/ui-prop-types": "10.0.1-snapshot-7",
+    "@instructure/ui-react-utils": "10.0.1-snapshot-7",
+    "@instructure/ui-testable": "10.0.1-snapshot-7",
+    "@instructure/ui-view": "10.0.1-snapshot-7",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.0.1-snapshot-6",
-    "@instructure/ui-color-utils": "10.0.1-snapshot-6",
-    "@instructure/ui-test-locator": "10.0.1-snapshot-6",
-    "@instructure/ui-test-utils": "10.0.1-snapshot-6",
-    "@instructure/ui-themes": "10.0.1-snapshot-6"
+    "@instructure/ui-axe-check": "10.0.1-snapshot-7",
+    "@instructure/ui-babel-preset": "10.0.1-snapshot-7",
+    "@instructure/ui-color-utils": "10.0.1-snapshot-7",
+    "@instructure/ui-test-utils": "10.0.1-snapshot-7",
+    "@instructure/ui-themes": "10.0.1-snapshot-7",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^15.0.7",
+    "vitest": "^2.0.2"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/InlineList/{InlineListLocator.ts → InlineListItem/__new-tests__/InlineListItem.test.tsx}

@@ -21,19 +21,36 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { locator } from '@instructure/ui-test-locator'
 
-import { InlineList } from './index'
+import React from 'react'
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
 
-import { InlineListItemLocator } from './InlineListItem/InlineListItemLocator'
+import { InlineListItem } from '../index'
 
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
-export const InlineListLocator = locator(InlineList.selector, {
-  findAllItems: (...args: any[]) => {
-    return InlineListItemLocator.findAll(...args)
-  },
+describe('<InlineListItem />', () => {
+  it('should render children', async () => {
+    render(<InlineListItem>hello</InlineListItem>)
+    const listItem = screen.getByRole('listitem')
 
-  findItem: (...args: any[]) => {
-    return InlineListItemLocator.find(...args)
-  }
+    expect(listItem).toHaveTextContent('hello')
+  })
+
+  it('should render delimiter', async () => {
+    const { container } = render(
+      <InlineListItem delimiter="slash">List item</InlineListItem>
+    )
+    const listItem = container.querySelector('span[class$="delimiter"]')
+
+    expect(listItem).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('should call elementRef', async () => {
+    const elementRef = vi.fn()
+    render(<InlineListItem elementRef={elementRef}>List item</InlineListItem>)
+    const listItem = screen.getByRole('listitem')
+
+    expect(elementRef).toHaveBeenCalledWith(listItem)
+  })
 })