DS-2430: Add VRT and E2E tests for ontario-page-alert#187
Conversation
…verage - Ensure invalid or missing `type` values fall back to `informational` - Align runtime behaviour with console warning message - Update page alert demo to include edge cases - Add Playwright E2E tests for type rendering, content, links, and defaults - Fix E2E selectors for shadow DOM + slotted content
MeaghanCarrieres
added
component-library
smorrisods
left a comment
smorrisods
left a comment
There was a problem hiding this comment.
Sorry, @MeaghanCarrieres apparently I didn't submit my comments 😅
There was a problem hiding this comment.
Oh, you had to write your own?
There was a problem hiding this comment.
Yeah, I had to write one to get it to work for the Next app!
| return { file: require.resolve(`${dir}/_${base}.scss`) }; | ||
| } catch {} | ||
|
|
||
| return null; |
There was a problem hiding this comment.
All errors are swallowed here. If nothing resolves it might be worth us knowing. One idea is to add logging but take in an option debug parameter that can let us enable the logging if needed.
| @forward 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/theme.scss' with ( | ||
| $asset-base-path: '/assets' | ||
| ); | ||
|
|
||
| // Include slotted styles | ||
| @use 'pkg:@ongov/ontario-design-system-component-library-react/styles/slotted-styles/callouts-asides.scss'; | ||
| @use 'pkg:@ongov/ontario-design-system-component-library-react/styles/slotted-styles/page-alerts.scss'; |
There was a problem hiding this comment.
I wonder if it is worth putting into the React lib and then just documenting how to update the asset path with with. What do you think?
There was a problem hiding this comment.
Do you mean having this file as something importable by the react library but adding a customization for the asset-base-path value?
2 participants
This MR adds Next.js SSR support for the Ontario Design System React component library, resolves styling issues with slotted page alert content, and introduces VRT + E2E test coverage for the
ontario-page-alertcomponent.Changes
app-nextjs
pkg:resolution using new exportedpkgImporterontario-theme.scsswrapper:$asset-base-pathlayout.tsxComponent Library
ontario-page-alert"type" prop to includereflect: trueReact Component Library
pkgImporterhelper for Next.js Sass resolutionWhy this change was needed
pkg:imports by default, causing theme and slotted styles to fail compilation.ontario-page-alert[type="error"]), requiring the prop to be reflected to the DOM.Result