@brightspace-ui/testing 1.1.0 → 1.3.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.1.0",
+  "version": "1.3.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "eslint . --ext .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/server/wtr-config.js

@@ -14,6 +14,15 @@ const BROWSER_MAP = {
 	safari: 'webkit',
 	webkit: 'webkit'
 };
+const SUPPRESS_RESIZE_OBSERVER_ERRORS = `
+	<script>
+	window.addEventListener('error', (err) => {
+		if (err.message.includes('ResizeObserver')) {
+			err.stopImmediatePropagation();
+		}
+	});
+	</script>
+`;
 export const DEFAULT_VDIFF_SLOW = 500;
 
 export class WTRConfig {
@@ -36,13 +45,7 @@ export class WTRConfig {
 				`<!DOCTYPE html>
 				<html lang="en">
 					<body>
-						<script>
-							window.addEventListener('error', (err) => {
-								if (err.message.includes('ResizeObserver')) {
-									err.stopImmediatePropagation();
-								}
-							});
-						</script>
+						${SUPPRESS_RESIZE_OBSERVER_ERRORS}
 						<script type="module" src="${testFramework}"></script>
 					</body>
 				</html>`,
@@ -94,15 +97,16 @@ 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>
 					<body>
+						${SUPPRESS_RESIZE_OBSERVER_ERRORS}
 						<script type="module" src="${testFramework}"></script>
 					</body>
 				</html>`