Feat(app) tailwind upgrade2

cypress/e2e/design-system-page.cy.ts

@@ -0,0 +1,72 @@
+import { BASE_COMMANDS, SELECT_COMMANDS } from '../utils/commands';
+import { gherkin } from '../utils/gherkin';
+
+describe(`Design System Components`, () => {
+  const buttonVariantsContainerId = `button-variants-container`;
+
+  const given = gherkin({
+    ...BASE_COMMANDS,
+    ...SELECT_COMMANDS,
+    'I navigate to design system page': () => {
+      cy.visit(`/design-system`);
+    },
+    'I take screenshot of button variants': () => {
+      cy.get(`[data-testid="${buttonVariantsContainerId}"]`).scrollIntoView();
+      BASE_COMMANDS[`System takes element picture`](
+        `[data-testid="${buttonVariantsContainerId}"]`,
+        `button-variants-screenshot`,
+      );
+    },
+    'I take screenshot of individual button': (label: string) => {
+      cy.contains(label).scrollIntoView();
+      cy.contains(label)
+        .parent()
+        .find(`button`)
+        .should(`be.visible`)
+        .then(($button) => {
+          const buttonId = `button-${label.replace(/[^a-zA-Z0-9]/g, `-`).toLowerCase()}`;
+          cy.wrap($button).invoke(`attr`, `data-test-button-id`, buttonId);
+          BASE_COMMANDS[`System takes element picture`](
+            `[data-test-button-id="${buttonId}"]`,
+            `button-variant-${label.replace(/[^a-zA-Z0-9]/g, `-`).toLowerCase()}`,
+          );
+          cy.wrap($button).invoke(`removeAttr`, `data-test-button-id`);
+        });
+    },
+  });
+
+  it(`captures screenshots of all button variants`, () => {
+    given(`System has accepted cookies`)
+      .and(`I set white theme`)
+      .when(`I navigate to design system page`)
+      .then(`I take screenshot of button variants`);
+
+    const buttonLabels = [
+      `s=1, i=1`,
+      `s=1, i=2`,
+      `s=2, i=1`,
+      `s=2, i=2`,
+      `auto s=1, i=1`,
+      `auto s=1, i=2`,
+      `auto s=2, i=1`,
+      `auto s=2, i=2`,
+      `pill s=1, i=2`,
+      `pill s=2, i=2`,
+      `disabled`,
+    ];
+
+    buttonLabels.forEach((label) => {
+      given(`I take screenshot of individual button`, label);
+    });
+  });
+
+  it(`verifies select component behavior`, () => {
+    given(`System has accepted cookies`)
+      .and(`I set white theme`)
+      .when(`I navigate to design system page`)
+      .and(`I select from`, `combobox`, `Banana`)
+      .then(`I verify select value`, `combobox`, `Banana`)
+      .when(`I select from`, `combobox`, `Apple`)
+      .then(`I verify select value`, `combobox`, `Apple`);
+  });
+});

cypress/utils/commands.ts

@@ -249,5 +249,24 @@ const BASE_COMMANDS = {
   },
 } as const;
 
+export const SELECT_COMMANDS = {
+  'I select from': (selectRole: string, optionLabel: string) => {
+    cy.get(`[role="${selectRole}"]`).first().click();
+    cy.get(`[role="listbox"]`).contains(optionLabel).click();
+  },
+  'I verify select value': (selectRole: string, value: string) => {
+    cy.get(`[role="${selectRole}"]`).contains(value).should(`be.visible`);
+  },
+  'I press key on': (selectRole: string, key: string) => {
+    cy.get(`[role="${selectRole}"]`).type(key);
+  },
+  'I verify select option': (option: string) => {
+    cy.get(`[role="listbox"]`).contains(option).should(`be.visible`);
+  },
+  'I verify disabled select': () => {
+    cy.get(`[role="combobox"][aria-disabled="true"]`).should(`exist`);
+  },
+} as const;
+
 export type { Element, ClickableControls };
 export { BASE_COMMANDS };

meta.ts

@@ -39,5 +39,6 @@ export const meta = {
     },
     notFound: `/404/`,
     privacyPolicy: `/privacy-policy/`,
+    designSystem: `/design-system/`,
   },
 } as const;