test: Test with motion enabled (#1823)

Author: jperals

.eslintrc.js

@@ -117,7 +117,7 @@ module.exports = {
       },
     },
     {
-      files: ['build-tools/integ/**', '**/__integ__/**', '**/__a11y__/**'],
+      files: ['build-tools/integ/**', '**/__integ__/**', '**/__a11y__/**', '**/__motion__/**'],
       rules: {
         // useBrowser is not a React hook
         'react-hooks/rules-of-hooks': 'off',
@@ -157,7 +157,7 @@ module.exports = {
     },
     {
       files: ['src/**'],
-      excludedFiles: ['src/**/__tests__/**', 'src/**/__integ__/**', 'src/**/__a11y__/**'],
+      excludedFiles: ['src/**/__tests__/**', 'src/**/__integ__/**', 'src/**/__a11y__/**', 'src/**/__motion__/**'],
       rules: {
         '@cloudscape-design/no-implicit-svg-focusable': 'error',
         '@cloudscape-design/prefer-live-region': 'warn',
@@ -258,6 +258,7 @@ module.exports = {
         'src/**/__tests__/**',
         'src/**/__integ__/**',
         'src/**/__a11y__/**',
+        'src/**/__motion__/**',
         'src/test-utils/**',
         'src/internal/vendor/**',
       ],

CONTRIBUTING.md

@@ -96,7 +96,8 @@ The package contains three types of tests:
 
 - **Build-tool tests** test the build-tools code in a NodeJS context.
 - **Unit tests** emulate a browser environment using JSDOM.
-- **Integration tests** test against real browser behavior on Chrome.
+- **Integration tests** test against real browser behavior on Chrome, with motion disabled.
+- **Motion tests** run a specific set of tests on Chrome, with motion enabled.
 
 #### Run all tests:
 
@@ -128,6 +129,21 @@ npm start
 npm run test:integ
 ```
 
+#### Run motion tests:
+
+As in integration tests, make sure you have ChromeDriver installed and start the dev server:
+
+```
+npm i -g chromedriver
+npm start
+```
+
+Then, run the motion tests in a separate terminal:
+
+```
+npm test:motion
+```
+
 #### Run a single test suite
 
 To run a single test suite, you can call Jest directly using the appropriate config:
@@ -139,6 +155,9 @@ npx jest -c jest.unit.config.js src/button/__tests__/button.test.tsx
 # Run all input integration tests
 npx jest -c jest.integ.config.js src/input
 
+# Run motion tests for the flashbar component
+npx jest -c jest.motion.config.js src/flashbar
+
 # Test all stylelint rules
 npx jest -c jest.build-tools.config.js build-tools/stylelint
 ```
@@ -202,6 +221,7 @@ After the test is done, you can find a report in `backstop/html_report/index.htm
 │   ├── <component-dir>
 │   │   ├── __tests__           - jest unit tests
 │   │   ├── __integ__           - jest integration tests
+│   │   ├── __motion__          - jest motion tests
 │   │   ├── index.tsx           - main component file (imports other files and styles)
 │   │   └── styles.scss         - main SCSS file
 |   │

build-tools/integ/setup.motion.js

@@ -0,0 +1,15 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+const { configure } = require('@cloudscape-design/browser-test-tools/use-browser');
+
+configure({
+  browserName: 'ChromeHeadless',
+  browserCreatorOptions: {
+    seleniumUrl: 'http://localhost:9515',
+  },
+  webdriverOptions: {
+    baseUrl: 'http://localhost:8080',
+  },
+});
+
+jest.retryTimes(3, { logErrorsBeforeRetry: true });

build-tools/tasks/index.js

@@ -16,6 +16,7 @@ module.exports = {
   a11y: require('./a11y'),
   generateI18nMessages: require('./generate-i18n-messages'),
   integ: require('./integ'),
+  motion: require('./motion'),
   licenses: require('./licenses'),
   themeableSource: require('./themeable-source'),
   bundleVendorFiles: require('./bundle-vendor-files'),

build-tools/tasks/motion.js

@@ -0,0 +1,20 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+const execa = require('execa');
+const glob = require('glob');
+const waitOn = require('wait-on');
+const { task } = require('../utils/gulp-utils.js');
+
+module.exports = task('test:motion', async () => {
+  const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.js'], {
+    env: {
+      NODE_ENV: 'development',
+    },
+  });
+  await waitOn({ resources: ['http://localhost:8080'] });
+
+  const files = glob.sync('src/**/__motion__/**/*.test.ts');
+  await execa('jest', ['-c', 'jest.motion.config.js', ...files], { stdio: 'inherit' });
+
+  devServer.cancel();
+});

gulpfile.js

@@ -18,6 +18,7 @@ const {
   a11y,
   generateI18nMessages,
   integ,
+  motion,
   licenses,
   themeableSource,
   bundleVendorFiles,
@@ -38,6 +39,7 @@ exports.test = series(unit, integ, a11y);
 exports['test:unit'] = unit;
 exports['test:integ'] = integ;
 exports['test:a11y'] = a11y;
+exports['test:motion'] = motion;
 
 exports.watch = () => {
   watch(
@@ -47,6 +49,7 @@ exports.watch = () => {
       '!**/__tests__/**',
       '!**/__integ__/**',
       '!**/__a11y__/**',
+      '!**/__motion__/**',
       '!src/internal/vendor/**/*.ts',
     ],
     typescript

jest.motion.config.js

@@ -0,0 +1,23 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+const path = require('path');
+const os = require('os');
+
+module.exports = {
+  verbose: true,
+  testEnvironment: 'node',
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.integ.json',
+    },
+  },
+  reporters: ['default', 'github-actions'],
+  testTimeout: 60_000, // 1min
+  maxWorkers: os.cpus().length * (process.env.GITHUB_ACTION ? 3 : 1),
+  globalSetup: '<rootDir>/build-tools/integ/global-setup.js',
+  globalTeardown: '<rootDir>/build-tools/integ/global-teardown.js',
+  setupFilesAfterEnv: [path.join(__dirname, 'build-tools', 'integ', 'setup.motion.js')],
+  moduleFileExtensions: ['js', 'ts'],
+  testRegex: '(/(__motion__)/.*(\\.|/)test)\\.[jt]sx?$',
+  preset: 'ts-jest',
+};

package.json

@@ -14,6 +14,7 @@
     "test:unit": "gulp test:unit",
     "test:a11y": "gulp test:a11y",
     "test:integ": "gulp test:integ",
+    "test:motion": "gulp test:motion",
     "test:visual": "./backstop/node_modules/.bin/backstop --config backstop.config.js",
     "lint": "eslint --ignore-path .gitignore --ext ts,tsx,js . && stylelint --ignore-path .gitignore '{src,pages}/**/*.{css,scss}'",
     "start": "gulp watch & NODE_ENV=development webpack serve --config pages/webpack.config.js",

src/flashbar/__integ__/pages/base.ts

@@ -3,8 +3,6 @@
 import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
 import selectors from '../../../../lib/components/flashbar/styles.selectors.js';
 import createWrapper from '../../../../lib/components/test-utils/selectors';
-import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
-import { FlashbarInteractivePage } from './interactive-page';
 
 export const flashbar = createWrapper().findFlashbar();
 
@@ -28,12 +26,3 @@ export class FlashbarBasePage extends BasePageObject {
     );
   }
 }
-
-export const setupTest = (path: string, testFn: (page: FlashbarInteractivePage) => Promise<void>) => {
-  return useBrowser(async browser => {
-    const page = new FlashbarInteractivePage(browser);
-    await browser.url(`#/light/flashbar/${path}`);
-    await page.waitForVisible(flashbar.toSelector());
-    await testFn(page);
-  });
-};

src/flashbar/__integ__/pages/interactive-page.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { FlashbarBasePage, flashbar } from './base';
 import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+import createWrapper from '../../../../lib/components/test-utils/selectors';
 
 export class FlashbarInteractivePage extends FlashbarBasePage {
   async addInfoFlash() {
@@ -24,6 +25,14 @@ export class FlashbarInteractivePage extends FlashbarBasePage {
     await this.click('[data-id="stack-items"]');
   }
 
+  async dismissFirstItem() {
+    await this.click(createWrapper().findFlashbar().findItems().get(1).findDismissButton().toSelector());
+  }
+
+  getItem(index: number) {
+    return createWrapper().findFlashbar().findItems().get(index);
+  }
+
   async removeAll() {
     await this.click('[data-id="remove-all"]');
   }

src/flashbar/__motion__/collapsible-flashbar.test.ts

@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+import { flashbar } from '../__integ__/pages/base';
+import { FlashbarInteractivePage } from '../__integ__/pages/interactive-page';
+
+const setupTest = (options: { visualRefresh?: boolean }, testFn: (page: FlashbarInteractivePage) => Promise<void>) => {
+  return useBrowser(async browser => {
+    const page = new FlashbarInteractivePage(browser);
+    const baseUrl = '#/light/flashbar/interactive';
+    const url =
+      options.visualRefresh === undefined
+        ? baseUrl
+        : `${baseUrl}?${new URLSearchParams({
+            visualRefresh: `${options.visualRefresh}`,
+          }).toString()}`;
+    await browser.url(url);
+    await page.waitForVisible(flashbar.toSelector());
+    await testFn(page);
+  });
+};
+
+describe('Collapsible flashbar', () => {
+  describe('can dismiss all items', () => {
+    it.each([true, false])('visualRefresh=%s', visualRefresh =>
+      setupTest({ visualRefresh }, async page => {
+        await page.removeAll();
+        await page.toggleStackingFeature();
+        await expect(page.countFlashes()).resolves.toBe(0);
+        await page.addInfoFlash();
+        await expect(page.countFlashes()).resolves.toBe(1);
+        await page.waitForVisible(page.getItem(1).findDismissButton().toSelector());
+        await page.dismissFirstItem();
+        await page.waitForAssertion(() => expect(page.countFlashes()).resolves.toBe(0));
+      })()
+    );
+  });
+});

tsconfig.integ.json

@@ -11,5 +11,5 @@
     "resolveJsonModule": true,
     "moduleResolution": "node"
   },
-  "include": ["**/__integ__/**/*.ts", "**/__a11y__/**/*.ts", "types"]
+  "include": ["**/__integ__/**/*.ts", "**/__a11y__/**/*.ts", "**/__motion__/**/*.ts", "types"]
 }

tsconfig.json

@@ -15,5 +15,12 @@
     "incremental": true
   },
   "include": ["src", "types"],
-  "exclude": ["**/__tests__/**", "src/test-utils/**", "**/__integ__/**", "**/__a11y__/**", "src/internal/vendor/**"]
+  "exclude": [
+    "**/__tests__/**",
+    "src/test-utils/**",
+    "**/__integ__/**",
+    "**/__a11y__/**",
+    "**/__motion__/**",
+    "src/internal/vendor/**"
+  ]
 }