chore(project): add setup for test failure with unexpected console (#…

…5184) * chore(project): add setup for test failure with unexpected console * chore(components): update timeout for styles-test.js * test(checkbox): add missing required props * test(data-table): add missing or required props * test(ui-shell): update tests and add missing props * test(overflow-menu): add missing props * test(number-input): skip test with invalid prop * test(date-picker): update mocks of console.error * test(tag): add missing props * Update packages/components/tests/styles-test.js Co-authored-by: TJ Egan <tw15egan@gmail.com>
carbon-design-system · Jan 27, 2020 · b3a2c84 · b3a2c84
1 parent f124075
commit b3a2c84
Show file tree

Hide file tree

Showing 22 changed files with 177 additions and 51 deletions.
diff --git a/packages/components/tests/styles-test.js b/packages/components/tests/styles-test.js
@@ -22,7 +22,7 @@ const files = glob.sync('**/*.scss', {
 const render = promisify(sass.render);
 
 describe('styles', () => {
-  jest.setTimeout(8000);
+  jest.setTimeout(20000);
   it.each(files)('%s should compile', async relativeFilePath => {
     const filepath = path.join(cwd, relativeFilePath);
     try {

diff --git a/packages/react/src/components/Checkbox/Checkbox-test.js b/packages/react/src/components/Checkbox/Checkbox-test.js
@@ -144,7 +144,14 @@ describe('refs', () => {
         this.myRef = React.createRef();
       }
       render() {
-        return <Checkbox indeterminate ref={this.myRef} />;
+        return (
+          <Checkbox
+            id="test-id"
+            labelText="test"
+            indeterminate
+            ref={this.myRef}
+          />
+        );
       }
     }
     const wrapper = mount(<MyComponent />);

diff --git a/packages/react/src/components/DataTable/__tests__/DataTable-test.js b/packages/react/src/components/DataTable/__tests__/DataTable-test.js
@@ -113,7 +113,7 @@ describe('DataTable', () => {
                     Action 3
                   </TableToolbarAction>
                 </TableToolbarMenu>
-                <Button onClick={jest.fn()} small kind="primary">
+                <Button onClick={jest.fn()} size="small" kind="primary">
                   Add new
                 </Button>
               </TableToolbarContent>
@@ -400,7 +400,7 @@ describe('DataTable', () => {
                       Action 3
                     </TableToolbarAction>
                   </TableToolbarMenu>
-                  <Button onClick={jest.fn()} small kind="primary">
+                  <Button onClick={jest.fn()} size="small" kind="primary">
                     Add new
                   </Button>
                 </TableToolbarContent>
@@ -689,6 +689,7 @@ describe('DataTable', () => {
             rows,
             headers,
             getHeaderProps,
+            getExpandHeaderProps,
             getSelectionProps,
             getBatchActionProps,
             getRowProps,
@@ -704,7 +705,7 @@ describe('DataTable', () => {
               <Table>
                 <TableHead>
                   <TableRow>
-                    <TableExpandHeader />
+                    <TableExpandHeader {...getExpandHeaderProps()} />
                     <TableSelectAll {...getSelectionProps()} />
                     {headers.map(header => (
                       <TableHeader {...getHeaderProps({ header })}>

diff --git a/packages/react/src/components/DataTable/__tests__/TableBatchAction-test.js b/packages/react/src/components/DataTable/__tests__/TableBatchAction-test.js
@@ -11,7 +11,9 @@ import { TableBatchAction } from '../';
 
 describe('DataTable.TableBatchAction', () => {
   it('should render', () => {
-    const wrapper = mount(<TableBatchAction className="custom-class" />);
+    const wrapper = mount(
+      <TableBatchAction className="custom-class" iconDescription="test" />
+    );
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -21,7 +23,7 @@ describe('DataTable.TableBatchAction', () => {
         <circle cx="16" cy="16" r="8" />
       </svg>
     ));
-    mount(<TableBatchAction renderIcon={renderIcon} />);
+    mount(<TableBatchAction iconDescription="test" renderIcon={renderIcon} />);
     expect(renderIcon).toHaveBeenCalled();
   });
 });
diff --git a/packages/react/src/components/DataTable/__tests__/TableExpandHeader-test.js b/packages/react/src/components/DataTable/__tests__/TableExpandHeader-test.js
@@ -15,7 +15,12 @@ describe('DataTable.TableExpandHeader', () => {
       <Table>
         <TableHead>
           <TableRow>
-            <TableExpandHeader className="custom-class" />
+            <TableExpandHeader
+              ariaLabel="test-label"
+              isExpanded={false}
+              onExpand={jest.fn()}
+              className="custom-class"
+            />
           </TableRow>
         </TableHead>
       </Table>

diff --git a/packages/react/src/components/DataTable/__tests__/TableExpandRow-test.js b/packages/react/src/components/DataTable/__tests__/TableExpandRow-test.js
@@ -26,7 +26,7 @@ describe('DataTable.TableExpandRow', () => {
       <Table>
         <TableBody>
           <TableExpandRow {...mockProps} />
-          <TableExpandedRow />
+          <TableExpandedRow colSpan={1} />
         </TableBody>
       </Table>
     );
@@ -38,7 +38,7 @@ describe('DataTable.TableExpandRow', () => {
       <Table>
         <TableBody>
           <TableExpandRow {...mockProps} />
-          <TableExpandedRow />
+          <TableExpandedRow colSpan={1} />
         </TableBody>
       </Table>
     );
@@ -63,7 +63,7 @@ describe('DataTable.TableExpandRow', () => {
       <Table>
         <TableBody>
           <TableExpandRow {...mockProps} />
-          <TableExpandedRow />
+          <TableExpandedRow colSpan={1} />
         </TableBody>
       </Table>
     );
@@ -74,7 +74,7 @@ describe('DataTable.TableExpandRow', () => {
       <Table>
         <TableBody>
           <TableExpandRow {...mockProps} isExpanded />
-          <TableExpandedRow />
+          <TableExpandedRow colSpan={1} />
         </TableBody>
       </Table>
     );

diff --git a/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js b/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js
@@ -16,8 +16,9 @@ describe('DataTable.TableToolbarMenu', () => {
       <TableToolbarMenu
         className="custom-class"
         renderIcon={Download16}
-        iconDescription="Add"
-      />
+        iconDescription="Add">
+        <span>test</span>
+      </TableToolbarMenu>
     );
     expect(wrapper).toMatchSnapshot();
   });
@@ -26,7 +27,9 @@ describe('DataTable.TableToolbarMenu', () => {
 describe('Custom icon in DataTable.TableToolbarMenu', () => {
   it('should render', () => {
     const iconAction = mount(
-      <TableToolbarMenu renderIcon={Download16} iconDescription="Download" />
+      <TableToolbarMenu renderIcon={Download16} iconDescription="Download">
+        <span>test</span>
+      </TableToolbarMenu>
     );
     const originalIcon = mount(<Download16 />).find('svg');
     const icon = iconAction.find('svg');

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -1851,7 +1851,7 @@ exports[`DataTable should render 1`] = `
                   disabled={false}
                   kind="primary"
                   onClick={[MockFunction]}
-                  small={true}
+                  size="small"
                   tabIndex={0}
                   type="button"
                 >
@@ -2456,7 +2456,7 @@ exports[`DataTable should render 1`] = `
                 disabled={false}
                 kind="primary"
                 onClick={[MockFunction]}
-                small={true}
+                size="small"
                 tabIndex={0}
                 type="button"
               >
@@ -2830,7 +2830,7 @@ exports[`DataTable sticky header should render 1`] = `
                   disabled={false}
                   kind="primary"
                   onClick={[MockFunction]}
-                  small={true}
+                  size="small"
                   tabIndex={0}
                   type="button"
                 >
@@ -3438,7 +3438,7 @@ exports[`DataTable sticky header should render 1`] = `
                 disabled={false}
                 kind="primary"
                 onClick={[MockFunction]}
-                small={true}
+                size="small"
                 tabIndex={0}
                 type="button"
               >

diff --git a/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap b/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
@@ -3,6 +3,7 @@
 exports[`DataTable.TableBatchAction should render 1`] = `
 <TableBatchAction
   className="custom-class"
+  iconDescription="test"
   renderIcon={
     Object {
       "$$typeof": Symbol(react.forward_ref),
@@ -13,6 +14,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
   <ForwardRef(Button)
     className="custom-class"
     disabled={false}
+    iconDescription="test"
     kind="primary"
     renderIcon={
       Object {
@@ -31,10 +33,12 @@ exports[`DataTable.TableBatchAction should render 1`] = `
     >
       <ForwardRef(AddFilled16)
         aria-hidden="true"
+        aria-label="test"
         className="bx--btn__icon"
       >
         <Icon
           aria-hidden="true"
+          aria-label="test"
           className="bx--btn__icon"
           height={16}
           preserveAspectRatio="xMidYMid meet"
@@ -43,11 +47,13 @@ exports[`DataTable.TableBatchAction should render 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <svg
-            aria-hidden={true}
+            aria-hidden="true"
+            aria-label="test"
             className="bx--btn__icon"
             focusable="false"
             height={16}
             preserveAspectRatio="xMidYMid meet"
+            role="img"
             style={
               Object {
                 "willChange": "transform",

diff --git a/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableExpandHeader-test.js.snap b/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableExpandHeader-test.js.snap
@@ -12,7 +12,10 @@ exports[`DataTable.TableExpandHeader should render 1`] = `
         <TableRow>
           <tr>
             <TableExpandHeader
+              ariaLabel="test-label"
               className="custom-class"
+              isExpanded={false}
+              onExpand={[MockFunction]}
             >
               <th
                 className="bx--table-expand custom-class"

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap
@@ -74,15 +74,21 @@ exports[`DataTable.TableExpandRow should render 1`] = `
             </TableCell>
           </tr>
         </TableExpandRow>
-        <TableExpandedRow>
+        <TableExpandedRow
+          colSpan={1}
+        >
           <tr
             className="bx--expandable-row"
             data-child-row={true}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
           >
-            <TableCell>
-              <td>
+            <TableCell
+              colSpan={1}
+            >
+              <td
+                colSpan={1}
+              >
                 <div
                   className="bx--child-row-inner-container"
                 />

diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -281,14 +281,19 @@ describe('DatePicker', () => {
   });
 
   describe('Date picker can be used with enzyme shallow', () => {
+    let spy;
     beforeEach(done => {
-      const spy = {};
+      spy = {};
       spy.console = jest.spyOn(console, 'error').mockImplementation(e => {
         done(e);
       });
       done();
     });
 
+    afterEach(() => {
+      spy.console.mockRestore();
+    });
+
     it('date picker should not throw exception when mounted or unmounted', () => {
       const wrapper = shallow(
         <DatePicker
@@ -318,7 +323,15 @@ describe('DatePicker', () => {
   });
 
   describe('Date picker with minDate and maxDate', () => {
-    console.error = jest.fn(); // eslint-disable-line no-console
+    let mockConsoleError;
+
+    beforeEach(() => {
+      mockConsoleError = jest.spyOn(console, 'error');
+    });
+
+    afterEach(() => {
+      mockConsoleError.mockRestore();
+    });
 
     const wrapper = mount(
       <DatePicker
@@ -351,7 +364,7 @@ describe('DatePicker', () => {
     });
 
     it('should not have "console.error" being created', () => {
-      expect(console.error).not.toBeCalled(); // eslint-disable-line no-console
+      expect(mockConsoleError).not.toBeCalled();
     });
   });
 });

diff --git a/packages/react/src/components/NumberInput/NumberInput-test.js b/packages/react/src/components/NumberInput/NumberInput-test.js
@@ -236,7 +236,8 @@ describe('NumberInput', () => {
           );
         });
 
-        it('should avoid capping when non-number prop is given to value prop', () => {
+        // NumberInput propTypes do not allow a string to be passed
+        it.skip('should avoid capping when non-number prop is given to value prop', () => {
           // Enzyme doesn't seem to allow setState() in a forwardRef-wrapped class component
           wrapper
             .find('NumberInput')

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import OverflowMenu from '../OverflowMenu';
+import OverflowMenuItem from '../OverflowMenuItem';
 import { OverflowMenuVertical16 } from '@carbon/icons-react';
 import { mount } from 'enzyme';
 import { settings } from 'carbon-components';
@@ -17,8 +18,8 @@ describe('OverflowMenu', () => {
   describe('Renders as expected', () => {
     const rootWrapper = mount(
       <OverflowMenu className="extra-class">
-        <div className="test-child" />
-        <div className="test-child" />
+        <OverflowMenuItem className="test-child">one</OverflowMenuItem>
+        <OverflowMenuItem className="test-child">two</OverflowMenuItem>
       </OverflowMenu>
     );
     const menu = rootWrapper.find(`button.${prefix}--overflow-menu`);
@@ -122,8 +123,8 @@ describe('OverflowMenu', () => {
     it('should render a ul with the appropriate class', () => {
       const rootWrapper = mount(
         <OverflowMenu menuOptionsClass="extra-menu-class">
-          <div className="test-child" />
-          <div className="test-child" />
+          <OverflowMenuItem className="test-child">one</OverflowMenuItem>
+          <OverflowMenuItem className="test-child">two</OverflowMenuItem>
         </OverflowMenu>
       );
       // Enzyme doesn't seem to allow setState() in a forwardRef-wrapped class component
@@ -141,8 +142,8 @@ describe('OverflowMenu', () => {
     it('should render children as expected', () => {
       const rootWrapper = mount(
         <OverflowMenu>
-          <div className="test-child" />
-          <div className="test-child" />
+          <OverflowMenuItem className="test-child">one</OverflowMenuItem>
+          <OverflowMenuItem className="test-child">two</OverflowMenuItem>
         </OverflowMenu>
       );
       // Enzyme doesn't seem to allow setState() in a forwardRef-wrapped class component
@@ -151,7 +152,7 @@ describe('OverflowMenu', () => {
         .instance()
         .setState({ open: true });
       rootWrapper.update();
-      expect(rootWrapper.find('.test-child').length).toEqual(2);
+      expect(rootWrapper.find('button.test-child').length).toEqual(2);
     });
 
     it('should set expected class when state is open', () => {
@@ -267,8 +268,8 @@ describe('OverflowMenu', () => {
         <OverflowMenu
           className="extra-class"
           renderIcon={() => <div className="other">Other</div>}>
-          <div className="test-child" />
-          <div className="test-child" />
+          <OverflowMenuItem className="test-child">one</OverflowMenuItem>
+          <OverflowMenuItem className="test-child">two</OverflowMenuItem>
         </OverflowMenu>
       );
       // renderIcon should be the only component where `${prefix}--overflow-menu__icon` class is applied,

diff --git a/packages/react/src/components/OverflowMenuItem/OverflowMenuItem-test.js b/packages/react/src/components/OverflowMenuItem/OverflowMenuItem-test.js
@@ -11,7 +11,8 @@ import { shallow } from 'enzyme';
 import { settings } from 'carbon-components';
 
 const { prefix } = settings;
-const shallowRender = props => shallow(<OverflowMenuItem {...props} />);
+const shallowRender = props =>
+  shallow(<OverflowMenuItem closeMenu={jest.fn()} {...props} />);
 
 describe('OverflowMenuItem', () => {
   describe('Renders as expected', () => {