src/stores: add registerChallenge store and connect personalDetails a…

…nd company sections (#542) * create new store registerChallenge + update Organization types * refactor form-select-organization into a component * update organization type enum * rename division variable * rename division type * refactor formfieldcompanyaddress and organization options * refactor form-select-organization logic * refactor model values * link form-select-organization data to store * model personal details from store * link select-organization to store * update fixture data * fix form-personal-details defaults * form-select-organization basic tests * fix form-field-select-table tests * fix tests for form-field-company-address * update register challenge e2e tetss * update default values * update docs * composable rename * update docs * updates after merg * cleanup * update default values and v-model handling of store values * fix form-login test variables * update default values for organizationId and addressId --------- Co-authored-by: Šimon Macek <[email protected]>
auto-mat · Sep 4, 2024 · b989570 · b989570
1 parent ea80e08
commit b989570
Show file tree

Hide file tree

Showing 24 changed files with 937 additions and 639 deletions.
diff --git a/src/components/__tests__/FormFieldCompanyAddress.cy.js b/src/components/__tests__/FormFieldCompanyAddress.cy.js
@@ -1,11 +1,29 @@
 import { colors } from 'quasar';
 import FormFieldCompanyAddress from 'components/form/FormFieldCompanyAddress.vue';
 import { i18n } from '../../boot/i18n';
+import { useSelectedOrganization } from 'src/composables/useSelectedOrganization';
+import { createPinia, setActivePinia } from 'pinia';
+import { useRegisterChallengeStore } from 'src/stores/registerChallenge';
 
 const { getPaletteColor } = colors;
 const grey10 = getPaletteColor('grey-10');
 
 describe('<FormFieldCompanyAddress>', () => {
+  let options;
+
+  before(() => {
+    setActivePinia(createPinia());
+    const store = useRegisterChallengeStore();
+
+    cy.fixture('formOrganizationOptions').then((formOrganizationOptions) => {
+      const { addressOptions, organizationOptions } = useSelectedOrganization(
+        formOrganizationOptions,
+      );
+      store.setFormOrganizationId(organizationOptions.value[0].value);
+      options = addressOptions.value;
+    });
+  });
+
   it('has translation for all strings', () => {
     cy.testLanguageStringsInContext(
       ['messageNoResult', 'labelAddress'],
@@ -29,7 +47,9 @@ describe('<FormFieldCompanyAddress>', () => {
   context('desktop', () => {
     beforeEach(() => {
       cy.mount(FormFieldCompanyAddress, {
-        props: {},
+        props: {
+          options,
+        },
       });
       cy.viewport('macbook-16');
     });
@@ -59,13 +79,8 @@ describe('<FormFieldCompanyAddress>', () => {
       cy.get('.q-menu')
         .should('be.visible')
         .within(() => {
-          cy.get('.q-item').first().click();
+          cy.get('.q-item').should('have.length', options.length);
         });
-      // test selected option
-      cy.dataCy('form-company-address')
-        .find('input')
-        .invoke('val')
-        .should('eq', 'Address 1');
     });
 
     it('validates address field correctly', () => {
@@ -80,21 +95,6 @@ describe('<FormFieldCompanyAddress>', () => {
             fieldName: i18n.global.t('form.labelAddress'),
           }),
         );
-      cy.dataCy('form-company-address').find('input').click();
-      // select option
-      cy.get('.q-menu')
-        .should('be.visible')
-        .within(() => {
-          cy.get('.q-item').first().click();
-        });
-      cy.dataCy('form-company-address')
-        .find('.q-field__messages')
-        .should(
-          'not.contain',
-          i18n.global.t('form.messageFieldRequired', {
-            fieldName: i18n.global.t('form.labelAddress'),
-          }),
-        );
     });
 
     it('renders dialog for adding a new address', () => {
@@ -118,7 +118,9 @@ describe('<FormFieldCompanyAddress>', () => {
   context('mobile', () => {
     beforeEach(() => {
       cy.mount(FormFieldCompanyAddress, {
-        props: {},
+        props: {
+          options,
+        },
       });
       cy.viewport('iphone-6');
     });

diff --git a/src/components/__tests__/FormFieldSelectTable.cy.js b/src/components/__tests__/FormFieldSelectTable.cy.js
@@ -1,10 +1,26 @@
 import FormFieldSelectTable from 'components/form/FormFieldSelectTable.vue';
 import { rideToWorkByBikeConfig } from 'src/boot/global_vars';
 import { i18n } from '../../boot/i18n';
+import { useSelectedOrganization } from 'src/composables/useSelectedOrganization';
+import { createPinia, setActivePinia } from 'pinia';
+// import { useRegisterChallengeStore } from 'src/stores/registerChallenge';
 
 const { contactEmail } = rideToWorkByBikeConfig;
 
 describe('<FormFieldSelectTable>', () => {
+  let options;
+
+  before(() => {
+    setActivePinia(createPinia());
+
+    cy.fixture('formOrganizationOptions').then((formOrganizationOptions) => {
+      const { organizationOptions } = useSelectedOrganization(
+        formOrganizationOptions,
+      );
+      options = organizationOptions;
+    });
+  });
+
   it('has translation for all strings', () => {
     cy.testLanguageStringsInContext(
       [
@@ -44,17 +60,15 @@ describe('<FormFieldSelectTable>', () => {
 
   context('company desktop', () => {
     beforeEach(() => {
-      cy.fixture('companyOptions').then((options) => {
-        cy.mount(FormFieldSelectTable, {
-          props: {
-            options: options,
-            variant: 'company',
-            label: i18n.global.t('form.company.labelCompany'),
-            labelButton: i18n.global.t('register.challenge.buttonAddCompany'),
-            labelButtonDialog: i18n.global.t('form.company.buttonAddCompany'),
-            titleDialog: i18n.global.t('form.company.titleAddCompany'),
-          },
-        });
+      cy.mount(FormFieldSelectTable, {
+        props: {
+          options: options.value,
+          variant: 'company',
+          label: i18n.global.t('form.company.labelCompany'),
+          labelButton: i18n.global.t('register.challenge.buttonAddCompany'),
+          labelButtonDialog: i18n.global.t('form.company.buttonAddCompany'),
+          titleDialog: i18n.global.t('form.company.titleAddCompany'),
+        },
       });
       cy.viewport('macbook-16');
     });
@@ -111,7 +125,9 @@ describe('<FormFieldSelectTable>', () => {
     it('allows to search through options', () => {
       // search for option
       cy.dataCy('form-select-table-search').find('input').focus();
-      cy.dataCy('form-select-table-search').find('input').type('2');
+      cy.dataCy('form-select-table-search')
+        .find('input')
+        .type(options.value[0].label.substring(0, 3));
       // show only one option
       cy.dataCy('form-select-table-option-group')
         .find('.q-radio__label')
@@ -120,7 +136,7 @@ describe('<FormFieldSelectTable>', () => {
       cy.dataCy('form-select-table-search').find('input').blur();
       cy.dataCy('form-select-table-option-group')
         .find('.q-radio__label')
-        .should('have.length', 7);
+        .should('have.length', options.value.length);
     });
 
     it('validates company field correctly', () => {
@@ -172,18 +188,16 @@ describe('<FormFieldSelectTable>', () => {
 
   context('company selected', () => {
     beforeEach(() => {
-      cy.fixture('companyOptions').then((options) => {
-        cy.mount(FormFieldSelectTable, {
-          props: {
-            options: options,
-            variant: 'company',
-            modelValue: options[0].value,
-            label: i18n.global.t('form.company.labelCompany'),
-            labelButton: i18n.global.t('register.challenge.buttonAddCompany'),
-            labelButtonDialog: i18n.global.t('form.company.buttonAddCompany'),
-            titleDialog: i18n.global.t('form.company.titleAddCompany'),
-          },
-        });
+      cy.mount(FormFieldSelectTable, {
+        props: {
+          options: options.value,
+          variant: 'company',
+          modelValue: options.value[0].value,
+          label: i18n.global.t('form.company.labelCompany'),
+          labelButton: i18n.global.t('register.challenge.buttonAddCompany'),
+          labelButtonDialog: i18n.global.t('form.company.buttonAddCompany'),
+          titleDialog: i18n.global.t('form.company.titleAddCompany'),
+        },
       });
       cy.viewport('macbook-16');
     });
@@ -198,17 +212,15 @@ describe('<FormFieldSelectTable>', () => {
 
   context('team desktop', () => {
     beforeEach(() => {
-      cy.fixture('teamOptions').then((options) => {
-        cy.mount(FormFieldSelectTable, {
-          props: {
-            options: options,
-            variant: 'team',
-            label: i18n.global.t('form.team.labelTeam'),
-            labelButton: i18n.global.t('form.team.buttonAddTeam'),
-            labelButtonDialog: i18n.global.t('form.team.buttonAddTeam'),
-            titleDialog: i18n.global.t('form.team.titleAddTeam'),
-          },
-        });
+      cy.mount(FormFieldSelectTable, {
+        props: {
+          options: options.value,
+          variant: 'team',
+          label: i18n.global.t('form.team.labelTeam'),
+          labelButton: i18n.global.t('form.team.buttonAddTeam'),
+          labelButtonDialog: i18n.global.t('form.team.buttonAddTeam'),
+          titleDialog: i18n.global.t('form.team.titleAddTeam'),
+        },
       });
       cy.viewport('macbook-16');
     });
@@ -246,7 +258,9 @@ describe('<FormFieldSelectTable>', () => {
     it('allows to search through options', () => {
       // search for option
       cy.dataCy('form-select-table-search').find('input').focus();
-      cy.dataCy('form-select-table-search').find('input').type('z');
+      cy.dataCy('form-select-table-search')
+        .find('input')
+        .type(options.value[0].label.substring(0, 3));
       // show only one option
       cy.dataCy('form-select-table-option-group')
         .find('.q-radio__label')
@@ -255,7 +269,7 @@ describe('<FormFieldSelectTable>', () => {
       cy.dataCy('form-select-table-search').find('input').blur();
       cy.dataCy('form-select-table-option-group')
         .find('.q-radio__label')
-        .should('have.length', 2);
+        .should('have.length', options.value.length);
     });
 
     it('validates company field correctly', () => {

diff --git a/src/components/__tests__/FormLogin.cy.js b/src/components/__tests__/FormLogin.cy.js
@@ -1,6 +1,6 @@
 import { colors } from 'quasar';
 import { createPinia, setActivePinia } from 'pinia';
-import { useLoginStore } from 'src/stores/login';
+import { emptyUser, useLoginStore } from 'src/stores/login';
 
 import FormLogin from '../login/FormLogin.vue';
 import { i18n } from '../../boot/i18n';
@@ -252,15 +252,17 @@ describe('<FormLogin>', () => {
     it('uses the login store', () => {
       const loginStore = useLoginStore();
       // initial state
-      expect(loginStore.user.email).to.equal(null);
-      expect(loginStore.user.password).to.equal(null);
+      expect(loginStore.user.email).to.equal(emptyUser.email);
+      expect(loginStore.user.password).to.equal(emptyUser.password);
       // type email
+      cy.dataCy('form-login-email').find('input').clear();
       cy.dataCy('form-login-email').find('input').type(email);
       // check email in store
       cy.dataCy('form-login-email').then(() => {
         expect(loginStore.user.email).to.equal(email);
       });
       // type password
+      cy.dataCy('form-login-password').find('input').clear();
       cy.dataCy('form-login-password').find('input').type(password);
       // check password in store
       cy.dataCy('form-login-password').then(() => {

diff --git a/src/components/__tests__/FormSelectOrganization.cy.js b/src/components/__tests__/FormSelectOrganization.cy.js
@@ -0,0 +1,49 @@
+import FormSelectOrganization from 'components/form/FormSelectOrganization.vue';
+import { i18n } from '../../boot/i18n';
+
+// selectors
+const selectorFormFieldCompanyAddress = 'form-company-address';
+const selectorFormFieldSelectTable = 'form-select-table-company';
+const selectorFormSelectOrganization = 'form-select-organization';
+
+describe('<FormSelectOrganization>', () => {
+  it('has translation for all strings', () => {
+    cy.testLanguageStringsInContext([], 'index.component', i18n);
+  });
+
+  context('desktop', () => {
+    beforeEach(() => {
+      cy.mount(FormSelectOrganization, {
+        props: {},
+      });
+      cy.viewport('macbook-16');
+    });
+
+    coreTests();
+  });
+
+  context('mobile', () => {
+    beforeEach(() => {
+      cy.mount(FormSelectOrganization, {
+        props: {},
+      });
+      cy.viewport('iphone-6');
+    });
+
+    coreTests();
+  });
+});
+
+function coreTests() {
+  it('renders the main component', () => {
+    cy.dataCy(selectorFormSelectOrganization).should('be.visible');
+  });
+
+  it('renders the FormFieldSelectTable component', () => {
+    cy.dataCy(selectorFormFieldSelectTable).should('be.visible');
+  });
+
+  it('renders the FormFieldCompanyAddress component', () => {
+    cy.dataCy(selectorFormFieldCompanyAddress).should('be.visible');
+  });
+}
diff --git a/src/components/__tests__/HeaderOrganization.cy.js b/src/components/__tests__/HeaderOrganization.cy.js
@@ -58,12 +58,12 @@ function coreTests() {
       // branch count
       cy.dataCy('header-organization-branch-count')
         .should('be.visible')
-        .and('contain', organization.branches.length)
+        .and('contain', organization.divisions.length)
         .and(
           'contain',
           i18n.global.tc(
             'coordinator.labelBranches',
-            organization.branches.length,
+            organization.divisions.length,
           ),
         );
       // member count

diff --git a/src/components/coordinator/HeaderOrganization.vue b/src/components/coordinator/HeaderOrganization.vue
@@ -37,8 +37,8 @@ export default defineComponent({
   emits: ['export'],
   setup(props) {
     const countBranches = computed((): number => {
-      return props.organization?.branches?.length
-        ? props.organization.branches.length
+      return props.organization?.divisions?.length
+        ? props.organization.divisions.length
         : 0;
     });