-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
HTML snapshot test for all samples for consistency in the markup
- Loading branch information
Showing
43 changed files
with
2,139 additions
and
64 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,3 +5,4 @@ coverage/ | |
| playwright-report/ | ||
| test-results/ | ||
| .svelte-kit/ | ||
| *-snapshots/ | ||
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,168 @@ | ||
| import type {Locator} from '@playwright/test'; | ||
|
|
||
| export type HTMLAttribute = {name: string; value: string}; | ||
| export type HTMLNode = | ||
| | null | ||
| | string | ||
| | { | ||
| tagName: string; | ||
| childNodes: HTMLNode[]; | ||
| attributes: HTMLAttribute[]; | ||
| }; | ||
|
|
||
| export const htmlStructure = (locator: Locator): Promise<HTMLNode> => | ||
| locator.evaluate((element) => { | ||
| const isElement = (node: Node): node is Element => node.nodeType === node.ELEMENT_NODE; | ||
| const recFn = (node: Node) => { | ||
| if (!isElement(node)) { | ||
| if (node.nodeType === node.TEXT_NODE) { | ||
| return node.nodeValue; | ||
| } | ||
| // Note: ignore comments | ||
| return null; | ||
| } | ||
| const tagName = node.tagName.toLowerCase(); | ||
| const childNodes: any[] = []; | ||
| for (const child of node.childNodes) { | ||
| const value = recFn(child); | ||
| if (value != null) { | ||
| childNodes.push(value); | ||
| } | ||
| } | ||
| const attributes: HTMLAttribute[] = []; | ||
| for (const {name, value} of node.attributes) { | ||
| attributes.push({name, value}); | ||
| } | ||
| return {tagName, childNodes, attributes}; | ||
| }; | ||
| return recFn(element); | ||
| }); | ||
|
|
||
| const cleanChildNodes = (childNodes: HTMLNode[]) => { | ||
| childNodes = [...childNodes]; | ||
| const result: HTMLNode[] = []; | ||
| for (let i = 0; i < childNodes.length; i++) { | ||
| let newValue = childNodes[i]; | ||
| if (!newValue) continue; | ||
| if (typeof newValue === 'string') { | ||
| const previousValue = result[result.length - 1]; | ||
| if (typeof previousValue === 'string') { | ||
| result.pop(); | ||
| newValue = previousValue + newValue; | ||
| } | ||
| } else if (newValue.tagName === '') { | ||
| // only keep descendants | ||
| childNodes.splice(i, 1, ...newValue.childNodes); | ||
| i--; | ||
| continue; | ||
| } | ||
| result.push(newValue); | ||
| } | ||
| return removeWhiteSpace(result); | ||
| }; | ||
|
|
||
| const removeWhiteSpace = (childNodes: HTMLNode[]) => | ||
| childNodes.map((item) => (typeof item === 'string' ? item.replace(/\s+/g, ' ').trim() : item)).filter((item) => !!item); | ||
|
|
||
| const compare = (a: number | string, b: number | string) => (a < b ? -1 : a > b ? 1 : 0); | ||
| const compareName = ({name: a}: {name: string}, {name: b}: {name: string}) => compare(a, b); | ||
|
|
||
| const spaceRegExp = /\s+/; | ||
| const excludeClassRegExp = /^(s|ng)-/; | ||
| const excludeAttrRegExp = /^(ng-|_ng|slot$)/; | ||
|
|
||
| const excludeAttrSet = new Set([ | ||
| 'slot', // slot shouldn't be kept in the DOM by svelte, cf https://github.com/sveltejs/svelte/issues/8621 | ||
|
|
||
| // The following attributes are used in our Angular components: | ||
| // FIXME (to discuss): do not use anymore the host element in AgnosUI Angular components | ||
| // so that we can filter it out (as it is done in au-alert, au-modal, and au-pagination in tagReplacements) | ||
| // and then remove the following list of attributes | ||
| 'arialabel', // note: this should not be confused with the standard Aria attribute aria-label (which should not be removed) | ||
| 'arialabelledby', // note: this should not be confused with the standard Aria attribute aria-labelledby (which should not be removed) | ||
| 'classname', | ||
| ]); | ||
|
|
||
| const removeTagsAndDescendants = new Set(['script', 'router-outlet']); | ||
| const tagReplacements = new Map([ | ||
| ['app-root', 'div'], | ||
| ['au-alert', ''], | ||
| ['au-modal', ''], | ||
| ['au-pagination', ''], | ||
| ['au-rating', 'div'], | ||
| ['au-select', 'div'], | ||
| ['ng-component', ''], | ||
| ]); | ||
| const filterTagName = (tagName: string) => { | ||
| const mapResult = tagReplacements.get(tagName); | ||
| if (mapResult != null) { | ||
| return mapResult; | ||
| } | ||
| if (tagName.startsWith('app-')) { | ||
| return ''; | ||
| } | ||
| return tagName; | ||
| }; | ||
|
|
||
| export const filterHtmlStructure = (node: HTMLNode): HTMLNode => { | ||
| // only keep what we want to compare | ||
| if (!node || typeof node === 'string') { | ||
| return node; | ||
| } | ||
| let {tagName, attributes, childNodes} = node; | ||
| if (removeTagsAndDescendants.has(tagName)) { | ||
| return null; | ||
| } | ||
| tagName = filterTagName(tagName); | ||
| if (tagName == '') { | ||
| attributes = []; | ||
| } | ||
| attributes = attributes | ||
| .filter(({name, value}) => !(excludeAttrSet.has(name) || excludeAttrRegExp.test(name))) | ||
| .map(({name, value}) => { | ||
| if (name === 'class') { | ||
| value = value | ||
| .trim() | ||
| .split(spaceRegExp) | ||
| .filter((className) => !excludeClassRegExp.test(className)) | ||
| .sort() | ||
| .join(' '); | ||
| } | ||
| return {name, value}; | ||
| }) | ||
| .sort(compareName); | ||
| childNodes = cleanChildNodes(childNodes.map(filterHtmlStructure)); | ||
| return { | ||
| tagName, | ||
| attributes, | ||
| childNodes, | ||
| }; | ||
| }; | ||
|
|
||
| export const htmlSnapshot = async (locator: Locator) => { | ||
| const res: string[] = []; | ||
| const recFn = (node: HTMLNode, level = '') => { | ||
| if (node && typeof node === 'object') { | ||
| const {tagName, attributes, childNodes} = node; | ||
| const hasAttributes = attributes.length > 0; | ||
| const hasChildNodes = childNodes.length > 0; | ||
| res.push(`${level}<${tagName}${hasAttributes ? '' : hasChildNodes ? '>' : ' />'}`); | ||
| if (hasAttributes) { | ||
| for (const {name, value} of attributes) { | ||
| res.push(`${level} ${name}=${JSON.stringify(value)}`); | ||
| } | ||
| res.push(`${level}${hasChildNodes ? '>' : '/>'}`); | ||
| } | ||
| if (hasChildNodes) { | ||
| for (const child of childNodes) { | ||
| recFn(child, `${level}\t`); | ||
| } | ||
| res.push(`${level}</${tagName}>`); | ||
| } | ||
| } else { | ||
| res.push(level + JSON.stringify(node)); | ||
| } | ||
| }; | ||
| recFn(filterHtmlStructure(await htmlStructure(locator))); | ||
| return res.join('\n'); | ||
| }; |
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,20 @@ | ||
| import {test, expect} from '@playwright/test'; | ||
| import {htmlSnapshot} from './htmlSnapshot'; | ||
| import {globSync} from 'glob'; | ||
| import path from 'path'; | ||
|
|
||
| test.describe.parallel(`Samples markup consistency check`, () => { | ||
| const allRoutes = globSync('**/*.route.svelte', {cwd: path.join(__dirname, '../svelte/demo/samples')}).map( | ||
| (route) => `${route.replace(/\.route\.svelte$/, '').toLowerCase()}` | ||
| ); | ||
| for (const route of allRoutes) { | ||
| test(`${route} should have a consistent markup`, async ({page}) => { | ||
| test.skip(route === 'pagination/pagination', 'FIXME: sample to be made consistent'); | ||
| test.skip(route === 'focustrack/focustrack', 'FIXME: sample to be made consistent'); | ||
| test.skip(route === 'select/select', 'FIXME: sample to be made consistent'); | ||
| await page.goto(`#/${route}`); | ||
| await page.waitForSelector('.fade', {state: 'detached'}); // wait for fade transitions to be finished | ||
| expect(await htmlSnapshot(page.locator('body'))).toMatchSnapshot(`${route}.html`); | ||
| }); | ||
| } | ||
| }); |
Oops, something went wrong.