@brightspace-ui/testing 1.0.0 → 1.2.0

package/README.md

@@ -474,14 +474,15 @@ To capture the entire viewport, pass `document` as the target element to the ass
 await expect(document).to.be.golden();
 ```
 
-#### Rendering Fullscreen Fixtures
+#### Turning Off Full Page Padding
 
-To render a fullscreen fixture that fills the viewport, pass a `fullscreen` option to `fixture()`:
+By default, the page hosting vdiff fixtures has `38px` of padding. For fixtures which are meant to fill the entire page with no surrounding whitespace, the page padding can be disabled:
 
 ```javascript
-  const elem = await fixture(html`<fullscreen-elem></fullscreen-elem>`, {
-    fullscreen: true
+  await fixture(html`<fullscreen-elem></fullscreen-elem>`, {
+    pagePadding: false
   });
+  await expect(document).to.be.golden();
 ```
 
 #### Including Other Elements

package/package.json

@@ -2,7 +2,7 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "eslint . --ext .js",
@@ -24,7 +24,7 @@
     "eslint": "^8",
     "eslint-config-brightspace": "^0.23",
     "mocha": "^10",
-    "sinon": "^15"
+    "sinon": "^16"
   },
   "exports": {
     ".": "./src/browser/index.js"

package/src/browser/reset.js

@@ -2,7 +2,7 @@ import { emulateMedia, sendMouse, setViewport } from '@web/test-runner-commands'
 import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
 import { nextFrame } from '@open-wc/testing';
 
-const DEFAULT_FULLSCREEN = false,
+const DEFAULT_PAGE_PADDING = true,
 	DEFAULT_LANG = 'en',
 	DEFAULT_MATHJAX_RENDER_LATEX = false,
 	DEFAULT_MEDIA = 'screen',
@@ -12,7 +12,7 @@ const DEFAULT_FULLSCREEN = false,
 const documentLocaleSettings = getDocumentLocaleSettings();
 
 let
-	currentFullscreen = false,
+	currentPagePadding = true,
 	currentMathjaxRenderLatex = DEFAULT_MATHJAX_RENDER_LATEX,
 	currentMedia = DEFAULT_MEDIA,
 	currentRtl = false,
@@ -34,7 +34,7 @@ export async function reset(opts = {}) {
 			height: DEFAULT_VIEWPORT_HEIGHT,
 			width: DEFAULT_VIEWPORT_WIDTH
 		},
-		fullscreen: DEFAULT_FULLSCREEN,
+		pagePadding: DEFAULT_PAGE_PADDING,
 		media: DEFAULT_MEDIA
 	};
 
@@ -46,15 +46,15 @@ export async function reset(opts = {}) {
 
 	window.scroll(0, 0);
 
-	if (opts.fullscreen !== currentFullscreen) {
-		if (opts.fullscreen) {
-			document.body.classList.add('fullscreen');
+	if (opts.pagePadding !== currentPagePadding) {
+		if (!opts.pagePadding) {
+			document.body.classList.add('no-padding');
 		}
 		else {
-			document.body.classList.remove('fullscreen');
+			document.body.classList.remove('no-padding');
 		}
 		awaitNextFrame = true;
-		currentFullscreen = opts.fullscreen;
+		currentPagePadding = opts.pagePadding;
 	}
 
 	if (shouldResetMouse) {

package/src/browser/vdiff.js

@@ -4,6 +4,7 @@ import { executeServerCommand } from '@web/test-runner-commands';
 // start loading fonts early
 [...document.fonts].forEach(font => font.load());
 
+const DEFAULT_MARGIN = 10;
 let test;
 
 /* eslint-disable no-undef, no-invalid-this */
@@ -26,7 +27,7 @@ function findTargets(elem) {
 	return Array.from(nestedTargets).reduce((acc, target) => [...acc, ...findTargets(target)], [elem]);
 }
 
-function findLargestRect(elems) {
+function findLargestRect(elems, margin) {
 	let largestRect = { left: Number.MAX_SAFE_INTEGER, top: Number.MAX_SAFE_INTEGER, right: 0, bottom: 0 };
 	elems.forEach(elem => {
 		const targets = findTargets(elem);
@@ -42,11 +43,29 @@ function findLargestRect(elems) {
 			}
 		});
 	});
-
-	return { x: largestRect.left, y: largestRect.top, width: largestRect.right - largestRect.left, height: largestRect.bottom - largestRect.top };
+	const rect = {
+		x: largestRect.left - margin,
+		y: largestRect.top - margin,
+		width: largestRect.right - largestRect.left + (margin * 2),
+		height: largestRect.bottom - largestRect.top + (margin * 2)
+	};
+	// We need to handle RTL overflow/scroll scenarios because of Playwright limitations
+	if (document.documentElement.getAttribute('dir') === 'rtl' && (largestRect.left < 0 || window.scrollX < 0)) {
+		rect.x = -1 * largestRect.left - 1;
+		rect.width = largestRect.right + margin;
+
+		if (largestRect.top <= 0) {
+			rect.y = window.scrollY;
+			rect.height = largestRect.bottom + margin;
+		}
+		rect.width = Math.min(rect.width, document.documentElement.clientWidth);
+		rect.height = Math.min(rect.height, document.documentElement.clientHeight);
+		return { rect, fullPage: true };
+	}
+	return { rect, fullPage: false };
 }
 
-async function ScreenshotAndCompare(opts) {
+async function ScreenshotAndCompare(opts = {}) {
 
 	if (window.d2lTest) {
 		document.documentElement.classList.add('screenshot');
@@ -54,13 +73,18 @@ async function ScreenshotAndCompare(opts) {
 	}
 
 	const name = this.test.fullTitle();
-	let rect = null;
-	if (this.elem !== document) {
+	let fullPage = false,
+		rect = null;
+	if (this.elem === document) {
+		fullPage = true;
+	} else {
 		const elemsToInclude = [this.elem, ...this.elem.querySelectorAll('.vdiff-include')];
-		rect = findLargestRect(elemsToInclude);
+		const margin = opts.margin ?? DEFAULT_MARGIN;
+		({ rect, fullPage } = findLargestRect(elemsToInclude, margin));
 	}
 	const slowDuration = this.test.slow();
-	let result = await executeServerCommand('brightspace-visual-diff-compare', { name, rect, slowDuration, opts });
+
+	let result = await executeServerCommand('brightspace-visual-diff-compare', { name, fullPage, rect, slowDuration });
 	if (result.resizeRequired) {
 		this.test.timeout(0);
 		result = await executeServerCommand('brightspace-visual-diff-compare-resize', { name });

package/src/server/visual-diff-plugin.js

@@ -5,7 +5,6 @@ import pixelmatch from 'pixelmatch';
 import { PNG } from 'pngjs';
 
 const isCI = !!env['CI'];
-const DEFAULT_MARGIN = 10;
 const DEFAULT_TOLERANCE = 0; // TODO: Support tolerance override?
 const METADATA_NAME = '.vdiff.json';
 const ROOT_NAME = '.vdiff';
@@ -181,21 +180,13 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 					}
 				}
 
-				const opts = { margin: DEFAULT_MARGIN, ...payload.opts };
 				const screenshotOpts = {
 					animations: 'disabled',
 					path: updateGoldens ? goldenFileName : screenshotFileName
 				};
-				if (!payload.rect) {
-					screenshotOpts.fullPage = true;
-				} else {
-					screenshotOpts.clip = {
-						x: payload.rect.x - opts.margin,
-						y: payload.rect.y - opts.margin,
-						width: payload.rect.width + (opts.margin * 2),
-						height: payload.rect.height + (opts.margin * 2)
-					};
-				}
+
+				if (payload.fullPage) screenshotOpts.fullPage = true;
+				if (payload.rect) screenshotOpts.clip = payload.rect;
 
 				const page = session.browser.getPage(session.id);
 				await page.screenshot(screenshotOpts);

package/src/server/wtr-config.js

@@ -94,11 +94,11 @@ export class WTRConfig {
 								font-size: 0.95rem;
 								font-weight: 400;
 								line-height: 1.4rem;
-								padding: 30px;
+								margin: 0;
+								padding: 38px;
 							}
-							body.fullscreen > #d2l-test-fixture-container {
-								position: absolute;
-								inset: 0;
+							body.no-padding {
+								padding: 0;
 							}
 						</style>
 					</head>