Merge branch 'main' into dependabot/npm_and_yarn/packages/react/examp…

…les/drag-and-drop-file-uploader/express-4.18.2

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

@@ -1,97 +1,66 @@
 /**
- * Copyright IBM Corp. 2016, 2018
+ * Copyright IBM Corp. 2022
  *
  * 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 React from 'react';
-import Switch from '../Switch';
-import { shallow } from 'enzyme';
-
-const prefix = 'cds';
+import Switch from './Switch';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 
 describe('Switch', () => {
-  describe('component rendering', () => {
-    const buttonWrapper = shallow(
-      <Switch kind="button" icon={<svg />} text="test" />
-    );
+  describe('renders as expected - Component API', () => {
+    it('should spread extra props onto outermost element', () => {
+      const { container } = render(<Switch data-testid="test-id" />);
 
-    it('should render a button when kind is button', () => {
-      expect(buttonWrapper.is('button')).toEqual(true);
+      expect(container.firstChild).toHaveAttribute('data-testid', 'test-id');
     });
 
-    it('should have the expected text', () => {
-      expect(buttonWrapper.text()).toEqual('test');
-    });
+    it('should support a custom `className` prop on the outermost element', () => {
+      const { container } = render(<Switch className="custom-class" />);
 
-    it('label should have the expected class', () => {
-      const className = `${prefix}--content-switcher__label`;
-      expect(buttonWrapper.find('span').hasClass(className)).toEqual(true);
+      expect(container.firstChild).toHaveClass('custom-class');
     });
 
-    it('should have the expected class', () => {
-      const cls = `${prefix}--content-switcher-btn`;
+    it('should respect disabled prop', () => {
+      render(<Switch disabled />);
 
-      expect(buttonWrapper.hasClass(cls)).toEqual(true);
+      expect(screen.getByRole('tab')).toHaveAttribute('disabled');
     });
 
-    it('should not have selected class', () => {
-      const selectedClass = `${prefix}--content-switcher--selected`;
+    it('should call onClick when expected', () => {
+      const onClick = jest.fn();
+      render(<Switch text="First section" onClick={onClick} />);
+
+      userEvent.click(screen.getByText('First section'));
 
-      expect(buttonWrapper.hasClass(selectedClass)).toEqual(false);
+      expect(onClick).toHaveBeenCalled();
     });
 
-    it('should have a selected class when selected is set to true', () => {
-      const selected = true;
+    it('should call onKeyDown when expected', () => {
+      const onKeyDown = jest.fn();
+      render(<Switch text="First section" onKeyDown={onKeyDown} />);
 
-      buttonWrapper.setProps({ selected });
+      userEvent.type(screen.getByText('First section'), 'enter');
 
-      expect(
-        buttonWrapper.hasClass(`${prefix}--content-switcher--selected`)
-      ).toEqual(true);
+      expect(onKeyDown).toHaveBeenCalled();
     });
-  });
 
-  describe('events', () => {
-    const buttonOnClick = jest.fn();
-    const linkOnClick = jest.fn();
-    const buttonOnKey = jest.fn();
-    const linkOnKey = jest.fn();
-    const index = 1;
-    const name = 'first';
-    const text = 'test';
-
-    const buttonWrapper = shallow(
-      <Switch
-        index={index}
-        name={name}
-        kind="button"
-        onClick={buttonOnClick}
-        onKeyDown={buttonOnKey}
-        text={text}
-      />
-    );
-
-    const linkWrapper = shallow(
-      <Switch
-        index={index}
-        name={name}
-        kind="anchor"
-        onClick={linkOnClick}
-        onKeyDown={linkOnKey}
-        text={text}
-      />
-    );
-
-    it('should invoke button onClick handler', () => {
-      buttonWrapper.simulate('click', { preventDefault() {} });
-      expect(buttonOnClick).toHaveBeenCalledWith({ index, name, text });
+    it('should respect selected prop', () => {
+      render(<Switch selected />);
+
+      expect(screen.getByRole('tab')).toHaveClass(
+        'cds--content-switcher--selected'
+      );
+      expect(screen.getByRole('tab')).toHaveAttribute('aria-selected', 'true');
     });
 
-    it('should invoke link onClick handler', () => {
-      linkWrapper.simulate('click', { preventDefault() {} });
-      expect(buttonOnClick).toHaveBeenCalledWith({ index, name, text });
+    it('should respect text prop', () => {
+      render(<Switch text="First section" />);
+
+      expect(screen.getByText('First section')).toBeInTheDocument();
     });
   });
 });

packages/react/src/internal/useNoInteractiveChildren.js

@@ -33,6 +33,10 @@ export function useNoInteractiveChildren(
  * @returns {HTMLElement}
  */
 export function getInteractiveContent(node) {
+  if (!node || !node.childNodes) {
+    return null;
+  }
+
   if (isFocusable(node)) {
     return node;
   }

packages/themes/examples/preview/yarn.lock

@@ -5748,9 +5748,9 @@ fsevents@~2.3.2:
   linkType: hard
 
 "qs@npm:~6.5.2":
-  version: 6.5.2
-  resolution: "qs@npm:6.5.2"
-  checksum: 24af7b9928ba2141233fba2912876ff100403dba1b08b20c3b490da9ea6c636760445ea2211a079e7dfa882a5cf8f738337b3748c8bdd0f93358fa8881d2db8f
+  version: 6.5.3
+  resolution: "qs@npm:6.5.3"
+  checksum: 6f20bf08cabd90c458e50855559539a28d00b2f2e7dddcb66082b16a43188418cb3cb77cbd09268bcef6022935650f0534357b8af9eeb29bf0f27ccb17655692
   languageName: node
   linkType: hard