fix(e2e): fix change theme command

Jozwiaczek · Jul 30, 2021 · def0a8c · def0a8c
1 parent 84b0c26
commit def0a8c
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 10 deletions.
diff --git a/packages/client/src/elements/inputs/SelectCard/SelectCard.types.d.ts b/packages/client/src/elements/inputs/SelectCard/SelectCard.types.d.ts
@@ -4,6 +4,7 @@ interface SelectCardOption<T> {
   index: number;
   value: T;
   children?: string | ReactNode;
+  dataTestId: string;
 }
 
 interface SelectCardProps<T> {

diff --git a/packages/client/src/elements/inputs/SelectCard/index.tsx b/packages/client/src/elements/inputs/SelectCard/index.tsx
@@ -16,6 +16,7 @@ const SelectCard = <T extends unknown>({ value, onChange, children }: SelectCard
             index,
             value: childValue,
             children: childChildren,
+            dataTestId: child.props['data-testid'] as string,
           };
         }
       }) ?? [],
@@ -45,7 +46,11 @@ const SelectCard = <T extends unknown>({ value, onChange, children }: SelectCard
   return (
     <StyledCard data-testid="selectCard">
       {allOptions?.map((option) => (
-        <CardItemButton key={option.value as never} onClick={onOptionClick(option)}>
+        <CardItemButton
+          data-testid={option.dataTestId}
+          key={option.value as never}
+          onClick={onOptionClick(option)}
+        >
           <ItemContentWrapper>{option.children}</ItemContentWrapper>
           <CheckmarkBox>
             <Checkmark visible={isCurrentOption(option)} />

diff --git a/packages/client/src/pages/authorized/Settings/sections/ThemeCard/index.tsx b/packages/client/src/pages/authorized/Settings/sections/ThemeCard/index.tsx
@@ -22,15 +22,15 @@ const ThemeCard = () => {
   return (
     <SettingsSection title="routes.settings.theme.title" titleIcon={titleIcon}>
       <SelectCard<StoredThemeType> value={storedThemeType} onChange={onChange}>
-        <option value="dark">
+        <option value="dark" data-testid="dark-theme-button">
           <MoonIcon />
           <h5>{t('routes.settings.theme.dark')}</h5>
         </option>
-        <option value="light">
+        <option value="light" data-testid="light-theme-button">
           <SunIcon />
           <h5>{t('routes.settings.theme.light')}</h5>
         </option>
-        <option value="system">
+        <option value="system" data-testid="system-theme-button">
           <SystemThemeIcon />
           <h5>{t('routes.settings.theme.system')}</h5>
         </option>

diff --git a/packages/e2e/interfaces/cypress.d.ts b/packages/e2e/interfaces/cypress.d.ts
@@ -37,10 +37,12 @@ declare namespace Cypress {
     aNavWithoutTarget(hrefStartsWith: string): Chainable<Element>;
 
     /**
-     * Custom command to switch current theme type.
+     * Custom command to change app theme type.
      *
-     * @example cy.switchTheme()
+     * @example cy.changeTheme('light')
+     * @example cy.changeTheme('dark')
+     * @example cy.changeTheme('system')
      */
-    switchTheme(): Chainable<Element>;
+    changeTheme(theme: Theme): Chainable<Element>;
   }
 }
diff --git a/packages/e2e/interfaces/utils.d.ts b/packages/e2e/interfaces/utils.d.ts
@@ -1,3 +1,5 @@
 type MainNavTab = 'admin' | 'settings';
 
 type EmailAction = 'getUserEmail' | 'getLastWelcomeEmail' | 'getLastRecoveryEmail' | 'getLastEmail';
+
+type Theme = 'light' | 'dark' | 'system';
diff --git a/packages/e2e/src/404.spec.ts b/packages/e2e/src/404.spec.ts
@@ -15,7 +15,7 @@ context('404 Page not found', () => {
   it('displays heaven animation for light theme', () => {
     cy.visit('/');
     cy.login();
-    cy.switchTheme();
+    cy.changeTheme('light');
     cy.visit('/invalid-endpoint');
     cy.url().should('eq', `${Cypress.config().baseUrl as string}/pageNotFound`);
     cy.dataTestId('heaven-animation');

diff --git a/packages/e2e/support/commands.ts b/packages/e2e/support/commands.ts
@@ -26,7 +26,7 @@ Cypress.Commands.add('aNavWithoutTarget', (hrefStartsWith: string) => {
   return cy.get(`a[href^="${hrefStartsWith}"]`).click();
 });
 
-Cypress.Commands.add('switchTheme', () => {
+Cypress.Commands.add('changeTheme', (theme: Theme) => {
   cy.mainNavTo('settings');
-  return cy.dataTestId('btn-switch-theme').click();
+  return cy.dataTestId(`${theme}-theme-button`).click();
 });