@equinor/fusion-framework-vitest-plugin-react-app 0.2.0-next.1 → 0.2.0-next.2

package/dist/types/define-project.d.ts

@@ -15,7 +15,9 @@ export type AppTestConfigOverride = Partial<UserWorkspaceConfig> | ((config: Use
  * Drop-in replacement for Vitest's own `defineProject` — same `export default`, just pre-wired.
  * Playwright/`chromium` is only the *default* — pass `override` to change or replace anything
  * (e.g. `test.name`, or swap `test.browser.provider` for a different `@vitest/browser-*`
- * provider) without hand-rolling `appTestVitePlugin`'s own wiring.
+ * provider) without hand-rolling `appTestVitePlugin`'s own wiring. The default `1024x768`
+ * viewport matches a typical low-resolution Citrix session rather than Vitest's own
+ * mobile-sized default; pass `test.browser.viewport` to use a different size.
  *
  * @example
  * ```ts

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.2.0-next.1";
+export declare const version = "0.2.0-next.2";

package/docs/configuration.md

@@ -22,6 +22,8 @@ The default project registers `appTestVitePlugin()` and configures:
 - Vitest Browser Mode enabled
 - the Playwright provider with one Chromium instance
 - headless browser execution
+- a `1024x768` default viewport, matching a typical low-resolution Citrix session rather than
+  Vitest's own mobile-sized default
 - Vite warmup for `src/**/*.{ts,tsx}` to discover lazy imports before tests run
 
 ## Merge ordinary Vitest options
@@ -35,7 +37,8 @@ import { name, version } from './package.json' with { type: 'json' };
 export default defineProject({
   test: {
     name: `${name}@${version}`,
-    browser: { viewport: { width: 1280, height: 720 } },
+    // opt into a wider viewport for an app that only needs to support desktop
+    browser: { viewport: { width: 1920, height: 1080 } },
   },
 });
 ```

package/docs/why-browser-mode.md

@@ -25,13 +25,22 @@ they do not need browser behavior.
   [Module mocks](module-mocks.md), while the actual module configuration, lifecycle, providers,
   and rendering behavior still run.
 - **Browser fidelity:** Chromium provides real layout, `ResizeObserver`, custom elements, and
-  Shadow DOM. This can remove DOM polyfills and component replacements that only exist because
-  `happy-dom` or `jsdom` cannot provide the required browser behavior.
-
-A real browser does not remove every test workaround. AG Grid license messages and Lit dev-mode
-warnings can still occur in Chromium. Component mocks may also be useful because they simplify
-focused tests. Remove a workaround only after running the affected test against the real
-component.
+  Shadow DOM — behavior `happy-dom` and `jsdom` only approximate.
+
+> [!WARNING]
+> A DOM-emulation gap is usually patched one of two ways: a polyfill standing in for the missing
+> browser API, or a component replacement that avoids exercising it at all. Both are test-only
+> code with no equivalent in production, and both defeat the point of the test: a polyfill can
+> drift from real browser behavior unnoticed, and a mocked component only proves the *mock*
+> renders correctly, never the real one. A passing test built on either can still fail — or
+> silently lie — against the real component. Treat every DOM-emulation workaround as debt to
+> remove, not a pattern to reach for.
+
+A real browser does not eliminate every workaround: AG Grid license messages and Lit dev-mode
+warnings are console noise from real Chromium runs, not DOM-emulation gaps, and suppressing them
+carries none of the risk above (see [Module mocks](module-mocks.md) for the supported way to
+seed module state instead of replacing a component). Remove a DOM-emulation-only workaround only
+after confirming the affected test still passes against the real component in Browser Mode.
 
 ## Choose a different runtime
 
@@ -58,6 +67,12 @@ See [Configuration](configuration.md) for the complete `defineProject` behavior.
 
 ### Use happy-dom or jsdom
 
+> [!CAUTION]
+> Rendering with `happy-dom` or `jsdom` reintroduces the DOM-emulation tradeoff above: any gap
+> between the emulation and a real browser has to be closed with a polyfill or a component
+> replacement, not fixed. Only take this path for a component or hook that provably does not
+> need browser fidelity — otherwise stay in Browser Mode.
+
 The Fusion module setup does not depend on Browser Mode. Build the same provider tree and pass it
 to another renderer. The example below uses `@testing-library/react` on `happy-dom`:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-framework-vitest-plugin-react-app",
-  "version": "0.2.0-next.1",
+  "version": "0.2.0-next.2",
   "description": "Vite plugin resolving an application's manifest, config, and module-configurator as virtual modules for testing.",
   "type": "module",
   "exports": {
@@ -48,10 +48,10 @@
   },
   "dependencies": {
     "@equinor/fusion-framework": "8.1.0-next.0",
-    "@equinor/fusion-framework-cli": "15.2.8-next.1",
     "@equinor/fusion-framework-module": "6.1.3-next.0",
-    "@equinor/fusion-framework-module-app": "8.1.0-next.0",
     "@equinor/fusion-framework-app": "14.0.0-next.0",
+    "@equinor/fusion-framework-cli": "15.2.8-next.1",
+    "@equinor/fusion-framework-module-app": "8.1.0-next.0",
     "@equinor/fusion-framework-react": "9.0.0-next.0",
     "@equinor/fusion-imports": "2.0.3-next.0",
     "@equinor/fusion-framework-react-module": "4.0.3-next.0"

package/src/define-project.ts

@@ -26,7 +26,9 @@ export type AppTestConfigOverride =
  * Drop-in replacement for Vitest's own `defineProject` — same `export default`, just pre-wired.
  * Playwright/`chromium` is only the *default* — pass `override` to change or replace anything
  * (e.g. `test.name`, or swap `test.browser.provider` for a different `@vitest/browser-*`
- * provider) without hand-rolling `appTestVitePlugin`'s own wiring.
+ * provider) without hand-rolling `appTestVitePlugin`'s own wiring. The default `1024x768`
+ * viewport matches a typical low-resolution Citrix session rather than Vitest's own
+ * mobile-sized default; pass `test.browser.viewport` to use a different size.
  *
  * @example
  * ```ts
@@ -57,6 +59,9 @@ export const defineProject = (override?: AppTestConfigOverride): UserWorkspaceCo
         enabled: true,
         provider: playwright(),
         headless: true,
+        // most users run the app through Citrix at a low, fixed resolution rather than a
+        // resizable desktop window — default to that instead of Vitest's own mobile-sized viewport
+        viewport: { width: 1024, height: 768 },
         instances: [{ browser: 'chromium' }],
       },
     },

package/src/version.ts

@@ -1,2 +1,2 @@
 // Generated by genversion.
-export const version = '0.2.0-next.1';
+export const version = '0.2.0-next.2';