@brightspace-ui/testing 0.28.1 → 0.29.1

package/README.md

@@ -335,6 +335,21 @@ describe('my-elem', () => {
 
 The filename and location of the resulting image will be based on the suite names and test name.
 
+Sometimes you might be writing tests to verify a component's position within the whole viewport. For snapshots of the whole page, set up your components and pass `document` to the assertion:
+
+```javascript
+import { fixture, html } from '@brightspace-ui/testing';
+
+describe('my-elem', () => {
+  describe('situation1', () => {
+    it('state1', async() => {
+      await fixture(html`<my-dialog opened></my-dialog>`);
+      await expect(document).to.be.golden();
+    });
+  });
+});
+```
+
 #### Configuring the Snapshot Area
 
 By default, the snapshot area will be a rectangle around the source element plus a `10px` buffer margin on each side. To use a different margin, pass it as an option:

package/package.json

@@ -2,7 +2,7 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "0.28.1",
+  "version": "0.29.1",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "eslint . --ext .js",
@@ -11,7 +11,7 @@
     "test:bin": "mocha './test/bin/**/*.test.js'",
     "test:browser": "npx d2l-test-runner --files './test/browser/**/*.test.js'",
     "test:server": "mocha './test/server/**/*.test.js'",
-    "test:vdiff": "npx d2l-test-runner --config ./test/browser/vdiff.config.js --group vdiff"
+    "test:vdiff": "npx d2l-test-runner vdiff --config ./test/browser/vdiff.config.js"
   },
   "bin": {
     "d2l-test-runner": "./bin/d2l-test-runner.js",
@@ -20,7 +20,6 @@
   "author": "D2L Corporation",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@web/dev-server": "^0.2",
     "chai": "^4",
     "eslint": "^8",
     "eslint-config-brightspace": "^0.23",
@@ -40,6 +39,7 @@
     "@rollup/plugin-node-resolve": "^15",
     "@open-wc/testing": "^3",
     "@web/config-loader": "^0.2",
+    "@web/dev-server": "^0.2",
     "@web/rollup-plugin-html": "^2",
     "@web/test-runner": "^0.16",
     "@web/test-runner-commands": "^0.7",

package/src/browser/vdiff.js

@@ -27,7 +27,7 @@ async function ScreenshotAndCompare(opts) {
 	}
 
 	const name = this.test.fullTitle();
-	const rect = this.elem.getBoundingClientRect();
+	const rect = this.elem === document ? null : this.elem.getBoundingClientRect();
 	const slowDuration = this.test.slow();
 	let result = await executeServerCommand('brightspace-visual-diff-compare', { name, rect, slowDuration, opts });
 	if (result.resizeRequired) {

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

@@ -182,18 +182,23 @@ export function visualDiff({ updateGoldens = false, runSubset = false } = {}) {
 				}
 
 				const opts = { margin: DEFAULT_MARGIN, ...payload.opts };
-
-				const page = session.browser.getPage(session.id);
-				await page.screenshot({
+				const screenshotOpts = {
 					animations: 'disabled',
-					clip: {
+					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)
-					},
-					path: updateGoldens ? goldenFileName : screenshotFileName
-				});
+					};
+				}
+
+				const page = session.browser.getPage(session.id);
+				await page.screenshot(screenshotOpts);
 
 				if (updateGoldens) {
 					return { pass: true };