test(Dialog): port Dialog jest tests to SB tests

[aresnik11]

Summary

First component in the Storybook testing revamp, ported end-to-end. Dialog's Jest render/interaction tests now live as co-located Storybook stories in packages/gamut (run as browser tests via addon-vitest, with axe a11y), and only the ref-forwarding contracts remain as a co-located node test. The old Jest suite and the styleguide story + mdx are removed.

Changes

Tests → stories

• Added packages/gamut/src/Modals/Dialog.stories.tsx — co-located stories titled Molecules/Modals/Dialog. All six original styleguide demo stories are preserved (Default, Danger, DarkMode, CustomClose, CloseButtonCustomization, FocusManagement), plus one behavioral Dismissal story. Each story renders an "Open dialog" trigger and opens the dialog inside its play (the render's onRequestClose is wired to actually close it, so confirm/cancel/close/Escape work when clicked manually too). The dialog is queried via screen since it portals outside the story canvas, and interactions use fn() spies. The autodocs page stays clean because it doesn't auto-run play, while a11y still covers the open dialog since axe runs after play.
• Added packages/gamut/src/Modals/Dialog.test.tsx — node Jest test co-located next to the component, keeping only the two ref-forwarding contracts (closeButtonProps.ref, containerFocusRef) that a browser play can't assert through accessible queries.
• Deleted packages/gamut/src/Modals/__tests__/Dialog.test.tsx (old Jest suite) and the styleguide Dialog.stories.tsx + Dialog.mdx.

Storybook / build config for co-located stories

• packages/.storybook/main.ts — globs gamut stories (../gamut/src) alongside styleguide, and adds ~storybook/blocks + ~storybook/argTypes Vite aliases (gamut stories use ~storybook/*; styleguide keeps ~styleguide/*).
• packages/gamut/tsconfig.lib.json — excludes **/*.stories.* so the library build doesn't compile/emit stories (they import Storybook-only modules).
• packages/gamut/tsconfig.storybook.json (new) + tsconfig.json — a bundler-resolution project that type-checks stories, with ~storybook/* paths. Mirrors how styleguide type-checks its stories (editor / type-aware ESLint; not a CI tsc gate).

Test mapping (old it() → new home)

• renders title/children when open → Default
• does not render when isOpen false → Dismissal (asserted after each close)
• close button / confirm CTA / cancel CTA close the dialog → Dismissal
• clicking inside the dialog does not close → Dismissal
• default close tooltip ("Close dialog") → Dismissal (queries the close button by that name)
• custom close tooltip + disabled state → CloseButtonCustomization
• closeButtonProps.ref forwarded → node Dialog.test.tsx
• containerFocusRef forwarded → node Dialog.test.tsx

The node test stays Jest for now — the Vitest-node project is separate infra.

Coverage added beyond the old suite

• CustomClose asserts the in-content custom close button dismisses the dialog.
• CloseButtonCustomization asserts "Focus Close Button" moves focus to the close button (closeButtonRef.focus()).
• FocusManagement asserts "Focus Dialog Container" moves focus to the dialog (containerFocusRef.focus()).
• Dismissal adds Escape-to-close, which jsdom couldn't exercise but the real browser can.

Testing

• yarn test:stories gamut/src/Modals/Dialog.stories → 7 stories pass, incl. a11y
• yarn nx run gamut:test → node ref contracts pass
• yarn nx run gamut:build → library build passes (stories excluded)
• Optional: yarn start:storybook → Molecules/Modals/Dialog, confirm the Docs page shows trigger buttons (no stacked dialogs), then open each story and exercise it (confirm / cancel / close button / Escape close the dialog; custom close and focus buttons behave) with the Accessibility panel clean

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-1776
• Changeset added (or empty changeset if no release)
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• Package previews from this PR are passing end-to-end tests in all relevant consuming repositories

[pkg-pr-new]

Open in StackBlitz

@skillsoft/eslint-plugin-gamut

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/eslint-plugin-gamut@31

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/eslint-plugin-gamut@31.tgz

@skillsoft/gamut

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut@31

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut@31.tgz

@skillsoft/gamut-agent-tools

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-agent-tools@31

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-agent-tools@31.tgz

@skillsoft/gamut-icons

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-icons@31

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-icons@31.tgz

@skillsoft/gamut-illustrations

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-illustrations@31

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-illustrations@31.tgz

@skillsoft/gamut-patterns

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-patterns@31

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-patterns@31.tgz

@skillsoft/gamut-styles

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-styles@31

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-styles@31.tgz

@skillsoft/gamut-tests

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-tests@31

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-tests@31.tgz

@skillsoft/variance

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/variance@31

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/variance@31.tgz

commit: cb8db56

[LinKCoding]

Works great!
Tests pass and the story loads and tests work and pass there too.
Talked through DM re: the "Run test" button that should be ticketed out.

Two things come to mind:

1. keeping the tests and stories in a dedicated folder makes sense to me since they're kind of auxiliary, but also might feel more cluttered -- it'd be good to get consensus on this since redoing all this work is a lit annoying
2. Doesn't have to be this ticket, but re-using the same claude context would prob help in having it write a script to automate this moving (that's what it'd likely do anyway but 🤷 wouldn't wanna burn tokens just for re-organizing files)