@enact/ui-test-utils 0.7.0 → 1.0.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/ui-test-utils",
-  "version": "0.7.0",
+  "version": "1.0.0-alpha.1",
   "description": "UI Testing for the Enact framework",
   "main": "index.js",
   "bin": {
@@ -23,7 +23,6 @@
     "@wdio/selenium-standalone-service": "^7.8.0",
     "@wdio/spec-reporter": "^7.9.0",
     "@wdio/static-server-service": "^7.8.0",
-    "@wdio/sync": "^7.9.0",
     "chai": "4.3.4",
     "chalk": "^4.1.2",
     "cross-spawn": "^7.0.3",
@@ -35,20 +34,19 @@
     "ramda": "^0.27.1",
     "readdirp": "^3.6.0",
     "wdio-docker-service": "^3.1.2",
-    "wdio-novus-visual-regression-service": "^1.2.5",
+    "wdio-image-comparison-service": "^3.0.0",
     "webdriverio": "^7.9.0"
   },
   "devDependencies": {
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.11.0",
-    "eslint-config-enact": "^3.0.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint": "^8.12.0",
+    "eslint-config-enact": "^4.0.0",
+    "eslint-config-prettier": "^8.5.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.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0"
+    "eslint-plugin-enact": "^1.0.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.3.0"
   }
 }

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/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/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,15 +42,15 @@ 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) => {
+const hasClass = curry(async (className, el) => {
 	if (className[0] === '.') {
 		className = className.slice(1);
 	}
-	const elementClass = el.getAttribute('className') || el.getAttribute('class');
+	const elementClass = await el.getAttribute('className') || await el.getAttribute('class');
 	return elementClass.includes(className);
 });