@enact/ui-test-utils 4.0.2 → 4.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/ui-test-utils",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "UI Testing for the Enact framework",
   "repository": "https://github.com/enactjs/ui-test-utils",
   "type": "module",
@@ -29,28 +29,28 @@
     "access": "public"
   },
   "dependencies": {
-    "@wdio/cli": "^9.27.0",
-    "@wdio/dot-reporter": "^9.27.0",
-    "@wdio/local-runner": "^9.27.0",
-    "@wdio/mocha-framework": "^9.27.0",
-    "@wdio/spec-reporter": "^9.27.0",
-    "@wdio/static-server-service": "^9.27.0",
-    "@wdio/visual-service": "^9.2.1",
+    "@wdio/cli": "^9.29.1",
+    "@wdio/dot-reporter": "^9.29.1",
+    "@wdio/local-runner": "^9.29.1",
+    "@wdio/mocha-framework": "^9.29.1",
+    "@wdio/spec-reporter": "^9.29.1",
+    "@wdio/static-server-service": "^9.29.1",
+    "@wdio/visual-service": "^9.2.3",
     "chalk": "^5.6.2",
     "cross-spawn": "^7.0.6",
-    "expect-webdriverio": "^5.6.5",
-    "fs-extra": "^11.3.4",
+    "expect-webdriverio": "^5.7.0",
+    "fs-extra": "^11.3.6",
     "minimist": "^1.2.8",
-    "query-string": "^7.1.3",
+    "query-string": "^9.4.1",
     "ramda": "^0.32.0",
     "readdirp": "^5.0.0",
     "wdio-docker-service": "^3.2.1",
-    "webdriverio": "^9.27.0"
+    "webdriverio": "^9.29.1"
   },
   "devDependencies": {
-    "eslint": "^9.39.3",
-    "eslint-config-enact": "^5.1.0",
-    "globals": "^17.4.0"
+    "eslint": "^9.39.4",
+    "eslint-config-enact": "^5.1.2",
+    "globals": "^17.7.0"
   },
   "overrides": {
     "serialize-javascript": "^7.0.4",

package/screenshot/TestChooser.module.css

@@ -8,7 +8,7 @@
 	margin-left: 64px;
 	margin-right: 64px;
 	padding: 0 24px;
-	border: 0px solid transparent;
+	border: 0 solid transparent;
 	border-bottom: 6px solid #ccc;
 	border-radius: 0.3em;
 }

package/screenshot/utils/confHelpers.js

@@ -27,6 +27,15 @@ function getScreenshotName (basePath) {
 	};
 }
 
+async function setScreenResolution (data) {
+	// in Chrome 132, the browser window size takes into account also the address bar and tab area
+	const [width, height] = (data?.portrait || data.ctx?.portrait) ? [1080, 2007] : [1920, 1167];
+
+	await browser.setWindowSize(width, height);
+	// Small pause to let window resize complete
+	await browser.pause(500);
+}
+
 const distPath = path.join(process.cwd(), 'tests', 'screenshot', 'dist');
 const baselineRelativePath = 'screenshots/reference';
 const screenshotRelativePath = 'screenshots/screen';
@@ -120,7 +129,6 @@ async function checkSessionHealth () {
 			console.log(`Attempting quick recovery for session ${sessionId}...`);
 			try {
 				await browser.reloadSession();
-				await browser.setWindowSize(1920, 1167);
 				console.log(`Session ${sessionId} recovered`);
 			} catch (recoveryError) {
 				console.log(`Recovery attempt failed, will retry next test`);
@@ -196,8 +204,6 @@ async function cleanUpSessionHealthCheck (testData, error) {
 						}
 						await browser.deleteSession();
 						await browser.reloadSession();
-						await browser.setWindowSize(1920, 1167);
-						await browser.pause(1000);
 					})(),
 					new Promise((_, reject) =>
 						setTimeout(() => reject(new Error('Recovery timeout')), 10000)
@@ -234,6 +240,7 @@ async function cleanUpSessionHealthCheck (testData, error) {
 
 async function beforeTest (testData) {
 	await checkSessionHealth();
+	await setScreenResolution(testData);
 
 	// If title doesn't have a '/', it's not a screenshot test, don't save
 	if (testData && testData.title && testData.title.indexOf('/') > 0) {
@@ -299,6 +306,7 @@ async function afterTest (testData, _context, {error, passed}) {
 	}
 
 	await cleanUpSessionHealthCheck(testData, error);
+	await setScreenResolution(testData);
 }
 
 function onComplete () {

package/screenshot/utils/headerTemplate.js

@@ -16,6 +16,7 @@ export function makeHeader (title) {
 				<div class="cell preview">
 					<div class="column">
 						<div class="cell fixed preview-header">
+							<button id="menu">&#9776;</button> 
 							<button id="dec">&lt;</button>
 							<button id="inc">&gt;</button>
 							<div id="title">Select an image</div>

package/screenshot/utils/redist/failedTests.js

@@ -1,6 +1,7 @@
 ((results) => {
 	const h = document.querySelector('h1');
 	const list = document.querySelector('.list > ol');
+	const drawer = document.querySelector('.list');
 	const count = results.length;
 	let currentIndex = -1;
 
@@ -56,9 +57,20 @@
 		target.appendChild(btn);
 		return btn;
 	}
+
+	function toggleDrawer ({collapsed}) {
+		if (collapsed) {
+			return drawer.classList.toggle('collapsed', collapsed);
+		}
+
+		const currentState = !drawer.classList.contains('collapsed');
+		drawer.classList.toggle('collapsed', currentState);
+	}
+
 	function initializeButtons () {
 		const inc = document.querySelector('#inc'),
-			dec = document.querySelector('#dec');
+			dec = document.querySelector('#dec'),
+			menu = document.querySelector('#menu');
 		let nextTarget = inc;
 
 		const buttonbox = document.createElement('span');
@@ -86,6 +98,7 @@
 
 		inc.onclick = nextImage;
 		dec.onclick = prevImage;
+		menu.onclick = toggleDrawer;
 	}
 
 	function updateButtons (type) {
@@ -108,13 +121,16 @@
 	}
 
 	document.onkeydown = (ev) => {
-		switch (ev.keyCode) {
-			case 37:
+		switch (ev.key) {
+			case "Escape":
+				toggleDrawer({collapsed: true});
+				break;
+			case "ArrowLeft":
 				if (count > 0 && currentIndex > 0) {
 					prevImage();
 				}
 				break;
-			case 39:
+			case "ArrowRight":
 				if (count > 0 && currentIndex < (count - 1)) {
 					nextImage();
 				}

package/screenshot/utils/redist/newFiles.js

@@ -2,6 +2,7 @@
 ((results) => {
 	const h = document.querySelector('h1');
 	const list = document.querySelector('.list > ol');
+	const drawer = document.querySelector('.list');
 	const count = results.length;
 	let currentIndex = -1;
 
@@ -46,11 +47,22 @@
 		loadImage(currentIndex - 1);
 	}
 
+	function toggleDrawer ({collapsed}) {
+		if (collapsed) {
+			return drawer.classList.toggle('collapsed', collapsed);
+		}
+
+		const currentState = !drawer.classList.contains('collapsed');
+		drawer.classList.toggle('collapsed', currentState);
+	}
+
 	function initializeButtons () {
 		const inc = document.querySelector('#inc'),
-			dec = document.querySelector('#dec');
+			dec = document.querySelector('#dec'),
+			menu = document.querySelector('#menu');
 		inc.onclick = nextImage;
 		dec.onclick = prevImage;
+		menu.onclick = toggleDrawer;
 
 		const btn = document.createElement('button');
 		btn.innerText = 'test case';
@@ -76,13 +88,16 @@
 	}
 
 	document.onkeydown = (ev) => {
-		switch (ev.keyCode) {
-			case 37:
+		switch (ev.key) {
+			case "Escape":
+				toggleDrawer({collapsed: true});
+				break;
+			case "ArrowLeft":
 				if (count > 0 && currentIndex > 0) {
 					prevImage();
 				}
 				break;
-			case 39:
+			case "ArrowRight":
 				if (count > 0 && currentIndex < (count - 1)) {
 					nextImage();
 				}

package/screenshot/utils/redist/styles.css

@@ -9,6 +9,7 @@ body {
 }
 
 header h1 {
+	margin-top: 0;
 	padding: 0 1em;
 }
 
@@ -42,7 +43,8 @@ ol li {
 }
 
 .cell {
-	flex: 1 1 100%;
+	flex: 1 1 0;
+	min-height: 0;
 	position: relative;
 }
 .cell.fixed {
@@ -55,9 +57,13 @@ ol li {
 
 .list {
 	margin-right: 12px;
+	max-width: 25%;
 	overflow: auto;
-	max-width: 40%;
 }
+.list.collapsed {
+	max-width: 0;
+}
+
 .list ol {
 	margin-top: 0;
 }
@@ -146,9 +152,12 @@ button.active {
 #title {
 	display: inline;
 }
-
 #image {
 	cursor: zoom-in;
+	display: block;
+	margin: 0 auto;
+	max-width: 100%;
+	max-height: 100%;
 }
 #image:focus {
 	transform: scale(4);

package/utils/generateTestData.js

@@ -79,6 +79,7 @@ export const generateTestData = (component, componentTests) => {
 	let metaData = [];
 	componentTests.forEach((testCase) => {
 		let title = testCase.title;
+		const portrait = testCase.portrait;
 
 		if (!title) {
 			// Note: This isn't terribly extensible, but we need to correct the order of props
@@ -92,12 +93,14 @@ export const generateTestData = (component, componentTests) => {
 				props: testCase.props ? testCase.props : testCase.component.props,
 				wrapper: testCase.wrapper,
 				textSize: testCase.textSize,
-				skinVariants: testCase.skinVariants
+				skinVariants: testCase.skinVariants,
+				...(portrait && {portrait})
 			});
 		}
 
 		const meta = {
-			title
+			title,
+			...(portrait && {portrait})
 		};
 		metaData.push(meta);
 	});

package/utils/runTest.js

@@ -43,7 +43,7 @@ export const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
 							if (titlePattern && !testCase.title.match(titlePattern)) {
 								return;
 							}
-							it(`${component}~/${testName}~/${testCase.title}`, async function () {
+							const componentTest = it(`${component}~/${testName}~/${testCase.title}`, async function () {
 								const params = Page.serializeParams(Object.assign({
 									component,
 									testId
@@ -59,6 +59,7 @@ export const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
 
 								const context = {params, component, testName, url: Page.url, fileName: screenshotFileName};
 								this.test.context = context;
+								this.portrait = !!testCase.portrait; // Used when screenshots are compared; otherwise, it may compare portrait with landscape
 
 								await Page.open(`?${params}`);
 
@@ -70,6 +71,8 @@ export const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
 									waitForFontsLoaded: true
 								})).toBe(0);
 							});
+							// Used for creating references for portrait mode; otherwise, references for portrait mode may not be saved
+							componentTest.portrait = !!testCase.portrait;
 						});
 					});
 				}

package/.travis.yml

@@ -1,13 +0,0 @@
-dist: jammy
-language: node_js
-node_js:
-    - 20
-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 -- --report-unused-disable-directives --max-warnings 0
-    - echo -e "\x1b\x5b35;1m*** Linting complete...\x1b\x5b0m"