fix(tests): ensure async tests resolve, refactor unscoped eslint disa…

…bles, add new eslint rules to prevent errors

.eslintrc

@@ -73,7 +73,10 @@
     // https://nolanlawson.com/2018/03/20/smaller-lodash-bundles-with-webpack-and-babel/
     "lodash/chaining": [2, "never"],
     "lodash/import-scope": [2, "method"],
-    "react/destructuring-assignment": [2, "always", { "ignoreClassFields": true }]
+    "react/destructuring-assignment": [2, "always", { "ignoreClassFields": true }],
+    "jest/expect-expect": "error",
+    "jest/prefer-hooks-on-top": "error"
+    // "jest/consistent-test-it": ["error", { "fn": "test", "withinDescribe": "it" }]
   },
   // Testcases have less eslint rules applied to them
   "overrides": [

.travis.yml

@@ -23,7 +23,7 @@ install:
 
 script:
   - yarn lint
-  - travis_wait yarn test --runInBand --ci --logHeapUsage --coverage && cat ./coverage/lcov.info | yarn run coveralls && rm -rf ./coverage # report coveralls status
+  - travis_wait yarn test --maxWorkers=2 --ci --logHeapUsage --coverage && cat ./coverage/lcov.info | yarn run coveralls && rm -rf ./coverage # report coveralls status
 
 after_success:
   - yarn publish-npm

package.json

@@ -218,6 +218,7 @@
     "stylelint-config-recommended-scss": "^3.3.0",
     "stylelint-scss": "^3.10.0",
     "weak": "^1.0.1",
+    "weak-napi": "^2.0.1",
     "webpack": "^4.28.4",
     "whatwg-fetch": "^3.0.0"
   },

src/components/Breadcrumb/Breadcrumb.test.jsx

@@ -22,12 +22,6 @@ describe('Breadcrumb', () => {
 });
 
 describe('Breadcrumb with overflow', () => {
-  const originalOffsetHeight = Object.getOwnPropertyDescriptor(
-    HTMLElement.prototype,
-    'clientWidth'
-  );
-  const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'scrollWidth');
-
   beforeAll(() => {
     Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
       writable: true,

src/components/Card/Card.test.jsx

@@ -1,13 +1,14 @@
 import { mount } from 'enzyme';
 import React from 'react';
-/* eslint-disable*/
 import { Tooltip } from 'carbon-components-react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import { Popup20 } from '@carbon/icons-react';
+
 import { CARD_SIZES, CARD_TITLE_HEIGHT, CARD_ACTIONS } from '../../constants/LayoutConstants';
+import { settings } from '../../constants/Settings';
+
 import CardRangePicker from './CardRangePicker';
 import Card from './Card';
-import { settings } from '../../constants/Settings';
 
 const { iotPrefix } = settings;
 
@@ -19,17 +20,21 @@ const cardProps = {
 };
 
 describe('Card testcases', () => {
-  test('small', () => {
+  it('small', () => {
     const wrapper = mount(<Card {...cardProps} size={CARD_SIZES.SMALL} />);
 
     // small should have full header
     expect(wrapper.find(`.${iotPrefix}--card--header`)).toHaveLength(1);
   });
 
-  test('child size prop', () => {
+  it('child size prop', () => {
     const childRenderInTitleCard = jest.fn();
 
-    mount(<Card title="My Title" size={CARD_SIZES.MEDIUM} children={childRenderInTitleCard} />);
+    mount(
+      <Card title="My Title" size={CARD_SIZES.MEDIUM}>
+        {childRenderInTitleCard}
+      </Card>
+    );
     expect(childRenderInTitleCard).toHaveBeenCalledWith(
       {
         width: 0,
@@ -52,7 +57,7 @@ describe('Card testcases', () => {
     );
   });
 
-  test('render icons', () => {
+  it('render icons', () => {
     let wrapper = mount(
       <Card {...cardProps} size={CARD_SIZES.SMALL} availableActions={{ range: true }} />
     );
@@ -78,7 +83,7 @@ describe('Card testcases', () => {
     expect(wrapper.find(CardRangePicker)).toHaveLength(0);
   });
 
-  test('additional prop based elements', () => {
+  it('additional prop based elements', () => {
     let wrapper = mount(<Card {...cardProps} size={CARD_SIZES.LARGE} tooltip={tooltipElement} />);
     // tooltip prop will render a tooltip in the header
     expect(wrapper.find(`.${iotPrefix}--card--header`).find(Tooltip)).toHaveLength(1);
@@ -90,16 +95,16 @@ describe('Card testcases', () => {
     );
     expect(wrapper.find(`.${iotPrefix}--card--skeleton-wrapper`)).toHaveLength(1);
   });
-  test('isExpanded', () => {
-    let wrapper = mount(
+  it('isExpanded', () => {
+    const wrapper = mount(
       <Card {...cardProps} isExpanded size={CARD_SIZES.LARGE} tooltip={tooltipElement} />
     );
-    //isExpanded renders the modal wrapper around it
+    // isExpanded renders the modal wrapper around it
     expect(wrapper.find('.bx--modal')).toHaveLength(1);
   });
-  test('card actions', () => {
+  it('card actions', () => {
     const mockOnCardAction = jest.fn();
-    let wrapper = mount(
+    const wrapper = mount(
       <Card
         {...cardProps}
         isExpanded
@@ -116,7 +121,7 @@ describe('Card testcases', () => {
     expect(mockOnCardAction).toHaveBeenCalledWith(cardProps.id, CARD_ACTIONS.CLOSE_EXPANDED_CARD);
 
     mockOnCardAction.mockClear();
-    let wrapper2 = mount(
+    const wrapper2 = mount(
       <Card
         {...cardProps}
         size={CARD_SIZES.LARGE}
@@ -131,7 +136,7 @@ describe('Card testcases', () => {
       .props.onClick();
     expect(mockOnCardAction).toHaveBeenCalledWith(cardProps.id, CARD_ACTIONS.OPEN_EXPANDED_CARD);
   });
-  test('card editable actions', async () => {
+  it('card editable actions', async () => {
     const mockOnCardAction = jest.fn();
     const { getByTitle, getByText } = render(
       <Card
@@ -162,7 +167,7 @@ describe('Card testcases', () => {
     fireEvent.click(thirdElement);
     expect(mockOnCardAction).toHaveBeenCalledWith(cardProps.id, CARD_ACTIONS.DELETE_CARD);
   });
-  test('card toolbar renders in header only when there are actions', () => {
+  it('card toolbar renders in header only when there are actions', () => {
     const wrapperWithActions = mount(
       <Card {...cardProps} isExpanded size={CARD_SIZES.SMALL} availableActions={{ expand: true }} />
     );

src/components/Dashboard/Dashboard.test.jsx

@@ -2,6 +2,7 @@ import { mount } from 'enzyme';
 import React from 'react';
 import Add from '@carbon/icons-react/lib/add/20';
 import { iconCrash } from 'carbon-icons';
+import { render, waitFor } from '@testing-library/react';
 
 import { CARD_SIZES, CARD_TYPES, COLORS } from '../../constants/LayoutConstants';
 import { tableColumns, tableData } from '../../utils/sample';
@@ -172,35 +173,58 @@ describe('Dashboard testcases', () => {
     expect(wrapper.prop('onDashboardAction')).toHaveBeenCalled();
   });
 
-  test('verify onFetchData is called by each card if loading changes to true', done => {
-    const mockOnFetchData = jest.fn().mockImplementation(() => Promise.resolve([]));
+  test('verify onFetchData is called by each card if loading changes to true', () => {
+    return new Promise(async (done, reject) => {
+      try {
+        const mockOnFetchData = jest.fn().mockImplementation(card => Promise.resolve(card));
 
-    const mockOnSetRefresh = jest.fn().mockImplementation(refreshDate => {
-      if (refreshDate) {
-        // Wait for the final set refresh call to exit the testcase
-        done();
+        const mockOnSetRefresh = jest.fn().mockImplementation(refreshDate => {
+          if (refreshDate) {
+            // Wait for the final set refresh call to exit the testcase
+            done();
+          }
+        });
+        const mockSetIsLoading = jest.fn();
+
+        const { rerender } = render(
+          <Dashboard
+            title="My Dashboard"
+            layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }}
+            actions={[
+              { id: 'edit', labelText: 'Edit', icon: 'edit' },
+              { id: 'crash', labelText: 'Crash', icon: iconCrash },
+            ]}
+            cards={cardValues}
+            onDashboardAction={onClick}
+            hasLastUpdated={false}
+            onFetchData={mockOnFetchData}
+            onSetRefresh={mockOnSetRefresh}
+            setIsLoading={mockSetIsLoading}
+          />
+        );
+        rerender(
+          <Dashboard
+            isLoading
+            title="My Dashboard"
+            layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }}
+            actions={[
+              { id: 'edit', labelText: 'Edit', icon: 'edit' },
+              { id: 'crash', labelText: 'Crash', icon: iconCrash },
+            ]}
+            cards={cardValues}
+            onDashboardAction={onClick}
+            hasLastUpdated={false}
+            onFetchData={mockOnFetchData}
+            onSetRefresh={mockOnSetRefresh}
+            setIsLoading={mockSetIsLoading}
+          />
+        );
+
+        await waitFor(() => expect(mockOnFetchData).toHaveBeenCalledTimes(5));
+      } catch (e) {
+        reject(e);
       }
     });
-    const mockSetIsLoading = jest.fn();
-
-    wrapper = mount(
-      <Dashboard
-        title="My Dashboard"
-        layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }}
-        actions={[
-          { id: 'edit', labelText: 'Edit', icon: 'edit' },
-          { id: 'crash', labelText: 'Crash', icon: iconCrash },
-        ]}
-        cards={cardValues}
-        onDashboardAction={onClick}
-        hasLastUpdated={false}
-        onFetchData={mockOnFetchData}
-        onSetRefresh={mockOnSetRefresh}
-        setIsLoading={mockSetIsLoading}
-      />
-    );
-    wrapper.setProps({ isLoading: true });
-    expect(mockOnFetchData).toHaveBeenCalledTimes(5);
   });
   test('verify onLayoutChange is called when the dashboard renders', () => {
     const mockOnLayoutChange = jest.fn();

src/components/DateTimePicker/DateTimePicker.jsx

@@ -303,22 +303,28 @@ const __unstableDateTimePicker = ({
     },
   };
 
-  useEffect(() => {
-    window.setTimeout(() => {
-      if (datePickerRef && datePickerRef.current) {
-        datePickerRef.current.cal.open();
-        // while waiting for https://github.com/carbon-design-system/carbon/issues/5713
-        // the only way to display the calendar inline is to reparent its DOM to our component
-        const wrapper = document.getElementById(`${iotPrefix}--date-time-picker__wrapper`);
-        if (typeof wrapper !== 'undefined' && wrapper !== null) {
-          const dp = document
-            .getElementById(`${iotPrefix}--date-time-picker__wrapper`)
-            .getElementsByClassName(`${iotPrefix}--date-time-picker__datepicker`)[0];
-          dp.appendChild(datePickerRef.current.cal.calendarContainer);
+  useEffect(
+    () => {
+      const timeout = setTimeout(() => {
+        if (datePickerRef && datePickerRef.current) {
+          datePickerRef.current.cal.open();
+          // while waiting for https://github.com/carbon-design-system/carbon/issues/5713
+          // the only way to display the calendar inline is to reparent its DOM to our component
+          const wrapper = document.getElementById(`${iotPrefix}--date-time-picker__wrapper`);
+          if (typeof wrapper !== 'undefined' && wrapper !== null) {
+            const dp = document
+              .getElementById(`${iotPrefix}--date-time-picker__wrapper`)
+              .getElementsByClassName(`${iotPrefix}--date-time-picker__datepicker`)[0];
+            dp.appendChild(datePickerRef.current.cal.calendarContainer);
+          }
         }
-      }
-    }, 0);
-  });
+      }, 0);
+      return () => {
+        clearTimeout(timeout);
+      };
+    },
+    [datePickerRef]
+  );
 
   /**
    * Parses a value object into a human readable value