fix(home): reintroduce the sign in button

chore(menu): update translations chore(menu): fix failing home e2e test chore(menu): add spanish translation for sign in button chore: simplify tests
jwplayer · May 30, 2023 · 4ac4dd6 · 4ac4dd6
1 parent f5aaf2c
commit 4ac4dd6
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 28 deletions.
diff --git a/public/locales/en/menu.json b/public/locales/en/menu.json
@@ -3,5 +3,6 @@
   "open_menu": "Open menu",
   "open_user_menu": "Open user menu",
   "select_language": "Select language",
+  "sign_in": "Sign in",
   "sign_up": "Sign up"
 }
diff --git a/public/locales/es/menu.json b/public/locales/es/menu.json
@@ -3,5 +3,6 @@
   "open_menu": "Abrir menú",
   "open_user_menu": "Abrir menú de usuario",
   "select_language": "Seleccionar idioma",
+  "sign_in": "Iniciar sesión",
   "sign_up": "Registrarse"
 }
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
@@ -136,6 +136,10 @@
 .buttonContainer {
   // this is a visual fix for putting a button with background besides a transparent button
   margin-left: variables.$base-spacing;
+
+  > button:first-child {
+    margin-right: calc(#{variables.$base-spacing} / 2);
+  }
 }
 
 //

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -56,6 +56,7 @@ const Header: React.FC<Props> = ({
   searchActive,
   onSearchButtonClick,
   searchEnabled,
+  onLoginButtonClick,
   onCloseSearchButtonClick,
   onSignUpButtonClick,
   isLoggedIn,
@@ -131,6 +132,7 @@ const Header: React.FC<Props> = ({
       </React.Fragment>
     ) : (
       <div className={styles.buttonContainer}>
+        <Button onClick={onLoginButtonClick} label={t('sign_in')} />
         <Button variant="contained" color="primary" onClick={onSignUpButtonClick} label={t('sign_up')} />
       </div>
     );

diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -68,6 +68,13 @@ exports[`<Header /> > renders header 1`] = `
         <div
           class="_buttonContainer_f4f7a7"
         >
+          <button
+            class="_button_f8f296 _default_f8f296 _outlined_f8f296"
+          >
+            <span>
+              sign_in
+            </span>
+          </button>
           <button
             class="_button_f8f296 _primary_f8f296"
           >

diff --git a/test-e2e/tests/login/home_test.ts b/test-e2e/tests/login/home_test.ts
@@ -15,21 +15,16 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
   });
 
   Scenario(`Sign-in buttons show for accounts config - ${providerName}`, async ({ I }) => {
-    const { isMobile } = await I.openSignInMenu();
+    await I.openSignInMenu();
 
-    if (isMobile) {
-      I.see('Sign in');
-    }
+    I.see('Sign in');
     I.see('Sign up');
   });
 
   Scenario(`Sign-in buttons don't show for config without accounts - ${providerName}`, async ({ I }) => {
-    const { isMobile } = await I.openSignInMenu();
-
-    if (isMobile) {
-      I.see('Sign in');
-    }
+    await I.openSignInMenu();
 
+    I.see('Sign in');
     I.see('Sign up');
 
     I.useConfig(testConfigs.basicNoAuth);
@@ -70,16 +65,12 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
   Scenario(`I can log out - ${providerName}`, async ({ I }) => {
     loginContext = await I.registerOrLogin(loginContext);
 
-    const isMobile = await I.openMainMenu();
-
+    await I.openMainMenu();
     I.click('Log out');
 
     await I.openSignInMenu();
 
-    if (isMobile) {
-      I.see('Sign in');
-    }
-
+    I.see('Sign in');
     I.see('Sign up');
   });
 }
diff --git a/test-e2e/tests/register_test.ts b/test-e2e/tests/register_test.ts
@@ -46,10 +46,7 @@ function runTestSuite(config: typeof testConfigs.svod, providerName: string) {
 
     const { isMobile } = await I.openSignInMenu();
 
-    if (isMobile) {
-      I.see('Sign in');
-    }
-
+    I.see('Sign in');
     I.see('Sign up');
   });
 

diff --git a/test-e2e/utils/steps_file.ts b/test-e2e/utils/steps_file.ts
@@ -152,15 +152,7 @@ const stepsObj = {
   openSignInModal: async function (this: CodeceptJS.I) {
     const { isMobile } = await this.openSignInMenu();
 
-    if (isMobile) {
-      // sign in via the Sign-in button in the main menu
-      this.click('Sign in');
-    } else {
-      // sign in via the Sign-up modal bottom link
-      this.click('Sign up');
-      this.waitForElement('input[name=email]', normalTimeout);
-      this.click('Sign in');
-    }
+    this.click('Sign in');
 
     return { isMobile };
   },