chore: Generate test definitions

build-tools/tasks/index.js

@@ -21,4 +21,5 @@ module.exports = {
   themeableSource: require('./themeable-source'),
   bundleVendorFiles: require('./bundle-vendor-files'),
   sizeLimit: require('./size-limit'),
+  testDefinitions: require('./test-definitions'),
 };

build-tools/tasks/package-json.js

@@ -101,6 +101,10 @@ const devPagesPackageJson = generatePackageJson(path.join(workspace.targetPath,
   name: '@cloudscape-design/dev-pages',
 });
 
+const testDefinitionsPackageJson = generatePackageJson(path.join(workspace.targetPath, 'test-definitions'), {
+  name: '@cloudscape-design/test-definitions',
+});
+
 module.exports = parallel([
   ...themes.flatMap(theme => [
     generatePackageJson(
@@ -130,5 +134,6 @@ module.exports = parallel([
   componentsThemeablePackageJson,
   copyTask('package-lock', ['package-lock.json'], path.join(workspace.targetPath, 'dev-pages', 'internal')),
   devPagesPackageJson,
+  testDefinitionsPackageJson,
 ]);
 module.exports.generatePackageJson = generatePackageJson;

build-tools/tasks/test-definitions.js

@@ -0,0 +1,8 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+const execa = require('execa');
+const { task } = require('../utils/gulp-utils');
+
+module.exports = task('test-definitions', () =>
+  execa('tsc', ['-p', 'tsconfig.test-definitions.json'], { stdio: 'inherit' })
+);

gulpfile.js

@@ -23,6 +23,7 @@ const {
   themeableSource,
   bundleVendorFiles,
   sizeLimit,
+  testDefinitions,
 } = require('./build-tools/tasks');
 
 const quickBuild = series(
@@ -35,7 +36,8 @@ const quickBuild = series(
 exports.clean = clean;
 exports['quick-build'] = quickBuild;
 exports.i18n = generateI18nMessages;
-exports.build = series(quickBuild, parallel(buildPages, themeableSource, docs, sizeLimit));
+exports.build = series(quickBuild, parallel(buildPages, themeableSource, docs, sizeLimit, testDefinitions));
+exports['build:test-definitions'] = testDefinitions;
 exports.test = series(unit, integ, a11y);
 exports['test:unit'] = unit;
 exports['test:integ'] = integ;

test/definitions/index.ts

@@ -0,0 +1,10 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+// Each component has its own test definition file.
+// Import them here manually to form the full test suite.
+import { TestSuite } from './types';
+import actionCard from './visual/action-card';
+import alert from './visual/alert';
+
+export const allSuites: TestSuite[] = [actionCard, alert];

test/definitions/types.ts

@@ -0,0 +1,27 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import type { ScreenshotPageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+
+export interface ScreenshotTestConfiguration {
+  width?: number;
+  height?: number;
+}
+
+// 'screenshotArea' — captures the .screenshot-area element on the page.
+// 'permutations'  — captures the entire page and crops permutations out of it.
+export type ScreenshotType = 'screenshotArea' | 'permutations';
+
+export interface TestDefinition {
+  description: string;
+  path: string;
+  screenshotType: ScreenshotType;
+  queryParams?: Record<string, string>;
+  configuration?: ScreenshotTestConfiguration;
+  setup?: (page: ScreenshotPageObject) => Promise<void>;
+}
+
+export interface TestSuite {
+  componentName?: string;
+  description: string;
+  tests: Array<TestDefinition | TestSuite>;
+}

test/definitions/visual/action-card.ts

@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { TestSuite } from '../types';
+
+const suite: TestSuite = {
+  description: 'Action card',
+  componentName: 'action-card',
+  tests: [
+    {
+      description: 'permutations',
+      path: 'action-card/permutations',
+      screenshotType: 'permutations',
+    },
+    {
+      description: 'variant permutations',
+      path: 'action-card/variant-permutations',
+      screenshotType: 'permutations',
+    },
+    {
+      description: 'padding permutations',
+      path: 'action-card/padding-permutations',
+      screenshotType: 'permutations',
+    },
+    {
+      description: 'simple',
+      path: 'action-card/simple',
+      screenshotType: 'screenshotArea',
+    },
+  ],
+};
+
+export default suite;

test/definitions/visual/alert.ts

@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { TestSuite } from '../types';
+
+const suite: TestSuite = {
+  description: 'Alert',
+  componentName: 'alert',
+  tests: [
+    {
+      description: 'simple',
+      path: 'alert/simple',
+      screenshotType: 'screenshotArea',
+    },
+    {
+      description: 'style custom page',
+      path: 'alert/style-custom-types',
+      screenshotType: 'screenshotArea',
+    },
+    ...[600, 1280].map(width => ({
+      description: `width ${width}px`,
+      tests: [
+        {
+          description: 'permutations',
+          path: 'alert/permutations',
+          screenshotType: 'permutations' as const,
+        },
+        {
+          description: 'custom types',
+          path: 'alert/style-custom-types',
+          screenshotType: 'screenshotArea' as const,
+        },
+      ],
+    })),
+  ],
+};
+
+export default suite;

tsconfig.test-definitions.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "lib": ["ES2021", "DOM"],
+    "target": "ES2019",
+    "types": [],
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "test/definitions",
+    "outDir": "lib/test-definitions",
+    "skipLibCheck": true
+  },
+  "include": ["test/definitions", "test/types.ts"],
+  "exclude": []
+}