@enact/ui-test-utils 0.5.4 → 0.8.0

package/config/wdio.conf.js

@@ -1,4 +1,5 @@
 const parseArgs = require('minimist');
+const {execSync} = require('child_process');
 
 const args = parseArgs(process.argv);
 
@@ -14,6 +15,40 @@ module.exports.configure = (options) => {
 	delete opts.before;
 	delete opts.services;
 
+	if (!process.env.CHROME_DRIVER) {
+		if (process.env.TV_IP && process.argv.find(arg => arg.includes('tv.conf'))) {
+			process.env.CHROME_DRIVER = 2.44; // Currently, TV supports 83 and lower, but keep the previous version for safety.
+		} else {
+			let chromeVersionMajorNumber;
+			try {
+				if (process.platform === 'win32') {
+					// Windows
+					const chromeVersion = /\d+/.exec(execSync('wmic datafile where "name=\'C:\\\\Program Files\\\\Google\\\\Chrome\\\\Application\\\\chrome.exe\'" get Version /value').toString());
+					chromeVersionMajorNumber = (chromeVersion && chromeVersion[0]);
+				} else if (process.platform === 'darwin') {
+					// Mac
+					const chromeVersion = /Chrome (\d+)/.exec(execSync('/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --version'));
+					chromeVersionMajorNumber = (chromeVersion && chromeVersion[1]);
+				} else {
+					const chromeVersion = /Chrome (\d+)/.exec(execSync('google-chrome -version'));
+					chromeVersionMajorNumber = (chromeVersion && chromeVersion[1]);
+				}
+				const chromeDriverVersion = execSync('curl https://chromedriver.storage.googleapis.com/LATEST_RELEASE' + (chromeVersionMajorNumber ? ('_' + chromeVersionMajorNumber) : ''));
+
+				if (chromeDriverVersion.includes('Error') || !/\d+.\d+.\d+.\d+/.exec(chromeDriverVersion)) {
+					throw new Error();
+				} else {
+					process.env.CHROME_DRIVER = chromeDriverVersion;
+				}
+			} catch (error) {
+				console.log('ERROR: Cannnot find Chrome driver from Chrome ' + chromeVersionMajorNumber);
+				process.env.CHROME_DRIVER = 2.44;
+			}
+		}
+
+		console.log('Chrome Driver Version : ' + process.env.CHROME_DRIVER);
+	}
+
 	return Object.assign(
 		opts,
 		{
@@ -72,7 +107,7 @@ module.exports.configure = (options) => {
 				//
 				browserName: 'chrome',
 				'goog:chromeOptions': visibleBrowser ? {} : {
-					args: ['--headless', '--window-size=1920,1280']
+					args: ['--headless', '--window-size=1920,1080']
 				}
 			}],
 			//
@@ -138,7 +173,7 @@ module.exports.configure = (options) => {
 					args: {
 						drivers : {
 							chrome : {
-								version : '2.44',
+								version : process.env.CHROME_DRIVER,
 								arch    : process.arch
 							}
 						}
@@ -146,7 +181,7 @@ module.exports.configure = (options) => {
 					installArgs: {
 						drivers : {
 							chrome : {
-								version : '2.44',
+								version : process.env.CHROME_DRIVER,
 								arch    : process.arch,
 								baseURL : 'https://chromedriver.storage.googleapis.com'
 							}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/ui-test-utils",
-  "version": "0.5.4",
+  "version": "0.8.0",
   "description": "UI Testing for the Enact framework",
   "main": "index.js",
   "bin": {
@@ -16,40 +16,38 @@
     "access": "public"
   },
   "dependencies": {
-    "@wdio/cli": "^6.1.17",
-    "@wdio/dot-reporter": "^6.1.14",
-    "@wdio/local-runner": "^6.1.17",
-    "@wdio/mocha-framework": "^6.1.17",
-    "@wdio/selenium-standalone-service": "^6.1.14",
-    "@wdio/spec-reporter": "^6.1.14",
-    "@wdio/static-server-service": "^6.1.14",
-    "@wdio/sync": "^6.1.14",
-    "chai": "4.2.0",
-    "chalk": "^4.1.0",
+    "@wdio/cli": "^7.9.0",
+    "@wdio/dot-reporter": "^7.9.0",
+    "@wdio/local-runner": "^7.9.0",
+    "@wdio/mocha-framework": "^7.9.0",
+    "@wdio/selenium-standalone-service": "^7.8.0",
+    "@wdio/spec-reporter": "^7.9.0",
+    "@wdio/static-server-service": "^7.8.0",
+    "chai": "4.3.4",
+    "chalk": "^4.1.2",
     "cross-spawn": "^7.0.3",
     "dirty-chai": "2.0.1",
-    "expect-webdriverio": "^1.2.0",
-    "fs-extra": "^9.0.1",
+    "expect-webdriverio": "^3.1.0",
+    "fs-extra": "^10.0.0",
     "minimist": "^1.2.5",
-    "query-string": "^6.13.1",
-    "ramda": "^0.27.0",
-    "readdirp": "^3.4.0",
-    "wdio-docker-service": "^2.3.0",
-    "wdio-novus-visual-regression-service": "^1.2.0",
-    "webdriverio": "^6.1.7"
+    "query-string": "^7.0.1",
+    "ramda": "^0.27.1",
+    "readdirp": "^3.6.0",
+    "wdio-docker-service": "^3.1.2",
+    "wdio-image-comparison-service": "^3.0.0",
+    "webdriverio": "^7.9.0"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.4.0",
-    "eslint-config-enact": "^2.0.0",
+    "eslint": "^7.11.0",
+    "eslint-config-enact": "^3.0.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-enact": "^0.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.8",
-    "react": "^16.8.6"
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0"
   }
 }

package/screenshot/TestChooser.js

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import css from './TestChooser.module.css';
 
 // eslint-disable-next-line enact/prop-types

package/screenshot/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import {render} from 'react-dom';
 import App, {testMetadata} from 'UI_TEST_APP_ENTRY';
 import TestChooser from './TestChooser';

package/screenshot/utils/confHelpers.js

@@ -2,7 +2,6 @@ const crypto = require('crypto'),
 	path = require('path'),
 	fs = require('fs');
 
-const VisualRegressionCompare = require('wdio-novus-visual-regression-service/compare');
 const buildApps = require('../../src/build-apps');
 const makeHeader = require('./headerTemplate');
 
@@ -23,21 +22,18 @@ function getScreenshotName (basePath) {
 
 		// shorten the name with a little bit of leading context to help find the file manually if necessary
 		testName = testName.substring(0, 128) + '-' + crypto.createHash('md5').update(testName).digest('hex');
-
-		return path.join(basePath, ...testNameParts, `${testName}.png`);
+		let screenshotFileName = path.join(basePath, ...testNameParts, `${testName}.png`);
+		return screenshotFileName.replace(/ /g, '_');
 	};
 }
 
-const generateReferenceName = getScreenshotName(path.join(process.cwd(), 'tests/screenshot/dist/screenshots/reference')),
-	generateScreenshotName = getScreenshotName(path.join(process.cwd(), 'tests/screenshot/dist/screenshots/screen')),
-	generateDiffName = getScreenshotName(path.join(process.cwd(), 'tests/screenshot/dist/screenshots/diff'));
+const distPath = path.join(process.cwd(), 'tests', 'screenshot', 'dist');
+const baselineRelativePath = 'screenshots/reference';
+const screenshotRelativePath = 'screenshots/screen';
+const baselineFolder = path.join(distPath, baselineRelativePath);
+const screenshotFolder = path.join(distPath, screenshotRelativePath);
 
-const comparator = new VisualRegressionCompare.LocalCompare({
-	referenceName: generateReferenceName,
-	screenshotName: generateScreenshotName,
-	diffName: generateDiffName,
-	misMatchTolerance: 0.005
-});
+const generateReferenceName = getScreenshotName(baselineFolder);
 
 function initFile (name, content) {
 	const dir = path.dirname(name);
@@ -77,16 +73,16 @@ function beforeTest (testData) {
 function afterTest (testData, _context, {passed}) {
 	// If this doesn't include context data, not a screenshot test
 	if (testData && testData.title && testData.context && testData.context.params) {
+		const fileName = testData.context.fileName.replace(/ /g, '_') + '.png';
+		const referencePath = path.join(baselineRelativePath, fileName);
+
 		if (_context.isNewScreenshot) {
-			const filename = generateReferenceName({test: testData});
 			fs.open(newScreenshotFilename, 'a', (err, fd) => {
-				const distPath = path.join(process.cwd(), 'tests', 'screenshot', 'dist'),
-					relativeName = path.relative(distPath, filename);
 				if (err) {
 					console.error('Unable to create log file!');
 				} else {
 					const {params, url} = testData.context;
-					const output = {title: testData.title.replace(/~\//g, '/'), path: relativeName, params, url};
+					const output = {title: testData.title.replace(/~\//g, '/'), path: referencePath, params, url};
 					fs.appendFile(fd, `${JSON.stringify(output)},`, 'utf8', () => {
 						fs.close(fd);
 					});
@@ -95,11 +91,9 @@ function afterTest (testData, _context, {passed}) {
 		}
 
 		if (!passed) {
+			const screenPath = path.join(screenshotRelativePath, 'actual', fileName);
+			const diffPath = path.join(screenshotRelativePath, 'diff', fileName);
 			fs.open(failedScreenshotFilename, 'a', (err, fd) => {
-				const distPath = path.join(process.cwd(), 'tests', 'screenshot', 'dist'),
-					diffPath = path.relative(distPath, generateDiffName({test: testData})),
-					referencePath = path.relative(distPath, generateReferenceName({test: testData})),
-					screenPath = path.relative(distPath, generateScreenshotName({test: testData}));
 				if (err) {
 					console.error('Unable to create failed test log file!');
 				} else {
@@ -115,7 +109,6 @@ function afterTest (testData, _context, {passed}) {
 	}
 }
 
-
 function onComplete () {
 	const {size: newSize} = fs.statSync(newScreenshotFilename),
 		{size: failedSize} = fs.statSync(failedScreenshotFilename);
@@ -141,8 +134,9 @@ function onComplete () {
 
 module.exports = {
 	afterTest,
+	baselineFolder,
 	beforeTest,
-	comparator,
 	onComplete,
-	onPrepare
+	onPrepare,
+	screenshotFolder
 };

package/screenshot/wdio.conf.js

@@ -1,16 +1,15 @@
-// const visualRegression = require('wdio-novus-visual-regression-service');
 const {configure} = require('../config/wdio.conf.js');
-const {afterTest, beforeTest, comparator, onComplete, onPrepare} = require('./utils/confHelpers.js');
+const {afterTest, baselineFolder, beforeTest, onComplete, onPrepare, screenshotFolder} = require('./utils/confHelpers.js');
 
 exports.config = configure({
 	base: 'screenshot',
 	services: [[
-		'novus-visual-regression',
+		'image-comparison',
 		{
-			compare: comparator,
-			viewportChangePause: 300,
-			viewports: [{width: 1920, height: 1080}],
-			orientations: ['landscape']
+			baselineFolder: baselineFolder,
+			formatImageName: '{tag}',
+			screenshotPath: screenshotFolder,
+			autoSaveBaseline: true
 		}
 	]],
 	//

package/screenshot/wdio.tv.conf.js

@@ -1,10 +1,19 @@
 const ipAddress = require('../utils/ipAddress.js');
 const {config} = require('./wdio.conf.js');
 
+const services = config.services.map(service => {
+	if (service[0] === 'novus-visual-regression') {
+		delete service[1].viewports;
+	}
+	return service;
+});
+
 exports.config = Object.assign(
 	{},
 	config,
 	{
+		services,
+
 		// ============
 		// Capabilities
 		// ============
@@ -25,6 +34,7 @@ exports.config = Object.assign(
 			//
 			browserName: 'chrome',
 			'goog:chromeOptions': {
+				w3c: false,
 				debuggerAddress: `${process.env.TV_IP}:9998`
 			}
 		}],
@@ -44,6 +54,9 @@ exports.config = Object.assign(
 			if (config.before) {
 				config.before();
 			}
+
+			browser._options = {remote: true};
+
 			// Have to stub out these methods to prevent exceptions when running against
 			// remote chrome session
 			browser.setViewportSize = () => Promise.resolve({height: 1080, width: 1920});

package/ui/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import {render} from 'react-dom';
 import App from 'UI_TEST_APP_ENTRY';
 

package/ui/wdio.docker.conf.js

@@ -3,7 +3,7 @@ const {config} = require('./wdio.conf.js');
 
 // Remove selenium-standalone and replace with docker service
 const services = config.services
-	.filter(service => service !== 'selenium-standalone')
+	.filter(service => service[0] !== 'selenium-standalone')
 	.concat(['docker']);
 
 exports.config = Object.assign(

package/ui/wdio.tv.conf.js

@@ -10,6 +10,7 @@ exports.config = Object.assign(
 
 			browserName: 'chrome',
 			'goog:chromeOptions': {
+				w3c: false,
 				debuggerAddress: `${process.env.TV_IP}:9998`
 			}
 		}],
@@ -17,7 +18,10 @@ exports.config = Object.assign(
 		baseUrl: `http://${ipAddress()}:4567`,
 
 		before: function () {
-			if (config.before) config.before();
+			if (config.before) {
+				config.before();
+			}
+
 			browser._options = {remote: true};
 		}
 	}

package/utils/Page.js

@@ -12,13 +12,17 @@ class Page {
 		return this._url;
 	}
 
-	open (appPath, urlExtra = '?locale=en-US') {
+	async open (appPath, urlExtra = '?locale=en-US') {
 		this._url = `/${appPath}/${urlExtra}`;
 		// Can't resize browser window when connected to remote debugger!
 		if (!browser._options || !browser._options.remote) {
-			browser.setWindowSize(1920, 1080);
+			await browser.setWindowSize(1920, 1080);
 		}
-		browser.url(this.url);
+
+		await browser.url(this.url);
+
+		const body = await $('body');
+		await body.waitForExist({timeout: 1000});
 	}
 
 	serializeParams (params) {
@@ -27,14 +31,14 @@ class Page {
 		return queryObject;
 	}
 
-	delay (delay = 1000) {
-		browser.pause(delay);
+	async delay (delay = 1000) {
+		await browser.pause(delay);
 		return browser;
 	}
-	keyDelay (key, delay = 50) {
-		browser.keys(key);
-		browser.pause(delay);
-		return browser;
+	async keyDelay (key, delay = 50) {
+		await browser.keys(key);
+		await browser.pause(delay);
+		return await browser;
 	}
 	spotlightLeft () {
 		return this.keyDelay('Left arrow');
@@ -64,25 +68,25 @@ class Page {
 	}
 
 	// For testing "pointer off" by timeout.
-	hidePointerByKeycode () {
+	async hidePointerByKeycode () {
 		browser.execute(function () {
 			const event = document.createEvent('Events');
 			event.initEvent('keydown', true, true);
 			event.keyCode = 1537;
 			document.getElementById('root').dispatchEvent(event);
 		});
-		this.delay();
+		await this.delay();
 		return browser;
 	}
 
-	showPointerByKeycode () {
-		browser.execute(function () {
+	async showPointerByKeycode () {
+		await browser.execute(function () {
 			const event = document.createEvent('Events');
 			event.initEvent('keydown', true, true);
 			event.keyCode = 1536;
 			document.getElementById('root').dispatchEvent(event);
 		});
-		this.delay();
+		await this.delay();
 		return browser;
 	}
 
@@ -128,12 +132,12 @@ class Page {
 	 * @param {Number} [config.timeout=1200]        Time to wait for focus condition
 	 * @param {Number} [config.interval=200]        Time between checks
 	 */
-	waitForFocused (target, {targetName = 'item', timeoutMsg = `timed out waiting for ${targetName} focused`, timeout = 1200, interval = 200} = {}) {
-		browser.waitUntil(() => target.isExisting() && target.isFocused(), {timeout, timeoutMsg, interval});
+	async waitForFocused (target, {targetName = 'item', timeoutMsg = `timed out waiting for ${targetName} focused`, timeout = 1200, interval = 200} = {}) {
+		await browser.waitUntil(() => target.isExisting() && target.isFocused(), {timeout, timeoutMsg, interval});
 	}
 
-	waitTransitionEnd (delay = 3000, msg = 'timed out waiting for transitionend', callback, ignore = ['opacity', 'filter']) {
-		browser.execute(
+	async waitTransitionEnd (delay = 3000, msg = 'timed out waiting for transitionend', callback, ignore = ['opacity', 'filter']) {
+		await browser.execute(
 			// eslint-disable-next-line no-shadow
 			function (ignore) {
 				window.ontransitionend = function (evt) {
@@ -148,7 +152,7 @@ class Page {
 		if (callback) {
 			callback();
 		}
-		browser.waitUntil(
+		await browser.waitUntil(
 			function () {
 				return browser.execute(
 					function () {

package/utils/runTest.js

@@ -1,4 +1,5 @@
 'use strict';
+const crypto = require('crypto');
 const parseArgs = require('minimist');
 
 const args = parseArgs(process.argv);
@@ -14,13 +15,14 @@ const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
 	}
 
 	describe(testName, function () {
-		it('should fetch test cases', function () {
-			Page.open('?request');
-			let testCases = browser.execute(function () {
-				return window.__TEST_DATA; // eslint-disable-line no-undef
+		it('should fetch test cases', async function () {
+			await Page.open('?request');
+
+			let testCases = await browser.execute(async function () {
+				return await window.__TEST_DATA; // eslint-disable-line no-undef
 			});
 
-			expect(testCases).to.be.an('object', 'Test data failed to load');
+			await expect(testCases).to.be.an('object', 'Test data failed to load');
 
 			describe(testName, function () {
 				for (const component in testCases) {
@@ -42,18 +44,30 @@ const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
 							if (titlePattern && !testCase.title.match(titlePattern)) {
 								return;
 							}
-							it(`${component}~/${testName}~/${testCase.title}`, function () {
+							it(`${component}~/${testName}~/${testCase.title}`, async function () {
 								const params = Page.serializeParams(Object.assign({
 									component,
 									testId
 								}, rest));
 
-								Page.open(`?${params}`);
+								const testNameParts = testCase.title.split('~/');
+								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
+								testCaseName = testCaseName.substring(0, 128) + '-' + crypto.createHash('md5').update(testCaseName).digest('hex');
+								const screenshotFileName = (component + '/' + testName + '/' + testCaseName);
 
-								const context = {params, component, testName, url: Page.url};
+								const context = {params, component, testName, url: Page.url, fileName: screenshotFileName};
 								this.test.context = context;
-								const result = browser.checkDocument();
-								expect(result[0].isWithinMisMatchTolerance).to.be.true();
+
+								await Page.open(`?${params}`);
+
+								expect(await browser.checkScreen(screenshotFileName, {
+									disableCSSAnimation: true,
+									ignoreNothing: true,
+									rawMisMatchPercentage: true
+								})).to.equal(0);
 							});
 						});
 					});

package/utils/selector.js

@@ -42,13 +42,16 @@ const getSubComponent = curry((opts, el) => element(
 
 // Given two elements, determine if the first element is to the left of the second element
 // element, element => Boolean
-function expectOrdering (firstElement, secondElement) {
-	expect(firstElement.getLocation().x < secondElement.getLocation().x).to.be.true();
+async function expectOrdering (firstElement, secondElement) {
+	expect(await firstElement.getLocation().x < secondElement.getLocation().x).to.be.true();
 }
 
-const hasClass = curry((className, el) => {
-	if (className[0] === '.') className = className.slice(1);
-	return el.getAttribute('className').includes(className);
+const hasClass = curry(async (className, el) => {
+	if (className[0] === '.') {
+		className = className.slice(1);
+	}
+	const elementClass = await el.getAttribute('className') || await el.getAttribute('class');
+	return elementClass.includes(className);
 });
 
 module.exports = {