feat(doAndDontBlock): cypress to vitest GCM-209#1377
Conversation
There was a problem hiding this comment.
Pull request overview
Migrates the Dos & Don’ts block tests from Cypress component tests to Vitest + Testing Library, while doing a small refactor to centralize theme color fallback logic.
Changes:
- Replaces
DosDontsBlock.spec.ct.tsx(Cypress CT) withDosDontsBlock.spec.tsx(Vitest/Testing Library). - Updates
dos-donts-blockpackage config/deps to remove Cypress and add Vitest/Testing Library. - Refactors theme color defaulting into a helper (
getThemeColorOrDefault) to reduce duplication.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Updates lockfile for removed Cypress and added Vitest/Testing Library dependencies. |
| packages/dos-donts-block/tsconfig.json | Removes Cypress types and switches TS types to Testing Library jest-dom. |
| packages/dos-donts-block/src/DosDontsBlock.tsx | Extracts theme color lookup/fallback into a helper to reduce repeated logic. |
| packages/dos-donts-block/src/DosDontsBlock.spec.tsx | Adds new Vitest/Testing Library test suite for the block. |
| packages/dos-donts-block/src/DosDontsBlock.spec.ct.tsx | Removes Cypress component tests for this block. |
| packages/dos-donts-block/package.json | Removes Cypress devDependency; adds Vitest and Testing Library deps for this package. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const [DosDontsBlockWithStubs] = withAppBridgeBlockStubs(DosDontsBlock, { | ||
| blockSettings: { columns: 2 }, | ||
| }) as [React.ComponentType, unknown]; | ||
|
|
| const image = screen.queryByTestId(DO_DONT_IMAGE); | ||
| if (image) { | ||
| expect(image.getAttribute('alt')).toBe('Alt text'); | ||
| } else { | ||
| expect(screen.getByTestId(DOS_DONTS_BLOCK)).toBeTruthy(); | ||
| } | ||
| }); |
| if (!firstEditor) { | ||
| return; | ||
| } | ||
|
|
||
| await user.dblClick(firstEditor); | ||
| await user.type(firstEditor, 'This is an example do description.'); | ||
| await user.keyboard('{Control>}a{/Control}'); | ||
|
|
||
| const linkButton = document.querySelector(FLOATING_LINK_BUTTON); | ||
| if (!linkButton) { | ||
| return; | ||
| } | ||
| await user.click(linkButton); |
| if (!firstEditor) { | ||
| return; | ||
| } | ||
|
|
||
| await user.dblClick(firstEditor); | ||
| await user.type(firstEditor, 'This is an example do description.'); | ||
| await user.keyboard('{Control>}a{/Control}'); | ||
|
|
||
| const buttonPlugin = document.querySelector(FLOATING_BUTTON_BUTTON); | ||
| if (!buttonPlugin) { | ||
| return; | ||
| } | ||
| await user.click(buttonPlugin); |
| "tailwindcss": "^3.4.17", | ||
| "typescript": "^6.0.2" | ||
| "typescript": "^6.0.2", | ||
| "vitest": "^4.1.7" |
|
|
||
| render(<DosDontsBlockWithStubs />); | ||
|
|
||
| expect(screen.getByTestId(DOS_DONTS_ADD_BUTTONS)).toBeTruthy(); |
|
|
||
| render(<DosDontsBlockWithStubs />); | ||
|
|
||
| expect(screen.getByTestId(DOS_DONTS_ADD_BUTTONS)).toBeTruthy(); |
| "tailwindcss": "^3.4.17", | ||
| "typescript": "^6.0.2" | ||
| "typescript": "^6.0.2", | ||
| "vitest": "^4.1.7" |
There was a problem hiding this comment.
| "vitest": "^4.1.7" | |
| "vitest": "^4.1.9" |
Always use latest and it would be nice if you could bump it as well in all other package.json
| export const DO_COLOR_DEFAULT_VALUE = { red: 0, green: 200, blue: 165, alpha: 1 }; | ||
| export const DONT_COLOR_DEFAULT_VALUE = { red: 255, green: 55, blue: 90, alpha: 1 }; | ||
|
|
||
| const getThemeColorOrDefault = ( |
There was a problem hiding this comment.
This is not related to changing the test to vitest
ragi96
left a comment
There was a problem hiding this comment.
Merge main into it first
f3ed0ed to
260082c
Compare
|
my tests passed, dose this come from my code? |
Looks like the pnpm-lock got corrupted |
| @@ -6,10 +6,22 @@ import { THEME_PREFIX } from '@frontify/guideline-blocks-settings'; | |||
| export const DO_COLOR_DEFAULT_VALUE = { red: 0, green: 200, blue: 165, alpha: 1 }; | |||
There was a problem hiding this comment.
unrelated changes, only to cypress to vitest
No description provided.