@ons/design-system 50.0.1 → 51.0.0

package/components/panel/_macro.spec.js

@@ -0,0 +1,423 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_PANEL_BASIC = {
+  id: 'panel',
+  body: 'Some panel text',
+};
+
+describe('macro: panel', () => {
+  describe.each([
+    ['info', 'Important information:'],
+    ['error', 'Error:'],
+    ['warn', 'Warning:'],
+    ['warn-branded', 'Warning:'],
+    ['branded', 'Important information:'],
+    ['success', 'Completed:'],
+    ['announcement', 'Announcement:'],
+  ])('mode: %s', (panelType, accessibleText) => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: panelType,
+        }),
+      );
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has correct class', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: panelType,
+        }),
+      );
+
+      expect($('.ons-panel').hasClass(`ons-panel--${panelType}`)).toBe(true);
+    });
+
+    it('has the provided `body` text', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: panelType,
+        }),
+      );
+
+      expect(
+        $('.ons-panel__body')
+          .text()
+          .trim(),
+      ).toBe('Some panel text');
+    });
+
+    it('calls with content', () => {
+      const $ = cheerio.load(renderComponent('panel', { EXAMPLE_PANEL_BASIC, type: panelType }, 'Example content...'));
+
+      const content = $('.ons-panel__body')
+        .text()
+        .trim();
+      expect(content).toBe('Example content...');
+    });
+
+    it('has the provided `id` attribute', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: panelType,
+        }),
+      );
+
+      expect($('#panel').length).toBe(1);
+    });
+
+    it('has custom classes applied', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: panelType,
+          classes: 'ons-custom-class',
+        }),
+      );
+
+      expect($('.ons-panel').hasClass('ons-custom-class')).toBe(true);
+    });
+
+    it('has additionally provided `attributes`', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: panelType,
+          attributes: {
+            a: '123',
+            b: '456',
+          },
+        }),
+      );
+      expect($('.ons-panel').attr('a')).toBe('123');
+      expect($('.ons-panel').attr('b')).toBe('456');
+    });
+
+    it('has visually hidden accessible element', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: panelType,
+        }),
+      );
+
+      expect($('.ons-panel__assistive-text').length).toBe(1);
+    });
+
+    it('has the default visually hidden accessible text', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: panelType,
+        }),
+      );
+
+      expect(
+        $('.ons-panel__assistive-text')
+          .text()
+          .trim(),
+      ).toBe(accessibleText);
+    });
+
+    it('has the provided visually hidden accessible text', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: panelType,
+          assistiveTextPrefix: 'Some helpful text:',
+        }),
+      );
+
+      expect(
+        $('.ons-panel__assistive-text')
+          .text()
+          .trim(),
+      ).toBe('Some helpful text:');
+    });
+  });
+
+  describe('mode: info', () => {
+    it('has the default title tag', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          title: 'Panel title',
+        }),
+      );
+
+      const titleTag = $('.ons-panel__title')[0].tagName;
+      expect(titleTag).toBe('div');
+    });
+
+    it('has the provided `titleTag`', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          title: 'Panel title',
+          titleTag: 'h3',
+        }),
+      );
+
+      const titleTag = $('.ons-panel__title')[0].tagName;
+      expect(titleTag).toBe('h3');
+    });
+
+    it('has the provided `title` text', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          title: 'Panel title',
+        }),
+      );
+
+      const titleText = $('.ons-panel__title').text();
+      expect(titleText).toBe('Panel title');
+    });
+  });
+
+  describe('mode: error', () => {
+    it('has the default id set', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          title: 'Error title',
+          type: 'error',
+        }),
+      );
+
+      expect($('#error-summary-title').length).toBe(1);
+    });
+
+    it('has H2 as the default title tag', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          title: 'Error title',
+          type: 'error',
+        }),
+      );
+
+      const titleTag = $('.ons-panel__title')[0].tagName;
+      expect(titleTag).toBe('h2');
+    });
+
+    it('has aria-labelledby attribute set with default value', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          title: 'Error title',
+          type: 'error',
+        }),
+      );
+
+      expect($('.ons-panel').attr('aria-labelledby')).toBe('error-summary-title');
+    });
+
+    it('has the role attribute set to alert', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          title: 'Error title',
+          type: 'error',
+        }),
+      );
+
+      expect($('.ons-panel').attr('role')).toBe('alert');
+    });
+
+    it('has the tabindex attribute set to -1', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          title: 'Error title',
+          type: 'error',
+        }),
+      );
+
+      expect($('.ons-panel').attr('tabindex')).toBe('-1');
+    });
+
+    it('has the autofocus attribute set to autofocus', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          title: 'Error title',
+          type: 'error',
+        }),
+      );
+
+      expect($('.ons-panel').attr('autofocus')).toBe('autofocus');
+    });
+
+    it('does not have the autofocus attribute set if `dsExample` is provided', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          title: 'Error title',
+          type: 'error',
+          dsExample: true,
+        }),
+      );
+
+      expect($('.ons-panel').attr('autofocus')).toBe(undefined);
+    });
+  });
+
+  describe('mode: spacious', () => {
+    it('has the correct class set', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          spacious: true,
+        }),
+      );
+
+      expect($('.ons-panel').hasClass('ons-panel--spacious')).toBe(true);
+    });
+  });
+
+  describe('mode: announcement', () => {
+    it('creates containers with the correct classes', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: 'announcement',
+        }),
+      );
+
+      expect($('.ons-announcement').length).toBe(1);
+      expect($('.ons-container').length).toBe(1);
+    });
+
+    it('has `arrow-forward` icon', () => {
+      const faker = templateFaker();
+      const iconsSpy = faker.spy('icons');
+
+      faker.renderComponent('panel', {
+        ...EXAMPLE_PANEL_BASIC,
+        type: 'announcement',
+      });
+
+      expect(iconsSpy.occurrences[0].iconType).toBe('arrow-forward');
+    });
+  });
+
+  describe('mode: bare', () => {
+    it('has the correct class set', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: 'bare',
+        }),
+      );
+
+      expect($('.ons-panel').hasClass('ons-panel--bare')).toBe(true);
+    });
+  });
+
+  describe('mode: warn', () => {
+    it('has a default "!" prefix', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: 'warn',
+        }),
+      );
+
+      expect(
+        $('.ons-panel__icon')
+          .text()
+          .trim(),
+      ).toBe('!');
+    });
+  });
+
+  describe('mode: warn-branded', () => {
+    it('creates a container div', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: 'warn-branded',
+        }),
+      );
+
+      expect($('.ons-census-warning').length).toBe(1);
+      expect($('.ons-container').length).toBe(1);
+    });
+
+    it('has a default "!" prefix', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          type: 'warn-branded',
+        }),
+      );
+
+      expect(
+        $('.ons-panel__icon')
+          .text()
+          .trim(),
+      ).toBe('!');
+    });
+  });
+
+  describe('mode: custom icon', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          iconType: 'check',
+        }),
+      );
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has a custom icon `iconType`', () => {
+      const faker = templateFaker();
+      const iconsSpy = faker.spy('icons');
+
+      faker.renderComponent('panel', {
+        ...EXAMPLE_PANEL_BASIC,
+        iconType: 'check',
+      });
+
+      expect(iconsSpy.occurrences[0].iconType).toBe('check');
+    });
+
+    it('has the default icon size set', () => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          iconType: 'check',
+        }),
+      );
+
+      expect($('.ons-panel__icon').hasClass('ons-u-fs-r')).toBe(true);
+    });
+
+    it.each(['r', 'm', 'l', 'xl'])('has the correct class for the provided `iconSize` override (%s)', customIconSize => {
+      const $ = cheerio.load(
+        renderComponent('panel', {
+          ...EXAMPLE_PANEL_BASIC,
+          iconType: 'check',
+          iconSize: customIconSize,
+        }),
+      );
+
+      expect($('.ons-panel__icon').hasClass(`ons-u-fs-${customIconSize}`)).toBe(true);
+    });
+  });
+});

package/components/password/_macro.spec.js

@@ -0,0 +1,137 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_PASSWORD_MINIMAL = {
+  id: 'example-password',
+  name: 'example-password-name',
+  label: {
+    text: 'Label text',
+    description: 'Description text',
+    classes: 'extra-label-class',
+  },
+  showPasswordText: 'Show password',
+};
+
+const EXAMPLE_PASSWORD = {
+  ...EXAMPLE_PASSWORD_MINIMAL,
+  fieldId: 'example-password-field',
+  fieldClasses: 'extra-field-class',
+};
+
+const EXAMPLE_PASSWORD_WITH_ERROR = {
+  ...EXAMPLE_PASSWORD,
+  error: {
+    id: 'example-error',
+    text: 'Error text...',
+  },
+};
+
+describe('macro: password', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('password', EXAMPLE_PASSWORD));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('passes jest-axe checks when error is shown', async () => {
+    const $ = cheerio.load(renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('provides expected parameters to the inner `field` component', () => {
+    const faker = templateFaker();
+    const fieldSpy = faker.spy('field');
+
+    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
+
+    expect(fieldSpy.occurrences[0]).toEqual({
+      id: 'example-password-field',
+      classes: 'ons-js-password extra-field-class',
+      error: undefined,
+    });
+  });
+
+  it('provides expected parameters to the inner `field` component when there is an error', () => {
+    const faker = templateFaker();
+    const fieldSpy = faker.spy('field');
+
+    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
+
+    expect(fieldSpy.occurrences[0]).toEqual({
+      id: 'example-password-field',
+      classes: 'ons-js-password extra-field-class',
+      error: {
+        id: 'example-error',
+        text: 'Error text...',
+      },
+    });
+  });
+
+  it('provides expected parameters to the inner `label` component', () => {
+    const faker = templateFaker();
+    const labelSpy = faker.spy('label');
+
+    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
+
+    expect(labelSpy.occurrences[0]).toEqual({
+      for: 'example-password',
+      text: 'Label text',
+      description: 'Description text',
+      classes: 'extra-label-class',
+    });
+  });
+
+  it('provides expected parameters to the inner `checkbox` component', () => {
+    const faker = templateFaker();
+    const checkboxSpy = faker.spy('checkboxes/checkbox');
+
+    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
+
+    expect(checkboxSpy.occurrences[0]).toEqual({
+      id: 'example-password-toggle',
+      classes: 'ons-js-password-toggle-wrap ons-checkbox--toggle ons-u-d-no',
+      inputClasses: 'ons-js-password-toggle',
+      name: 'show-password',
+      label: {
+        text: 'Show password',
+      },
+    });
+  });
+
+  it('provides expected parameters to the inner `input` component', () => {
+    const faker = templateFaker();
+    const inputSpy = faker.spy('input');
+
+    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD));
+
+    expect(inputSpy.occurrences[0]).toEqual({
+      id: 'example-password',
+      name: 'example-password-name',
+      type: 'password',
+      classes: 'ons-u-mt-xs ons-js-password-input',
+      dontWrap: true,
+    });
+  });
+
+  it('provides expected parameters to the inner `input` component when error is shown', () => {
+    const faker = templateFaker();
+    const inputSpy = faker.spy('input');
+
+    cheerio.load(faker.renderComponent('password', EXAMPLE_PASSWORD_WITH_ERROR));
+
+    expect(inputSpy.occurrences[0]).toEqual({
+      id: 'example-password',
+      name: 'example-password-name',
+      type: 'password',
+      classes: 'ons-u-mt-xs ons-js-password-input ons-input--error',
+      dontWrap: true,
+    });
+  });
+});

package/components/password/password.spec.js

@@ -0,0 +1,40 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_PASSWORD_MINIMAL = {
+  id: 'example-password',
+  name: 'example-password-name',
+  label: {
+    text: 'Label text',
+    description: 'Description text',
+    classes: 'extra-label-class',
+  },
+  showPasswordText: 'Show password',
+};
+
+describe('script: password', () => {
+  it('has input of type `password` initially', async () => {
+    await setTestPage('/test', renderComponent('password', EXAMPLE_PASSWORD_MINIMAL));
+
+    const inputType = await page.evaluate(() => document.querySelector('#example-password').type);
+    expect(inputType).toBe('password');
+  });
+
+  it('has input of type `text` when "Show password" toggle is clicked', async () => {
+    await setTestPage('/test', renderComponent('password', EXAMPLE_PASSWORD_MINIMAL));
+
+    await page.click('#example-password-toggle');
+
+    const inputType = await page.evaluate(() => document.querySelector('#example-password').type);
+    expect(inputType).toBe('text');
+  });
+
+  it('has input of type `password` when "Show password" toggle is clicked twice', async () => {
+    await setTestPage('/test', renderComponent('password', EXAMPLE_PASSWORD_MINIMAL));
+
+    await page.click('#example-password-toggle');
+    await page.click('#example-password-toggle');
+
+    const inputType = await page.evaluate(() => document.querySelector('#example-password').type);
+    expect(inputType).toBe('password');
+  });
+});

package/components/phase-banner/_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_PHASE_BANNER_MINIMAL = {
+  html: 'Example content with a <a href="#">link</a>',
+};
+
+describe('macro: phase-banner', () => {
+  it('passes jest-axe checks with', async () => {
+    const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has expected html content', () => {
+    const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
+
+    const htmlContent = $('.ons-phase-banner__desc')
+      .html()
+      .trim();
+    expect(htmlContent).toBe('Example content with a <a href="#">link</a>');
+  });
+
+  it('has the "Beta" badge by default', () => {
+    const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
+
+    const badgeText = $('.ons-phase-banner__badge')
+      .text()
+      .trim();
+    expect(badgeText).toBe('Beta');
+  });
+
+  it('has the provided `badge` text', () => {
+    const $ = cheerio.load(
+      renderComponent('phase-banner', {
+        ...EXAMPLE_PHASE_BANNER_MINIMAL,
+        badge: 'Alpha',
+      }),
+    );
+
+    const badgeText = $('.ons-phase-banner__badge')
+      .text()
+      .trim();
+    expect(badgeText).toBe('Alpha');
+  });
+
+  it('has no badge when `hideBadge` is true', () => {
+    const $ = cheerio.load(
+      renderComponent('phase-banner', {
+        ...EXAMPLE_PHASE_BANNER_MINIMAL,
+        hideBadge: true,
+      }),
+    );
+
+    expect($('.ons-phase-banner__badge').length).toBe(0);
+  });
+
+  it('has `container--wide` class when `wide` is true', () => {
+    const $ = cheerio.load(
+      renderComponent('phase-banner', {
+        ...EXAMPLE_PHASE_BANNER_MINIMAL,
+        wide: true,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
+  });
+});