@enact/ui-test-utils 1.0.10 → 2.0.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/ui-test-utils",
-  "version": "1.0.10",
+  "version": "2.0.0-alpha.2",
   "description": "UI Testing for the Enact framework",
   "repository": "https://github.com/enactjs/ui-test-utils",
   "main": "index.js",
@@ -14,38 +14,39 @@
   "author": "Roy Sutton <roy.sutton@lge.com>",
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=14.14.0"
+    "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@wdio/cli": "^7.36.0",
-    "@wdio/dot-reporter": "^7.33.0",
-    "@wdio/local-runner": "^7.36.0",
-    "@wdio/mocha-framework": "^7.33.0",
-    "@wdio/selenium-standalone-service": "^7.33.0",
-    "@wdio/spec-reporter": "^7.33.0",
-    "@wdio/static-server-service": "^7.33.0",
-    "chalk": "^5.3.0",
-    "cross-spawn": "^7.0.3",
-    "expect-webdriverio": "^3.6.0",
-    "fs-extra": "^11.2.0",
+    "@wdio/cli": "^9.10.0",
+    "@wdio/dot-reporter": "^9.9.0",
+    "@wdio/local-runner": "9.2.1",
+    "@wdio/mocha-framework": "^9.9.0",
+    "@wdio/spec-reporter": "^9.9.0",
+    "@wdio/static-server-service": "^9.9.0",
+    "@wdio/visual-service": "^6.3.2",
+    "chalk": "^5.4.1",
+    "cross-spawn": "^7.0.6",
+    "expect-webdriverio": "^5.1.0",
+    "fs-extra": "^11.3.0",
     "minimist": "^1.2.8",
     "query-string": "^7.1.3",
     "ramda": "^0.30.1",
     "readdirp": "^3.6.0",
     "wdio-docker-service": "^3.2.1",
-    "wdio-image-comparison-service": "^5.0.3",
-    "webdriverio": "^7.36.0"
+    "wdio-selenium-standalone-service": "^0.0.12",
+    "webdriverio": "^9.10.0"
   },
   "devDependencies": {
-    "eslint": "^8.57.0",
-    "eslint-config-enact": "^4.2.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.30.0"
+    "eslint": "^9.21.0",
+    "eslint-config-enact": "^5.0.0-alpha.5",
+    "globals": "^15.14.0"
   },
   "overrides": {
+    "cross-spawn": "$cross-spawn",
+    "express": "^4.21.2",
     "ws": "^8.18.0"
   }
 }

package/screenshot/utils/confHelpers.js

@@ -20,7 +20,7 @@ function getScreenshotName (basePath) {
 		// Replace problematic filenames. Windows is much more restrictive.
 		testName = testName.replace(/[/\\:?*"|<>]/g, '_');
 
-		// shorten the name with a little bit of leading context to help find the file manually if necessary
+		// shorten the name with a bit of leading context to help find the file manually if necessary
 		testName = testName.substring(0, 128) + '-' + cryptoModule.createHash('md5').update(testName).digest('hex');
 		let screenshotFileName = path.join(basePath, ...testNameParts, `${testName}.png`);
 		return screenshotFileName.replace(/ /g, '_');
@@ -67,6 +67,14 @@ function beforeTest (testData) {
 	if (testData && testData.title && testData.title.indexOf('/') > 0) {
 		const filename = generateReferenceName({test: testData});
 		testData.ctx.isNewScreenshot = !fs.existsSync(filename);
+
+		// if there are no reference screenshots, we must create the folder before running the tests.
+		const specsPath = testData.title.split('~/');
+		specsPath.pop();
+		const referenceSpecsPath = path.join('tests/screenshot/dist/screenshots/reference', ...specsPath).replace(/ /g, '_');
+		if (testData.ctx.isNewScreenshot) {
+			fs.mkdirSync(referenceSpecsPath, {recursive: true});
+		}
 	}
 }
 

package/screenshot/wdio.conf.js

@@ -4,12 +4,13 @@ const {afterTest, baselineFolder, beforeTest, onComplete, onPrepare, screenshotF
 exports.config = configure({
 	base: 'screenshot',
 	services: [[
-		'image-comparison',
+		'visual',
 		{
 			baselineFolder: baselineFolder,
 			formatImageName: '{tag}',
 			screenshotPath: screenshotFolder,
-			autoSaveBaseline: true
+			autoSaveBaseline: true,
+			waitForFontsLoaded: true
 		}
 	]],
 	//

package/screenshot/wdio.tv.conf.js

@@ -33,10 +33,15 @@ exports.config = Object.assign(
 			maxInstances: 1,
 			//
 			browserName: 'chrome',
+			/* WebdriverIO v8.14 and above downloads and uses the latest Chrome version when running tests.
+			We need to specify a browser version that match chromedriver version running in CI/CD environment to
+			ensure testing accuracy.
+			TODO: Update this version when chromedriver version in CI/CD is updated */
+			browserVersion: '120.0.6099.109',
 			'goog:chromeOptions': {
-				w3c: false,
 				debuggerAddress: `${process.env.TV_IP}:9998`
-			}
+			},
+			'wdio:enforceWebDriverClassic': true
 		}],
 
 		//
@@ -47,8 +52,6 @@ exports.config = Object.assign(
 		/**
 		 * Gets executed before test execution begins. At this point you can access to all global
 		 * variables like `browser`. It is the perfect place to define custom commands.
-		 * @param {Array.<Object>} capabilities list of capabilities details
-		 * @param {Array.<String>} specs List of spec file paths that are to be run
 		 */
 		before: function () {
 			if (config.before) {

package/src/build-apps.js

@@ -31,7 +31,8 @@ function buildApps (base) {
 						'--output',
 						path.join('tests', base, 'dist', 'framework'),
 						'--framework',
-						'--externals-polyfill'
+						'--externals-polyfill',
+						process.argv.includes('--no-animation') ? '--no-animation' : null
 					]
 				});
 			}

package/ui/wdio.conf.js

@@ -19,15 +19,17 @@ exports.config = configure({
 	// resolved to continue.
 	/**
 	 * Gets executed once before all workers get launched.
-	 * @param {Object} config wdio configuration object
-	 * @param {Array.<Object>} capabilities list of capabilities details
 	 */
 	onPrepare: function () {
 		return buildApps('ui');
 	},
 	/**
 	 * Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
-	 * @param {Object} test test details
+	 * @param {Object} testCase test details
+	 * @param {Object} _context scope object the test was executed with (unused)
+	 * @param {Object} result test result
+	 * @param {Number} result.duration duration of test
+	 * @param {Boolean} result.passed true if test has passed, otherwise false
 	 */
 	afterTest: function (testCase, _context, {duration, passed}) {
 		if (duration > 2000) {

package/ui/wdio.tv.conf.js

@@ -9,10 +9,15 @@ exports.config = Object.assign(
 			maxInstances: 1,
 
 			browserName: 'chrome',
+			/* WebdriverIO v8.14 and above downloads and uses the latest Chrome version when running tests.
+			We need to specify a browser version that match chromedriver version running in CI/CD environment to
+			ensure testing accuracy.
+			TODO: Update this version when chromedriver version in CI/CD is updated */
+			browserVersion: '120.0.6099.109',
 			'goog:chromeOptions': {
-				w3c: false,
 				debuggerAddress: `${process.env.TV_IP}:9998`
-			}
+			},
+			'wdio:enforceWebDriverClassic': true
 		}],
 
 		baseUrl: `http://${ipAddress()}:4567`,

package/utils/runTest.js

@@ -54,7 +54,7 @@ const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
 								let testCaseName = testNameParts.pop();
 								// Replace problematic filenames. Windows is much more restrictive.
 								testCaseName = testCaseName.replace(/[/\\:?*"|<>]/g, '_');
-								// shorten the name with a little bit of leading context to help find the file manually if necessary
+								// shorten the name with a bit of leading context to help find the file manually if necessary
 								testCaseName = testCaseName.substring(0, 128) + '-' + cryptoModule.createHash('md5').update(testCaseName).digest('hex');
 								const screenshotFileName = (component + '/' + testName + '/' + testCaseName);
 
@@ -66,7 +66,8 @@ const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
 								expect(await browser.checkScreen(screenshotFileName, {
 									disableCSSAnimation: true,
 									ignoreNothing: true,
-									rawMisMatchPercentage: true
+									rawMisMatchPercentage: true,
+									waitForFontsLoaded: true
 								})).toBe(0);
 							});
 						});

package/.eslintrc.js

@@ -1,25 +0,0 @@
-module.exports = {
-	globals: {
-		'browser': true,
-		'expect': true,
-		'$': true,
-		'$$': true
-	},
-	env: {
-		mocha: true,
-		node: true
-	},
-	extends: 'enact/strict',
-	parserOptions: {
-		ecmaFeatures: {
-			jsx: true
-		},
-		ecmaVersion: 'latest',
-		sourceType: 'module'
-	},
-	rules: {
-		'max-nested-callbacks': 'off',
-		'no-console': 'off',
-		'react/forbid-foreign-prop-types': 'off' // proptypes not removed in storybook config
-	}
-};