@enact/ui-test-utils 0.7.0 → 0.7.2

package/.travis.yml

@@ -1,9 +1,13 @@
+dist: focal
 language: node_js
 node_js:
-    - "10"
+    - "18"
+before_install:
+    - sudo apt-get update
+    - sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
 install:
     - npm install
 script:
     - echo -e "\x1b\x5b35;1m*** Linting...\x1b\x5b0m"
-    - npm run lint
+    - npm run lint -- --report-unused-disable-directives --max-warnings 0
     - echo -e "\x1b\x5b35;1m*** Linting complete...\x1b\x5b0m"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/ui-test-utils",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "UI Testing for the Enact framework",
   "main": "index.js",
   "bin": {
@@ -16,14 +16,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@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",
-    "@wdio/sync": "^7.9.0",
+    "@wdio/cli": "7.12.4",
+    "@wdio/dot-reporter": "7.10.1",
+    "@wdio/local-runner": "7.12.4",
+    "@wdio/mocha-framework": "7.12.4",
+    "@wdio/selenium-standalone-service": "7.10.1",
+    "@wdio/spec-reporter": "7.10.1",
+    "@wdio/static-server-service": "7.10.1",
+    "@wdio/sync": "7.12.4",
     "chai": "4.3.4",
     "chalk": "^4.1.2",
     "cross-spawn": "^7.0.3",
@@ -35,8 +35,8 @@
     "ramda": "^0.27.1",
     "readdirp": "^3.6.0",
     "wdio-docker-service": "^3.1.2",
-    "wdio-novus-visual-regression-service": "^1.2.5",
-    "webdriverio": "^7.9.0"
+    "wdio-image-comparison-service": "^3.0.0",
+    "webdriverio": "7.12.4"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.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/runTest.js

@@ -1,4 +1,5 @@
 'use strict';
+const crypto = require('crypto');
 const parseArgs = require('minimist');
 
 const args = parseArgs(process.argv);
@@ -17,7 +18,7 @@ const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
 		it('should fetch test cases', function () {
 			Page.open('?request');
 			let testCases = browser.execute(function () {
-				return window.__TEST_DATA; // eslint-disable-line no-undef
+				return window.__TEST_DATA;
 			});
 
 			expect(testCases).to.be.an('object', 'Test data failed to load');
@@ -48,12 +49,24 @@ const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
 									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();
+
+								Page.open(`?${params}`);
+
+								expect(browser.checkScreen(screenshotFileName, {
+									disableCSSAnimation: true,
+									ignoreNothing: true,
+									rawMisMatchPercentage: true
+								})).to.equal(0);
 							});
 						});
 					});