test(mosaic): restore mocks through config and run select layout tests in Chromium (#10454)

Author: alexcarpenter

.changeset/mosaic-mock-hygiene.md

@@ -0,0 +1,2 @@
+---
+---

.github/workflows/ci.yml

@@ -428,6 +428,9 @@ jobs:
       - name: Run feature tests
         run: pnpm --filter @clerk/mosaic test:feature
 
+      - name: Run browser tests
+        run: pnpm --filter @clerk/mosaic test:browser
+
       - name: Upload failure artifacts
         if: ${{ cancelled() || failure() }}
         uses: actions/upload-artifact@v4.6.2

packages/mosaic/docs/testing.md

@@ -95,13 +95,18 @@ Existing tests that break these rules move when their folder next changes.
 pnpm --filter @clerk/mosaic test                      # unit tests (jsdom and primitives)
 pnpm --filter @clerk/mosaic test:feature              # feature tests (Chromium)
 pnpm --filter @clerk/mosaic test:feature user-button  # one feature
+pnpm --filter @clerk/mosaic test:browser              # layout tests (Chromium)
 pnpm --filter @clerk/mosaic exec vitest run           # every project
 ```
 
 CI runs feature tests in their own `Mosaic Feature Tests` job, so the repo-wide
 unit test job never needs a browser.
 
-Feature tests need Chromium: run `pnpm playwright install chromium` once. They
+jsdom and happy-dom have no layout engine, so every rect is 0 and a test that
+asserts on position, size or scrolling always passes there. Name such a test
+`*.browser.test.tsx` so it runs in Chromium, in the same CI job.
+
+Feature and browser tests need Chromium: run `pnpm playwright install chromium` once. They
 import the built `@clerk/clerk-js`, so run `pnpm turbo build --filter=@clerk/clerk-js`
 after changing it. Failure screenshots land in `packages/mosaic/.vitest/`.
 Console output from passing tests only shows with `--reporter=verbose`.

packages/mosaic/package.json

@@ -58,6 +58,7 @@
     "lint:attw": "attw --pack . --exclude-entrypoints styles.css --profile esm-only",
     "lint:publint": "publint",
     "test": "vitest run --project primitives --project mosaic",
+    "test:browser": "vitest run --project browser",
     "test:ci": "vitest run --project primitives --project mosaic --maxWorkers=70%",
     "test:feature": "vitest run --project feature",
     "test:webkit": "vitest run --project webkit",

packages/mosaic/src/blocks/confirm/__tests__/confirm.controller.test.ts

@@ -1,6 +1,6 @@
 import { ClerkRuntimeError } from '@clerk/shared/error';
 import { act, renderHook, waitFor } from '@testing-library/react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../../__tests__/async';
 import { createActor } from '../../../machine/create-actor';
@@ -9,9 +9,6 @@ import { confirmMachine, useConfirmController } from '../confirm.controller';
 
 const blocked = new SaveError({ global: { code: 'action_blocked', message: 'Raw server sentence.' } });
 const cancelled = new ClerkRuntimeError('cancelled', { code: 'reverification_cancelled' });
-afterEach(() => {
-  vi.restoreAllMocks();
-});
 
 function start() {
   const actor = createActor(confirmMachine).start();

packages/mosaic/src/blocks/confirmation/__tests__/confirmation.feature.test.tsx

@@ -2,7 +2,7 @@ import { reverificationError } from '@clerk/shared/authorization-errors';
 import { act, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { ReactNode } from 'react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import { deferred } from '../../../__tests__/async';
 import { clerkApiError } from '../../../__tests__/clerk-errors';
@@ -25,10 +25,6 @@ const session = fapiSession({ id: 'sess_1', user: fapiUser({ id: 'user_1' }) });
 const VERIFY = '/v1/client/sessions/sess_1/verify';
 const TITLE = 'Remove connected account';
 
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-
 function Host<Payload>({
   options,
   children,

packages/mosaic/src/components/action-bar/action-bar.test.tsx

@@ -2,7 +2,7 @@ import * as stylex from '@stylexjs/stylex';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { PortalProvider } from '../../primitives/portal';
 import { Dialog } from '../dialog';
@@ -65,10 +65,6 @@ beforeEach(() => {
   vi.spyOn(document.documentElement, 'clientHeight', 'get').mockReturnValue(768);
 });
 
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-
 describe('Mosaic ActionBar', () => {
   it('renders a labelled toolbar tied to its table and described by its count', () => {
     render(<BulkActions />);

packages/mosaic/src/components/avatar/avatar.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { flushSync } from 'react-dom';
 import { createRoot } from 'react-dom/client';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { Pen } from '../../icons/glyphs/pen';
 import { Icon } from '../icon';
@@ -45,7 +45,9 @@ class MockImage {
   }
 }
 
-vi.stubGlobal('Image', MockImage);
+beforeEach(() => {
+  vi.stubGlobal('Image', MockImage);
+});
 
 afterEach(() => {
   outcomes = {};
@@ -365,9 +367,8 @@ describe('Mosaic Avatar', () => {
   });
 
   it('throws when a part is rendered outside <Avatar.Root>', () => {
-    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    vi.spyOn(console, 'error').mockImplementation(() => {});
     expect(() => render(<Avatar.Fallback>CN</Avatar.Fallback>)).toThrow(/must be rendered inside <Avatar.Root>/);
     expect(() => render(<Avatar.Icon />)).toThrow(/must be rendered inside <Avatar.Root>/);
-    spy.mockRestore();
   });
 });

packages/mosaic/src/components/dialog/__tests__/alert-dialog.test.tsx

@@ -83,7 +83,6 @@ describe('role="alertdialog"', () => {
 
     expect(document.querySelector('.cl-dialog-popup')).toHaveAttribute('data-variant', 'card');
     expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
   });
 
   // A corner X answers the question by leaving, which is the one thing an alert must not offer.
@@ -276,7 +275,6 @@ describe('dev warnings', () => {
 
     expect(warn).toHaveBeenCalledWith(expect.stringContaining('no description'));
     expect(warn).toHaveBeenCalledWith(expect.stringContaining('<Card.Description>'));
-    warn.mockRestore();
   });
 
   it('does not ask a plain dialog for a description', async () => {
@@ -296,7 +294,6 @@ describe('dev warnings', () => {
     await settle();
 
     expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
   });
 
   // The name warning skipped any role but `dialog` before alert dialogs existed, which would have
@@ -322,7 +319,6 @@ describe('dev warnings', () => {
 
     expect(warn).toHaveBeenCalledWith(expect.stringContaining('no accessible name'));
     expect(warn).toHaveBeenCalledWith(expect.stringContaining('<Card.Title>'));
-    warn.mockRestore();
   });
 
   it('stays quiet when both are supplied', async () => {
@@ -332,7 +328,6 @@ describe('dev warnings', () => {
     await settle();
 
     expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
   });
 });
 
@@ -371,7 +366,6 @@ describe('stacked on another dialog', () => {
     expect(popups[0]).toHaveAttribute('data-stack-base', '');
     expect(popups[1]).toHaveAttribute('data-stacked', '');
     expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
   });
 });
 
@@ -454,6 +448,5 @@ describe('showCloseButton', () => {
     await settle();
 
     expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
   });
 });

packages/mosaic/src/components/dialog/__tests__/dialog.test.tsx

@@ -310,7 +310,6 @@ describe('nested Mosaic Dialogs', () => {
     await user.click(screen.getByRole('button', { name: 'Add email' }));
 
     expect(warn).toHaveBeenCalledWith(expect.stringContaining('variant="profile"'));
-    warn.mockRestore();
   });
 
   it('warns when a fullscreen profile opens inside another dialog', async () => {
@@ -321,7 +320,6 @@ describe('nested Mosaic Dialogs', () => {
     await user.click(screen.getByRole('button', { name: 'Add email' }));
 
     expect(warn).toHaveBeenCalledWith(expect.stringContaining('variant="fullscreen"'));
-    warn.mockRestore();
   });
 
   // A card over a profile is the delete-account confirmation: a `Card` inside a `card` dialog.
@@ -333,7 +331,6 @@ describe('nested Mosaic Dialogs', () => {
     await user.click(screen.getByRole('button', { name: 'Add email' }));
 
     expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
   });
 });
 
@@ -463,7 +460,6 @@ describe('Dialog.CloseButton', () => {
     );
 
     expect(warn).toHaveBeenCalledWith(expect.stringContaining('alert dialog'));
-    warn.mockRestore();
   });
 });
 
@@ -665,15 +661,13 @@ describe('compactPlacement', () => {
 
     expect(classesOf('.cl-dialog-popup')).not.toEqual(expect.arrayContaining(atomFor(probe.anchored)));
     expect(warn).toHaveBeenCalledWith(expect.stringContaining('takes no placement'));
-    warn.mockRestore();
   });
 
   it('warns when a fullscreen profile is given a placement', () => {
     const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
     renderPlacement('sheet', 'fullscreen');
 
     expect(warn).toHaveBeenCalledWith(expect.stringContaining('variant="fullscreen"'));
-    warn.mockRestore();
   });
 
   it('keeps a profile centered by default without warning', () => {
@@ -682,7 +676,6 @@ describe('compactPlacement', () => {
 
     expect(classesOf('.cl-dialog-popup')).not.toEqual(expect.arrayContaining(atomFor(probe.anchored)));
     expect(warn).not.toHaveBeenCalledWith(expect.stringContaining('takes no placement'));
-    warn.mockRestore();
   });
 });
 
@@ -764,7 +757,6 @@ describe('accessible name warning', () => {
 
     expect(warn).toHaveBeenCalledWith(expect.stringContaining('no accessible name'));
     expect(warn).toHaveBeenCalledWith(expect.stringContaining(`<${titlePart}>`));
-    warn.mockRestore();
   });
 
   it('does not warn when the card inside it supplies the name', async () => {
@@ -780,7 +772,6 @@ describe('accessible name warning', () => {
     await settle();
 
     expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
   });
 
   // The name can come from the consumer instead of from a Title, and an `aria-label` on the popup
@@ -796,6 +787,5 @@ describe('accessible name warning', () => {
     await settle();
 
     expect(warn).not.toHaveBeenCalled();
-    warn.mockRestore();
   });
 });