-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: dsw-2088 - basic SSR testing (#159)
* feat: dsw-2088-webc-ssr * basic SSR test * name formatting * nuxt app snapshots * remove page object from ssr test file * add ssr test to nextjs apps CI * latest webc package * add sample snapshots for nuxt and next14 * test for shadow dom markup * test for style tag * enable nuxt CI checks * fix vanilla tests * add icon button * remove type module from package.json * rename variable * remove ssr tests from next13 * add chip ssr test * add label ssr test * add spinner ssr test * add link ssr test * add tag ssr test * adjust nuxt playwright report path * add switch ssr test * remove second switch in test * add back all controls * add checkbox ssr test * add modal ssr test * add cookie banner ssr test * run SSR tests before system * add text input ssr test * switch off nuxt system text * require wdio config * Trigger Build * Trigger CI * Trigger CI * Trigger CI * handle http and https * update readme * unskip vrt * Trigger CI * update vrt * Trigger CI * add ssr test log * remove log * disable visual tests in nuxt * remove snapshot check from ssr tests --------- Co-authored-by: pie-design-system-bot <136586628+pie-design-system-bot@users.noreply.github.com>
- Loading branch information
1 parent
98fb12c
commit e4d4ae5
Showing
15 changed files
with
251 additions
and
126 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import { test, expect } from '@playwright/test'; | ||
| import http from 'http'; | ||
| import https from 'https'; | ||
| import { URL } from 'url'; | ||
| import { getEnvironmentBaseUrl } from '../../playwright-helpers/configuration-helper'; | ||
|
|
||
| const APP_NAME = process.env.APP_NAME; | ||
|
|
||
| const baseUrl = getEnvironmentBaseUrl(APP_NAME); | ||
|
|
||
| // TODO - Is there a better way to define this list? | ||
| // TODO - uncomment the components when we are ready to test them | ||
| const components = [ | ||
| 'assistive-text', | ||
| 'button', | ||
| 'card', | ||
| 'checkbox', | ||
| 'chip', | ||
| 'cookie-banner', | ||
| 'form-label', | ||
| 'icon', | ||
| 'icon-button', | ||
| 'link', | ||
| 'modal', | ||
| 'spinner', | ||
| 'switch', | ||
| 'tag', | ||
| 'text-input', | ||
| // 'notification' | ||
| ]; | ||
|
|
||
| const getComponentPageUrl = (component: string, baseUrl: string): string => `${baseUrl}/components/${component}`; | ||
|
|
||
| async function fetchHtml(url: string): Promise<string> { | ||
| return new Promise<string>((resolve, reject) => { | ||
| const parsedUrl = new URL(url); | ||
| const protocol = parsedUrl.protocol === 'https:' ? https : http; | ||
|
|
||
| protocol.get(url, (response) => { | ||
| let data = ''; | ||
|
|
||
| response.on('data', (chunk) => { | ||
| data += chunk; | ||
| }); | ||
|
|
||
| response.on('end', () => { | ||
| resolve(data); | ||
| }); | ||
| }).on('error', (err) => { | ||
| reject(err); | ||
| }); | ||
| }); | ||
| } | ||
|
|
||
| function createComponentRegex(componentName: string): RegExp { | ||
| if (componentName === 'icon') { | ||
| return /<icon-[\w-]+[\s\S]*?<\/icon-[\w-]+>/; | ||
| } | ||
|
|
||
| const prefixedComponentName = `pie-${componentName}`; | ||
|
|
||
| return new RegExp(`<${prefixedComponentName}[\\s\\S]*?<\\/${prefixedComponentName}>`); | ||
| } | ||
|
|
||
| // Visit each page in the SSR apps at /components/<component> and take a snapshot of the HTML returned from the server | ||
| test.describe('SSR - Components render with shadow dom and styles', () => { | ||
| components.forEach((component) => { | ||
| test(`SSR: ${APP_NAME}: ${component}`, async () => { | ||
| // Arrange | ||
| const url = getComponentPageUrl(component, baseUrl); | ||
|
|
||
| // used to ensure the shadow dom markup is rendered correctly, we don't need to worry about attribute order | ||
| const shadowDomRegex = /<template\s+([^>]*shadowroot="open"[^>]*shadowrootmode="open"[^>]*|[^>]*shadowrootmode="open"[^>]*shadowroot="open"[^>]*)>/; | ||
| const styleRegex = /<style>[\s\S]*?<\/style>/; | ||
| const componentRegex = createComponentRegex(component); | ||
|
|
||
| // Act | ||
| const rawHtml = await fetchHtml(url); | ||
|
|
||
| // Extract the first <pie-[component]> element using a regular expression | ||
| const pieComponentMatch = rawHtml.match(componentRegex); | ||
| const pieComponentHtml = pieComponentMatch ? pieComponentMatch[0] : null; | ||
|
|
||
| // Assert | ||
| expect(pieComponentHtml).not.toBeNull(); | ||
| expect(pieComponentHtml).toMatch(shadowDomRegex); | ||
| expect(pieComponentHtml).toMatch(styleRegex); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.