@brightspace-ui/testing 1.10.3 → 1.12.0

package/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.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@brightspace-ui/testing",
   "description": "Utilities for testing front-end components and applications",
   "type": "module",
-  "version": "1.10.3",
+  "version": "1.12.0",
   "repository": "https://github.com/BrightspaceUI/testing.git",
   "scripts": {
     "lint": "eslint . --ext .js",

package/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();

package/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';

package/src/browser/reset.js

@@ -1,4 +1,4 @@
-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';
 
@@ -6,8 +6,10 @@ 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) {