Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix single inputs not clearing for mutually exclusive fields #3091

Merged
merged 5 commits into from
Mar 19, 2024
+248 −13
Merged

Fix single inputs not clearing for mutually exclusive fields #3091

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d335d50
fix single inputs not clearing for mutually exclusive fields
rmccar Mar 14, 2024
266a73e
minor code tidy
rmccar Mar 14, 2024
ce66dca
update test
rmccar Mar 15, 2024
ec83a73
update test
rmccar Mar 15, 2024
2d1aa31
Merge branch 'main' into fix-date-duration-single-mutually-exclusive-…
rmccar Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/components/multiple-input-fields/_macro.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
{% from "components/fieldset/_macro.njk" import onsFieldset %}

{% macro onsMultipleInputFields(params) %}
{% if params.numberOfFields > 1 %}
{% set fields %}
{% set fields %}
{% if params.numberOfFields > 1 %}
<div class="ons-field-group">
{{ params.fields | safe }}
</div>
{% endset %}
{% else %}
{{ params.fields | safe }}
{% endif %}
{% else %}
{{ params.fields | safe }}
{% endif %}
{% endset %}

{% if params.mutuallyExclusive %}
{% call onsMutuallyExclusive({
Expand Down
128 changes: 121 additions & 7 deletions src/components/mutually-exclusive/mutually-exclusive.date.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,35 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DATE_PARAMS = {
deselectExclusiveOptionAdjective: 'deselected',
exclusiveOptions: [
{
id: 'date-exclusive-exclusive-option',
id: 'date-exclusive-option',
name: 'no-paid-job',
value: 'no-paid-job',
label: {
text: 'I have never had a paid job',
},
},
],
},
};

const EXAMPLE_MUTUALLY_EXCLUSIVE_DATE_SINGLE_PARAMS = {
id: 'date-mutually-exclusive',
legendOrLabel: 'What year was your last MOT?',
description: 'For example, 2018',
year: {
label: {
text: 'Year',
},
name: 'year-exclusive',
},
mutuallyExclusive: {
or: 'Or',
deselectMessage: 'Selecting this will clear the date if one has been inputted',
deselectGroupAdjective: 'cleared',
deselectExclusiveOptionAdjective: 'deselected',
exclusiveOptions: [
{
id: 'date-exclusive-option',
name: 'no-paid-job',
value: 'no-paid-job',
label: {
Expand All @@ -57,11 +85,11 @@ describe('script: mutually-exclusive', () => {

describe('when the user clicks the mutually exclusive option', () => {
beforeEach(async () => {
await page.click('#date-exclusive-exclusive-option');
await page.click('#date-exclusive-option');
});

it('then the mutually exclusive option should be checked', async () => {
const isChecked = await page.$eval('#date-exclusive-exclusive-option', (node) => node.checked);
const isChecked = await page.$eval('#date-exclusive-option', (node) => node.checked);
expect(isChecked).toBe(true);
});

Expand All @@ -85,7 +113,7 @@ describe('script: mutually-exclusive', () => {

describe('Given the user has checked the mutually exclusive exclusive option', () => {
beforeEach(async () => {
await page.click('#date-exclusive-exclusive-option');
await page.click('#date-exclusive-option');
});

describe('when the user populates the dateInput', () => {
Expand All @@ -95,8 +123,8 @@ describe('script: mutually-exclusive', () => {
await page.type('#date-mutually-exclusive-year', '2018');
});

it('then the mutually exclusive option should be checked', async () => {
const isChecked = await page.$eval('#date-exclusive-exclusive-option', (node) => node.checked);
it('then the mutually exclusive option should be unchecked', async () => {
const isChecked = await page.$eval('#date-exclusive-option', (node) => node.checked);
expect(isChecked).toBe(false);
});

Expand Down Expand Up @@ -127,7 +155,93 @@ describe('script: mutually-exclusive', () => {

describe('when the user clicks the mutually exclusive option', () => {
beforeEach(async () => {
await page.click('#date-exclusive-exclusive-option');
await page.click('#date-exclusive-option');
});

it('then the aria alert shouldnt say anything', async () => {
await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);

const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
expect(alertText).toBe('');
});
});
});
});
describe('date-year', () => {
beforeEach(async () => {
await setTestPage('/test', renderComponent('date-input', EXAMPLE_MUTUALLY_EXCLUSIVE_DATE_SINGLE_PARAMS));
});

describe('Given the user populated the date input', () => {
beforeEach(async () => {
await page.type('#date-mutually-exclusive-year', '2018');
});

describe('when the user clicks the mutually exclusive option', () => {
beforeEach(async () => {
await page.click('#date-exclusive-option');
});

it('then the mutually exclusive option should be checked', async () => {
const isChecked = await page.$eval('#date-exclusive-option', (node) => node.checked);
expect(isChecked).toBe(true);
});

it('then the date input should be cleared', async () => {
const yearValue = await page.$eval('#date-mutually-exclusive-year', (node) => node.value);
expect(yearValue).toBe('');
});

it('then the aria alert should tell the user that the date input has been cleared', async () => {
await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);

const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
expect(alertText).toBe('What year was your last MOT? cleared.');
});
});
});

describe('Given the user has checked the mutually exclusive exclusive option', () => {
beforeEach(async () => {
await page.click('#date-exclusive-option');
});

describe('when the user populates the dateInput', () => {
beforeEach(async () => {
await page.type('#date-mutually-exclusive-year', '2018');
});

it('then the mutually exclusive option should be unchecked', async () => {
const isChecked = await page.$eval('#date-exclusive-option', (node) => node.checked);
expect(isChecked).toBe(false);
});

it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);

const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
expect(alertText).toBe('I have never had a paid job deselected.');
});
});
});

describe('Given the user has not populated the date input or checked the exclusive option', () => {
describe('when the user populates the date input', () => {
beforeEach(async () => {
await page.type('#date-mutually-exclusive-year', '2018');
});

it('then the aria alert shouldnt say anything', async () => {
await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);

const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
expect(alertText).toBe('');
});
});

describe('when the user clicks the mutually exclusive option', () => {
beforeEach(async () => {
await page.click('#date-exclusive-option');
});

it('then the aria alert shouldnt say anything', async () => {
Expand Down
121 changes: 121 additions & 0 deletions src/components/mutually-exclusive/mutually-exclusive.duration.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,40 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS = {
},
};

const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_SINGLE_PARAMS = {
id: 'address-duration',
legendOrLabel: 'How long have you lived at this address?',
description: 'If you have lived at this address for less than a year then enter 0 into the year input.',
field1: {
id: 'address-duration-years',
name: 'address-duration-years',
suffix: {
text: 'Years',
id: 'address-duration-years-suffix',
},
attributes: {
min: 0,
max: 100,
},
},
mutuallyExclusive: {
or: 'Or',
deselectMessage: 'Selecting this will clear the date if one has been inputted',
deselectGroupAdjective: 'cleared',
deselectExclusiveOptionAdjective: 'deselected',
exclusiveOptions: [
{
id: 'duration-exclusive-option',
name: 'no-duration',
value: 'no-duration',
label: {
text: 'I have not moved in to this address yet',
},
},
],
},
};

describe('script: mutually-exclusive', () => {
describe('duration', () => {
beforeEach(async () => {
Expand Down Expand Up @@ -140,4 +174,91 @@ describe('script: mutually-exclusive', () => {
});
});
});

describe('duration-single', () => {
beforeEach(async () => {
await setTestPage('/test', renderComponent('duration', EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_SINGLE_PARAMS));
});

describe('Given the user populated the duration', () => {
beforeEach(async () => {
await page.type('#address-duration-years', '2');
});

describe('when the user clicks the mutually exclusive option', () => {
beforeEach(async () => {
await page.click('#duration-exclusive-option');
});

it('then the mutually exclusive option should be checked', async () => {
const isChecked = await page.$eval('#duration-exclusive-option', (node) => node.checked);
expect(isChecked).toBe(true);
});

it('then the inputs should be cleared', async () => {
const yearsValue = await page.$eval('#address-duration-years', (node) => node.value);
expect(yearsValue).toBe('');
});

it('then the aria alert should tell the user that the inputs have been cleared', async () => {
await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);

const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
expect(alertText).toBe('How long have you lived at this address? cleared.');
});
});
});

describe('Given the user has checked the mutually exclusive exclusive option', () => {
beforeEach(async () => {
await page.click('#duration-exclusive-option');
});

describe('when the user populates the duration fields', () => {
beforeEach(async () => {
await page.type('#address-duration-years', '2');
});

it('then the exclusive option should be unchecked', async () => {
const isChecked = await page.$eval('#duration-exclusive-option', (node) => node.checked);
expect(isChecked).toBe(false);
});

it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);

const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
expect(alertText).toBe('I have not moved in to this address yet deselected.');
});
});
});

describe('Given the user has not populated the duration inputs or checked the exclusive option', () => {
describe('when the user populates the duration inputs', () => {
beforeEach(async () => {
await page.type('#address-duration-years', '2');
});

it('then the aria alert shouldnt say anything', async () => {
await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);

const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
expect(alertText).toBe('');
});
});

describe('when the user clicks the mutually exclusive option', () => {
beforeEach(async () => {
await page.click('#duration-exclusive-option');
});

it('then the aria alert shouldnt say anything', async () => {
await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);

const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
expect(alertText).toBe('');
});
});
});
});
});
Loading