From f79abb8f6ebe0b625b402bc4bb1164c3caece934 Mon Sep 17 00:00:00 2001 From: Mokhtar Date: Wed, 2 Mar 2022 09:27:28 +0100 Subject: [PATCH] Backport repeat translation fix to 3.14.x (#7544) --- tests/e2e/forms/repeat-form.wdio-spec.js | 172 +++++++++++++----- ...tion.xml => repeat-translation-button.xml} | 52 +++--- tests/forms/repeat-translation-count.xml | 98 ++++++++++ .../page-objects/reports/reports.wdio.page.js | 4 - webapp/src/ts/services/enketo.service.ts | 14 +- .../karma/ts/services/enketo.service.spec.ts | 1 + 6 files changed, 263 insertions(+), 78 deletions(-) rename tests/forms/{repeat-translation.xml => repeat-translation-button.xml} (59%) create mode 100644 tests/forms/repeat-translation-count.xml diff --git a/tests/e2e/forms/repeat-form.wdio-spec.js b/tests/e2e/forms/repeat-form.wdio-spec.js index 000fe70ac26..d4bfb2ed028 100644 --- a/tests/e2e/forms/repeat-form.wdio-spec.js +++ b/tests/e2e/forms/repeat-form.wdio-spec.js @@ -7,19 +7,8 @@ const loginPage = require('../../page-objects/login/login.wdio.page'); const commonPage = require('../../page-objects/common/common.wdio.page'); const reportsPage = require('../../page-objects/reports/reports.wdio.page'); -const xml = fs.readFileSync(`${__dirname}/../../forms/repeat-translation.xml`, 'utf8'); -const formDocument = { - _id: 'form:repeat-translation', - internalId: 'repeat-translation', - title: 'Repeat', - type: 'form', - _attachments: { - xml: { - content_type: 'application/octet-stream', - data: Buffer.from(xml).toString('base64') - } - } -}; +const countFormDocument = readFormDocument('repeat-translation-count'); +const buttonFormDocument = readFormDocument('repeat-translation-button'); const userContactDoc = { _id: constants.USER_CONTACT_ID, name: 'Jack', @@ -36,7 +25,7 @@ const userContactDoc = { describe('RepeatForm', () => { before(async () => { - await utils.seedTestData(userContactDoc, [formDocument]); + await utils.seedTestData(userContactDoc, [countFormDocument, buttonFormDocument]); }); afterEach(async () => { @@ -45,49 +34,138 @@ describe('RepeatForm', () => { }); const selectorPrefix = '#report-form .active'; - const stateLabelPath = `${selectorPrefix}.question-label[data-itext-id="/repeat-translation/basic/state_1:label"]`; - const cityLabelPath = `${selectorPrefix}.question-label[data-itext-id="/repeat-translation/basic/rep/city_1:label"]`; - const melbourneLabelPath = `${selectorPrefix}[data-itext-id="/repeat-translation/basic/rep/city_1/melbourne:label"]`; + const stateLabelPath = `${selectorPrefix}.question-label[data-itext-id="/repeat_translation/basic/state_1:label"]`; + const cityLabelPath = `${selectorPrefix}.question-label[data-itext-id="/repeat_translation/basic/rep/city_1:label"]`; + const melbourneLabelPath = `${selectorPrefix}[data-itext-id="/repeat_translation/basic/rep/city_1/melbourne:label"]`; - it('should display the initial form and its repeated content in Swahili', async () => { - const swUserName = 'Jina la mtumizi'; - await loginPage.changeLanguage('sw', swUserName); - await loginPage.login({ username: auth.username, password: auth.password, createUser: true }); - await commonPage.goToBase(); - await commonPage.goToReports(); - await (await reportsPage.submitReportButton()).click(); - await (await reportsPage.formActionsLink(formDocument.internalId)).click(); + describe('Repeat form with count input', () => { + const inputCountPath = `${selectorPrefix}[data-itext-id="/repeat_translation/basic/count:label"] ~ input`; + + it('should display the initial form and its repeated content in Nepali', async () => { + const neUserName = 'प्रयोगकर्ताको नाम'; + await loginPage.changeLanguage('ne', neUserName); + await login(); + await openRepeatForm(countFormDocument.internalId); + + const stateLabel = await $(stateLabelPath); + expect(await stateLabel.getText()).to.equal('Select a state: - NE'); + const inputCount = await $(inputCountPath); + expect(await inputCount.getValue()).to.equal('1'); + await assertLabels({ selector: cityLabelPath, count: 1, labelText: 'Select a city: - NE' }); + await assertLabels({ selector: melbourneLabelPath, count: 1, labelText: 'ML (NE)' }); - const stateLabel = await $(stateLabelPath); - expect(await stateLabel.getText()).to.equal('Select a state: - SV'); + await repeatForm(3); - await reportsPage.repeatForm(); + await assertLabels({ selector: cityLabelPath, count: 3, labelText: 'Select a city: - NE' }); + await assertLabels({ selector: melbourneLabelPath, count: 3, labelText: 'ML (NE)' }); + }); - const cityLabel = await $(cityLabelPath); - expect(await cityLabel.getText()).to.equal('Select a city: - SV'); + it('should display the initial form and its repeated content in English', async () => { + const enUserName = 'User name'; + await loginPage.changeLanguage('en', enUserName); + await login(); + await openRepeatForm(countFormDocument.internalId); - const melbourneLabel = await $(melbourneLabelPath); - expect(await melbourneLabel.getText()).to.equal('ML'); + const stateLabel = await $(stateLabelPath); + expect(await stateLabel.getText()).to.equal('Select a state:'); + const inputCount = await $(inputCountPath); + expect(await inputCount.getValue()).to.equal('1'); + await assertLabels({ selector: cityLabelPath, count: 1, labelText: 'Select a city:' }); + await assertLabels({ selector: melbourneLabelPath, count: 1, labelText: 'Melbourne' }); + + await repeatForm(3); + + await assertLabels({ selector: cityLabelPath, count: 3, labelText: 'Select a city:' }); + await assertLabels({ selector: melbourneLabelPath, count: 3, labelText: 'Melbourne' }); + }); + + async function repeatForm(count) { + const inputCount = await $(inputCountPath); + await inputCount.setValue(count); + const stateLabel = await $(stateLabelPath); + await stateLabel.click(); // trigger a blur event to trigger the enketo form change listener + expect(await inputCount.getValue()).to.equal(count.toString()); + } }); - it('should display the initial form and its repeated content in English', async () => { - const enUserName = 'User name'; - await loginPage.changeLanguage('en', enUserName); - await loginPage.login({ username: auth.username, password: auth.password, createUser: true }); - await commonPage.goToBase(); - await commonPage.goToReports(); - await (await reportsPage.submitReportButton()).click(); - await (await reportsPage.formActionsLink(formDocument.internalId)).click(); + describe('Repeat form with repeat button', () => { + it('should display the initial form and its repeated content in Swahili', async () => { + const swUserName = 'Jina la mtumizi'; + await loginPage.changeLanguage('sw', swUserName); + await login(); + await openRepeatForm(buttonFormDocument.internalId); - const stateLabel = await $(stateLabelPath); - expect(await stateLabel.getText()).to.equal('Select a state:'); + const stateLabel = await $(stateLabelPath); + expect(await stateLabel.getText()).to.equal('Select a state: - SV'); + await assertLabels({ selector: cityLabelPath, count: 0, labelText: 'Select a city: - SV' }); + await assertLabels({ selector: melbourneLabelPath, count: 0, labelText: 'ML (SV)' }); - await reportsPage.repeatForm(); + await repeatForm(); + await repeatForm(); + await repeatForm(); - const cityLabel = await $(cityLabelPath); - expect(await cityLabel.getText()).to.equal('Select a city:'); + await assertLabels({ selector: cityLabelPath, count: 3, labelText: 'Select a city: - SV' }); + await assertLabels({ selector: melbourneLabelPath, count: 3, labelText: 'ML (SV)' }); + }); - const melbourneLabel = await $(melbourneLabelPath); - expect(await melbourneLabel.getText()).to.equal('Melbourne'); + it('should display the initial form and its repeated content in English', async () => { + const enUserName = 'User name'; + await loginPage.changeLanguage('en', enUserName); + await login(); + await openRepeatForm(buttonFormDocument.internalId); + + const stateLabel = await $(stateLabelPath); + expect(await stateLabel.getText()).to.equal('Select a state:'); + await assertLabels({ selector: cityLabelPath, count: 0, labelText: 'Select a city:' }); + await assertLabels({ selector: melbourneLabelPath, count: 0, labelText: 'Melbourne' }); + + await repeatForm(); + await repeatForm(); + await repeatForm(); + + await assertLabels({ selector: cityLabelPath, count: 3, labelText: 'Select a city:' }); + await assertLabels({ selector: melbourneLabelPath, count: 3, labelText: 'Melbourne' }); + }); + + async function repeatForm() { + const addRepeatButton = await $('.btn.btn-default.add-repeat-btn'); + await addRepeatButton.click(); + } }); + + async function assertLabels({ selector, count, labelText }) { + const labels = await $$(selector); + expect(labels.length).to.equal(count); + await Promise.all(labels.map( + async label => expect(await label.getText()).to.equal(labelText), + )); + } + + async function login() { + await loginPage.login({ username: auth.username, password: auth.password, createUser: true }); + await commonPage.goToBase(); + } + + async function openRepeatForm(formInternalId) { + await commonPage.goToReports(); + await (await reportsPage.submitReportButton()).click(); + await (await reportsPage.formActionsLink(formInternalId)).click(); + } }); + +function readFormDocument(formId) { + const form = fs.readFileSync(`${__dirname}/../../forms/${formId}.xml`, 'utf8'); + const formDocument = { + _id: `form:${formId}`, + internalId: formId, + title: `Form ${formId}`, + type: 'form', + _attachments: { + xml: { + content_type: 'application/octet-stream', + data: Buffer.from(form).toString('base64') + } + } + }; + return formDocument; +} diff --git a/tests/forms/repeat-translation.xml b/tests/forms/repeat-translation-button.xml similarity index 59% rename from tests/forms/repeat-translation.xml rename to tests/forms/repeat-translation-button.xml index f1c8eb86841..93079733a39 100644 --- a/tests/forms/repeat-translation.xml +++ b/tests/forms/repeat-translation-button.xml @@ -5,42 +5,42 @@ - + Melbourne - + Select a city: - + Victoria - + Select a state: - + Cascading Selects: - - ML + + ML (SV) - + Select a city: - SV - - VIC + + VIC (SV) - + Select a state: - SV - + Cascading Selects: - SV - + @@ -53,28 +53,28 @@ - - - + + + - -