@ons/design-system 50.0.1 → 51.0.0

package/components/char-check-limit/_macro.spec.js

@@ -0,0 +1,73 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_CHAR_CHECK_LIMIT = {
+  id: 'example-char-check-limit',
+  charCountSingular: 'You have {x} character remaining',
+  charCountPlural: 'You have {x} characters remaining',
+  charCountOverLimitSingular: '{x} character too many',
+  charCountOverLimitPlural: '{x} characters too many',
+};
+
+describe('macro: char-check-limit', () => {
+  it('passes jest-axe checks without check', async () => {
+    const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('passes jest-axe checks with check', async () => {
+    const $ = cheerio.load(
+      renderComponent(
+        'char-check-limit',
+        {
+          ...EXAMPLE_CHAR_CHECK_LIMIT,
+          type: 'check',
+        },
+        ['<p>Test content.</p>'],
+      ),
+    );
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `id` attribute', () => {
+    const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
+
+    expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit-remaining');
+  });
+
+  it('has the provided data attributes', () => {
+    const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
+
+    expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
+    expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
+    expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many');
+    expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many');
+  });
+
+  it('has expected nested content', () => {
+    const $ = cheerio.load(
+      renderComponent(
+        'char-check-limit',
+        {
+          ...EXAMPLE_CHAR_CHECK_LIMIT,
+          type: 'check',
+        },
+        ['<p>Test content.</p>'],
+      ),
+    );
+
+    expect(
+      $('.ons-js-char-check-input')
+        .html()
+        .trim(),
+    ).toBe('<p>Test content.</p>');
+  });
+});

package/components/char-check-limit/character-check.spec.js

@@ -0,0 +1,196 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_INPUT_WITH_CHARACTER_CHECK = {
+  id: 'search-field',
+  type: 'number',
+  width: '6',
+  label: {
+    text: 'Filter results',
+  },
+  searchButton: {
+    text: 'Filter',
+  },
+  charCheckLimit: {
+    charcheckCountdown: true,
+    limit: 11,
+    charCountOverLimitSingular: '{x} number too many',
+    charCountOverLimitPlural: '{x} numbers too many',
+    charCountSingular: 'You have {x} character remaining',
+    charCountPlural: 'You have {x} characters remaining',
+  },
+};
+
+const EXAMPLE_CHARACTER_CHECK_WITH_MUTUALLY_EXCLUSIVE = {
+  id: 'feedback',
+  name: 'feedback',
+  width: '30',
+  legend: 'Feeback legend',
+  label: {
+    text: 'Enter your feedback',
+  },
+  charCheckLimit: {
+    limit: 200,
+    charCountSingular: 'You have {x} character remaining',
+    charCountPlural: 'You have {x} characters remaining',
+  },
+  mutuallyExclusive: {
+    or: 'Or',
+    deselectMessage: 'Selecting this will clear your feedback',
+    deselectGroupAdjective: 'cleared',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'feedback-checkbox',
+        name: 'no-feedback',
+        value: 'no-feedback',
+        label: {
+          text: 'I dont want to provide feedback',
+        },
+      },
+    ],
+  },
+};
+
+describe('script: character-check', () => {
+  describe('mode: basic', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_CHECK));
+    });
+
+    describe('Given that the char check helper has initialised correctly', () => {
+      it('the char check readout should be invisible', async () => {
+        const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+        expect(hasClass).toBe(true);
+      });
+
+      it('then the character limit readout should reflect the number of characters remaining', async () => {
+        const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+        expect(innerHtml.trim()).toBe('You have 11 characters remaining');
+      });
+    });
+
+    describe('Given that the user has not typed into the search input', () => {
+      describe('when the user types into the search input', () => {
+        beforeEach(async () => {
+          await page.type('#search-field', '1', { delay: 20 });
+        });
+
+        it('then the characters remaining readout reflect the number of characters remaining', async () => {
+          const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+          expect(innerHtml.trim()).toBe('You have 10 characters remaining');
+        });
+
+        it('the char check readout should be visible', async () => {
+          const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+          expect(hasClass).toBe(false);
+        });
+
+        it('then aria-live should be set to polite', async () => {
+          const ariaLiveAttribute = await page.$eval('#search-field-check-remaining', element => element.getAttribute('aria-live'));
+          expect(ariaLiveAttribute).toBe('polite');
+        });
+      });
+
+      describe('when the user reaches the charcheck limit of the input', () => {
+        beforeEach(async () => {
+          await page.type('#search-field', '11111111111', { delay: 20 });
+        });
+
+        it('the char check readout should be invisible', async () => {
+          const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+          expect(hasClass).toBe(true);
+        });
+      });
+
+      describe('when the user has 1 character remaining before the limit is reached', () => {
+        beforeEach(async () => {
+          await page.type('#search-field', '1111111111', { delay: 20 });
+        });
+
+        it('then the characters remaining readout reflect the number of characters remaining', async () => {
+          const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+          expect(innerHtml.trim()).toBe('You have 1 character remaining');
+        });
+      });
+    });
+
+    describe('Given that the user has exceeded the charcheck limit of the input by 1', () => {
+      beforeEach(async () => {
+        await page.type('#search-field', '111111111111', { delay: 20 });
+      });
+
+      it('the char check readout should be visible', async () => {
+        const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+        expect(hasClass).toBe(false);
+      });
+
+      it('then the characters remaining readout reflect the number of characters exceeded', async () => {
+        const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+        expect(innerHtml.trim()).toBe('1 number too many');
+      });
+
+      it('then aria-live should be set to assertive', async () => {
+        const ariaLiveAttribute = await page.$eval('#search-field-check-remaining', element => element.getAttribute('aria-live'));
+        expect(ariaLiveAttribute).toBe('assertive');
+      });
+
+      it('then the input and readout should be given limit reached classes', async () => {
+        const hasClassOnSearchInput = await page.$eval('#search-field', element => element.classList.contains('ons-input--limit-reached'));
+        expect(hasClassOnSearchInput).toBe(true);
+        const hasClassOnLimitReadout = await page.$eval('#search-field-check-remaining', element =>
+          element.classList.contains('ons-input__limit--reached'),
+        );
+        expect(hasClassOnLimitReadout).toBe(true);
+      });
+    });
+
+    describe('Given that the user has exceeded the charcheck limit of the input by more than 1', () => {
+      beforeEach(async () => {
+        await page.type('#search-field', '1111111111111', { delay: 20 });
+      });
+
+      it('the char check readout should be visible', async () => {
+        const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+        expect(hasClass).toBe(false);
+      });
+
+      it('then the characters remaining readout reflect the number of characters exceeded', async () => {
+        const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+        expect(innerHtml.trim()).toBe('2 numbers too many');
+      });
+
+      it('then aria-live should be set to assertive', async () => {
+        const ariaLiveAttribute = await page.$eval('#search-field-check-remaining', element => element.getAttribute('aria-live'));
+        expect(ariaLiveAttribute).toBe('assertive');
+      });
+
+      it('then the input and readout should be given limit reached classes', async () => {
+        const hasClassOnSearchInput = await page.$eval('#search-field', element => element.classList.contains('ons-input--limit-reached'));
+        expect(hasClassOnSearchInput).toBe(true);
+        const hasClassOnLimitReadout = await page.$eval('#search-field-check-remaining', element =>
+          element.classList.contains('ons-input__limit--reached'),
+        );
+        expect(hasClassOnLimitReadout).toBe(true);
+      });
+    });
+  });
+
+  describe('mode: mutually exclusive', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('textarea', EXAMPLE_CHARACTER_CHECK_WITH_MUTUALLY_EXCLUSIVE));
+    });
+
+    describe('Given that the input value is cleared programatically via mutually exclusive option', () => {
+      beforeEach(async () => {
+        await page.type('#feedback', '1', { delay: 20 });
+        await page.focus('#feedback-checkbox');
+        await page.keyboard.press('Space');
+      });
+
+      it('then aria-live attribute should removed', async () => {
+        const hasAriaLiveAttribute = await page.$eval('#feedback-lim-remaining', element => element.hasAttribute('aria-live'));
+        expect(hasAriaLiveAttribute).toBe(false);
+      });
+    });
+  });
+});

package/components/char-check-limit/character-limit.js

@@ -25,6 +25,7 @@ export default class CharLimit {
     // Prevent aria live announcement when component initialises
     if (!firstRun && event.inputType) {
       this.limitElement.setAttribute('aria-live', 'polite');
+      this.limitElement.setAttribute('aria-live', [remaining > 0 ? 'polite' : 'assertive']);
     } else {
       this.limitElement.removeAttribute('aria-live');
     }
@@ -39,7 +40,6 @@ export default class CharLimit {
 
   setLimitClass(remaining, element, limitClass) {
     element.classList[remaining > 0 ? 'remove' : 'add'](limitClass);
-    this.limitElement.setAttribute('aria-live', [remaining > 0 ? 'polite' : 'assertive']);
   }
 
   track(remaining) {