Skip to content

Commit

Permalink
Fix single inputs not clearing for mutually exclusive fields (#3091)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmccar
rmccar committed Mar 25, 2024
1 parent c15e421 commit f942ba9
Show file tree
Hide file tree
Showing 3 changed files with 248 additions and 13 deletions.
12 changes: 6 additions & 6 deletions src/components/multiple-input-fields/_macro.njk
View file
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
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
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('');
});
});
});
});
});

0 comments on commit f942ba9

Please sign in to comment.