From ad4b69cad555bd27fee176bddc77d482700ad49c Mon Sep 17 00:00:00 2001
From: Danny Gleckler <daniel.gleckler@gmail.com>
Date: Tue, 12 Sep 2023 09:39:52 -0400
Subject: [PATCH] feat: Support fullscreen fixture option (#171)

* Support fullscreen fixture option

* Set fixture parentNode

* Add fullscreen docs

* Uncomment playwright install-deps
---
 README.md                | 10 ++++++++++
 src/browser/fixture.js   |  6 +++++-
 src/browser/reset.js     | 18 ++++++++++++++++--
 src/server/pause.js      |  6 +++++-
 src/server/wtr-config.js |  4 ++++
 5 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index f05ef25f..65352feb 100644
--- a/README.md
+++ b/README.md
@@ -458,6 +458,16 @@ To capture the entire viewport, pass `document` as the target element to the ass
 await expect(document).to.be.golden();
 ```
 
+#### Rendering Fullscreen Fixtures
+
+To render a fullscreen fixture that fills the viewport, pass a `fullscreen` option to `fixture()`:
+
+```javascript
+  const elem = await fixture(html`<fullscreen-elem></fullscreen-elem>`, {
+    fullscreen: true
+  });
+```
+
 #### Including Other Elements
 
 Elements using `absolute` or `fixed` positioning (like dropdowns or tooltips) may overflow the target element's capture area. To include them, apply the `vdiff-include` CSS class.
diff --git a/src/browser/fixture.js b/src/browser/fixture.js
index b57f55c5..31c0febc 100644
--- a/src/browser/fixture.js
+++ b/src/browser/fixture.js
@@ -49,7 +49,11 @@ async function waitForElem(elem, awaitLoadingComplete = true) {
 
 export async function fixture(element, opts = {}) {
 	await Promise.all([reset(opts), document.fonts.ready]);
-	const elem = await wcFixture(element);
+
+	const parentNode = document.createElement('div');
+	parentNode.setAttribute('id', 'd2l-test-fixture-container');
+
+	const elem = await wcFixture(element, { parentNode });
 	await waitForElem(elem, opts.awaitLoadingComplete);
 
 	await pause();
diff --git a/src/browser/reset.js b/src/browser/reset.js
index 1128da40..c7d89c9a 100644
--- a/src/browser/reset.js
+++ b/src/browser/reset.js
@@ -2,7 +2,8 @@ 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',
+const DEFAULT_FULLSCREEN = false,
+	DEFAULT_LANG = 'en',
 	DEFAULT_MATHJAX_RENDER_LATEX = false,
 	DEFAULT_VIEWPORT_HEIGHT = 800,
 	DEFAULT_VIEWPORT_WIDTH = 800;
@@ -10,6 +11,7 @@ const DEFAULT_LANG = 'en',
 const documentLocaleSettings = getDocumentLocaleSettings();
 
 let
+	currentFullscreen = false,
 	currentMathjaxRenderLatex = DEFAULT_MATHJAX_RENDER_LATEX,
 	currentRtl = false,
 	currentViewportHeight = 0,
@@ -29,7 +31,8 @@ export async function reset(opts = {}) {
 		viewport: {
 			height: DEFAULT_VIEWPORT_HEIGHT,
 			width: DEFAULT_VIEWPORT_WIDTH
-		}
+		},
+		fullscreen: DEFAULT_FULLSCREEN
 	};
 
 	opts = { ...defaultOpts, ...opts };
@@ -40,6 +43,17 @@ export async function reset(opts = {}) {
 
 	window.scroll(0, 0);
 
+	if (opts.fullscreen !== currentFullscreen) {
+		if (opts.fullscreen) {
+			document.body.classList.add('fullscreen');
+		}
+		else {
+			document.body.classList.remove('fullscreen');
+		}
+		awaitNextFrame = true;
+		currentFullscreen = opts.fullscreen;
+	}
+
 	if (shouldResetMouse) {
 		shouldResetMouse = false;
 		await sendMouse({ type: 'move', position: [0, 0] }).catch(() => {});
diff --git a/src/server/pause.js b/src/server/pause.js
index e5cd1360..04cab39a 100644
--- a/src/server/pause.js
+++ b/src/server/pause.js
@@ -15,7 +15,11 @@ const controls = `
 			display: none !important;
 		}
 		body {
-			margin-top: 70px;
+			margin-top: 76px;
+		}
+
+		:not(.screenshot) body.fullscreen > #d2l-test-fixture-container {
+			top: 76px;
 		}
 
 		.screenshot body {
diff --git a/src/server/wtr-config.js b/src/server/wtr-config.js
index ff5bb315..fe33a104 100644
--- a/src/server/wtr-config.js
+++ b/src/server/wtr-config.js
@@ -96,6 +96,10 @@ export class WTRConfig {
 								line-height: 1.4rem;
 								padding: 30px;
 							}
+							body.fullscreen > #d2l-test-fixture-container {
+								position: absolute;
+								inset: 0;
+							}
 						</style>
 					</head>
 					<body>