Merge branch 'main' into ExpandableTileMissing

carbon-design-system · Jan 18, 2022 · 0a639bc · 0a639bc
2 parents 42f8770 + e2b8b30
commit 0a639bc
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 108 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
@@ -7,7 +7,7 @@ jobs:
   release:
     runs-on: macOS-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
       - name: Use Node.js 16.x
         uses: actions/[email protected]
         with:

diff --git a/packages/react/src/components/Toggle/Toggle-test.js b/packages/react/src/components/Toggle/Toggle-test.js
@@ -7,131 +7,86 @@
 
 import React from 'react';
 import Toggle from '../Toggle';
-import { mount } from 'enzyme';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
-describe('Toggle', () => {
-  const commonProps = {
-    'aria-label': 'Toggle label',
-    labelA: 'Off',
-    labelB: 'On',
-    labelText: 'Toggle label',
-  };
-
-  describe('Renders as expected', () => {
-    const wrapper = mount(<Toggle {...commonProps} id="toggle-1" />);
-
-    const input = wrapper.find('input');
-
-    it('Switch and label Ids should match', () => {
-      const toggleLabel = wrapper.find(`.${prefix}--toggle__label`);
-      expect(input.id).toEqual(toggleLabel.htmlFor);
-    });
-
-    it('should set defaultChecked as expected', () => {
-      expect(input.props().defaultChecked).toEqual(false);
-      wrapper.setProps({ defaultToggled: true });
-      expect(wrapper.find('input').props().defaultChecked).toEqual(true);
-    });
-
-    it('Can set defaultToggled state', () => {
-      wrapper.setProps({ defaultToggled: true });
-      expect(
-        wrapper.find(`.${prefix}--toggle-input`).props().defaultChecked
-      ).toEqual(true);
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '../../../../components/scss/components/toggle/_toggle.scss';
+
+describe('Toggle RTL', () => {
+  describe('Behaviors', () => {
+    it('toggles on click', () => {
+      render(<Toggle id="test-id" />);
+      expect(screen.getByText('Off')).toBeVisible();
+      expect(screen.getByText('On')).not.toBeVisible();
+      userEvent.click(screen.getByRole('checkbox'));
+      expect(screen.getByText('On')).toBeVisible();
+      expect(screen.getByText('Off')).not.toBeVisible();
     });
 
-    it('Should add extra classes that are passed via className', () => {
-      wrapper.setProps({ className: 'extra-class' });
-      expect(wrapper.find('div').hasClass('extra-class')).toEqual(true);
+    it('toggles on keydown - enter', () => {
+      render(<Toggle id="test-id" />);
+      expect(screen.getByText('Off')).toBeVisible();
+      expect(screen.getByText('On')).not.toBeVisible();
+      userEvent.type(screen.getByRole('checkbox'), 'enter');
+      expect(screen.getByText('On')).toBeVisible();
+      expect(screen.getByText('Off')).not.toBeVisible();
     });
 
-    it('Can be disabled', () => {
-      wrapper.setProps({ disabled: true });
-      expect(wrapper.find(`.${prefix}--toggle-input`).props().disabled).toEqual(
-        true
-      );
+    it('toggles on keydown - space', () => {
+      render(<Toggle id="test-id" />);
+      expect(screen.getByText('Off')).toBeVisible();
+      expect(screen.getByText('On')).not.toBeVisible();
+      userEvent.type(screen.getByRole('checkbox'), 'space');
+      expect(screen.getByText('On')).toBeVisible();
+      expect(screen.getByText('Off')).not.toBeVisible();
     });
+  });
 
-    it('Can have a labelA', () => {
-      wrapper.setProps({ labelA: 'labelA-test' });
-      expect(wrapper.find(`.${prefix}--toggle__text--off`).text()).toEqual(
-        'labelA-test'
+  describe('Props', () => {
+    it('add custom class name to wrapper div', () => {
+      const { container } = render(
+        <Toggle id="test-id" className="custom-class" />
       );
+      expect(container.firstChild).toHaveClass('custom-class');
     });
 
-    it('Can have a labelB', () => {
-      wrapper.setProps({ labelB: 'labelB-test' });
-      expect(wrapper.find(`.${prefix}--toggle__text--on`).text()).toEqual(
-        'labelB-test'
-      );
+    it('sets toggled based on defaultToggled on render', () => {
+      render(<Toggle id="test-id" defaultToggled={true} />);
+      expect(screen.getByText('On')).toBeVisible();
     });
-  });
-
-  it('toggled prop sets checked prop on input', () => {
-    const wrapper = mount(<Toggle {...commonProps} id="test" toggled />);
-
-    const input = () => wrapper.find('input');
-    expect(input().props().checked).toEqual(true);
 
-    wrapper.setProps({ toggled: false });
-    expect(input().props().checked).toEqual(false);
-  });
-
-  describe('events', () => {
-    it('passes along onChange to <input>', () => {
+    it('calls onChange when the control is changed', () => {
       const onChange = jest.fn();
-      const id = 'test-input';
-      const wrapper = mount(
-        <Toggle {...commonProps} id={id} onChange={onChange} />
-      );
-
-      const input = wrapper.find('input');
-      const inputElement = input.instance();
-
-      inputElement.checked = true;
-      wrapper.find('input').simulate('change');
-
-      expect(
-        onChange.mock.calls.map((call) =>
-          call.map((arg, i) => (i > 0 ? arg : arg.target))
-        )
-      ).toEqual([[inputElement]]);
+      render(<Toggle id="test-id" onChange={onChange} />);
+      userEvent.click(screen.getByRole('checkbox'));
+      expect(onChange).toHaveBeenCalled();
     });
 
-    it('should invoke onToggle with expected arguments', () => {
+    it('calls onToggle when toggled', () => {
       const onToggle = jest.fn();
-      const id = 'test-input';
-      const wrapper = mount(
-        <Toggle {...commonProps} id={id} onToggle={onToggle} />
-      );
-
-      const input = wrapper.find('input');
-      const inputElement = input.instance();
-
-      inputElement.checked = true;
-      wrapper.find('input').simulate('change');
-
-      const call = onToggle.mock.calls[0];
-
-      expect(call[0]).toEqual(true);
-      expect(call[1]).toEqual(id);
-      expect(call[2].target).toBe(inputElement);
+      render(<Toggle id="test-id" onToggle={onToggle} />);
+      userEvent.click(screen.getByRole('checkbox'));
+      expect(onToggle).toHaveBeenCalled();
     });
-  });
 
-  describe('ToggleSmall', () => {
-    const wrapper = mount(<Toggle {...commonProps} id="toggle-1" size="sm" />);
+    it('takes in custom labels for toggled and untoggled states', () => {
+      render(<Toggle id="test-id" labelA="test On" labelB="test Off" />);
+      expect(screen.getByText('test On')).toBeInTheDocument();
+      expect(screen.getByText('test Off')).toBeInTheDocument();
+    });
 
-    it('Sets the `ToggleSmall` className', () => {
-      const input = wrapper.find('input');
-      expect(input.hasClass(`${prefix}--toggle-input--small`)).toEqual(true);
+    it('sets toggled based on toggled prop', () => {
+      const { rerender } = render(<Toggle id="test-id" toggled={false} />);
+      expect(screen.getByText('Off')).toBeVisible();
+      rerender(<Toggle id="test-id" toggled={true} />);
+      expect(screen.getByText('On')).toBeVisible();
     });
 
-    it('Renders a checkmark SVG', () => {
-      const svg = wrapper.find(`.${prefix}--toggle__check`);
-      expect(svg.length).toBe(1);
+    it('passes extra props to input', () => {
+      render(<Toggle id="test-id" aria-disabled={true} />);
+      expect(screen.getByRole('checkbox')).toHaveAttribute(
+        'aria-disabled',
+        'true'
+      );
     });
   });
 });
diff --git a/packages/styles/scss/components/notification/_inline-notification.scss b/packages/styles/scss/components/notification/_inline-notification.scss
@@ -324,5 +324,8 @@
   .#{$prefix}--inline-notification__icon {
     @include high-contrast-mode('icon-fill');
   }
+  .#{$prefix}--inline-notification__close-icon {
+    @include high-contrast-mode('icon-fill');
+  }
   /* stylelint-enable */
 }
diff --git a/packages/styles/scss/components/notification/_toast-notification.scss b/packages/styles/scss/components/notification/_toast-notification.scss
@@ -255,6 +255,9 @@
   .#{$prefix}--toast-notification__close-button:focus {
     @include high-contrast-mode('focus');
   }
+  .#{$prefix}--toast-notification__close-icon {
+    @include high-contrast-mode('icon-fill');
+  }
   .#{$prefix}--toast-notification__icon {
     @include high-contrast-mode('icon-fill');
   }