Skip to content

Commit

Permalink
feat: Support fullscreen fixture option (#171)
Browse files Browse the repository at this point in the history
* Support fullscreen fixture option

* Set fixture parentNode

* Add fullscreen docs

* Uncomment playwright install-deps
  • Loading branch information
bearfriend authored Sep 12, 2023
1 parent aba4334 commit ad4b69c
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 4 deletions.
10 changes: 10 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
6 changes: 5 additions & 1 deletion src/browser/fixture.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
18 changes: 16 additions & 2 deletions src/browser/reset.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@ 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;

const documentLocaleSettings = getDocumentLocaleSettings();

let
currentFullscreen = false,
currentMathjaxRenderLatex = DEFAULT_MATHJAX_RENDER_LATEX,
currentRtl = false,
currentViewportHeight = 0,
Expand All @@ -29,7 +31,8 @@ export async function reset(opts = {}) {
viewport: {
height: DEFAULT_VIEWPORT_HEIGHT,
width: DEFAULT_VIEWPORT_WIDTH
}
},
fullscreen: DEFAULT_FULLSCREEN
};

opts = { ...defaultOpts, ...opts };
Expand All @@ -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(() => {});
Expand Down
6 changes: 5 additions & 1 deletion src/server/pause.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 4 additions & 0 deletions src/server/wtr-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit ad4b69c

Please sign in to comment.