feat: add setViewport (#265)

README.md

@@ -90,6 +90,18 @@ it('should work on small viewports', async() => {
 });
 ```
 
+To change the viewport size outside of `fixture`, use the `setViewport` command:
+
+```javascript
+import { fixture, setViewport } from '@brightspace-ui/testing';
+
+it('should adapt when viewport changes', async() => {
+  const elem = await fixture(html`<my-elem></my-elem>`);
+  await setViewport({ height: 300, width: 200 });
+  // do assertions
+});
+```
+
 #### Configuring the Language or Text Direction
 
 If the component under test has special multi-lingual or bidirectional text behavior, both `language` and `rtl` (right-to-left) options are available.

src/browser/commands.js

@@ -1,5 +1,6 @@
 import { sendKeys as cmdSendKeys, sendMouse as cmdSendMouse } from '@web/test-runner-commands';
 import { requestMouseReset } from './reset.js';
+export { setViewport } from './reset.js';
 
 function getElementPosition(elem) {
 	const { x, y, width, height } = elem.getBoundingClientRect();

src/browser/index.js

@@ -1,6 +1,6 @@
 import './vdiff.js';
 
 export { assert, aTimeout, defineCE, expect, html, nextFrame, oneDefaultPreventedEvent, oneEvent, waitUntil } from '@open-wc/testing';
-export { clickAt, clickElem, focusElem, hoverAt, hoverElem, sendKeys, sendKeysElem } from './commands.js';
+export { clickAt, clickElem, focusElem, hoverAt, hoverElem, sendKeys, sendKeysElem, setViewport } from './commands.js';
 export { fixture } from './fixture.js';
 export { runConstructor } from './constructor.js';

src/browser/reset.js

@@ -1,13 +1,15 @@
-import { emulateMedia, sendMouse, setViewport } from '@web/test-runner-commands';
+import { setViewport as cmdSetViewport, emulateMedia, sendMouse } from '@web/test-runner-commands';
 import { getDocumentLocaleSettings } from '@brightspace-ui/intl/lib/common.js';
 import { nextFrame } from '@open-wc/testing';
 
 const DEFAULT_PAGE_PADDING = true,
 	DEFAULT_LANG = 'en',
 	DEFAULT_MATHJAX_RENDER_LATEX = false,
 	DEFAULT_MEDIA = 'screen',
-	DEFAULT_VIEWPORT_HEIGHT = 800,
-	DEFAULT_VIEWPORT_WIDTH = 800;
+	DEFAULT_VIEWPORT = {
+		height: 800,
+		width: 800
+	};
 
 const documentLocaleSettings = getDocumentLocaleSettings();
 
@@ -24,22 +26,32 @@ export function requestMouseReset() {
 	shouldResetMouse = true;
 }
 
+export async function setViewport(viewport) {
+
+	const newViewport = { ...DEFAULT_VIEWPORT, ...viewport };
+
+	if (newViewport.height !== currentViewportHeight || newViewport.width !== currentViewportWidth) {
+		currentViewportHeight = newViewport.height;
+		currentViewportWidth = newViewport.width;
+		await cmdSetViewport(newViewport).catch(() => {});
+		return true;
+	}
+
+	return false;
+
+}
+
 export async function reset(opts = {}) {
 
 	const defaultOpts = {
 		lang: DEFAULT_LANG,
 		mathjax: {},
 		rtl: !!opts.lang?.startsWith('ar'),
-		viewport: {
-			height: DEFAULT_VIEWPORT_HEIGHT,
-			width: DEFAULT_VIEWPORT_WIDTH
-		},
 		pagePadding: DEFAULT_PAGE_PADDING,
 		media: DEFAULT_MEDIA
 	};
 
 	opts = { ...defaultOpts, ...opts };
-	opts.viewport = { ...defaultOpts.viewport, ...opts.viewport };
 	opts.mathjax.renderLatex = (typeof opts.mathjax.renderLatex === 'boolean') ? opts.mathjax.renderLatex : DEFAULT_MATHJAX_RENDER_LATEX;
 
 	let awaitNextFrame = false;
@@ -83,11 +95,8 @@ export async function reset(opts = {}) {
 		awaitNextFrame = true;
 	}
 
-	if (opts.viewport.height !== currentViewportHeight || opts.viewport.width !== currentViewportWidth) {
-		await setViewport(opts.viewport).catch(() => {});
+	if (await setViewport(opts.viewport)) {
 		awaitNextFrame = true;
-		currentViewportHeight = opts.viewport.height;
-		currentViewportWidth = opts.viewport.width;
 	}
 
 	if (opts.mathjax.renderLatex !== currentMathjaxRenderLatex) {

test/browser/commands.test.js

@@ -1,4 +1,4 @@
-import { clickAt, clickElem, expect, fixture, focusElem, hoverAt, hoverElem, sendKeys, sendKeysElem } from '../../src/browser/index.js';
+import { clickAt, clickElem, expect, fixture, focusElem, hoverAt, hoverElem, sendKeys, sendKeysElem, setViewport } from '../../src/browser/index.js';
 import { html } from 'lit';
 import { spy } from 'sinon';
 
@@ -106,4 +106,43 @@ describe('commands', () => {
 		});
 	});
 
+	describe('viewport', () => {
+
+		it('should set width and height', async() => {
+			await setViewport({ height: 200, width: 300 });
+			expect(window.innerHeight).to.equal(200);
+			expect(window.innerWidth).to.equal(300);
+		});
+
+		it('should use default width and height', async() => {
+			await setViewport({ height: 200, width: 300 });
+			await setViewport();
+			expect(window.innerHeight).to.equal(800);
+			expect(window.innerWidth).to.equal(800);
+		});
+
+		it('should use default width', async() => {
+			await setViewport({ height: 200, width: 300 });
+			await setViewport({ height: 400 });
+			expect(window.innerHeight).to.equal(400);
+			expect(window.innerWidth).to.equal(800);
+		});
+
+		it('should use default height', async() => {
+			await setViewport({ height: 200, width: 300 });
+			await setViewport({ width: 400 });
+			expect(window.innerHeight).to.equal(800);
+			expect(window.innerWidth).to.equal(400);
+		});
+
+		it('should not call underlying API if values are unchanged', async() => {
+			const size = { height: 200, width: 300 };
+			const changed1 = await setViewport(size);
+			expect(changed1).to.be.true;
+			const changed2 = await setViewport(size);
+			expect(changed2).to.be.false;
+		});
+
+	});
+
 });