Skip to content

Commit

Permalink
src/stores: add action registerCoordinator to the register store + fo…
Browse files Browse the repository at this point in the history
…rm updates (#639)

* update FormRegisterCoordinator data structure

* simplify router rules and add register_coordinator path

* add loadOptions function to FormFieldCompany

* add createOrganization function to FormFieldCompany

* define new endpoint + tweak logic

* rename subsidiary variable + fix FormFieldCompany tests

* add FormFieldCompany add company test

* fix tests for FormRegisterCoordinator

* add registerCoordinator function to register stoer

* FormFieldCoordinator - test submit request and response

* cleanup

* FormRegisterCoordinator - test store state after register

* remove the Register as coordinator box from register form

* simplify FormRegisterCoordinator

* remove register cooordinator link from register screen e2e

* function cleanup

* update register coordinator endpoint

* cleanup and refactor FormFieldCompany test

* fix api body parameter vatId type with new fixture

* cleanup

* refactor test intercept

* refactor company API calls intercept in component tests

* refactor Organization types into a separate file

* cleanup docs

* rename isRegistrationComplete variable and add comments

* fix getIsRegistrationCompleted variable in FormRegisterCoordinator test

* add component FormFieldNewsletter

* fix config endpoint

* update docs

* add e2e test to register_coordinator

* remove unused code from FormPersonalDetails

* secure clicking the checkbox element

* break-up the language switcher test function chain

* update the test command chain

* update testLanguageSwitcher test

* update sequence of actions before test

* update then chaining of commands

* register_coordinator beforeEach hook

* fix register_coordinator e2e tests

* update newsletter form test in FormPersonalDetails

* components/coordinator: rename const countBranches to subsidiariesCount

* src/components/global: fix logger level and log messages

* src/components/types: rename PostOrganizationsBody TS interface to PostOrganizationPayload

* src/composables: simplify using ternary operator

* update FormFieldCompany docs

---------

Co-authored-by: Šimon Macek <simon.macek@proficio.cz>
Co-authored-by: Tomas Zigo <tomas.zigo@slovanet.sk>
  • Loading branch information
3 people authored Nov 1, 2024
1 parent 4d78eea commit 839dd97
Show file tree
Hide file tree
Showing 47 changed files with 1,122 additions and 423 deletions.
2 changes: 2 additions & 0 deletions ride_to_work_by_bike_config.toml
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,10 @@ apiDefaultLang = "cs"

urlApiHasUserVerifiedEmail = "auth/registration/has-user-verified-email-address/"
urlApiLogin = "auth/login/"
urlApiOrganizations = "organizations/"
urlApiRefresh = "auth/token/refresh/"
urlApiRegister = "auth/registration/"
urlApiRegisterCoordinator = "rest/challenge/registration/coordinator/"
urlApiResetPassword = "auth/password/reset/"

checkIsEmailVerifiedInterval = 20 # seconds
99 changes: 84 additions & 15 deletions src/components/__tests__/FormFieldCompany.cy.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import FormFieldTestWrapper from 'components/global/FormFieldTestWrapper.vue';
import { i18n } from '../../boot/i18n';
import { rideToWorkByBikeConfig } from '../../boot/global_vars';
import {
httpSuccessfullStatus,
interceptOrganizationsApi,
} from '../../../test/cypress/support/commonTests';

describe('<FormFieldCompany>', () => {
it('has translation for all strings', () => {
Expand Down Expand Up @@ -28,6 +33,8 @@ describe('<FormFieldCompany>', () => {

context('desktop', () => {
beforeEach(() => {
interceptOrganizationsApi(rideToWorkByBikeConfig, i18n);
// mount component
cy.mount(FormFieldTestWrapper, {
props: {
component: 'FormFieldCompany',
Expand All @@ -52,6 +59,8 @@ describe('<FormFieldCompany>', () => {
});

it('allows user to select option', () => {
testCompanyApiResponse();

cy.dataCy('form-company').find('input').click();
// select option
cy.get('.q-menu')
Expand All @@ -67,6 +76,8 @@ describe('<FormFieldCompany>', () => {
});

it('allows to search through options', () => {
testCompanyApiResponse();

// search for option
cy.dataCy('form-company').find('input').focus();
cy.dataCy('form-company').find('input').type('2');
Expand Down Expand Up @@ -109,26 +120,70 @@ describe('<FormFieldCompany>', () => {
cy.testElementsSideBySide('col-input', 'col-button');
});

it('renders dialog when for adding a new company', () => {
cy.dataCy('button-add-company').click();
cy.dataCy('dialog-add-company').should('be.visible');
cy.dataCy('dialog-add-company')
.find('h3')
.should('be.visible')
.and('have.css', 'font-size', '20px')
.and('have.css', 'font-weight', '500')
.and('contain', i18n.global.t('form.company.titleAddCompany'));
cy.dataCy('dialog-button-cancel')
.should('be.visible')
.and('have.text', i18n.global.t('navigation.discard'));
cy.dataCy('dialog-button-submit')
.should('be.visible')
.and('have.text', i18n.global.t('form.company.buttonAddCompany'));
it('allows to add a new company', () => {
cy.fixture('formFieldCompanyCreateRequest').then(
(formFieldCompanyCreateRequest) => {
cy.fixture('formFieldCompanyCreate').then(
(formFieldCompanyCreateResponse) => {
cy.dataCy('button-add-company').click();
// dialog
cy.dataCy('dialog-add-company').should('be.visible');
cy.dataCy('dialog-add-company')
.find('h3')
.should('be.visible')
.and('have.css', 'font-size', '20px')
.and('have.css', 'font-weight', '500')
.and('contain', i18n.global.t('form.company.titleAddCompany'));
cy.dataCy('dialog-button-cancel')
.should('be.visible')
.and('have.text', i18n.global.t('navigation.discard'));
cy.dataCy('dialog-button-submit')
.should('be.visible')
.and(
'have.text',
i18n.global.t('form.company.buttonAddCompany'),
);
// fill form
cy.dataCy('form-add-company-name')
.find('input')
.type(formFieldCompanyCreateRequest.name);
cy.dataCy('form-add-company-vat-id')
.find('input')
.type(formFieldCompanyCreateRequest.vatId);
// submit form
cy.dataCy('dialog-button-submit').click();
// test response
cy.wait('@createOrganization').then((interception) => {
expect(interception.request.headers.authorization).to.include(
'Bearer',
);
expect(interception.response.statusCode).to.equal(
httpSuccessfullStatus,
);
expect(interception.request.body).to.deep.equal({
name: formFieldCompanyCreateRequest.name,
vatId: formFieldCompanyCreateRequest.vatId,
});
expect(interception.response.body).to.deep.equal(
formFieldCompanyCreateResponse,
);
});
// test selected option
cy.dataCy('form-company')
.find('input')
.invoke('val')
.should('eq', formFieldCompanyCreateResponse.name);
},
);
},
);
});
});

context('mobile', () => {
beforeEach(() => {
interceptOrganizationsApi(rideToWorkByBikeConfig, i18n);
// mount component
cy.mount(FormFieldTestWrapper, {
props: {
component: 'FormFieldCompany',
Expand All @@ -142,4 +197,18 @@ describe('<FormFieldCompany>', () => {
cy.testElementPercentageWidth(cy.dataCy('col-button'), 100);
});
});

function testCompanyApiResponse() {
cy.fixture('formFieldCompany').then((formFieldCompanyResponse) => {
cy.wait('@getOrganizations').then((interception) => {
expect(interception.request.headers.authorization).to.include('Bearer');
expect(interception.response.statusCode).to.equal(
httpSuccessfullStatus,
);
expect(interception.response.body).to.deep.equal(
formFieldCompanyResponse,
);
});
});
}
});
4 changes: 2 additions & 2 deletions src/components/__tests__/FormFieldCompanyAddress.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ describe('<FormFieldCompanyAddress>', () => {
cy.testLanguageStringsInContext(
[
'buttonAddAddress',
'buttonAddSubdivision',
'buttonAddSubsidiary',
'hintAddress',
'labelAddress',
'titleAddAddress',
Expand Down Expand Up @@ -111,7 +111,7 @@ describe('<FormFieldCompanyAddress>', () => {
.and('have.text', i18n.global.t('navigation.discard'));
cy.dataCy('dialog-button-submit')
.should('be.visible')
.and('have.text', i18n.global.t('form.company.buttonAddSubdivision'));
.and('have.text', i18n.global.t('form.company.buttonAddSubsidiary'));
});
});

Expand Down
109 changes: 109 additions & 0 deletions src/components/__tests__/FormFieldNewsletter.cy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import { nextTick, ref } from 'vue';
import FormFieldNewsletter from 'components/form/FormFieldNewsletter.vue';
import { i18n } from '../../boot/i18n';
import { NewsletterType } from '../../components/types/Newsletter';
import { vModelAdapter } from '../../../test/cypress/utils';

// selectors
const selectorNewsletterContainer = 'form-field-newsletter';
const selectorNewsletterLabel = 'newsletter-label';
const selectorNewsletterAll = 'newsletter-option-all';
const selectorNewsletterOptions = 'newsletter-options';
const selectorNewsletterOption = 'newsletter-option';

const model = ref([]);

describe('<FormFieldNewsletter>', () => {
it('has translation for all strings', () => {
cy.testLanguageStringsInContext(
[
'titleNewsletter',
'labelNewsletterAll',
'labelNewsletterChallenges',
'labelNewsletterEvents',
'labelNewsletterMobility',
],
'form.personalDetails',
i18n,
);
});

context('desktop', () => {
beforeEach(() => {
cy.viewport('macbook-16');
cy.mount(FormFieldNewsletter, {
props: {
...vModelAdapter(model),
},
});
});

coreTests();
});

context('mobile', () => {
beforeEach(() => {
cy.viewport('iphone-6');
cy.mount(FormFieldNewsletter, {
props: {
...vModelAdapter(model),
},
});
});

coreTests();
});
});

function coreTests() {
it('renders component', () => {
cy.dataCy(selectorNewsletterContainer).should('be.visible');
cy.dataCy(selectorNewsletterLabel).should('be.visible');
cy.dataCy(selectorNewsletterAll).should('be.visible');
cy.dataCy(selectorNewsletterOptions).should('be.visible');
});

it('renders all newsletter options', () => {
cy.dataCy(selectorNewsletterOption).should('have.length', 3);
});

it('updates v-model when options are selected', () => {
model.value = [];
nextTick().then(() => {
cy.dataCy(selectorNewsletterOption).eq(0).click();
cy.wrap(model)
.its('value')
.should('deep.equal', [NewsletterType.challenge]);
});
});

it('selects all options when "all" is clicked', () => {
model.value = [];
nextTick().then(() => {
cy.dataCy(selectorNewsletterAll).click();
cy.wrap(model).its('value').should('have.length', 3);
});
});

it('deselects all options when "all" is unclicked', () => {
model.value = [
NewsletterType.challenge,
NewsletterType.event,
NewsletterType.mobility,
];
nextTick().then(() => {
cy.dataCy(selectorNewsletterAll).click();
cy.wrap(model).its('value').should('have.length', 0);
});
});

it('selects "all" when all options are manually selected', () => {
model.value = [];
nextTick().then(() => {
cy.dataCy(selectorNewsletterOption).each(($el) => {
cy.wrap($el).click();
});
cy.dataCy(selectorNewsletterAll).should('be.checked');
});
});
}
4 changes: 2 additions & 2 deletions src/components/__tests__/FormFieldSelectTable.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,10 @@ describe('<FormFieldSelectTable>', () => {
'labelDepartment',
'textCompanyPermission',
'textCoordinator',
'textSubdivisionAddress',
'textSubsidiaryAddress',
'textUserExperience',
'titleAddCompany',
'titleSubdivisionAddress',
'titleSubsidiaryAddress',
],
'form.company',
i18n,
Expand Down
2 changes: 1 addition & 1 deletion src/components/__tests__/FormPersonalDetails.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ describe('<FormPersonalDetails>', () => {
});

it('renders checkbox select newsletter', () => {
cy.dataCy('form-personal-details-newsletter')
cy.dataCy('form-field-newsletter')
.should('be.visible')
.find('label')
.should('be.visible')
Expand Down
48 changes: 1 addition & 47 deletions src/components/__tests__/FormRegister.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,6 @@ const selectorFormRegisterPasswordConfirmInput =
const selectorFormRegisterPasswordConfirmIcon =
'form-register-password-confirm-icon';
const selectorFormRegisterSubmit = 'form-register-submit';
const selectorFormRegisterCoordinator = 'form-register-coordinator';
const selectorFormRegisterCoordinatorDescription =
'form-register-coordinator-description';
const selectorFormRegisterCoordinatorLinkWrapper =
'form-register-coordinator-link-wrapper';
const selectorFormRegisterCoordinatorLink = 'form-register-coordinator-link';
const selectorFormRegisterLogin = 'form-register-login';
const selectorFormRegisterLoginLink = 'form-register-login-link';
const selectorFormRegisterTextNoActiveChallenge =
Expand All @@ -59,8 +53,7 @@ const fontWeightText = 400;
const router = route();
const testEmail = 'test@test.com';
const testPassword = '12345a';
const { apiBase, apiDefaultLang, borderRadiusCardSmall, urlApiRegister } =
rideToWorkByBikeConfig;
const { apiBase, apiDefaultLang, urlApiRegister } = rideToWorkByBikeConfig;
const defaultLoginUserEmailStoreValue = '';

const compareRegisterResponseWithStore = (registerResponse) => {
Expand Down Expand Up @@ -260,45 +253,6 @@ describe('<FormRegister>', () => {
});
});

it('renders box with coordinator registration link', () => {
const urlRegisterCoordinator = router.resolve({
name: 'register-coordinator',
}).href;
// wrapper
cy.dataCy(selectorFormRegisterCoordinator)
.should('have.css', 'padding', '16px')
.and('have.backgroundColor', whiteOpacity)
.and('have.css', 'border-radius', borderRadiusCardSmall);
// description
cy.dataCy(selectorFormRegisterCoordinatorDescription)
.should('have.css', 'font-size', `${fontSizeText}px`)
.and('have.css', 'font-weight', `${fontWeightText}`)
.and('have.css', 'margin-top', '0px')
.and('have.css', 'margin-bottom', '16px')
.and('have.color', white)
.and(
'contain',
i18n.global.t('register.form.hintRegisterAsCoordinator'),
)
.then(($description) => {
expect($description.text()).to.equal(
i18n.global.t('register.form.hintRegisterAsCoordinator'),
);
});
// spacing
cy.dataCy(selectorFormRegisterCoordinatorLinkWrapper)
.should('have.css', 'margin-top', '16px')
.and('have.css', 'margin-bottom', '0px');
// link
cy.dataCy(selectorFormRegisterCoordinatorLink)
.should('have.color', white)
.and('have.attr', 'href', urlRegisterCoordinator)
.and(
'contain',
i18n.global.t('register.form.linkRegisterAsCoordinator'),
);
});

it('renders link to login page', () => {
const urlLogin = router.resolve({ name: 'login' }).href;
// wrapper
Expand Down
Loading

0 comments on commit 839dd97

Please sign in to comment.