chore: convert rendering tests to es6 (#1658)

* chore: convert rendering tests to es6

* chore: fix cjs config usage

* chore: fix cjs config usage

* chore: fix verify translations

* chore: babel and jest es6

* chore: aw cjs

* chore: aw cjs

* chore: aw cjs

* chore: fix path

.commitlintrc.js

@@ -1,3 +1,2 @@
-module.exports = {
-  extends: ['@commitlint/config-conventional'],
-};
+const Configuration = { extends: ['@commitlint/config-conventional'] };
+export default Configuration;

apis/snapshooter/package.json

@@ -22,7 +22,7 @@
     "client.js"
   ],
   "scripts": {
-    "build": "cross-env NODE_ENV=production rollup --config ./rollup.config.js",
+    "build": "cross-env NODE_ENV=production rollup --bundleConfigAsCjs --config ./rollup.config.js",
     "prepublishOnly": "rm -rf dist && yarn run build"
   }
 }

apis/stardust/package.json

@@ -30,9 +30,9 @@
     "types/index.d.ts"
   ],
   "scripts": {
-    "build": "cross-env NODE_ENV=production rollup --config ../../rollup.config.js",
-    "build:dev": "rollup --config ../../rollup.config.js",
-    "build:watch": "rollup --config ../../rollup.config.js -w",
+    "build": "cross-env NODE_ENV=production rollup --bundleConfigAsCjs --config ../../rollup.config.js",
+    "build:dev": "rollup --bundleConfigAsCjs --config ../../rollup.config.js",
+    "build:watch": "rollup --bundleConfigAsCjs --config ../../rollup.config.js -w",
     "prepublishOnly": "rm -rf dist && yarn run build",
     "spec:stardust": "sy from-jsdoc -c ./api-spec/spec.conf.js",
     "spec:listbox": "sy from-jsdoc -c ./api-spec/listbox-spec.conf.js",

apis/test-utils/package.json

@@ -19,9 +19,9 @@
     "dist"
   ],
   "scripts": {
-    "build": "cross-env NODE_ENV=production rollup --config ../../rollup.config.js",
-    "build:dev": "rollup --config ../../rollup.config.js",
-    "build:watch": "rollup --config ../../rollup.config.js -w",
+    "build": "cross-env NODE_ENV=production rollup --bundleConfigAsCjs --config ../../rollup.config.js",
+    "build:dev": "rollup --bundleConfigAsCjs --config ../../rollup.config.js",
+    "build:watch": "rollup --bundleConfigAsCjs --config ../../rollup.config.js -w",
     "prepublishOnly": "rm -rf dist && yarn run build"
   },
   "peerDependencies": {

jest.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+const config = {
   verbose: true,
   clearMocks: true,
   testEnvironment: 'jest-environment-jsdom',
@@ -59,3 +59,5 @@ module.exports = {
     'd3-color': '<rootDir>/node_modules/d3-color/dist/d3-color.min.js',
   },
 };
+
+export default config;

package.json

@@ -1,6 +1,7 @@
 {
   "private": true,
   "description": "",
+  "type": "module",
   "scripts": {
     "build": "yarn run locale:generate && cross-env NODE_ENV=production FORCE_COLOR=1 lerna run build --stream",
     "build:dev": "yarn run locale:generate && cross-env NODE_ENV=development FORCE_COLOR=1 lerna run build --stream",
@@ -8,10 +9,10 @@
     "install:codesandbox": "yarn --ignore-engines",
     "build:watch": "FORCE_COLOR=1 lerna run build:watch --stream --concurrency 99 --no-sort",
     "format": "prettier --write '**/**/*' --ignore-unknown",
-    "locale:verify": "node tools/verify-translations.js",
+    "locale:verify": "node tools/verify-translations.cjs",
     "locale:generate": "node apis/locale/scripts/generate-all.mjs",
     "lint": "eslint packages apis commands --ext .js,.jsx",
-    "lint:check": "eslint --print-config ./aw.config.js | eslint-config-prettier-check",
+    "lint:check": "eslint --print-config ./aw.config.cjs | eslint-config-prettier-check",
     "spec": "lerna run spec --stream --concurrency 99 && lerna run ts --stream --concurrency 99 ",
     "mashup": "node scripts/start-mashup.js",
     "test": "yarn run test:unit",
@@ -19,10 +20,10 @@
     "test:update": "jest --maxWorkers=2 -u",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "test:mashup": "aw puppet -c aw.config.js --testExt '*.int.js' --glob 'test/mashup/**/*.int.js'",
+    "test:mashup": "aw puppet -c aw.config.cjs --testExt '*.int.js' --glob 'test/mashup/**/*.int.js'",
     "test:rendering": "playwright test --config=./test/rendering/playwright.config.rendering.js --quiet",
-    "test:integration": "aw puppet -c aw.config.js --testExt '*.int.js' --glob 'test/integration/**/*.int.js'",
-    "test:component": "aw puppet -c aw.config.js --testExt '*.comp.js' --glob 'test/component/**/*.comp.js'",
+    "test:integration": "aw puppet -c aw.config.cjs --testExt '*.int.js' --glob 'test/integration/**/*.int.js'",
+    "test:component": "aw puppet -c aw.config.cjs --testExt '*.comp.js' --glob 'test/component/**/*.comp.js'",
     "prepare": "husky install"
   },
   "repository": {

rollup.config.js

@@ -8,7 +8,7 @@ const { nodeResolve } = require('@rollup/plugin-node-resolve');
 const replace = require('@rollup/plugin-replace');
 const terser = require('@rollup/plugin-terser');
 
-const localeStringValidator = require('./tools/locale-string-validator');
+const localeStringValidator = require('./tools/locale-string-validator.cjs');
 
 const cwd = process.cwd();
 const pkg = require(path.join(cwd, 'package.json')); // eslint-disable-line

test/rendering/listbox/listbox-keyboard-nav.spec.js

@@ -1,8 +1,7 @@
 /* eslint-disable no-undef */
 import { test, expect } from '@playwright/test';
-
-const getPage = require('../setup');
-const startServer = require('../server');
+import getPage from '../setup';
+import startServer from '../server';
 
 test.describe('keyboard navigation', () => {
   const filePrefix = 'listbox-focus';

test/rendering/listbox/listbox.spec.js

@@ -1,22 +1,19 @@
 import { test, expect } from '@playwright/test';
 import { act } from '@testing-library/react';
 import fs from 'fs';
-import path from 'path';
+import getPage from '../setup';
+import startServer, { getPaths } from '../server';
+import { execSequence } from '../testUtils';
 
-const getPage = require('../setup');
-const startServer = require('../server');
-const { execSequence } = require('../testUtils');
+const paths = getPaths('listbox/__fixtures__');
 
-const paths = path.join(__dirname, '__fixtures__');
-
-function shouldIgnoreFile(file) {
-  // Ignore subpaths
+const shouldIgnoreFile = (file) => {
   const IGNORE_PATTERNS = [];
   const INCLUDE_PATTERNS = [/\.js/];
   const ignore =
     IGNORE_PATTERNS.some((P) => file.search(P) > -1) || INCLUDE_PATTERNS.some((P) => file.search(P) === -1);
   return ignore;
-}
+};
 
 test.describe('listbox mashup rendering test', () => {
   const object = '[data-type="listbox"]';
@@ -31,7 +28,7 @@ test.describe('listbox mashup rendering test', () => {
   test.use({ viewport: { width: 300, height: 500 } });
 
   test.beforeEach(async () => {
-    ({ url, destroy: destroyServer } = await startServer(8050));
+    ({ url, destroy: destroyServer } = await startServer(8049));
     ({ page, destroy: destroyBrowser } = await getPage());
   });
 
@@ -93,7 +90,6 @@ test.describe('listbox mashup rendering test', () => {
     await search.click();
     await search.fill('B');
 
-    // Note that since we don't have a backend providing search results, we can't test highlighting and selected (green) rows.
     const selector = await page.locator(listboxSelector);
     const image = await selector.screenshot({ caret: 'hide' });
     return expect(image).toMatchSnapshot(FILE_NAME);
@@ -109,7 +105,6 @@ test.describe('listbox mashup rendering test', () => {
     await search.click();
     await search.fill('B');
 
-    // Note that since we don't have a backend providing search results, we can't test highlighting and selected (green) rows.
     const selector = await page.locator(listboxSelector);
     const image = await selector.screenshot({ caret: 'hide' });
     return expect(image).toMatchSnapshot(FILE_NAME);
@@ -120,7 +115,6 @@ test.describe('listbox mashup rendering test', () => {
 
     await page.goto(`${url}/listbox/listbox.html?scenario=noToolbar`, { waitUntil: 'networkidle' });
 
-    // Note that since we don't have a backend providing search results, we can't test highlighting and selected (green) rows.
     const selector = await page.locator(listboxSelector);
     const image = await selector.screenshot({ caret: 'hide' });
     return expect(image).toMatchSnapshot(FILE_NAME);
@@ -137,7 +131,6 @@ test.describe('listbox mashup rendering test', () => {
     });
 
     await page.waitForSelector(toolbarPopoverSelector);
-    // Wait for animation
     await new Promise((resolve) => {
       setTimeout(() => {
         resolve();

test/rendering/playwright.config.rendering.js

@@ -1,4 +1,6 @@
-const config = {
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
   reporter: [
     ['dot'],
     ['html', { outputFolder: './reports/html' }],
@@ -11,7 +13,7 @@ const config = {
     toMatchSnapshot: { threshold: 0.00025 },
     timeout: 30000,
   },
-  workers: process.env.CI ? 1 : undefined,
+  workers: 1,
   use: {
     browserName: 'chromium',
     actionTimeout: 30000,
@@ -21,6 +23,4 @@ const config = {
     video: 'retain-on-failure',
     screenshot: 'only-on-failure',
   },
-};
-
-module.exports = config;
+});

test/rendering/server.js

@@ -1,13 +1,17 @@
-const express = require('express');
-const path = require('path');
+import express from 'express';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
 
-async function startServer(port) {
+const FN = fileURLToPath(import.meta.url);
+const DN = dirname(FN);
+
+export default async function startServer(port) {
   const app = express();
   // const port = 8050;
   const url = `http://localhost:${port}`;
-  app.use(express.static(path.resolve(__dirname)));
-  app.use('/apis', express.static(path.resolve(__dirname, '../../apis')));
-  app.use('/node_modules', express.static(path.resolve(__dirname, '../../node_modules')));
+  app.use(express.static(path.resolve(DN)));
+  app.use('/apis', express.static(path.resolve(DN, '../../apis')));
+  app.use('/node_modules', express.static(path.resolve(DN, '../../node_modules')));
 
   let server;
 
@@ -28,4 +32,6 @@ async function startServer(port) {
   };
 }
 
-module.exports = startServer;
+export function getPaths(dir) {
+  return path.join(DN, dir);
+}

test/rendering/setup.js

@@ -1,6 +1,6 @@
-const { chromium } = require('@playwright/test');
+import { chromium } from '@playwright/test';
 
-async function getPage() {
+export default async function getPage() {
   const browser = await chromium.launch();
   const page = await browser.newPage();
   page.setDefaultNavigationTimeout(30000);
@@ -12,5 +12,3 @@ async function getPage() {
 
   return { browser, page, destroy };
 }
-
-module.exports = getPage;

test/rendering/sheet/sheet.spec.js

@@ -1,7 +1,6 @@
 import { test, expect } from '@playwright/test';
-
-const getPage = require('../setup');
-const startServer = require('../server');
+import getPage from '../setup';
+import startServer from '../server';
 
 test.describe('sheet mashup rendering test', () => {
   const object = '[data-type="sheet"]';
@@ -29,6 +28,7 @@ test.describe('sheet mashup rendering test', () => {
     const image = await selector.screenshot();
     return expect(image).toMatchSnapshot(FILE_NAME);
   });
+
   test('sheet bound Less test', async () => {
     const FILE_NAME = 'sheet_bound_less.png';
 

test/rendering/testUtils.js

@@ -1,7 +1,7 @@
-const path = require('path');
-const jimp = require('jimp');
+import path from 'path';
+import jimp from 'jimp';
 
-async function looksLike(fileName, capturedPath) {
+export async function looksLike(fileName, capturedPath) {
   const artifactsPath = path.resolve(__dirname, './__artifacts__/');
   const storedPath = path.resolve(artifactsPath, 'baseline', fileName);
 
@@ -23,7 +23,7 @@ async function looksLike(fileName, capturedPath) {
  * @param {function[]} items An array of items (e.g. selectors) that will be sent into the action function, iteratively.
  * @returns {Promise} Resolves true when done.
  */
-async function execSequence(items, action) {
+export async function execSequence(items, action) {
   const takeAction = async (index = 0) => {
     if (index >= items.length) {
       return true; // done
@@ -34,8 +34,3 @@ async function execSequence(items, action) {
   };
   return takeAction();
 }
-
-module.exports = {
-  execSequence,
-  looksLike,
-};