From 910ec84dd9edd18d64664d4dfc3c0d94ac1004b7 Mon Sep 17 00:00:00 2001
From: Antoine Jaussoin <antoinejaussoin@users.noreply.github.com>
Date: Sun, 13 Mar 2022 20:05:31 +0000
Subject: [PATCH] Improving integration tests (#363)

---
 README.md                                    |  1 +
 frontend/src/Layout.tsx                      |  4 +-
 frontend/src/auth/AccountMenu.tsx            |  3 +-
 frontend/src/auth/modal/AnonAuth.tsx         |  2 +
 frontend/src/auth/modal/LoginModal.tsx       | 13 +++++-
 frontend/src/components/LanguagePicker.tsx   | 13 +++++-
 frontend/src/views/Home.tsx                  |  1 +
 frontend/src/views/Panel.tsx                 |  2 +-
 frontend/src/views/game/board/Column.tsx     |  1 +
 integration/cypress.json                     |  2 +-
 integration/cypress/integration/test.spec.js | 43 ++++++++++++++++----
 11 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 6fd4a8ea4..2a6ef99f4 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,7 @@ This will run a demo version, which you can turn into a fully licenced version b
 
 - Adding the option of paying for Retrospected Pro annually, getting one month free in the process
 - Update prices, especially for USD
+- Make the integration tests less brittle by using specific attributes
 
 ### Version 4.12.1 (hotfix)
 
diff --git a/frontend/src/Layout.tsx b/frontend/src/Layout.tsx
index e0a8786d2..14f614605 100644
--- a/frontend/src/Layout.tsx
+++ b/frontend/src/Layout.tsx
@@ -93,6 +93,7 @@ function App() {
   const isInitialised = useIsInitialised();
   const user = useUser();
   const isPro = useIsPro();
+  const displayGoPro = !isPro && user && user.accountType !== 'anonymous';
   const goToHome = useCallback(() => history.push('/'), [history]);
   useEffect(() => {
     trackPageView(window.location.pathname);
@@ -128,6 +129,7 @@ function App() {
             aria-label="Menu"
             onClick={togglePanel}
             size="large"
+            data-cy="side-panel-toggle"
           >
             <MenuIcon />
           </IconButton>
@@ -147,7 +149,7 @@ function App() {
           <ProPillContainer>
             <ProPill small />
           </ProPillContainer>
-          {!isPro ? (
+          {displayGoPro ? (
             <Hidden mdDown>
               <GoProContainer>
                 <ProButton>
diff --git a/frontend/src/auth/AccountMenu.tsx b/frontend/src/auth/AccountMenu.tsx
index 12af417f9..2c6ee2d7c 100644
--- a/frontend/src/auth/AccountMenu.tsx
+++ b/frontend/src/auth/AccountMenu.tsx
@@ -89,7 +89,7 @@ const AccountMenu = () => {
                 <ListItemText>{translations.Header.account}</ListItemText>
               </MenuItem>
             ) : null}
-            <Divider />
+            {user && user.accountType !== 'anonymous' ? <Divider /> : null}
             <MenuItem onClick={handleLogout}>
               <ListItemIcon>
                 <Logout />
@@ -107,6 +107,7 @@ const AccountMenu = () => {
         onClick={handleModalOpen}
         variant="contained"
         color="secondary"
+        data-cy="login-button"
         startIcon={<AccountIcon />}
       >
         {translations.AnonymousLogin.header}
diff --git a/frontend/src/auth/modal/AnonAuth.tsx b/frontend/src/auth/modal/AnonAuth.tsx
index 63aa4011b..35464ca9f 100644
--- a/frontend/src/auth/modal/AnonAuth.tsx
+++ b/frontend/src/auth/modal/AnonAuth.tsx
@@ -52,6 +52,7 @@ const AnonAuth = ({ onClose, onUser }: AnonAuthProps) => {
           color="primary"
           autoFocus
           disabled={!username.trim().length}
+          data-cy="anon-login-button"
         >
           {loginTranslations.buttonLabel}
         </Button>
@@ -72,6 +73,7 @@ const AnonAuth = ({ onClose, onUser }: AnonAuthProps) => {
         placeholder={loginTranslations.namePlaceholder}
         fullWidth
         style={{ marginTop: 20 }}
+        data-cy="anon-input"
       />
     </Wrapper>
   );
diff --git a/frontend/src/auth/modal/LoginModal.tsx b/frontend/src/auth/modal/LoginModal.tsx
index ab3f8d485..ad206185c 100644
--- a/frontend/src/auth/modal/LoginModal.tsx
+++ b/frontend/src/auth/modal/LoginModal.tsx
@@ -53,12 +53,21 @@ const Login = ({ onClose }: LoginModalProps) => {
           aria-label="Login types"
         >
           {!hasNoSocialMediaAuth ? (
-            <Tab label={translations.SocialMediaLogin.header} value="social" />
+            <Tab
+              label={translations.SocialMediaLogin.header}
+              value="social"
+              data-cy="social-tab"
+            />
           ) : null}
-          <Tab label={translations.AccountLogin.header} value="account" />
+          <Tab
+            label={translations.AccountLogin.header}
+            value="account"
+            data-cy="account-tab"
+          />
           <Tab
             label={translations.AnonymousLogin.anonymousAuthHeader}
             value="anon"
+            data-cy="anon-tab"
           />
         </Tabs>
       </AppBar>
diff --git a/frontend/src/components/LanguagePicker.tsx b/frontend/src/components/LanguagePicker.tsx
index 31f6c653a..734b58c44 100644
--- a/frontend/src/components/LanguagePicker.tsx
+++ b/frontend/src/components/LanguagePicker.tsx
@@ -20,9 +20,18 @@ const LanguagePicker = ({ value, onChange }: LanguagePickerProps) => {
     [onChange]
   );
   return (
-    <StyledSelect value={value} onChange={handleSelect} variant="standard">
+    <StyledSelect
+      value={value}
+      onChange={handleSelect}
+      variant="standard"
+      data-cy="language-picker"
+    >
       {languages.map((language) => (
-        <MenuItem value={language.value} key={language.value}>
+        <MenuItem
+          value={language.value}
+          key={language.value}
+          data-cy={`language-picker-item-${language.value}`}
+        >
           <LanguageItem>
             <Flag className={`fi fi-${language.iso}`}>
               <FlagOverlay />
diff --git a/frontend/src/views/Home.tsx b/frontend/src/views/Home.tsx
index 4dc79c1a8..72efb20b1 100644
--- a/frontend/src/views/Home.tsx
+++ b/frontend/src/views/Home.tsx
@@ -93,6 +93,7 @@ function Home() {
               size="large"
               color="secondary"
               disabled={!isLoggedIn}
+              data-cy="new-session-button"
             >
               <ThumbUpAlt className={classes.buttonIcon} />
               {translations.Join.standardTab.button}
diff --git a/frontend/src/views/Panel.tsx b/frontend/src/views/Panel.tsx
index 51c0a1c01..91abac143 100644
--- a/frontend/src/views/Panel.tsx
+++ b/frontend/src/views/Panel.tsx
@@ -29,7 +29,7 @@ function Panel() {
   const { opened, toggle } = useSidePanel();
 
   return (
-    <Drawer open={opened} onClose={toggle}>
+    <Drawer open={opened} onClose={toggle} data-cy="side-panel">
       <DrawerContent>
         <Top>
           <LanguagePicker
diff --git a/frontend/src/views/game/board/Column.tsx b/frontend/src/views/game/board/Column.tsx
index 17eab9df3..0a16f1686 100644
--- a/frontend/src/views/game/board/Column.tsx
+++ b/frontend/src/views/game/board/Column.tsx
@@ -109,6 +109,7 @@ const Column: React.FC<ColumnProps> = ({
               </EnterIcon>
             </InputAdornment>
           }
+          data-cy="column-input"
         />
         {permissions.canCreateGroup ? (
           <AddGroup>
diff --git a/integration/cypress.json b/integration/cypress.json
index 35afd53de..979d4d05f 100644
--- a/integration/cypress.json
+++ b/integration/cypress.json
@@ -1,3 +1,3 @@
 {
-	"baseUrl": "http://localhost:1800"
+	"baseUrl": "http://localhost:3000"
 }
diff --git a/integration/cypress/integration/test.spec.js b/integration/cypress/integration/test.spec.js
index 456b9d337..be2454ec0 100644
--- a/integration/cypress/integration/test.spec.js
+++ b/integration/cypress/integration/test.spec.js
@@ -1,25 +1,34 @@
 describe('Home Page', () => {
   it('Should load correctly', () => {
-    cy.visit('/')
+    cy.visit('/');
   
     cy.get('div.marketing-content')
       .should('contain', 'Real-time Retrospectives')
   });
+});
+
+
+function get(name, rest) {
+  return cy.get(`[data-cy=${name}]${rest ?? ''}`);
+}
 
+describe('Post workflow', () => {
   it('Should login and write a post', () => {
-    cy.get('.MuiButton-root').click();
-    cy.get('.MuiTabs-flexContainer > [tabindex="-1"]').click();
-    cy.get('.MuiInput-input').focus().type('Zelensky');
-    cy.get('.MuiDialogContent-root .MuiButton-root').click();
+    cy.visit('/');
+    
+    get('login-button').click();
+    get('anon-tab').click();
+    get('anon-input', ' > input').focus().type('Zelensky');
+    get('anon-login-button').click();
 
     // Home page should display the user name
     cy.get('#content').should('contain', 'Welcome, Zelensky');
 
     // And then allow creating a new session
-    cy.get('button').contains('Create a new session').click();
+    get('new-session-button').click();
 
     // And write a post
-    cy.get('input[placeholder*="What went well"]').focus().type('Slava Ukraini!{enter}');
+    get('column-input', ' > input').first().focus().type('Slava Ukraini!{enter}');
 
     // Reload the page
     cy.reload();
@@ -27,4 +36,24 @@ describe('Home Page', () => {
     // The post should still be there
     cy.get('#content').should('contain', 'Slava Ukraini!');
   });
+
+  it('Should change language and translate the app', () => {
+    cy.visit('/');
+
+    get('login-button').click();
+    get('anon-tab').click();
+    get('anon-input', ' > input').focus().type('Zelensky');
+    get('anon-login-button').click();
+
+    // Home page should display the user name
+    cy.get('#content').should('contain', 'Welcome, Zelensky');
+
+    // Change language
+    get('side-panel-toggle').click();
+    get('language-picker').click();
+    get('language-picker-item-fr').click();
+
+    // Home page should now be in French
+    cy.get('#content').should('contain', 'Bienvenue, Zelensky');
+  });
 });