Merge branch 'main' into chore/add-eslint-plugin-storybook

carbon-design-system · Jan 21, 2022 · da29a7a · da29a7a
2 parents 80f2f62 + 2cfa495
commit da29a7a
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 415 deletions.
diff --git a/.github/workflows/dco.yml b/.github/workflows/dco.yml
@@ -11,7 +11,7 @@ jobs:
     steps:
       - name: "DCO Assistant"
         if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the DCO document and I hereby sign the DCO.') || github.event_name == 'pull_request_target'
-        uses: cla-assistant/[email protected].2-beta
+        uses: cla-assistant/[email protected].3-beta
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -11,7 +11,7 @@ jobs:
     name: Create Release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
 
       - name: Use Node.js 16.x
         uses: actions/[email protected]

diff --git a/.github/workflows/sync-generated-files.yml b/.github/workflows/sync-generated-files.yml
@@ -5,15 +5,15 @@ on:
       - main
 jobs:
   release:
-    runs-on: macOS-latest
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
       - name: Use Node.js 16.x
         uses: actions/[email protected]
         with:
           node-version: '16.x'
       - name: Install dependencies
-        run: yarn install --immutable --immutable-cache --check-cache
+        run: yarn install --immutable --immutable-cache
       - name: Build project
         run: yarn build
       - name: Sync project dependency files

diff --git a/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js b/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js
@@ -5,112 +5,75 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { cleanup, render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
+import { screen, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { settings } from 'carbon-components';
+import Breadcrumb from '../';
+import BreadcrumbItem from '../BreadcrumbItem';
 
 const { prefix } = settings;
 
 describe('Breadcrumb', () => {
-  let Breadcrumb;
-  let BreadcrumbItem;
+  describe('API', () => {
+    it('should accept a `aria-label` for nav element', () => {
+      render(<Breadcrumb aria-label={'test-label'} />);
+      expect(screen.getByLabelText('test-label')).toBeInTheDocument();
+    });
 
-  beforeEach(() => {
-    const BreadcrumbEntrypoint = require('../');
-    Breadcrumb = BreadcrumbEntrypoint.Breadcrumb;
-    BreadcrumbItem = BreadcrumbEntrypoint.BreadcrumbItem;
-  });
+    it('should provide a default `aria-label` for nav element', () => {
+      render(<Breadcrumb />);
+      expect(screen.getByLabelText('Breadcrumb')).toBeInTheDocument();
+    });
 
-  it('should render', () => {
-    const wrapper = mount(
-      <Breadcrumb className="parent-class">
-        <BreadcrumbItem
-          className="some-class"
-          href="www.carbondesignsystem.com">
-          Breadcrumb 1
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should accept `children` of BreadcrumbItem', () => {
+      render(
+        <Breadcrumb>
+          <BreadcrumbItem href="#a">A</BreadcrumbItem>
+          <BreadcrumbItem href="#b">B</BreadcrumbItem>
+          <BreadcrumbItem href="#c">C</BreadcrumbItem>
+        </Breadcrumb>
+      );
+      expect(screen.getByText('A')).toBeInTheDocument();
+      expect(screen.getByText('B')).toBeInTheDocument();
+      expect(screen.getByText('C')).toBeInTheDocument();
+    });
 
-  it('should support rendering without a trailing slash', () => {
-    const wrapper = mount(
-      <Breadcrumb noTrailingSlash>
-        <BreadcrumbItem href="www.carbondesignsystem.com">
-          Breadcrumb 1
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
+    it('should accept a `noTrailingSlash` and omit the trailing slash', () => {
+      render(
+        <Breadcrumb noTrailingSlash>
+          <BreadcrumbItem href="#a">A</BreadcrumbItem>
+          <BreadcrumbItem href="#b">B</BreadcrumbItem>
+          <BreadcrumbItem href="#c">C</BreadcrumbItem>
+        </Breadcrumb>
+      );
 
-  it('should support rendering a custom component as a breadcrumb item', () => {
-    const CustomComponent = jest.fn(({ children, href, ...rest }) => (
-      <a href={href} data-test-id="custom-component" {...rest}>
-        {children}
-      </a>
-    ));
+      // The slashes are implemented with pseudo elements that can't be detected in jsdom.
+      // So we have to settle here for just validating against the class. Pseudo elements
+      // should be tested in the browser/e2e tests.
+      // https://testing-library.com/docs/dom-testing-library/api-configuration/#computedstylesupportspseudoelements
+      // https://github.com/jsdom/jsdom/issues/1928
+      expect(screen.getByRole('list')).toHaveClass(
+        `${prefix}--breadcrumb--no-trailing-slash`
+      );
+    });
 
-    mount(
-      <Breadcrumb>
-        <BreadcrumbItem href="#a">A</BreadcrumbItem>
-        <BreadcrumbItem href="#b">B</BreadcrumbItem>
-        <BreadcrumbItem>
-          <CustomComponent href="#c">C</CustomComponent>
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
+    it('should accept a `className` for outermost DOM node', () => {
+      const { container } = render(<Breadcrumb className="test" />);
 
-    expect(CustomComponent).toHaveBeenCalled();
-    expect(CustomComponent).toHaveBeenCalledWith(
-      expect.objectContaining({
-        className: `${prefix}--link`,
-      }),
-      {}
-    );
-  });
+      expect(container.firstChild).toHaveClass('test');
+    });
 
-  it('should support rendering the current page', () => {
-    const manual = mount(
-      <Breadcrumb>
-        <BreadcrumbItem href="#a">A</BreadcrumbItem>
-        <BreadcrumbItem href="#b">B</BreadcrumbItem>
-        <BreadcrumbItem href="#c" isCurrentPage>
-          C
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-    expect(manual).toMatchSnapshot();
+    it('should apply additional props to the outermost element', () => {
+      const { container } = render(<Breadcrumb data-testid="test" />);
 
-    const aria = mount(
-      <Breadcrumb>
-        <BreadcrumbItem href="#a">A</BreadcrumbItem>
-        <BreadcrumbItem href="#b">B</BreadcrumbItem>
-        <BreadcrumbItem href="#c" aria-current="page">
-          C
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-    expect(aria).toMatchSnapshot();
-  });
+      expect(container.firstChild).toHaveAttribute('data-testid', 'test');
+    });
 
-  describe('Component API', () => {
-    afterEach(cleanup);
+    it('should accept a `ref` for the outermost element', () => {
+      const ref = jest.fn();
+      const { container } = render(<Breadcrumb ref={ref} />);
 
-    it('should accept a `ref` for the outermost node', () => {
-      const ref = jest.fn(() => React.createRef());
-      const { container } = render(
-        <Breadcrumb ref={ref}>
-          <BreadcrumbItem href="#a">A</BreadcrumbItem>
-          <BreadcrumbItem href="#b">B</BreadcrumbItem>
-          <BreadcrumbItem href="#c" aria-current="page">
-            C
-          </BreadcrumbItem>
-        </Breadcrumb>
-      );
-      expect(ref).toHaveBeenCalled();
       expect(ref).toHaveBeenCalledWith(container.firstChild);
     });
   });