fix profile tests

src/components/__tests__/ProfileDetails.cy.js

@@ -51,7 +51,10 @@ const dataSelectorValue = '[data-cy="details-item-value"]';
 
 // variables
 const newNickname = 'Cyklobaron';
-const newGender = 'female';
+const genderFemale = 'female';
+const genderFemaleKey = 'global.woman';
+const genderMale = 'male';
+const genderMaleKey = 'global.man';
 const newEmail = '[email protected]';
 const password = 'password';
 
@@ -423,15 +426,14 @@ function coreTests() {
         .click();
       // gender edit form
       cy.dataCy(selectorFormGender).should('be.visible');
-      // change gender
+      // change gender to woman
       cy.dataCy(selectorFormGender)
         .find('.q-radio__label')
-        // female
-        .first()
+        .contains(i18n.global.t(genderFemaleKey))
         .click();
       // cancel
       cy.dataCy(selectorFormGender).find(dataSelectorButtonCancel).click();
-      // gender is the same
+      // gender stays the same (male)
       cy.dataCy(selectorGender)
         .find(dataSelectorValue)
         .should('be.visible')
@@ -446,16 +448,15 @@ function coreTests() {
       // change gender
       cy.dataCy(selectorFormGender)
         .find('.q-radio__label')
-        // female
-        .first()
+        .contains(i18n.global.t(genderFemaleKey))
         .click();
       // save
       cy.dataCy(selectorFormGender).find(dataSelectorButtonSave).click();
       // gender is different
       cy.dataCy(selectorGender)
         .find(dataSelectorValue)
         .should('be.visible')
-        .and('have.text', newGender);
+        .and('have.text', genderFemale);
       // reset gender
       cy.dataCy(selectorGender)
         .find(dataSelectorEdit)
@@ -466,11 +467,15 @@ function coreTests() {
       // change gender
       cy.dataCy(selectorFormGender)
         .find('.q-radio__label')
-        // male
-        .last()
+        .contains(i18n.global.t(genderMaleKey))
         .click();
       // save
       cy.dataCy(selectorFormGender).find(dataSelectorButtonSave).click();
+      // gender is male
+      cy.dataCy(selectorGender)
+        .find(dataSelectorValue)
+        .should('be.visible')
+        .and('have.text', genderMale);
     });
   });
 

src/components/form/FormUpdateGender.vue

@@ -57,11 +57,11 @@ export default defineComponent({
 
     const genderOptions: FormOption[] = [
       {
-        label: i18n.global.t('global.man'),
+        label: i18n.global.t('global.woman'),
         value: Gender.female,
       },
       {
-        label: i18n.global.t('global.woman'),
+        label: i18n.global.t('global.man'),
         value: Gender.male,
       },
     ];

src/i18n/cs.toml

@@ -487,6 +487,7 @@ textCoordinatorContact = "S otázkami a připomínkami ohledně startovních bal
 textPasswordConfirm = "Změnu e-mailu je potřeba potvrdit heslem do Do práce na kole:"
 titleChallengeDetails = "Soutěžní údaje"
 titlePersonalDetails = "Osobní údaje"
+titleProfile = "Profil"
 titleRegistrationDetails = "Registrace"
 titleStarterPackage = "Soutěžní balíček"
 titleUpdateEmail = "Upravit e-mail"

src/i18n/en.toml

@@ -484,6 +484,7 @@ textCoordinatorContact = "You can contact <b>your company coordinator</b> with q
 textPasswordConfirm = "You need to confirm the email change with the password to Ride to Work by Bike:"
 titleChallengeDetails = "Competition Details"
 titlePersonalDetails = "Personal Details"
+titleProfile = "Profile"
 titleRegistrationDetails = "Registration"
 titleStarterPackage = "Starter Package"
 titleUpdateEmail = "Edit e-mail"

src/i18n/sk.toml

@@ -484,6 +484,7 @@ textCoordinatorContact = "V prípade otázok a pripomienok týkajúcich sa vstup
 textPasswordConfirm = "Musíte potvrdiť zmenu e-mailu s heslom do aplikácie Do práce na bicykli:"
 titleChallengeDetails = "Súťažné údaje"
 titlePersonalDetails = "Osobné údaje"
+titleProfile = "Profil"
 titleRegistrationDetails = "Registrácia"
 titleStarterPackage = "Súťažný balíček"
 titleUpdateEmail = "Upraviť e-mail"

src/pages/ProfilePage.vue

@@ -25,7 +25,7 @@ export default {
 </script>
 
 <template>
-  <q-page class="overflow-hidden" data-cy="q-main">
+  <q-page class="overflow-hidden" data-cy="profile-page">
     <div class="q-px-lg bg-white q-pb-xl q-pt-lg">
       <!-- Page title -->
       <div>

test/cypress/e2e/profile.spec.cy.js

@@ -0,0 +1,107 @@
+import { routesConf } from '../../../src/router/routes_conf';
+
+// selectors
+const selectorProfilePage = 'profile-page';
+const selectorProfilePageTitle = 'profile-page-title';
+const selectorNickname = 'profile-details-nickname';
+const selectorEmail = 'profile-details-email';
+const selectorGender = 'profile-details-gender';
+const selectorFormNickname = 'profile-details-form-nickname';
+const selectorFormEmail = 'profile-details-form-email';
+const selectorFormGender = 'profile-details-form-gender';
+const dataSelectorEdit = '[data-cy="details-item-edit"]';
+const dataSelectorInput = '[data-cy="form-input"]';
+const dataSelectorInputEmail = '[data-cy="form-email"]';
+const dataSelectorInputPassword = '[data-cy="form-password"]';
+const dataSelectorButtonSave = '[data-cy="form-button-save"]';
+const dataSelectorValue = '[data-cy="details-item-value"]';
+
+// variables
+const newNickname = 'Cyklobaron';
+const newEmail = '[email protected]';
+const password = 'testpassword123';
+const genderFemale = 'female';
+const genderFemaleKey = 'global.woman';
+
+describe('Profile page', () => {
+  context('desktop', () => {
+    beforeEach(() => {
+      cy.visit('#' + routesConf['profile']['children']['fullPath']);
+      cy.viewport('macbook-16');
+      // load config and i18n objects as aliases
+      cy.task('getAppConfig', process).then((config) => {
+        // alias config
+        cy.wrap(config).as('config');
+        cy.window().should('have.property', 'i18n');
+        cy.window().then((win) => {
+          // alias i18n
+          cy.wrap(win.i18n).as('i18n');
+        });
+      });
+    });
+
+    coreTests();
+
+    it('renders left drawer', () => {
+      cy.dataCy('q-drawer').should('be.visible');
+      cy.dataCy('drawer-header').should('be.visible');
+      cy.dataCy('user-select').should('be.visible');
+      cy.dataCy('drawer-toggle-buttons').should('be.visible');
+      cy.dataCy('drawer-menu').should('be.visible');
+    });
+  });
+});
+
+function coreTests() {
+  it('has translation for all strings', () => {
+    cy.get('@i18n').then((i18n) => {
+      cy.testLanguageStringsInContext(['titleProfile'], 'profile', i18n);
+    });
+  });
+
+  it('renders page', () => {
+    cy.get('@i18n').then((i18n) => {
+      cy.dataCy(selectorProfilePage).should('be.visible');
+      // title
+      cy.dataCy(selectorProfilePageTitle)
+        .should('be.visible')
+        .and('contain', i18n.global.t('profile.titleProfile'));
+    });
+  });
+
+  it('allows user to change nickname, email, and gender', () => {
+    cy.get('@i18n').then((i18n) => {
+      // Change nickname
+      cy.dataCy(selectorNickname).find(dataSelectorEdit).click();
+      cy.dataCy(selectorFormNickname).find(dataSelectorInput).clear();
+      cy.dataCy(selectorFormNickname).find(dataSelectorInput).type(newNickname);
+      cy.dataCy(selectorFormNickname).find(dataSelectorButtonSave).click();
+      cy.dataCy(selectorNickname)
+        .find(dataSelectorValue)
+        .should('have.text', newNickname);
+
+      // Change email
+      cy.dataCy(selectorEmail).find(dataSelectorEdit).click();
+      cy.dataCy(selectorFormEmail).find(dataSelectorInputEmail).clear();
+      cy.dataCy(selectorFormEmail).find(dataSelectorInputEmail).type(newEmail);
+      cy.dataCy(selectorFormEmail)
+        .find(dataSelectorInputPassword)
+        .type(password);
+      cy.dataCy(selectorFormEmail).find(dataSelectorButtonSave).click();
+      cy.dataCy(selectorEmail)
+        .find(dataSelectorValue)
+        .should('have.text', newEmail);
+
+      // Change gender
+      cy.dataCy(selectorGender).find(dataSelectorEdit).click();
+      cy.dataCy(selectorFormGender)
+        .find('.q-radio__label')
+        .contains(i18n.global.t(genderFemaleKey))
+        .click();
+      cy.dataCy(selectorFormGender).find(dataSelectorButtonSave).click();
+      cy.dataCy(selectorGender)
+        .find(dataSelectorValue)
+        .should('have.text', genderFemale);
+    });
+  });
+}