Addon Vitest: Set default viewport if applicable

code/addons/vitest/src/plugin/viewports.test.ts

@@ -0,0 +1,111 @@
+/* eslint-disable no-underscore-dangle */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { page } from '@vitest/browser/context';
+
+import { DEFAULT_VIEWPORT_DIMENSIONS, type ViewportsParam, setViewport } from './viewports';
+import { INITIAL_VIEWPORTS } from '../../../viewport/src/defaults';
+
+vi.mock('@vitest/browser/context', () => ({
+  page: {
+    viewport: vi.fn(),
+  },
+}));
+
+describe('setViewport', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    globalThis.__vitest_browser__ = true;
+  });
+
+  afterEach(() => {
+    globalThis.__vitest_browser__ = false;
+  });
+
+  it('should do nothing if __vitest_browser__ is false', async () => {
+    globalThis.__vitest_browser__ = false;
+
+    const result = await setViewport();
+    expect(result).toBeNull();
+    expect(page.viewport).not.toHaveBeenCalled();
+  });
+
+  it('should set the viewport to the specified dimensions from INITIAL_VIEWPORTS', async () => {
+    const viewportsParam: any = {
+      // supported by default in addon viewports
+      defaultViewport: 'ipad',
+    };
+
+    await setViewport(viewportsParam);
+    expect(page.viewport).toHaveBeenCalledWith(768, 1024);
+  });
+
+  it('should set the viewport to the specified dimensions if defaultViewport is valid', async () => {
+    const viewportsParam: ViewportsParam = {
+      defaultViewport: 'small',
+      viewports: {
+        small: {
+          name: 'Small screen',
+          type: 'mobile',
+          styles: {
+            width: '375px',
+            height: '667px',
+          },
+        },
+      },
+    };
+
+    await setViewport(viewportsParam);
+    expect(page.viewport).toHaveBeenCalledWith(375, 667);
+  });
+
+  it('should set the viewport to DEFAULT_VIEWPORT_DIMENSIONS if defaultViewport has unparseable styles', async () => {
+    const viewportsParam: ViewportsParam = {
+      defaultViewport: 'oddSizes',
+      viewports: {
+        oddSizes: {
+          name: 'foo',
+          type: 'other',
+          styles: {
+            width: 'calc(100vw - 20px)',
+            height: '100%',
+          },
+        },
+      },
+    };
+
+    await setViewport(viewportsParam);
+    expect(page.viewport).toHaveBeenCalledWith(
+      DEFAULT_VIEWPORT_DIMENSIONS.width,
+      DEFAULT_VIEWPORT_DIMENSIONS.height
+    );
+  });
+
+  it('should merge provided viewports with initial viewports', async () => {
+    const viewportsParam: ViewportsParam = {
+      defaultViewport: 'customViewport',
+      viewports: {
+        customViewport: {
+          name: 'Custom Viewport',
+          type: 'mobile',
+          styles: {
+            width: '800px',
+            height: '600px',
+          },
+        },
+      },
+    };
+
+    await setViewport(viewportsParam);
+    expect(page.viewport).toHaveBeenCalledWith(800, 600);
+  });
+
+  it('should fallback to DEFAULT_VIEWPORT_DIMENSIONS if defaultViewport does not exist', async () => {
+    const viewportsParam: any = {
+      defaultViewport: 'nonExistentViewport',
+    };
+
+    await setViewport(viewportsParam);
+    expect(page.viewport).toHaveBeenCalledWith(1200, 900);
+  });
+});

code/addons/vitest/src/plugin/viewports.ts

@@ -9,33 +9,40 @@ declare global {
   var __vitest_browser__: boolean;
 }
 
-interface ViewportsParam {
+export interface ViewportsParam {
   defaultViewport: string;
   viewports: ViewportMap;
 }
 
+export const DEFAULT_VIEWPORT_DIMENSIONS = {
+  width: 1200,
+  height: 900,
+};
+
 export const setViewport = async (viewportsParam: ViewportsParam = {} as ViewportsParam) => {
   const defaultViewport = viewportsParam.defaultViewport;
-
-  if (!page || !globalThis.__vitest_browser__ || !defaultViewport) {
-    return null;
-  }
+  if (!page || !globalThis.__vitest_browser__ || !defaultViewport) return null;
 
   const viewports = {
     ...INITIAL_VIEWPORTS,
     ...viewportsParam.viewports,
   };
 
+  let viewportWidth = DEFAULT_VIEWPORT_DIMENSIONS.width;
+  let viewportHeight = DEFAULT_VIEWPORT_DIMENSIONS.height;
+
   if (defaultViewport in viewports) {
     const styles = viewports[defaultViewport].styles as ViewportStyles;
     if (styles?.width && styles?.height) {
-      const { width, height } = {
-        width: Number.parseInt(styles.width, 10),
-        height: Number.parseInt(styles.height, 10),
-      };
-      await page.viewport(width, height);
+      const validPixelOrNumber = /^\d+(px)?$/;
+
+      // if both dimensions are not valid numbers e.g. 'calc(100vh - 10px)' or '100%', use the default dimensions instead
+      if (validPixelOrNumber.test(styles.width) && validPixelOrNumber.test(styles.height)) {
+        viewportWidth = Number.parseInt(styles.width, 10);
+        viewportHeight = Number.parseInt(styles.height, 10);
+      }
     }
   }
 
-  return null;
+  return page.viewport(viewportWidth, viewportHeight);
 };