@enact/ui-test-utils 2.0.1 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## [3.0.0] (July 30, 2025)
+
+* Migrated to ESM
+
 ## [2.0.1] (July 18, 2025)
 
 * Updated dependencies.

package/README.md

@@ -9,29 +9,29 @@ and must be configured as a `devDependency` of the UI library.
 1. Add `@enact/ui-test-utils` as a devDependency: `npm i --save-dev @enact/ui-test-utils`
 2. Create the `tests/ui` folder structure within the UI library
 3. Add `apps` and `specs` folders to `tests/ui`
-4. Add local WebDriver configuration files within `tests/ui`
+4. Add local WebDriver configuration files within `tests/ui/config`
 
-    * `wdio.conf.js` containing `module.exports = require('@enact/ui-test-utils/ui/wdio.conf.js');`
-    * `wdio.docker.conf.js` containing `module.exports = require('@enact/ui-test-utils/ui/wdio.docker.conf.js');`
-    * `wdio.tv.conf.js` containing `module.exports = require('@enact/ui-test-utils/ui/wdio.tv.conf.js');`
+    * `wdio.conf.js` containing `import config from '@enact/ui-test-utils/ui/wdio.conf.js'; export default uiConfig;`
+    * `wdio.docker.conf.js` containing `import {uiDockerConfig} from '@enact/ui-test-utils/ui/wdio.docker.conf.js'; export default config;`
+    * `wdio.tv.conf.js` containing `import {uiTVConfig} from '@enact/ui-test-utils/ui/wdio.tv.conf.js'; export default config;`
 
-* and `tests/screenshot`
+* and `tests/screenshot/config`
 
-    * `wdio.conf.js` containing `module.exports = require('@enact/ui-test-utils/screenshot/wdio.conf.js');`
-    * `wdio.docker.conf.js` containing `module.exports = require('@enact/ui-test-utils/screenshot/wdio.docker.conf.js');`
-    * `wdio.tv.conf.js` containing `module.exports = require('@enact/ui-test-utils/screenshot/wdio.tv.conf.js');`
+    * `wdio.conf.js` containing `import config from '@enact/ui-test-utils/screenshot/wdio.conf.js'; export default ssConfig;`
+    * `wdio.docker.conf.js` containing `import {ssDockerConfig} from '@enact/ui-test-utils/screenshot/wdio.docker.conf.js'; export default config;`
+    * `wdio.tv.conf.js` containing `import {ssTVConfig} from '@enact/ui-test-utils/screenshot/wdio.tv.conf.js'; export default config;`
 
 5. Add npm scripts for each of the above configuration files. There are likely other scripts already
    defined so these will be added to the existing scripts.
 
 ```json
    "scripts": {
-      "test-ui": "start-tests tests/ui/wdio.conf.js",
-      "test-ui-docker": "start-tests tests/ui/wdio.docker.conf.js",
-      "test-ui-tv": "start-tests tests/ui/wdio.tv.conf.js",
-      "test-ss": "start-tests tests/screenshot/wdio.conf.js",
-      "test-ss-docker": "start-tests tests/screenshot/wdio.docker.conf.js",
-      "test-ss-tv": "start-tests tests/screenshot/wdio.tv.conf.js",
+      "test-ui": "start-tests tests/ui/config/wdio.conf.js",
+      "test-ui-docker": "start-tests tests/ui/config/wdio.docker.conf.js",
+      "test-ui-tv": "start-tests tests/ui/config/wdio.tv.conf.js",
+      "test-ss": "start-tests tests/screenshot/config/wdio.conf.js",
+      "test-ss-docker": "start-tests tests/screenshot/config/wdio.docker.conf.js",
+      "test-ss-tv": "start-tests tests/screenshot/config/wdio.tv.conf.js",
    }
 ```
 

package/config/wdio.conf.js

@@ -1,5 +1,5 @@
-const parseArgs = require('minimist');
-const {execSync} = require('child_process');
+import parseArgs from 'minimist';
+import {execSync} from 'child_process';
 
 const args = parseArgs(process.argv);
 
@@ -7,7 +7,7 @@ const visibleBrowser = !!args.visible,
 	maxInstances = args.instances || 5,
 	offline = args.offline;
 
-module.exports.configure = (options) => {
+export const configure = (options) => {
 	const {base, services} = options;
 	const opts = Object.assign({}, options);
 
@@ -83,7 +83,7 @@ module.exports.configure = (options) => {
 			// the config file unless it's absolute.
 			//
 			specs: [
-				'../../tests/' + base + '/specs/**/*-specs.js'
+				'../../../tests/' + base + '/specs/**/*-specs.js'
 			],
 			// Patterns to exclude.
 			exclude: [
@@ -220,8 +220,6 @@ module.exports.configure = (options) => {
 			 * variables like `browser`. It is the perfect place to define custom commands.
 			 */
 			before: function () {
-				require('expect-webdriverio');
-
 				global.wdioExpect = global.expect;
 
 				if (options.before) {

package/eslint.config.js

@@ -1,5 +1,5 @@
-const enactStrict = require('eslint-config-enact/strict');
-const globals = require('globals');
+import enactStrict from 'eslint-config-enact/strict.js';
+import globals from 'globals';
 
 const customGlobals = {
 	'browser': true,
@@ -8,7 +8,7 @@ const customGlobals = {
 	'$$': true
 };
 
-module.exports = [
+export default [
 	...enactStrict,
 	{
 		languageOptions: {

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@enact/ui-test-utils",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@enact/ui-test-utils",
-      "version": "2.0.1",
+      "version": "3.0.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@wdio/cli": "^9.15.0",

package/package.json

@@ -1,9 +1,18 @@
 {
   "name": "@enact/ui-test-utils",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "UI Testing for the Enact framework",
   "repository": "https://github.com/enactjs/ui-test-utils",
-  "main": "index.js",
+  "type": "module",
+  "exports": {
+    "./screenshot/wdio.conf.js": "./screenshot/wdio.conf.js",
+    "./screenshot/wdio.docker.conf.js": "./screenshot/wdio.docker.conf.js",
+    "./screenshot/wdio.tv.conf.js": "./screenshot/wdio.tv.conf.js",
+    "./ui/wdio.conf.js": "./ui/wdio.conf.js",
+    "./ui/wdio.docker.conf.js": "./ui/wdio.docker.conf.js",
+    "./ui/wdio.tv.conf.js": "./ui/wdio.tv.conf.js",
+    "./utils": "./utils/index.js"
+  },
   "bin": {
     "start-tests": "./start-tests.js"
   },

package/screenshot/index.js

@@ -1,6 +1,6 @@
 import {createRoot} from 'react-dom/client';
 import App, {testMetadata} from 'UI_TEST_APP_ENTRY';
-import TestChooser from './TestChooser';
+import TestChooser from './TestChooser.js';
 
 const url = new URL(window.location.href);
 

package/screenshot/package.json

@@ -1,4 +1,5 @@
 {
   "name": "@enact/ss-tests",
-  "main": "index.js"
+  "main": "index.js",
+  "type": "module"
 }

package/screenshot/utils/confHelpers.js

@@ -1,9 +1,9 @@
-const cryptoModule = require('crypto'),
-	path = require('path'),
-	fs = require('fs');
+import cryptoModule from 'crypto';
+import path from 'path';
+import fs from 'fs';
 
-const buildApps = require('../../src/build-apps');
-const makeHeader = require('./headerTemplate');
+import buildApps from '../../src/build-apps.js';
+import {makeHeader} from './headerTemplate.js';
 
 const newScreenshotFilename = 'tests/screenshot/dist/newFiles.html',
 	failedScreenshotFilename = 'tests/screenshot/dist/failedTests.html',
@@ -139,8 +139,7 @@ function onComplete () {
 	}
 }
 
-
-module.exports = {
+export {
 	afterTest,
 	baselineFolder,
 	beforeTest,

package/screenshot/utils/headerTemplate.js

@@ -1,4 +1,4 @@
-module.exports = function (title) {
+export function makeHeader (title) {
 	return `<html>
 <head>
 	<link rel="stylesheet" href="utils/styles.css">
@@ -31,4 +31,4 @@ module.exports = function (title) {
 	<script>
 		const results = [
 `;
-};
+}

package/screenshot/wdio.conf.js

@@ -1,7 +1,7 @@
-const {configure} = require('../config/wdio.conf.js');
-const {afterTest, baselineFolder, beforeTest, onComplete, onPrepare, screenshotFolder} = require('./utils/confHelpers.js');
+import {configure} from '../config/wdio.conf.js';
+import {afterTest, baselineFolder, beforeTest, onComplete, onPrepare, screenshotFolder} from './utils/confHelpers.js';
 
-exports.config = configure({
+const config = configure({
 	base: 'screenshot',
 	services: [[
 		'visual',
@@ -44,3 +44,6 @@ exports.config = configure({
 	 */
 	onComplete: onComplete
 });
+
+export default {config};
+export {config};

package/screenshot/wdio.docker.conf.js

@@ -1,14 +1,14 @@
-const ipAddress = require('../utils/ipAddress.js');
-const {config} = require('./wdio.conf.js');
+import {ipAddress} from '../utils/ipAddress.js';
+import {config as ssConfig} from './wdio.conf.js';
 
 // Remove selenium-standalone and replace with docker service
-const services = config.services
+const services = ssConfig.services
 	.filter(service => service[0] !== 'selenium-standalone')
 	.concat(['docker']);
 
-exports.config = Object.assign(
+const config = Object.assign(
 	{},
-	config,
+	ssConfig,
 	{
 		baseUrl: `http://${ipAddress()}:4567`,
 		services,
@@ -23,3 +23,5 @@ exports.config = Object.assign(
 		}
 	}
 );
+
+export const ssDockerConfig = {config};

package/screenshot/wdio.tv.conf.js

@@ -1,16 +1,16 @@
-const ipAddress = require('../utils/ipAddress.js');
-const {config} = require('./wdio.conf.js');
+import {ipAddress} from '../utils/ipAddress.js';
+import {config as ssConfig} from './wdio.conf.js';
 
-const services = config.services.map(service => {
+const services = ssConfig.services.map(service => {
 	if (service[0] === 'novus-visual-regression') {
 		delete service[1].viewports;
 	}
 	return service;
 });
 
-exports.config = Object.assign(
+const config = Object.assign(
 	{},
-	config,
+	ssConfig,
 	{
 		services,
 
@@ -54,8 +54,8 @@ exports.config = Object.assign(
 		 * variables like `browser`. It is the perfect place to define custom commands.
 		 */
 		before: function () {
-			if (config.before) {
-				config.before();
+			if (ssConfig.before) {
+				ssConfig.before();
 			}
 
 			browser._options = {remote: true};
@@ -67,3 +67,5 @@ exports.config = Object.assign(
 		}
 	}
 );
+
+export const ssTVConfig = {config};

package/src/build-apps.js

@@ -1,9 +1,10 @@
-const path = require('path');
+import path from 'path';
 
 let chalk;
-const spawn = require('cross-spawn');
-const fs = require('fs-extra');
-const readdirp = require('readdirp');
+import spawn from 'cross-spawn';
+import fs from 'fs-extra';
+import readdirp from 'readdirp';
+import * as url from 'url';
 
 const env = {
 	ILIB_BASE_PATH: '/framework/ilib',
@@ -16,6 +17,9 @@ function findViews (base) {
 	return readdirp.promise(path.join('tests', base, 'apps'), {fileFilter: '*-View.js'});
 }
 
+// eslint-disable-next-line no-shadow
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+
 function buildApps (base) {
 	if (process.argv.includes('--skip-build')) return;
 	console.log('Building content:\n');
@@ -140,5 +144,6 @@ function epack ({file, opts}) {
 	}
 }
 
-module.exports = buildApps;
-if (require.main === module) buildApps();
+export default buildApps;
+const modulePath = url.fileURLToPath(import.meta.url);
+if (process.argv[1] === modulePath) buildApps();

package/start-tests.js

@@ -1,4 +1,4 @@
 #!/usr/bin/env node
-const cli = require('@wdio/cli');
+import * as cli from '@wdio/cli';
 
 cli.run();

package/ui/package.json

@@ -1,4 +1,5 @@
 {
   "name":"@enact/ui-tests",
-  "main": "index.js"
+  "main": "index.js",
+  "type": "module"
 }

package/ui/wdio.conf.js

@@ -1,13 +1,13 @@
-const buildApps = require('../src/build-apps'),
-	fs = require('fs');
+import buildApps from '../src/build-apps.js';
+import fs from 'fs';
 let chalk;
 import('chalk').then(({default: _chalk}) => {
 	chalk = _chalk;
 });
 
-const {configure} = require('../config/wdio.conf.js');
+import {configure} from '../config/wdio.conf.js';
 
-exports.config = configure({
+const config = configure({
 	base: 'ui',
 	//
 	// =====
@@ -59,3 +59,6 @@ exports.config = configure({
 		}
 	}
 });
+
+export default {config};
+export {config};

package/ui/wdio.docker.conf.js

@@ -1,14 +1,14 @@
-const ipAddress = require('../utils/ipAddress.js');
-const {config} = require('./wdio.conf.js');
+import {ipAddress} from '../utils/ipAddress.js';
+import {config as uiConfig} from './wdio.conf.js';
 
 // Remove selenium-standalone and replace with docker service
-const services = config.services
+const services = uiConfig.services
 	.filter(service => service[0] !== 'selenium-standalone')
 	.concat(['docker']);
 
-exports.config = Object.assign(
+const config = Object.assign(
 	{},
-	config,
+	uiConfig,
 	{
 		baseUrl: `http://${ipAddress()}:4567`,
 		services,
@@ -23,3 +23,5 @@ exports.config = Object.assign(
 		}
 	}
 );
+
+export const uiDockerConfig = {config};

package/ui/wdio.tv.conf.js

@@ -1,9 +1,9 @@
-const ipAddress = require('../utils/ipAddress.js');
-const {config} = require('./wdio.conf.js');
+import {ipAddress} from '../utils/ipAddress.js';
+import {config as uiConfig} from './wdio.conf.js';
 
-exports.config = Object.assign(
+const config = Object.assign(
 	{},
-	config,
+	uiConfig,
 	{
 		capabilities: [{
 			// maxInstances can get overwritten per capability. So if you have an in-house Selenium
@@ -26,11 +26,13 @@ exports.config = Object.assign(
 		baseUrl: `http://${ipAddress()}:4567`,
 
 		before: function () {
-			if (config.before) {
-				config.before();
+			if (uiConfig.before) {
+				uiConfig.before();
 			}
 
 			browser._options = {remote: true};
 		}
 	}
 );
+
+export const uiTVConfig = {config};

package/utils/Page.js

@@ -1,8 +1,6 @@
-'use strict';
+import queryString from 'query-string';
 
-const queryString = require('query-string');
-
-class Page {
+export class Page {
 	constructor () {
 		this.title = 'Untitled Test';
 		this._url = '';
@@ -170,7 +168,3 @@ class Page {
 		);
 	}
 }
-
-module.exports = {
-	Page
-};

package/utils/generateTestData.js

@@ -75,7 +75,7 @@ const stringifyProps = (props = {}) => {
 	return formattedString.length === 0 ? 'default' : formattedString;
 };
 
-const generateTestData = (component, componentTests) => {
+export const generateTestData = (component, componentTests) => {
 	let metaData = [];
 	componentTests.forEach((testCase) => {
 		let title = testCase.title;
@@ -104,7 +104,3 @@ const generateTestData = (component, componentTests) => {
 
 	return metaData;
 };
-
-module.exports = {
-	generateTestData
-};

package/utils/index.js

@@ -1,7 +1,7 @@
-const {generateTestData} = require('./generateTestData');
-const {Page} = require('./Page');
-const {runTest} = require('./runTest');
-const {
+import {generateTestData} from './generateTestData.js';
+import {Page} from './Page.js';
+import {runTest} from './runTest.js';
+import {
 	componentSelector,
 	element,
 	expectOrdering,
@@ -9,10 +9,10 @@ const {
 	getSubComponent,
 	getText,
 	hasClass
-} = require('./selector');
-const {generateDate, urlParamsToObject} = require('./qs');
+} from './selector.js';
+import {generateDate, urlParamsToObject} from './qs.js';
 
-module.exports = {
+export {
 	componentSelector,
 	element,
 	expectOrdering,

package/utils/ipAddress.js

@@ -1,4 +1,4 @@
-const os = require('os');
+import os from 'os';
 
 function ipAddress () {
 	const ifaces = os.networkInterfaces();
@@ -17,4 +17,4 @@ function ipAddress () {
 	return address;
 }
 
-module.exports = ipAddress;
+export {ipAddress};

package/utils/qs.js

@@ -1,4 +1,4 @@
-const queryString = require('query-string');
+import queryString from 'query-string';
 
 const isJson = (str) => {
 	try {
@@ -9,7 +9,7 @@ const isJson = (str) => {
 	return true;
 };
 
-const urlParamsToObject = (query = window.location.search) => {
+export const urlParamsToObject = (query = window.location.search) => {
 	let parsed = queryString.parse(query);
 	delete parsed.locale;
 
@@ -23,7 +23,7 @@ const urlParamsToObject = (query = window.location.search) => {
 };
 
 // Generate a date (without time component) from a string in the format YYYY-MM-DD
-const generateDate = dateStr => {
+export const generateDate = dateStr => {
 	const date = new Date(),
 		values = dateStr.match(/(\d{4})-(\d{2})-(\d{2})/);
 
@@ -40,8 +40,3 @@ const generateDate = dateStr => {
 
 	return date;
 };
-
-module.exports = {
-	generateDate,
-	urlParamsToObject
-};

package/utils/runTest.js

@@ -1,6 +1,5 @@
-'use strict';
-const cryptoModule = require('crypto');
-const parseArgs = require('minimist');
+import cryptoModule from 'crypto';
+import parseArgs from 'minimist';
 
 const args = parseArgs(process.argv);
 
@@ -9,7 +8,7 @@ const pattern = args.component, // Component group to match
 	titlePattern = args.title,  // Pattern for matching test case title
 	maxInstances = args.instances || 5;  // concurrent instances for 'manual' concurrency
 
-const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
+export const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
 	if (concurrency && (concurrency > maxInstances)) {
 		return;
 	}
@@ -77,7 +76,3 @@ const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
 		});
 	});
 };
-
-module.exports = {
-	runTest
-};

package/utils/selector.js

@@ -1,6 +1,4 @@
-'use strict';
-
-const curry = require('ramda/src/curry');
+import curry from 'ramda/src/curry';
 
 const toLower = (str) => str.replace(/^\w/, (chr) => chr.toLowerCase());
 
@@ -54,7 +52,7 @@ const hasClass = curry(async (className, el) => {
 	return elementClass.includes(className);
 });
 
-module.exports = {
+export {
 	componentSelector,
 	element,
 	expectOrdering,