@brightspace-ui/testing 1.13.2 → 1.13.4

package/README.md

@@ -315,21 +315,21 @@ it('should not wait', async() => {
 
 #### Waiting for a Condition
 
-In cases where there are no other reliable hooks (like events, `getUpdateComplete()` or `getLoadingComplete()`), `waitUntil(condition)` can be used to wait for a particular condition to become `true`. The condition can optionally return a Promise.
+In cases where there are no other reliable hooks (like events, `getUpdateComplete()` or `getLoadingComplete()`), `waitUntil(condition, failMessage)` can be used to wait for a particular condition to become `true`. The condition can optionally return a Promise.
 
 ```javascript
 import { fixture, waitUntil } from '@brightspace-ui/testing';
 
 it('should wait for condition', async() => {
   const elem = await fixture(...);
-  await waitUntil(() => elem.foo === 'bar');
+  await waitUntil(() => elem.foo === 'bar', 'foo never became "bar"');
 });
 ```
 
 By default, `waitUntil` will poll every `50ms` and time out after `1000ms`. Those options can be configured:
 
 ```javascript
-await waitUntil(() => elem.condition, {
+await waitUntil(() => elem.condition, 'Condition was never met', {
   interval: 10,
   timeout: 2000
 });

package/package.json

@@ -2,10 +2,12 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "1.13.2",
+  "version": "1.13.4",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
-    "lint": "eslint . --ext .js",
+    "lint": "npm run lint:eslint && npm run lint:style",
+    "lint:eslint": "eslint . --ext .js",
+    "lint:style": "stylelint \"**/*.{js,html}\" --ignore-path .gitignore",
     "test": "npm run lint && npm run test:bin && npm run test:server && npm run test:browser",
     "test:bin": "mocha './test/bin/**/*.test.js'",
     "test:browser": "npm run test:browser:other && npm run test:browser:ctor",
@@ -21,11 +23,13 @@
   "author": "D2L Corporation",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@brightspace-ui/stylelint-config": "^1",
     "chai": "^5",
     "eslint": "^8",
     "eslint-config-brightspace": "^1",
     "mocha": "^10",
-    "sinon": "^17"
+    "sinon": "^17",
+    "stylelint": "^16"
   },
   "exports": {
     ".": "./src/browser/index.js"

package/src/browser/commands.js

@@ -49,5 +49,6 @@ export async function sendKeysElem(elem, action, keys) {
 	if (elem) {
 		await focusElem(elem);
 	}
+	await new Promise(r => setTimeout(r));
 	return sendKeys(action, keys);
 }

package/src/server/report/app.js

@@ -25,9 +25,9 @@ class App extends LitElement {
 			overflow: hidden;
 		}
 		aside {
-			background-color: #fff;
+			background-color: #ffffff;
 			border-right: 1px solid #e6e6e6;
-			box-shadow: 0 0 6px rgba(0,0,0,.07);
+			box-shadow: 0 0 6px rgba(0, 0, 0, 0.07);
 			padding: 20px;
 		}
 		main {
@@ -57,8 +57,8 @@ class App extends LitElement {
 		tbody th {
 			font-weight: normal;
 			text-align: left;
-			width: 100%;
 			white-space: normal;
+			width: 100%;
 		}
 		td.passed {
 			background-color: #efffd9;
@@ -82,7 +82,7 @@ class App extends LitElement {
 		.header {
 			background-color: #f0f0f0;
 			border-bottom: 1px solid #cdd5dc;
-			box-shadow: 0 0 6px rgba(0,0,0,.07);
+			box-shadow: 0 0 6px rgba(0, 0, 0, 0.07);
 		}
 		.tab-panels {
 			overflow: auto;
@@ -100,8 +100,8 @@ class App extends LitElement {
 		.settings {
 			align-items: center;
 			display: flex;
-			padding: 20px;
 			gap: 10px;
+			padding: 20px;
 		}
 		.settings > * {
 			flex: 0 0 auto;

package/src/server/report/index.html

@@ -7,9 +7,9 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<style>
-			@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+			@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
 			body {
-				font-family: 'Roboto', sans-serif;
+				font-family: "Roboto", sans-serif;
 				font-size: 16px;
 				margin: 0;
 			}

package/src/server/report/radio.js

@@ -8,17 +8,17 @@ export const RADIO_STYLE = css`
 		flex-wrap: nowrap;
 	}
 	.radio-item input[type="radio"] {
-		position: absolute;
 		opacity: 0;
 		pointer-events: none;
+		position: absolute;
 	}
 	.radio-item label {
 		align-items: center;
 		background-color: #ffffff;
 		border-block-end-style: solid;
 		border-block-start-style: solid;
-		border-inline-start-style: solid;
 		border-color: #cdd5dc;
+		border-inline-start-style: solid;
 		border-width: 1px;
 		cursor: pointer;
 		display: flex;
@@ -29,8 +29,8 @@ export const RADIO_STYLE = css`
 		user-select: none;
 	}
 	.radio-item:first-child label {
-		border-start-start-radius: 5px;
 		border-end-start-radius: 5px;
+		border-start-start-radius: 5px;
 	}
 	.radio-item:last-child label {
 		border-end-end-radius: 5px;
@@ -42,9 +42,9 @@ export const RADIO_STYLE = css`
 		color: white;
 	}
 	.radio-item input[type="radio"]:focus-visible + label {
-		z-index: 1;
 		border-color: #007bff;
 		box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #007bff;
+		z-index: 1;
 	}
 `;
 

package/src/server/report/result.js

@@ -23,9 +23,9 @@ export const RESULT_STYLE = css`
 		font-weight: bold;
 	}
 	.result-split {
+		display: flex;
 		flex-direction: row;
 		flex-wrap: nowrap;
-		display: flex;
 	}
 	.result-split > .result-part {
 		flex: 0 1 auto;
@@ -54,14 +54,14 @@ export const RESULT_STYLE = css`
 	.result-split > .result-part:first-of-type > div > .result-diff-container {
 		border-right: none;
 	}
-	.result-split > .result-part:last-of-type > div> .result-diff-container {
+	.result-split > .result-part:last-of-type > div > .result-diff-container {
 		border-left: none;
 	}
 	.result-overlay {
-		background: hsla(0,0%,100%,.8);
+		background: hsla(0, 0%, 100%, 0.8);
+		left: 0;
 		position: absolute;
 		top: 0;
-		left: 0;
 	}
 	.result-part-info {
 		align-items: center;

package/src/server/report/tabs.js

@@ -56,8 +56,8 @@ export const TAB_STYLE = css`
 	}
 	.tab-selected-indicator {
 		border-block-start: 4px solid #007bff;
-		border-start-start-radius: 4px;
 		border-start-end-radius: 4px;
+		border-start-start-radius: 4px;
 		bottom: 0;
 		position: absolute;
 		width: calc(100% - 30px);