diff --git a/packages/components/text/src/components/osds-text/osds-text.e2e.screenshot.ts b/packages/components/text/src/components/osds-text/osds-text.e2e.screenshot.ts index 800d487fcb..f1c3815276 100644 --- a/packages/components/text/src/components/osds-text/osds-text.e2e.screenshot.ts +++ b/packages/components/text/src/components/osds-text/osds-text.e2e.screenshot.ts @@ -12,48 +12,84 @@ const slotContent = 'Text'; describe('e2e:osds-text', () => { let page: E2EPage; let el: E2EElement; + let variations: Array; - async function setup({ attributes= {} , html = `` }: { attributes?: Partial, html?: string }) { - const stringAttributes = odsComponentAttributes2StringAttributes(attributes, DEFAULT_ATTRIBUTE); - + async function setup(content: string) { page = await newE2EPage(); - await page.setContent(`${html}`); + + await page.setContent(content); await page.evaluate(() => document.body.style.setProperty('margin', '0px')); el = await page.find('osds-text'); } + function getVariations({ attributes= {} , html = `` }: { attributes?: Partial, html?: string }) { + const stringAttributes = odsComponentAttributes2StringAttributes(attributes, DEFAULT_ATTRIBUTE); + variations.push(` +

${odsStringAttributes2Str(stringAttributes)}

+ ${html}` + ); + } + describe('screenshots', () => { - [() => {}, () => el.setProperty('contrasted', true)].forEach((action) => { + beforeEach(() => { + variations = []; + }); + + it('should take screenshots of all attributes variations', async () => { [ODS_THEME_COLOR_HUE._100, ODS_THEME_COLOR_HUE._500].forEach((hue) => { ODS_THEME_COLOR_INTENTS.forEach((color) => { ODS_TEXT_SIZES.forEach((size) => { ODS_TEXT_LEVELS.forEach((level) => { - it([color, level, size, action, hue].join(', '), async () => { - await setup({ - attributes: { - color, - level, - size, - hue - }, - html: slotContent - }); - action(); - await page.waitForChanges(); - - await page.evaluate(() => { - const element = document.querySelector('osds-text') as HTMLElement; - return { width: element.clientWidth, height: element.clientHeight }; - }); - await page.setViewport({ width: 600, height:600 }); - const results = await page.compareScreenshot('text', { fullPage: false }); - expect(results).toMatchScreenshot({ allowableMismatchedRatio: 0 }) + getVariations({ + attributes: { + color, + level, + size, + hue + }, + html: slotContent }); }); }); }); }); + + await setup(variations.join('')); + await page.waitForChanges(); + + await page.evaluate(() => { + const element = document.querySelector('osds-text') as HTMLElement; + return { width: element.clientWidth, height: element.clientHeight }; + }); + const results = await page.compareScreenshot('text', { fullPage: true }); + expect(results).toMatchScreenshot({ allowableMismatchedRatio: 0 }) }); + + const screenshotActions = [ + { + actionDescription: 'should show contrasted variation', + action: () => { + el.setProperty('contrasted', true) + el.setProperty('style', 'background: black;') + }, + }, + ]; + + screenshotActions.forEach(({ actionDescription, action }) => { + it(actionDescription, async () => { + getVariations({ html: slotContent }); + await setup(variations[0]); + action(); + await page.waitForChanges(); + + await page.evaluate(() => { + const element = document.querySelector('osds-text') as HTMLElement; + return { width: element.clientWidth, height: element.clientHeight }; + }); + const results = await page.compareScreenshot('text', { fullPage: false }); + expect(results).toMatchScreenshot({ allowableMismatchedRatio: 0 }) + }); + }) }); });