@enact/ui-test-utils 0.7.1 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/ui-test-utils",
-  "version": "0.7.1",
+  "version": "1.0.0",
   "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",
@@ -39,16 +38,16 @@
     "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-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"
+    "@babel/eslint-plugin": "^7.17.7",
+    "eslint": "^8.12.0",
+    "eslint-config-enact": "^4.1.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-enact": "^1.0.1",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^26.1.5",
+    "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/index.js

@@ -1,4 +1,4 @@
-import {render} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import App, {testMetadata} from 'UI_TEST_APP_ENTRY';
 import TestChooser from './TestChooser';
 
@@ -18,13 +18,9 @@ if ('testId' in props) props.testId = Number.parseInt(props.testId);
 if ('request' in props) {
 	window.__TEST_DATA = testMetadata;
 } else if (Object.keys(props).length) {
-	render(
-		<App {...props} />,
-		document.getElementById('root')
-	);
+	createRoot(document.getElementById('root'))
+		.render(<App {...props} />);
 } else {
-	render(
-		<TestChooser metadata={testMetadata} />,
-		document.getElementById('root')
-	);
+	createRoot(document.getElementById('root'))
+		.render(<TestChooser metadata={testMetadata} />);
 }

package/ui/index.js

@@ -1,4 +1,4 @@
-import {render} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import App from 'UI_TEST_APP_ENTRY';
 
 const url = new URL(window.location.href);
@@ -7,10 +7,8 @@ const locale = url.searchParams.get('locale');
 const appElement = (<App locale={locale} />);
 
 if (typeof window !== 'undefined') {
-	render(
-		appElement,
-		document.getElementById('root')
-	);
+	createRoot(document.getElementById('root'))
+		.render(appElement);
 }
 
 export default appElement;

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

@@ -15,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) {
@@ -43,7 +44,7 @@ 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
@@ -60,9 +61,9 @@ const runTest = ({concurrency, filter, Page, testName, ...rest}) => {
 								const context = {params, component, testName, url: Page.url, fileName: screenshotFileName};
 								this.test.context = context;
 
-								Page.open(`?${params}`);
+								await Page.open(`?${params}`);
 
-								expect(browser.checkScreen(screenshotFileName, {
+								expect(await browser.checkScreen(screenshotFileName, {
 									disableCSSAnimation: true,
 									ignoreNothing: true,
 									rawMisMatchPercentage: true

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);
 });