From fe1b1f83d7af0b7b775f7c201539700bdd3c2475 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 8 Jan 2020 13:17:58 -0600 Subject: [PATCH 01/10] chore(project): add setup for test failure with unexpected console --- tasks/jest/setupAfterEnv.js | 56 +++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/tasks/jest/setupAfterEnv.js b/tasks/jest/setupAfterEnv.js index ad0029b217c4..1d0764baf28b 100644 --- a/tasks/jest/setupAfterEnv.js +++ b/tasks/jest/setupAfterEnv.js @@ -5,6 +5,8 @@ * LICENSE file in the root directory of this source tree. */ +const chalk = require('chalk'); +const util = require('util'); const toHaveNoAxeViolations = require('./matchers/toHaveNoAxeViolations'); const toHaveNoDAPViolations = require('./matchers/toHaveNoDAPViolations'); @@ -20,3 +22,57 @@ const toHaveNoDAPViolations = require('./matchers/toHaveNoDAPViolations'); // For more information, check out the docs here: // https://jestjs.io/docs/en/configuration.html#setupfilesafterenv-array expect.extend({ toHaveNoAxeViolations, toHaveNoDAPViolations }); + +// Have our test suite throw an error if one of the below console methods are +// called when we are not expecting them. This is often helpful for React +// warnings that are fired with console.warn or console.error that we would want +// to address in order for the test suite to pass. +// +// By default, we will throw on console.error and console.warn. In CI, we'll +// also throw on console.log so no extraneous log statements make there way +// through. +// +// Inspired by the following setup from facebook/react +// https://github.com/facebook/react/blob/6250462bed19c9f18a8cf3c2b5fcaf9aba1df72b/scripts/jest/setupTests.js#L69 +const consoleMethods = ['error', 'warn', process.env.CI && 'log'].filter( + Boolean +); + +for (const methodName of consoleMethods) { + const unexpectedConsoleCallStacks = []; + const newMethod = function(format, ...args) { + const stack = new Error().stack; + unexpectedConsoleCallStacks.push([ + stack.substr(stack.indexOf('\n') + 1), + util.format(format, ...args), + ]); + }; + + console[methodName] = newMethod; + + global.beforeEach(() => { + unexpectedConsoleCallStacks.length = 0; + }); + + global.afterEach(() => { + if (console[methodName] !== newMethod) { + throw new Error(`Test did not restore a mock for console.${methodName}`); + } + + if (unexpectedConsoleCallStacks.length > 0) { + const messages = unexpectedConsoleCallStacks.map( + ([stack, message]) => + `${message}\n` + + `${stack + .split('\n') + .map(line => chalk.gray(line)) + .join('\n')}` + ); + const message = `Expected test not to call ${chalk.bold( + `console.${methodName}()` + )}`; + + throw new Error(`${message}\n\n${messages.join('\n\n')}`); + } + }); +} From 5d5f99e5a5f3b524add855faf18d0cc8a873141c Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 17 Jan 2020 15:49:51 -0600 Subject: [PATCH 02/10] chore(components): update timeout for styles-test.js --- packages/components/tests/styles-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/tests/styles-test.js b/packages/components/tests/styles-test.js index 7660f3eb8de8..e293d20e8afb 100644 --- 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(10000); it.each(files)('%s should compile', async relativeFilePath => { const filepath = path.join(cwd, relativeFilePath); try { From c7d00a5e9b5f4d0b6d03cee9dcd1b52b28a41ac3 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Sat, 25 Jan 2020 18:42:46 -0600 Subject: [PATCH 03/10] test(checkbox): add missing required props --- packages/react/src/components/Checkbox/Checkbox-test.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/Checkbox/Checkbox-test.js b/packages/react/src/components/Checkbox/Checkbox-test.js index abdd198c4e9c..f1d257704396 100644 --- 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 ; + return ( + + ); } } const wrapper = mount(); From e7694b0103d7394bbe4ff94c9d8dd4fb5e18f1bf Mon Sep 17 00:00:00 2001 From: Josh Black Date: Sat, 25 Jan 2020 18:51:38 -0600 Subject: [PATCH 04/10] test(data-table): add missing or required props --- .../components/DataTable/__tests__/DataTable-test.js | 7 ++++--- .../DataTable/__tests__/TableBatchAction-test.js | 6 ++++-- .../DataTable/__tests__/TableExpandHeader-test.js | 7 ++++++- .../DataTable/__tests__/TableExpandRow-test.js | 8 ++++---- .../DataTable/__tests__/TableToolbarMenu-test.js | 9 ++++++--- .../__tests__/__snapshots__/DataTable-test.js.snap | 8 ++++---- .../__snapshots__/TableBatchAction-test.js.snap | 8 +++++++- .../__snapshots__/TableExpandHeader-test.js.snap | 3 +++ .../__snapshots__/TableExpandRow-test.js.snap | 12 +++++++++--- 9 files changed, 47 insertions(+), 21 deletions(-) diff --git a/packages/react/src/components/DataTable/__tests__/DataTable-test.js b/packages/react/src/components/DataTable/__tests__/DataTable-test.js index e042bc7f96d2..324f55ec14cc 100644 --- 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 - @@ -400,7 +400,7 @@ describe('DataTable', () => { Action 3 - @@ -689,6 +689,7 @@ describe('DataTable', () => { rows, headers, getHeaderProps, + getExpandHeaderProps, getSelectionProps, getBatchActionProps, getRowProps, @@ -704,7 +705,7 @@ describe('DataTable', () => { - + {headers.map(header => ( diff --git a/packages/react/src/components/DataTable/__tests__/TableBatchAction-test.js b/packages/react/src/components/DataTable/__tests__/TableBatchAction-test.js index afd58a564609..79bf7c9ff602 100644 --- 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(); + const wrapper = mount( + + ); expect(wrapper).toMatchSnapshot(); }); @@ -21,7 +23,7 @@ describe('DataTable.TableBatchAction', () => { )); - mount(); + mount(); 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 index b19d0d5a9bcb..065a8ff1f189 100644 --- 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', () => {
- +
diff --git a/packages/react/src/components/DataTable/__tests__/TableExpandRow-test.js b/packages/react/src/components/DataTable/__tests__/TableExpandRow-test.js index 9ef0271bec98..224f43560dcd 100644 --- 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', () => { - +
); @@ -38,7 +38,7 @@ describe('DataTable.TableExpandRow', () => { - +
); @@ -63,7 +63,7 @@ describe('DataTable.TableExpandRow', () => { - +
); @@ -74,7 +74,7 @@ describe('DataTable.TableExpandRow', () => { - +
); diff --git a/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js b/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js index f03bac6b52b5..f93268df9952 100644 --- 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', () => { + iconDescription="Add"> + test + ); expect(wrapper).toMatchSnapshot(); }); @@ -26,7 +27,9 @@ describe('DataTable.TableToolbarMenu', () => { describe('Custom icon in DataTable.TableToolbarMenu', () => { it('should render', () => { const iconAction = mount( - + + test + ); const originalIcon = mount().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 index c8d73a27a9b5..8d3d08bae1b7 100644 --- 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/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap index 7a10c18a6d88..6fcfa03bbf0d 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap @@ -3,6 +3,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `