@ons/design-system 50.0.0 → 52.0.0

package/components/timeline/_macro.spec.js

@@ -0,0 +1,81 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_TIMELINE = {
+  items: [
+    {
+      heading: 'January 2020',
+      content: 'Timeline entry 1',
+    },
+    {
+      heading: 'March 2020',
+      content: 'Timeline entry 2',
+    },
+    {
+      heading: 'December 2020',
+      itemsList: [
+        {
+          text: 'Timeline entry 3 item 1',
+        },
+        {
+          text: 'Timeline entry 3 item 2',
+        },
+      ],
+    },
+  ],
+};
+
+describe('macro: timeline', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('timeline', {
+        ...EXAMPLE_TIMELINE,
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-timeline').hasClass('extra-class')).toBe(true);
+    expect($('.ons-timeline').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has the provided timeline items', () => {
+    const $ = cheerio.load(renderComponent('timeline', EXAMPLE_TIMELINE));
+
+    const $firstItem = $('.ons-timeline__item:nth-child(1)');
+    const $firstItemHeading = $firstItem.find('.ons-timeline__heading');
+    const $secondItem = $('.ons-timeline__item:nth-child(2)');
+    const $secondItemHeading = $secondItem.find('.ons-timeline__heading');
+
+    expect($firstItemHeading.text().trim()).toBe('January 2020');
+    expect($firstItem.text()).toContain('Timeline entry 1');
+    expect($secondItemHeading.text().trim()).toBe('March 2020');
+    expect($secondItem.text()).toContain('Timeline entry 2');
+  });
+
+  it('has the provided inner item list', () => {
+    const faker = templateFaker();
+    const listSpy = faker.spy('lists');
+
+    faker.renderComponent('timeline', EXAMPLE_TIMELINE);
+
+    expect(listSpy.occurrences[0].itemsList).toEqual([
+      {
+        text: 'Timeline entry 3 item 1',
+      },
+      {
+        text: 'Timeline entry 3 item 2',
+      },
+    ]);
+  });
+});

package/components/timeout-modal/_macro.spec.js

@@ -0,0 +1,68 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_TIMEOUT_MODAL_BASIC = {
+  showModalTimeInSeconds: 60,
+  redirectUrl: '#!',
+  title: 'You will be signed out soon',
+  serverSessionExpiryEndpoint: '/some-endpoint',
+  sessionExpiresAt: '000-000-000',
+  textFirstLine: 'It appears you have been inactive for a while.',
+  countdownText: 'To protect your information, your progress will be saved and you will be signed out in',
+  countdownExpiredText: 'You are being signed out.',
+  btnText: 'Continue survey',
+  minutesTextSingular: 'minute',
+  minutesTextPlural: 'minutes',
+  secondsTextSingular: 'second',
+  secondsTextPlural: 'seconds',
+  endWithFullStop: true,
+};
+
+describe('macro: timeout modal', () => {
+  it('passes jest-axe checks with', async () => {
+    const $ = cheerio.load(renderComponent('timeout-modal', EXAMPLE_TIMEOUT_MODAL_BASIC));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('provides expected parameters to the inner `modal` component', () => {
+    const faker = templateFaker();
+    const modalSpy = faker.spy('modal');
+
+    cheerio.load(faker.renderComponent('timeout-modal', EXAMPLE_TIMEOUT_MODAL_BASIC));
+
+    expect(modalSpy.occurrences[0]).toEqual({
+      title: 'You will be signed out soon',
+      btnText: 'Continue survey',
+      classes: 'ons-js-timeout-modal',
+      attributes: {
+        'data-redirect-url': '#!',
+        'data-server-session-expires-at': '000-000-000',
+        'data-show-modal-time': 60,
+        'data-server-session-expiry-endpoint': '/some-endpoint',
+        'data-countdown-text': 'To protect your information, your progress will be saved and you will be signed out in',
+        'data-countdown-expired-text': 'You are being signed out.',
+        'data-minutes-text-singular': 'minute',
+        'data-minutes-text-plural': 'minutes',
+        'data-seconds-text-singular': 'second',
+        'data-seconds-text-plural': 'seconds',
+        'data-full-stop': true,
+        'aria-describedby': 'timeout-time-remaining',
+      },
+    });
+  });
+
+  it('has expected `textFirstLine`', () => {
+    const $ = cheerio.load(renderComponent('timeout-modal', EXAMPLE_TIMEOUT_MODAL_BASIC));
+
+    const title = $('.ons-modal__body > p')
+      .html()
+      .trim();
+    expect(title).toBe('It appears you have been inactive for a while.');
+  });
+});

package/components/timeout-modal/timeout-modal.spec.js

@@ -0,0 +1,226 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_TIMEOUT_MODAL_BASIC = {
+  redirectUrl: '#!',
+  title: 'You will be signed out soon',
+  textFirstLine: 'It appears you have been inactive for a while.',
+  countdownText: 'To protect your information, your progress will be saved and you will be signed out in',
+  countdownExpiredText: 'You are being signed out.',
+  btnText: 'Continue survey',
+  minutesTextSingular: 'minute',
+  minutesTextPlural: 'minutes',
+  secondsTextSingular: 'second',
+  secondsTextPlural: 'seconds',
+  endWithFullStop: true,
+};
+
+describe('script: timeout modal', () => {
+  describe('when the page loads', () => {
+    beforeEach(async () => {
+      const component = renderComponent('timeout-modal', { ...EXAMPLE_TIMEOUT_MODAL_BASIC, showModalTimeInSeconds: 58 });
+      const template = `
+        <div class="ons-page">
+          ${component}
+        </div>
+      `;
+      await setTestPage('/test', template);
+    });
+
+    it('displays the modal after the correct number of seconds', async () => {
+      await page.waitForTimeout(2000);
+      const modalIsVisible = await page.$eval('.ons-modal', node => node.classList.contains('ons-u-db'));
+      expect(modalIsVisible).toBe(true);
+    });
+  });
+
+  describe('when the modal first opens', () => {
+    describe('when the countdown starts', () => {
+      beforeEach(async () => {
+        const component = renderComponent('timeout-modal', {
+          ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+          showModalTimeInSeconds: 60,
+        });
+
+        const template = `
+          <div class="ons-page">
+            ${component}
+          </div>
+        `;
+
+        await setTestPage('/test', template);
+      });
+
+      it('shows the time counting down', async () => {
+        const timeAtStart = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        await page.waitForTimeout(1000);
+        const timeAfterOneSecond = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        expect(timeAfterOneSecond).not.toEqual(timeAtStart);
+      });
+    });
+
+    describe('when there are two minutes or more remaining', () => {
+      beforeEach(async () => {
+        const expiryTime = new Date(Date.now() + 60 * 3000);
+        const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+
+        const component = renderComponent('timeout-modal', {
+          ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+          showModalTimeInSeconds: 180,
+          sessionExpiresAt: expiryTimeInISOFormat,
+        });
+
+        const template = `
+          <div class="ons-page">
+            ${component}
+          </div>
+        `;
+        await setTestPage('/test', template);
+      });
+
+      it('displays the `minutes` (plural) string', async () => {
+        const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        expect(timeString).toEqual(expect.stringContaining('minutes'));
+      });
+    });
+
+    describe('when there are two seconds or more remaining', () => {
+      beforeEach(async () => {
+        const expiryTime = new Date(Date.now() + 60 * 1000);
+        const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+
+        const component = renderComponent('timeout-modal', {
+          ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+          showModalTimeInSeconds: 60,
+          sessionExpiresAt: expiryTimeInISOFormat,
+        });
+
+        const template = `
+          <div class="ons-page">
+            ${component}
+          </div>
+        `;
+        await setTestPage('/test', template);
+      });
+
+      it('displays the `seconds` (plural) string', async () => {
+        const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        expect(timeString).toEqual(expect.stringContaining('seconds'));
+      });
+    });
+
+    describe('when there is one minute remaining', () => {
+      beforeEach(async () => {
+        const expiryTime = new Date(Date.now() + 60 * 1500);
+        const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+
+        const component = renderComponent('timeout-modal', {
+          ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+          showModalTimeInSeconds: 90,
+          sessionExpiresAt: expiryTimeInISOFormat,
+        });
+
+        const template = `
+          <div class="ons-page">
+            ${component}
+          </div>
+        `;
+        await setTestPage('/test', template);
+      });
+
+      it('displays the `minute` (singular) string', async () => {
+        const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        expect(timeString).toEqual(expect.stringContaining('minute'));
+      });
+    });
+
+    describe('when there is one second remaining', () => {
+      beforeEach(async () => {
+        const expiryTime = new Date(Date.now() + 3 * 1000);
+        const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+
+        const component = renderComponent('timeout-modal', {
+          ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+          showModalTimeInSeconds: 3,
+          sessionExpiresAt: expiryTimeInISOFormat,
+        });
+
+        const template = `
+          <div class="ons-page">
+            ${component}
+          </div>
+        `;
+        await setTestPage('/test', template);
+      });
+
+      it('displays the `second` (singular) string', async () => {
+        const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        expect(timeString).toEqual(expect.stringContaining('second'));
+      });
+    });
+
+    describe('when the timer runs to zero', () => {
+      beforeEach(async () => {
+        const expiryTime = new Date(Date.now() + 1 * 1000);
+        const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+
+        const component = renderComponent('timeout-modal', {
+          ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+          showModalTimeInSeconds: 1,
+          sessionExpiresAt: expiryTimeInISOFormat,
+        });
+
+        const template = `
+          <div class="ons-page">
+            ${component}
+          </div>
+        `;
+        await setTestPage('/test', template);
+      });
+
+      it('displays the `countdownExpiredText` text', async () => {
+        const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+        expect(timeString).toEqual(expect.stringContaining('You are being signed out'));
+      });
+
+      it('then redirects to the provided `redirectUrl`', async () => {
+        await page.waitForTimeout(2000);
+        expect(page.url()).toContain('#!');
+      });
+    });
+  });
+
+  describe('when the modal is open', () => {
+    beforeEach(async () => {
+      const component = renderComponent('timeout-modal', {
+        ...EXAMPLE_TIMEOUT_MODAL_BASIC,
+        showModalTimeInSeconds: 59,
+      });
+
+      const template = `
+        <div class="ons-page">
+          ${component}
+        </div>
+      `;
+
+      await setTestPage('/test', template);
+    });
+
+    describe('when the `esc` key is pressed', () => {
+      beforeEach(async () => {
+        await page.waitForSelector('.ons-modal');
+        await page.keyboard.press('Escape');
+      });
+
+      it('closes the modal', async () => {
+        const modalIsVisible = await page.$eval('.ons-modal', node => node.classList.contains('ons-u-db'));
+        expect(modalIsVisible).toBe(false);
+      });
+
+      it('restarts the timer and displays the modal after the correct number of seconds', async () => {
+        await page.waitForTimeout(2000);
+        const modalIsVisible = await page.$eval('.ons-modal', node => node.classList.contains('ons-u-db'));
+        expect(modalIsVisible).toBe(true);
+      });
+    });
+  });
+});

package/components/timeout-panel/_macro.njk

@@ -7,7 +7,6 @@
             "attributes": {
                 "data-redirect-url": params.redirectUrl,
                 "data-server-session-expires-at": params.sessionExpiresAt,
-                "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
                 "data-countdown-text": params.countdownText,
                 "data-countdown-expired-text": params.countdownExpiredText,
                 "data-minutes-text-singular": params.minutesTextSingular,

package/components/timeout-panel/_macro.spec.js

@@ -0,0 +1,54 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_TIMEOUT_PANEL_BASIC = {
+  id: 'countdown',
+  sessionExpiresAt: '000-000-000',
+  redirectUrl: '#!',
+  minutesTextSingular: 'minute',
+  minutesTextPlural: 'minutes',
+  secondsTextSingular: 'second',
+  secondsTextPlural: 'seconds',
+  countdownText: 'For security, your answers will only be available to view for another',
+  nojsText: 'For security, your answers will only be available to view for another 1 minute',
+  countdownExpiredText: 'You are being signed out',
+  endWithFullStop: true,
+};
+
+describe('macro: timeout panel', () => {
+  it('passes jest-axe checks with', async () => {
+    const $ = cheerio.load(renderComponent('timeout-panel', EXAMPLE_TIMEOUT_PANEL_BASIC));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('provides expected parameters to the inner `panel` component', () => {
+    const faker = templateFaker();
+    const panelSpy = faker.spy('panel');
+
+    cheerio.load(faker.renderComponent('timeout-panel', EXAMPLE_TIMEOUT_PANEL_BASIC));
+
+    expect(panelSpy.occurrences[0]).toEqual({
+      id: 'countdown',
+      classes: 'ons-js-panel-with-countdown',
+      type: 'warn',
+      attributes: {
+        'data-redirect-url': '#!',
+        'data-server-session-expires-at': '000-000-000',
+        'data-countdown-text': 'For security, your answers will only be available to view for another',
+        'data-countdown-expired-text': 'You are being signed out',
+        'data-minutes-text-singular': 'minute',
+        'data-minutes-text-plural': 'minutes',
+        'data-seconds-text-singular': 'second',
+        'data-seconds-text-plural': 'seconds',
+        'aria-describedby': 'timeout-time-remaining',
+        'data-full-stop': true,
+      },
+    });
+  });
+});

package/components/timeout-panel/timeout-panel.dom.js

@@ -7,9 +7,8 @@ async function timeoutPanels() {
     const Timeout = (await import('../../js/timeout')).default;
 
     panels.forEach(context => {
-      let url = context.getAttribute('data-server-session-expiry-endpoint');
       let time = context.getAttribute('data-server-session-expires-at');
-      new Timeout(context, url, time, false, true);
+      new Timeout(context, null, time, false, true);
     });
   }
 }

package/components/timeout-panel/timeout-panel.spec.js

@@ -0,0 +1,161 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_TIMEOUT_PANEL_BASIC = {
+  id: 'countdown',
+  redirectUrl: '#!',
+  minutesTextSingular: 'minute',
+  minutesTextPlural: 'minutes',
+  secondsTextSingular: 'second',
+  secondsTextPlural: 'seconds',
+  countdownText: 'For security, your answers will only be available to view for another',
+  nojsText: 'For security, your answers will only be available to view for another 1 minute',
+  countdownExpiredText: 'You are being signed out',
+  endWithFullStop: true,
+};
+
+describe('script: timeout panel', () => {
+  describe('when the page loads', () => {
+    beforeEach(async () => {
+      const expiryTime = new Date(Date.now() + 60 * 3000);
+      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+
+      const component = renderComponent('timeout-panel', {
+        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+        sessionExpiresAt: expiryTimeInISOFormat,
+      });
+
+      await setTestPage('/test', component);
+    });
+
+    it('shows the time counting down', async () => {
+      const timeAtStart = await page.$eval('.ons-js-timeout-timer', element => element.innerHTML);
+      await page.waitForTimeout(1000);
+      const timeAfterOneSecond = await page.$eval('.ons-js-timeout-timer', element => element.innerHTML);
+      expect(timeAfterOneSecond).not.toEqual(timeAtStart);
+    });
+  });
+
+  describe('when there are two minutes or more remaining', () => {
+    beforeEach(async () => {
+      const expiryTime = new Date(Date.now() + 60 * 3000);
+      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+
+      const component = renderComponent('timeout-panel', {
+        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+        sessionExpiresAt: expiryTimeInISOFormat,
+      });
+
+      await setTestPage('/test', component);
+    });
+
+    it('displays the `minutes` (plural) string', async () => {
+      const timeString = await page.$eval('.ons-js-timeout-timer', element => element.innerHTML);
+      expect(timeString).toEqual(expect.stringContaining('minutes'));
+    });
+  });
+
+  describe('when there are two seconds or more remaining', () => {
+    beforeEach(async () => {
+      const expiryTime = new Date(Date.now() + 60 * 1000);
+      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+
+      const component = renderComponent('timeout-panel', {
+        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+        sessionExpiresAt: expiryTimeInISOFormat,
+      });
+
+      await setTestPage('/test', component);
+    });
+
+    it('displays the `seconds` (plural) string', async () => {
+      const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+      expect(timeString).toEqual(expect.stringContaining('seconds'));
+    });
+  });
+
+  describe('when there is one minute remaining', () => {
+    beforeEach(async () => {
+      const expiryTime = new Date(Date.now() + 60 * 1500);
+      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+
+      const component = renderComponent('timeout-panel', {
+        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+        sessionExpiresAt: expiryTimeInISOFormat,
+      });
+
+      await setTestPage('/test', component);
+    });
+
+    it('displays the `minute` (singular) string', async () => {
+      const timeString = await page.$eval('.ons-js-timeout-timer', element => element.innerHTML);
+      expect(timeString).toEqual(expect.stringContaining('minute'));
+    });
+  });
+
+  describe('when there is one second remaining', () => {
+    beforeEach(async () => {
+      const expiryTime = new Date(Date.now() + 3 * 1000);
+      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+
+      const component = renderComponent('timeout-panel', {
+        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+        sessionExpiresAt: expiryTimeInISOFormat,
+      });
+
+      await setTestPage('/test', component);
+    });
+
+    it('displays the `second` (singular) string', async () => {
+      const timeString = await page.$eval('.ons-js-timeout-timer span', element => element.innerHTML);
+      expect(timeString).toEqual(expect.stringContaining('second'));
+    });
+  });
+
+  describe('when the timer runs to zero', () => {
+    beforeEach(async () => {
+      const expiryTime = new Date(Date.now() + 1 * 1000);
+      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+
+      const component = renderComponent('timeout-panel', {
+        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+        sessionExpiresAt: expiryTimeInISOFormat,
+      });
+
+      await setTestPage('/test', component);
+    });
+
+    it('displays the `countdownExpiredText` text', async () => {
+      const timeString = await page.$eval('.ons-js-timeout-timer', element => element.innerHTML);
+      expect(timeString).toEqual(expect.stringContaining('You are being signed out'));
+    });
+
+    it('then redirects to the provided `redirectUrl`', async () => {
+      await page.waitForTimeout(2000);
+      expect(page.url()).toContain('#!');
+    });
+  });
+
+  describe('when Javascript is disabled', () => {
+    beforeEach(async () => {
+      const expiryTime = new Date(Date.now() + 1 * 1000);
+      const expiryTimeInISOFormat = new Date(expiryTime).toISOString();
+
+      const component = renderComponent('timeout-panel', {
+        ...EXAMPLE_TIMEOUT_PANEL_BASIC,
+        sessionExpiresAt: expiryTimeInISOFormat,
+      });
+
+      await page.setJavaScriptEnabled(false);
+      await setTestPage('/test', component);
+    });
+
+    afterEach(async () => {
+      await page.setJavaScriptEnabled(true);
+    });
+
+    it('displays the `nojsText` text', async () => {
+      const nojsText = await page.$eval('.ons-js-nojs-text', element => element.innerHTML);
+      expect(nojsText.trim()).toBe('For security, your answers will only be available to view for another 1 minute');
+    });
+  });
+});

package/components/upload/_macro.spec.js

@@ -0,0 +1,75 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_UPLOAD = {
+  id: 'example-upload',
+  accept: '.xls,.xlsx,.pdf',
+  name: 'example-upload-name',
+  label: {
+    description: 'File types accepted are XLS and XLSX or PDF',
+    text: 'Upload a file',
+  },
+  dontWrap: true,
+  fieldId: 'example-upload-field',
+  fieldClasses: 'extra-field-class',
+  attributes: { a: 42 },
+  listeners: { test: 'console.log(42)' },
+};
+
+const EXAMPLE_UPLOAD_WITH_ERROR = {
+  ...EXAMPLE_UPLOAD,
+  error: {
+    id: 'file-error',
+    text: 'Select a file that is an XLS, XLSX or PDF',
+  },
+};
+
+describe('macro: upload', () => {
+  describe.each([
+    ['without error', EXAMPLE_UPLOAD, 'ons-input--upload'],
+    ['with error', EXAMPLE_UPLOAD_WITH_ERROR, 'ons-input--upload ons-input--error'],
+  ])('%s', (_, params, expectedInputClasses) => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('upload', params));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('renders `field` component with the expected parameters', () => {
+      const faker = templateFaker();
+      const fieldSpy = faker.spy('field');
+
+      faker.renderComponent('upload', params);
+
+      expect(fieldSpy.occurrences).toContainEqual({
+        id: 'example-upload-field',
+        classes: 'extra-field-class',
+        dontWrap: true,
+        error: params.error,
+      });
+    });
+
+    it('renders `input` component with the expected parameters', () => {
+      const faker = templateFaker();
+      const inputSpy = faker.spy('input');
+
+      faker.renderComponent('upload', params);
+
+      expect(inputSpy.occurrences).toContainEqual({
+        id: 'example-upload',
+        type: 'file',
+        label: params.label,
+        classes: expectedInputClasses,
+        accept: '.xls,.xlsx,.pdf',
+        name: 'example-upload-name',
+        attributes: { a: 42 },
+        listeners: params.listeners,
+      });
+    });
+  });
+});