@brightspace-ui/testing 0.31.0 → 0.32.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "eslint . --ext .js",
@@ -36,8 +36,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@rollup/plugin-node-resolve": "^15",
+    "@brightspace-ui/intl": "^3",
     "@open-wc/testing": "^3",
+    "@rollup/plugin-node-resolve": "^15",
     "@web/config-loader": "^0.2",
     "@web/dev-server": "^0.2",
     "@web/rollup-plugin-html": "^2",

package/src/browser/reset.js

@@ -1,4 +1,5 @@
 import { sendMouse, setViewport } from '@web/test-runner-commands';
+import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
 import { nextFrame } from '@open-wc/testing';
 
 const DEFAULT_LANG = 'en',
@@ -6,7 +7,9 @@ const DEFAULT_LANG = 'en',
 	DEFAULT_VIEWPORT_HEIGHT = 800,
 	DEFAULT_VIEWPORT_WIDTH = 800;
 
-let currentLang = undefined,
+const documentLocaleSettings = getDocumentLocaleSettings();
+
+let
 	currentMathjaxRenderLatex = DEFAULT_MATHJAX_RENDER_LATEX,
 	currentRtl = false,
 	currentViewportHeight = 0,
@@ -57,9 +60,9 @@ export async function reset(opts = {}) {
 		currentRtl = opts.rtl;
 	}
 
-	if (opts.lang !== currentLang) {
-		document.documentElement.setAttribute('lang', opts.lang);
-		currentLang = opts.lang;
+	opts.lang ??= '';
+	if (documentLocaleSettings.lamguage !== opts.lang) {
+		document.documentElement.lang = opts.lang;
 		awaitNextFrame = true;
 	}
 

package/src/browser/vdiff.js

@@ -19,11 +19,29 @@ mocha.setup({
 });
 /* eslint-enable */
 
-function findTarget(elem) {
-	if (!elem.shadowRoot) return elem;
-	const nestedTarget = elem.shadowRoot.querySelector('.vdiff-target');
-	if (!nestedTarget) return elem;
-	return findTarget(nestedTarget);
+function findTargets(elem) {
+	if (!elem.shadowRoot) return [elem];
+	const nestedTargets = elem.shadowRoot.querySelectorAll('.vdiff-target');
+	if (nestedTargets.length === 0) return [elem];
+	return Array.from(nestedTargets).reduce((acc, target) => [...acc, ...findTargets(target)], []);
+}
+
+function findLargestRect(elems) {
+	let largestRect = { left: Number.MAX_SAFE_INTEGER, top: Number.MAX_SAFE_INTEGER, right: 0, bottom: 0 };
+	elems.forEach(elem => {
+		const targets = findTargets(elem);
+		targets.forEach(target => {
+			const targetRect = target.getBoundingClientRect();
+			largestRect = {
+				left: Math.floor(Math.min(largestRect.left, targetRect.left)),
+				top: Math.floor(Math.min(largestRect.top, targetRect.top)),
+				right: Math.ceil(Math.max(largestRect.right, targetRect.right)),
+				bottom: Math.ceil(Math.max(largestRect.bottom, targetRect.bottom))
+			};
+		});
+	});
+
+	return { x: largestRect.left, y: largestRect.top, width: largestRect.right - largestRect.left, height: largestRect.bottom - largestRect.top };
 }
 
 async function ScreenshotAndCompare(opts) {
@@ -36,8 +54,8 @@ async function ScreenshotAndCompare(opts) {
 	const name = this.test.fullTitle();
 	let rect = null;
 	if (this.elem !== document) {
-		const target = findTarget(this.elem);
-		rect = target.getBoundingClientRect();
+		const elemsToInclude = [this.elem, ...this.elem.querySelectorAll('.vdiff-include')];
+		rect = findLargestRect(elemsToInclude);
 	}
 	const slowDuration = this.test.slow();
 	let result = await executeServerCommand('brightspace-visual-diff-compare', { name, rect, slowDuration, opts });