feat(text): take all variations in one page screenshot only

ovh · Oct 4, 2023 · 5fd4fa4 · 5fd4fa4
1 parent edd9463
commit 5fd4fa4
Showing 1 changed file with 61 additions and 25 deletions.
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
@@ -12,48 +12,84 @@ const slotContent = 'Text';
 describe('e2e:osds-text', () => {
   let page: E2EPage;
   let el: E2EElement;
+  let variations: Array<string>;
 
-  async function setup({ attributes= {} , html = `` }: { attributes?: Partial<OdsTextAttribute>, html?: string }) {
-    const stringAttributes = odsComponentAttributes2StringAttributes<OdsTextAttribute>(attributes, DEFAULT_ATTRIBUTE);
-
+  async function setup(content: string) {
     page = await newE2EPage();
-    await page.setContent(`<osds-text ${odsStringAttributes2Str(stringAttributes)}>${html}</osds-text>`);
+
+    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<OdsTextAttribute>, html?: string }) {
+    const stringAttributes = odsComponentAttributes2StringAttributes<OdsTextAttribute>(attributes, DEFAULT_ATTRIBUTE);
+    variations.push(`
+      <p>${odsStringAttributes2Str(stringAttributes)}</p>
+      <osds-text ${odsStringAttributes2Str(stringAttributes)}>${html}</osds-text>`
+    );
+  }
+
   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 })
+      });
+    })
   });
 });