test(list): unit tests and snapshots for ordered and unordered list (#19310)

* test(ordered-list): unit tests and snapshots

* test(unordered-list): unit tests and snapshot

Author: annawen1

packages/react/src/components/UnorderedList/UnorderedList-test.js

@@ -46,4 +46,15 @@ describe('UnorderedList', () => {
 
     expect(screen.getByTestId('list')).toHaveClass('some-class');
   });
+
+  it('should render expressive lists', () => {
+    const { container } = render(
+      <UnorderedList isExpressive>
+        <ListItem>Item</ListItem>
+      </UnorderedList>
+    );
+
+    expect(container.firstChild).toHaveClass(`${prefix}--list--unordered`);
+    expect(container.firstChild).toHaveClass(`${prefix}--list--expressive`);
+  });
 });

packages/web-components/src/components/list/__tests__/__snapshots__/ordered-list-test.snap.js

@@ -0,0 +1,11 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots['cds-ordered-list Renders as expected should be an ol element'] =
+  `<cds-ordered-list>
+  <cds-list-item role="listitem">
+    Item
+  </cds-list-item>
+</cds-ordered-list>
+`;
+/* end snapshot cds-ordered-list Renders as expected should be an ol element */

packages/web-components/src/components/list/__tests__/__snapshots__/unordered-list-test.snap.js

@@ -0,0 +1,10 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots['cds-unordered-list should be an ul element'] = `<cds-unordered-list>
+  <cds-list-item role="listitem">
+    Item
+  </cds-list-item>
+</cds-unordered-list>
+`;
+/* end snapshot cds-unordered-list should be an ul element */

packages/web-components/src/components/list/__tests__/ordered-list-test.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect, fixture, html } from '@open-wc/testing';
+import '@carbon/web-components/es/components/list/index.js';
+
+describe('cds-ordered-list', function () {
+  describe('Renders as expected', () => {
+    it('should be an ol element', async () => {
+      const list = html` <cds-ordered-list>
+        <cds-list-item>Item</cds-list-item>
+      </cds-ordered-list>`;
+
+      const el = await fixture(list);
+      const ol = el.shadowRoot.querySelector('ol');
+      expect(ol).to.exist;
+
+      expect(el).dom.to.equalSnapshot();
+    });
+
+    it('should render children as expected', async () => {
+      const list = html` <cds-ordered-list>
+        <cds-list-item>Item 1</cds-list-item>
+      </cds-ordered-list>`;
+
+      const el = await fixture(list);
+
+      const slot = el.shadowRoot.querySelector('slot');
+      const assigned = slot.assignedNodes({ flatten: true });
+
+      const listItem = assigned.find(
+        (node) =>
+          node.nodeType === Node.ELEMENT_NODE &&
+          node.tagName.toLowerCase() === 'cds-list-item'
+      );
+
+      expect(listItem).to.exist;
+      expect(listItem.getAttribute('role')).to.equal('listitem');
+      expect(listItem.textContent.trim()).to.equal('Item 1');
+    });
+
+    it('should render nested lists', async () => {
+      const list = html` <cds-ordered-list>
+        <cds-list-item>
+          Ordered List level 1
+          <cds-ordered-list>
+            <cds-list-item>Ordered List level 2</cds-list-item>
+            <cds-list-item>Ordered List level 2</cds-list-item>
+          </cds-ordered-list>
+        </cds-list-item>
+      </cds-ordered-list>`;
+
+      const el = await fixture(list);
+
+      const ol = el.shadowRoot.querySelector('ol');
+      expect(ol.classList.contains('cds--list--nested')).to.be.false;
+
+      const nested = document.querySelector('cds-ordered-list[slot="nested"');
+      const nestedOl = nested.shadowRoot.querySelector('ol');
+
+      expect(nestedOl.classList.contains('cds--list--nested')).to.be.true;
+      expect(nestedOl.classList.contains('cds--list--ordered')).to.be.true;
+    });
+
+    it('should render native lists', async () => {
+      const list = html` <cds-ordered-list native>
+        <cds-list-item>Item</cds-list-item>
+      </cds-ordered-list>`;
+
+      const el = await fixture(list);
+
+      const ol = el.shadowRoot.querySelector('ol');
+      expect(ol.classList.contains('cds--list--ordered--native')).to.be.true;
+    });
+
+    it('should render expressive lists', async () => {
+      const list = html` <cds-ordered-list is-expressive>
+        <cds-list-item>Item</cds-list-item>
+      </cds-ordered-list>`;
+
+      const el = await fixture(list);
+
+      const ol = el.shadowRoot.querySelector('ol');
+      expect(ol.classList.contains('cds--list--expressive')).to.be.true;
+    });
+  });
+});

packages/web-components/src/components/list/__tests__/unordered-list-test.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect, fixture, html } from '@open-wc/testing';
+import '@carbon/web-components/es/components/list/index.js';
+
+describe('cds-unordered-list', () => {
+  it('should be an ul element', async () => {
+    const list = html` <cds-unordered-list>
+      <cds-list-item>Item</cds-list-item>
+    </cds-unordered-list>`;
+
+    const el = await fixture(list);
+
+    const ul = el.shadowRoot.querySelector('ul');
+    expect(ul).to.exist;
+
+    expect(el).dom.to.equalSnapshot();
+  });
+
+  it('should render children as expected', async () => {
+    const list = html` <cds-unordered-list>
+      <cds-list-item>Item</cds-list-item>
+    </cds-unordered-list>`;
+
+    const el = await fixture(list);
+
+    const slot = el.shadowRoot.querySelector('slot');
+    const assigned = slot.assignedNodes({ flatten: true });
+
+    const listItem = assigned.find(
+      (node) =>
+        node.nodeType === Node.ELEMENT_NODE &&
+        node.tagName.toLowerCase() === 'cds-list-item'
+    );
+
+    expect(listItem).to.exist;
+    expect(listItem.getAttribute('role')).to.equal('listitem');
+    expect(listItem.textContent.trim()).to.equal('Item');
+  });
+
+  it('should render nested lists', async () => {
+    const list = html` <cds-unordered-list>
+      <cds-list-item>
+        Ordered List level 1
+        <cds-unordered-list>
+          <cds-list-item>Ordered List level 2</cds-list-item>
+          <cds-list-item>Ordered List level 2</cds-list-item>
+        </cds-unordered-list>
+      </cds-list-item>
+    </cds-unordered-list>`;
+
+    const el = await fixture(list);
+
+    const ul = el.shadowRoot.querySelector('ul');
+    expect(ul.classList.contains('cds--list--nested')).to.be.false;
+
+    const nested = document.querySelector('cds-unordered-list[slot="nested"');
+    const nestedUl = nested.shadowRoot.querySelector('ul');
+
+    expect(nestedUl.classList.contains('cds--list--nested')).to.be.true;
+    expect(nestedUl.classList.contains('cds--list--unordered')).to.be.true;
+  });
+
+  it('should render expressive lists', async () => {
+    const list = html` <cds-unordered-list is-expressive>
+      <cds-list-item>Item</cds-list-item>
+    </cds-unordered-list>`;
+
+    const el = await fixture(list);
+
+    const ul = el.shadowRoot.querySelector('ul');
+    expect(ul.classList.contains('cds--list--expressive')).to.be.true;
+  });
+});