@brightspace-ui/testing 1.37.2 → 1.38.0

package/README.md

@@ -343,6 +343,8 @@ class SlowElem extends LitElement {
 }
 ```
 
+The [`LoadingCompleteMixin` in `@brightspace-ui/core`](https://github.com/BrightspaceUI/core/tree/main/mixins/loading-complete) has been added to make implementing this even simpler.
+
 To bypass waiting for `getLoadingComplete()`, set the `awaitLoadingComplete` configuration option to `false`:
 
 ```javascript

package/package.json

@@ -2,7 +2,7 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "1.37.2",
+  "version": "1.38.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "npm run lint:eslint && npm run lint:style",
@@ -23,13 +23,14 @@
   "author": "D2L Corporation",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@brightspace-ui/stylelint-config": "^1",
+    "@brightspace-ui/stylelint-config": "^2",
     "chai": "^6",
     "eslint": "^9",
-    "eslint-config-brightspace": "^2.0.0",
+    "eslint-config-brightspace": "^2",
+    "globals": "^17",
     "mocha": "^11",
     "sinon": "^21",
-    "globals": "^17"
+    "stylelint": "^17"
   },
   "exports": {
     ".": "./src/browser/index.js"

package/src/browser/fixture.js

@@ -82,13 +82,14 @@ async function waitForElem(elem, awaitLoadingComplete = true) {
  *
  * @param {*} element
  * @param {{
- *      awaitLoadingComplete: boolean,
- * 		lang: string,
+ *		awaitLoadingComplete: boolean,
+ *		colorMode: string,
+ *		lang: string,
  *		mathjax: {renderLatex: boolean},
  *		rtl: boolean,
  *		pagePadding: boolean,
  *		media: string,
- *      viewport: { height: number, width: number }
+ *		viewport: { height: number, width: number }
  *	}} opts
  */
 export async function fixture(element, opts = {}) {

package/src/browser/reset.js

@@ -4,6 +4,7 @@ import { nextFrame } from '@open-wc/testing';
 
 const DEFAULT_PAGE_PADDING = true,
 	DEFAULT_LANG = 'en',
+	DEFAULT_COLOR_MODE = undefined,
 	DEFAULT_MATHJAX_RENDER_LATEX = false,
 	DEFAULT_MEDIA = 'screen',
 	DEFAULT_VIEWPORT = {
@@ -18,6 +19,7 @@ let
 	currentMathjaxRenderLatex = DEFAULT_MATHJAX_RENDER_LATEX,
 	currentMedia = DEFAULT_MEDIA,
 	currentRtl = false,
+	currentColorMode = DEFAULT_COLOR_MODE,
 	currentViewportHeight = 0,
 	currentViewportWidth = 0,
 	shouldResetMouse = false;
@@ -47,6 +49,7 @@ export async function reset(opts = {}) {
 		lang: DEFAULT_LANG,
 		mathjax: {},
 		rtl: !!opts.lang?.startsWith('ar'),
+		colorMode: DEFAULT_COLOR_MODE,
 		pagePadding: DEFAULT_PAGE_PADDING,
 		media: DEFAULT_MEDIA
 	};
@@ -89,6 +92,17 @@ export async function reset(opts = {}) {
 		currentRtl = opts.rtl;
 	}
 
+	if (opts.colorMode !== currentColorMode) {
+		const colorMode = ['light', 'dark'].includes(opts.colorMode) ? opts.colorMode : DEFAULT_COLOR_MODE;
+		if (!colorMode) {
+			document.documentElement.removeAttribute('data-color-mode');
+		} else {
+			document.documentElement.setAttribute('data-color-mode', colorMode);
+		}
+		awaitNextFrame = true;
+		currentColorMode = colorMode;
+	}
+
 	opts.lang ??= '';
 	if (documentLocaleSettings.language !== opts.lang) {
 		document.documentElement.lang = opts.lang;

package/src/server/wtr-config.js

@@ -89,6 +89,9 @@ export class WTRConfig {
 								--d2l-inline-start: left;
 								--d2l-length-factor: 1;
 								--d2l-mirror-transform: none;
+								--d2l-theme-background-color-base: #ffffff;
+								--d2l-theme-text-color-static-standard: #202122;
+								font-size: 20px;
 							}
 
 							html[dir="rtl"] * {
@@ -101,6 +104,11 @@ export class WTRConfig {
 								--d2l-mirror-transform: scale(-1, 1);
 							}
 
+							html[data-color-mode="dark"] {
+								--d2l-theme-background-color-base: #161718;
+								--d2l-theme-text-color-static-standard: #cdd5dc;
+							}
+
 							@font-face {
 								font-family: 'Lato';
 								font-style: normal;
@@ -114,12 +122,9 @@ export class WTRConfig {
 								src: url(${FONT_ASSETS}Lato-700.woff2) format('woff2');
 							}
 
-							html {
-								font-size: 20px;
-							}
 							body {
-								background-color: #ffffff;
-								color: var(--d2l-color-ferrite, #202122);
+								background-color: var(--d2l-theme-background-color-base);
+								color: var(--d2l-theme-text-color-static-standard);
 								font-family: 'Lato', sans-serif;
 								letter-spacing: 0.01rem;
 								font-size: 0.95rem;