@ons/design-system 50.0.0 → 52.0.0

package/components/radios/radios.spec.js

@@ -0,0 +1,180 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_RADIOS_PARAMS = {
+  name: 'contact-preference',
+  clearRadios: {
+    text: 'Clear selection',
+    url: '/',
+    ariaClearText: 'You can clear your answer by clicking the clear selection button under the radio buttons',
+    ariaClearedText: 'You have cleared your answer',
+  },
+  legend: 'How would you like us to contact you?',
+  legendClasses: 'ons-u-vh',
+  radios: [
+    {
+      id: 'email',
+      value: 'email',
+      label: {
+        text: 'Email',
+      },
+      other: {
+        id: 'email-other',
+        type: 'email',
+        label: {
+          text: 'Enter your email address',
+        },
+      },
+    },
+    {
+      id: 'phone',
+      value: 'phone',
+      label: {
+        text: 'Phone',
+      },
+      other: {
+        id: 'tel-other',
+        type: 'tel',
+        label: {
+          text: 'Enter your phone number',
+        },
+      },
+    },
+    {
+      id: 'text',
+      value: 'Open input test',
+      label: {
+        text: 'Text',
+      },
+      other: {
+        id: 'text-other',
+        type: 'text',
+        open: true,
+        label: {
+          text: 'Enter something else',
+        },
+      },
+    },
+  ],
+};
+
+describe('script: radios', () => {
+  beforeEach(async () => {
+    await setTestPage('/test', renderComponent('radios', EXAMPLE_RADIOS_PARAMS));
+  });
+
+  it('radios with other options should be given aria-expanded attributes', async () => {
+    const ariaExpandedOption1 = await page.$eval('#email', node => node.getAttribute('aria-expanded'));
+    expect(ariaExpandedOption1).toBe('false');
+    const ariaExpandedOption2 = await page.$eval('#phone', node => node.getAttribute('aria-expanded'));
+    expect(ariaExpandedOption2).toBe('false');
+  });
+
+  it('radios with "open" other options should not be given aria-expanded attributes', async () => {
+    const hasAriaExpandedOption3 = await page.$eval('#text', node => node.hasAttribute('aria-expanded'));
+    expect(hasAriaExpandedOption3).toBe(false);
+  });
+
+  describe('a radio checked', () => {
+    beforeEach(async () => {
+      await page.click('#email');
+    });
+
+    it('then the checked radio aria-expanded attribute should be set to true', async () => {
+      const ariaExpandedOption1 = await page.$eval('#email', node => node.getAttribute('aria-expanded'));
+      expect(ariaExpandedOption1).toBe('true');
+    });
+
+    it('then the unchecked radio aria-expanded attribute should be set to false', async () => {
+      const ariaExpandedOption2 = await page.$eval('#phone', node => node.getAttribute('aria-expanded'));
+      expect(ariaExpandedOption2).toBe('false');
+    });
+
+    it('then the unchecked radio aria-expanded attribute of "open" radio should not be set', async () => {
+      const hasAriaExpanded = await page.$eval('#text', node => node.hasAttribute('aria-expanded'));
+      expect(hasAriaExpanded).toBe(false);
+    });
+
+    it('then the clear button should be visible', async () => {
+      const isHidden = await page.$eval('.ons-js-clear-btn', node => node.classList.contains('ons-u-db-no-js_enabled'));
+      expect(isHidden).toBe(false);
+    });
+
+    it('then the aria live message should announce that the answer can be cleared', async () => {
+      const alertText = await page.$eval('.ons-js-clear-radio-alert', node => node.innerHTML);
+      expect(alertText).toBe('You can clear your answer by clicking the clear selection button under the radio buttons');
+    });
+
+    describe('and the radio selection is changed', () => {
+      beforeEach(async () => {
+        await page.click('#phone');
+      });
+
+      it('then the checked radio aria-expanded attribute should be set to true', async () => {
+        const ariaExpandedOption2 = await page.$eval('#phone', node => node.getAttribute('aria-expanded'));
+        expect(ariaExpandedOption2).toBe('true');
+      });
+
+      it('then the unchecked radio aria-expanded attribute should be set to false', async () => {
+        const ariaExpandedOption1 = await page.$eval('#email', node => node.getAttribute('aria-expanded'));
+        expect(ariaExpandedOption1).toBe('false');
+      });
+
+      it('then the unchecked radio aria-expanded attribute of "open" radio should not be set', async () => {
+        const hasAriaExpanded = await page.$eval('#text', node => node.hasAttribute('aria-expanded'));
+        expect(hasAriaExpanded).toBe(false);
+      });
+    });
+  });
+
+  describe('the clear button is clicked', () => {
+    beforeEach(async () => {
+      await page.$eval('.ons-js-clear-btn', node => node.click());
+    });
+
+    it('then the clear button should not be visible', async () => {
+      const isHidden = await page.$eval('.ons-js-clear-btn', node => node.classList.contains('ons-u-db-no-js_enabled'));
+      expect(isHidden).toBe(true);
+    });
+
+    it('then the aria live message should announce that the answer has been cleared', async () => {
+      const alertText = await page.$eval('.ons-js-clear-radio-alert', node => node.innerHTML);
+      expect(alertText).toBe('You have cleared your answer');
+    });
+
+    it('then all radios should not be checked', async () => {
+      const checkedRadios = await page.$$eval('.ons-js-radio', nodes => nodes.map(node => node.checked));
+      expect(checkedRadios).not.toContain(true);
+    });
+
+    it('then all other input fields should be empty', async () => {
+      const emailOtherValue = await page.$eval('#email-other', node => node.value);
+      expect(emailOtherValue).toBe('');
+      const telOtherValue = await page.$eval('#tel-other', node => node.value);
+      expect(telOtherValue).toBe('');
+      const textOtherValue = await page.$eval('#text-other', node => node.value);
+      expect(textOtherValue).toBe('');
+    });
+  });
+
+  describe('there is a visible input which is focused', () => {
+    beforeEach(async () => {
+      await page.focus('#text-other');
+    });
+
+    it('then the radio button should be checked', async () => {
+      const isRadioChecked = await page.$eval('#text', node => node.checked);
+      expect(isRadioChecked).toBe(true);
+    });
+  });
+
+  describe('there is a visible input and the radio is checked', () => {
+    beforeEach(async () => {
+      await page.click('#text');
+    });
+
+    it('then the input should have a tab index of 0', async () => {
+      const tabIndex = await page.$eval('#text-other', node => node.getAttribute('tabindex'));
+      expect(tabIndex).toBe('0');
+    });
+  });
+});

package/components/related-content/_macro.njk

@@ -21,6 +21,7 @@
               {{
                 onsList({
                   "variants": 'bare',
+                  "iconType": row.iconType,
                   "iconPosition": row.iconPosition,
                   "iconSize": row.iconSize,
                   "itemsList": row.itemsList

package/components/related-content/_macro.spec.js

@@ -0,0 +1,142 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { mapAll } from '../../tests/helpers/cheerio';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_RELATED_CONTENT_BODY = {
+  title: 'Related information',
+  body: 'Example body text...',
+};
+
+const EXAMPLE_RELATED_CONTENT_LINKS = {
+  rows: [
+    {
+      id: 'related-articles',
+      title: 'Related articles',
+      iconPosition: 'before',
+      iconSize: 'xl',
+      itemsList: [
+        { text: 'First', url: '/article/first' },
+        { text: 'Second', url: '/article/second' },
+      ],
+    },
+    {
+      id: 'related-links',
+      title: 'Related links',
+      iconPosition: 'after',
+      iconSize: 'xxl',
+      itemsList: [
+        { text: 'A', url: '/article/a' },
+        { text: 'B', url: '/article/b' },
+      ],
+    },
+  ],
+};
+
+describe('macro: related-content', () => {
+  describe.each([
+    ['content', EXAMPLE_RELATED_CONTENT_BODY],
+    ['list of links', EXAMPLE_RELATED_CONTENT_LINKS],
+  ])('mode: %s', (_, params) => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('related-content', params));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has a default `aria-label` of "Related content"', () => {
+      const $ = cheerio.load(renderComponent('related-content', params));
+
+      expect($('.ons-related-content').attr('aria-label')).toBe('Related content');
+    });
+
+    it('has the provided `aria-label`', () => {
+      const $ = cheerio.load(
+        renderComponent('related-content', {
+          ...params,
+          ariaLabel: 'Related articles',
+        }),
+      );
+
+      expect($('.ons-related-content').attr('aria-label')).toBe('Related articles');
+    });
+
+    it('has additionally provided style classes', () => {
+      const $ = cheerio.load(
+        renderComponent('related-content', {
+          ...params,
+          classes: 'extra-class another-extra-class',
+        }),
+      );
+
+      expect($('.ons-related-content').hasClass('extra-class')).toBe(true);
+      expect($('.ons-related-content').hasClass('another-extra-class')).toBe(true);
+    });
+  });
+
+  describe('mode: content', () => {
+    it('has provided body text', () => {
+      const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_BODY));
+
+      expect(
+        $('.ons-related-content__body .ons-related-content__body')
+          .text()
+          .trim(),
+      ).toBe('Example body text...');
+    });
+
+    it('has inner content when the macro is called', () => {
+      const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_BODY, ['<strong>Content</strong>']));
+
+      expect($('.ons-related-content__body .ons-related-content__body').html()).toContain('<strong>Content</strong>');
+    });
+  });
+
+  describe('mode: list of links', () => {
+    it('has a title heading for each section of links', () => {
+      const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS));
+
+      const values = mapAll($('.ons-related-content__title'), node => node.text().trim());
+      expect(values).toEqual(['Related articles', 'Related links']);
+    });
+
+    it('has the `id` attribute for each section heading', () => {
+      const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS));
+
+      const values = mapAll($('.ons-related-content__title'), node => node.attr('id'));
+      expect(values).toEqual(['related-articles', 'related-links']);
+    });
+
+    it('has the `aria-labelledby` attribute for each section of links', () => {
+      const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS));
+
+      const values = mapAll($('.ons-related-content__navigation'), node => node.attr('aria-labelledby'));
+      expect(values).toEqual(['related-articles', 'related-links']);
+    });
+
+    it('renders the expected list items using the list macro', () => {
+      const faker = templateFaker();
+      const listsSpy = faker.spy('lists');
+
+      faker.renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS);
+
+      expect(listsSpy.occurrences[0]).toHaveProperty('iconPosition', 'before');
+      expect(listsSpy.occurrences[0]).toHaveProperty('iconSize', 'xl');
+      expect(listsSpy.occurrences[0]).toHaveProperty('itemsList', [
+        { text: 'First', url: '/article/first' },
+        { text: 'Second', url: '/article/second' },
+      ]);
+
+      expect(listsSpy.occurrences[1]).toHaveProperty('iconPosition', 'after');
+      expect(listsSpy.occurrences[1]).toHaveProperty('iconSize', 'xxl');
+      expect(listsSpy.occurrences[1]).toHaveProperty('itemsList', [
+        { text: 'A', url: '/article/a' },
+        { text: 'B', url: '/article/b' },
+      ]);
+    });
+  });
+});

package/components/relationships/_macro.spec.js

@@ -0,0 +1,108 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_RELATIONSHIPS = {
+  playback: "Amanda Bloggs is Joe Bloggs' <em>…</em>",
+  name: 'relationship',
+  dontWrap: true,
+  legendIsQuestionTitle: true,
+  radios: [
+    {
+      id: 'grandparent',
+      value: 'grandparent',
+      label: {
+        text: 'Grandparent',
+      },
+      attributes: {
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>grandparents</em>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>grandparents</em>",
+      },
+    },
+    {
+      id: 'other-relation',
+      value: 'other-relation',
+      label: {
+        text: 'Other relation',
+      },
+      attributes: {
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>other relation</em>",
+      },
+    },
+    {
+      id: 'unrelated',
+      value: 'unrelated',
+      label: {
+        text: 'Unrelated',
+        description: 'Including foster child',
+      },
+      attributes: {
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
+        'data-playback': 'Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
+      },
+    },
+  ],
+};
+
+describe('macro: relationships', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the expected `id` attribute', () => {
+    const $ = cheerio.load(
+      renderComponent('relationships', {
+        ...EXAMPLE_RELATIONSHIPS,
+        id: 'example-relationships',
+      }),
+    );
+
+    expect($('.ons-relationships').attr('id')).toBe('example-relationships');
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('relationships', {
+        ...EXAMPLE_RELATIONSHIPS,
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-relationships').hasClass('extra-class')).toBe(true);
+    expect($('.ons-relationships').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has the provided `playback` text', () => {
+    const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
+
+    const playbackContent = $('.ons-relationships__playback')
+      .html()
+      .trim();
+    expect(playbackContent).toBe("Amanda Bloggs is Joe Bloggs' <em>…</em>");
+  });
+
+  it('has playback paragraph hidden initially', async () => {
+    const $ = cheerio.load(renderComponent('relationships', EXAMPLE_RELATIONSHIPS));
+
+    expect($('.ons-relationships__playback').hasClass('ons-u-d-no')).toBe(true);
+  });
+
+  it('renders the expected radio items the radios macro', () => {
+    const faker = templateFaker();
+    const radiosSpy = faker.spy('radios');
+
+    faker.renderComponent('relationships', EXAMPLE_RELATIONSHIPS);
+
+    expect(radiosSpy.occurrences[0]).toHaveProperty('name', 'relationship');
+    expect(radiosSpy.occurrences[0]).toHaveProperty('dontWrap', true);
+    expect(radiosSpy.occurrences[0]).toHaveProperty('legendIsQuestionTitle', true);
+    expect(radiosSpy.occurrences[0]).toHaveProperty('radios', EXAMPLE_RELATIONSHIPS.radios);
+  });
+});

package/components/relationships/relationships.spec.js

@@ -0,0 +1,84 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_RELATIONSHIPS = {
+  dontWrap: true,
+  playback: "Amanda Bloggs is Joe Bloggs' <em>…</em>",
+  name: 'relationship',
+  radios: [
+    {
+      id: 'grandparent',
+      value: 'grandparent',
+      label: {
+        text: 'Grandparent',
+      },
+      attributes: {
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>grandparents</em>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>grandparents</em>",
+      },
+    },
+    {
+      id: 'other-relation',
+      value: 'other-relation',
+      label: {
+        text: 'Other relation',
+      },
+      attributes: {
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>other relation</em>",
+      },
+    },
+    {
+      id: 'unrelated',
+      value: 'unrelated',
+      label: {
+        text: 'Unrelated',
+        description: 'Including foster child',
+      },
+      attributes: {
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
+        'data-playback': 'Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
+      },
+    },
+  ],
+};
+
+describe('script: relationships', () => {
+  beforeEach(async () => {
+    await setTestPage(
+      '/test',
+      renderComponent(
+        'question',
+        {
+          title: 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>…</em>',
+          readDescriptionFirst: true,
+          legendIsQuestionTitle: true,
+          legendTitleClasses: 'ons-js-relationships-legend',
+        },
+        [renderComponent('relationships', EXAMPLE_RELATIONSHIPS)],
+      ),
+    );
+  });
+
+  describe('when the component initialises', () => {
+    it('then the playback paragraph should become visible', async () => {
+      const hasHideClass = await page.$eval('.ons-relationships__playback', node => node.classList.contains('ons-u-d-no'));
+      expect(hasHideClass).toBe(false);
+    });
+  });
+
+  describe('when the user selects a relationship', () => {
+    beforeEach(async () => {
+      await page.click('#other-relation');
+    });
+
+    it('the question title should be changed to reflect the relationship', async () => {
+      const headingText = await page.$eval('h1', element => element.innerHTML);
+      expect(headingText.trim()).toBe('Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>');
+    });
+
+    it('the playback should be changed to reflect the relationship', async () => {
+      const playbackText = await page.$eval('.ons-relationships__playback', element => element.innerHTML);
+      expect(playbackText.trim()).toBe("Amanda Bloggs is Joe Bloggs' <em>other relation</em>");
+    });
+  });
+});

package/components/reply/_macro.njk

@@ -1,7 +1,7 @@
 {% macro onsReply(params) %}
     {% from "components/textarea/_macro.njk" import onsTextarea %}
     {% from "components/button/_macro.njk" import onsButton %}
-    <div class="ons-js-reply">
+    <div class="ons-reply ons-js-reply">
         {{
             onsTextarea({
                 "id": params.textarea.id,
@@ -23,7 +23,7 @@
                 }}
             </div>
             <div class="ons-grid__col ons-u-ml-m">
-                <a href="{{ params.closeLinkUrl }}">{{ params.closeLinkText }}</a>
+                <a class="ons-reply__link" href="{{ params.closeLinkUrl }}">{{ params.closeLinkText }}</a>
             </div>
         </div>
     </div>

package/components/reply/_macro.spec.js

@@ -0,0 +1,69 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_TEXTAREA = {
+  id: 'reply-textarea',
+  name: 'reply',
+  label: {
+    text: 'Reply',
+  },
+};
+
+const EXAMPLE_BUTTON = {
+  id: 'reply-button',
+  type: 'button',
+  text: 'Send message',
+  classes: 'u-mb-xs',
+};
+
+const EXAMPLE_REPLY = {
+  textarea: EXAMPLE_TEXTAREA,
+  button: EXAMPLE_BUTTON,
+  closeLinkText: 'Close conversation',
+  closeLinkUrl: '/close-conversation',
+};
+
+describe('macro: reply', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('reply', EXAMPLE_REPLY));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('renders the provided `textarea` using the `textarea` component', () => {
+    const faker = templateFaker();
+    const textareaSpy = faker.spy('textarea');
+
+    cheerio.load(faker.renderComponent('reply', EXAMPLE_REPLY));
+
+    expect(textareaSpy.occurrences[0]).toEqual(EXAMPLE_TEXTAREA);
+  });
+
+  it('renders the provided `button` using the `button` component', () => {
+    const faker = templateFaker();
+    const buttonSpy = faker.spy('button');
+
+    cheerio.load(faker.renderComponent('reply', EXAMPLE_REPLY));
+
+    expect(buttonSpy.occurrences[0]).toEqual(EXAMPLE_BUTTON);
+  });
+
+  it('has the expected hyperlink URL', async () => {
+    const $ = cheerio.load(renderComponent('reply', EXAMPLE_REPLY));
+
+    const $el = $('.ons-reply__link');
+    expect($el.attr('href')).toBe(EXAMPLE_REPLY.closeLinkUrl);
+  });
+
+  it('has the expected link text', async () => {
+    const $ = cheerio.load(renderComponent('reply', EXAMPLE_REPLY));
+
+    const $el = $('.ons-reply__link');
+    expect($el.text()).toBe(EXAMPLE_REPLY.closeLinkText);
+  });
+});

package/components/reply/reply.spec.js

@@ -0,0 +1,78 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_REPLY = {
+  textarea: {
+    id: 'reply-textarea',
+    name: 'reply',
+    label: {
+      text: 'Reply',
+    },
+  },
+  button: {
+    id: 'reply-button',
+    type: 'button',
+    text: 'Send message',
+    classes: 'u-mb-xs',
+  },
+  closeLinkText: 'Close conversation',
+  closeLinkUrl: '/close-conversation',
+};
+
+describe('script: reply', () => {
+  describe('scenario: Empty textarea', () => {
+    it('the button is disabled', async () => {
+      await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
+
+      const disabledButton = await page.evaluate(() => document.querySelector('#reply-button').disabled);
+      expect(disabledButton).toBe(true);
+    });
+
+    it('the button has classes applied', async () => {
+      await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
+      const disabledButton = await page.$eval('#reply-button', element => element.classList.contains('ons-btn--disabled'));
+      expect(disabledButton).toBe(true);
+    });
+  });
+
+  describe('scenario: Filled textarea', () => {
+    it('the button is enabled', async () => {
+      await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
+      await page.focus('#reply-textarea');
+      await page.keyboard.type('Sausages');
+
+      const disabledButton = await page.evaluate(() => document.querySelector('#reply-button').disabled);
+      expect(disabledButton).toBe(false);
+    });
+
+    it('the button has classes removed', async () => {
+      await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
+      await page.focus('#reply-textarea');
+      await page.keyboard.type('Sausages');
+
+      const disabledButton = await page.$eval('#reply-button', element => element.classList.contains('ons-btn--disabled'));
+      expect(disabledButton).toBe(false);
+    });
+  });
+
+  describe('scenario: Filled then emptied textarea', () => {
+    it('the button is disabled', async () => {
+      await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
+      await page.focus('#reply-textarea');
+      await page.keyboard.type('s');
+      await page.keyboard.press('Backspace');
+
+      const disabledButton = await page.evaluate(() => document.querySelector('#reply-button').disabled);
+      expect(disabledButton).toBe(true);
+    });
+
+    it('the button has classes applied', async () => {
+      await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
+      await page.focus('#reply-textarea');
+      await page.keyboard.type('s');
+      await page.keyboard.press('Backspace');
+
+      const disabledButton = await page.$eval('#reply-button', element => element.classList.contains('ons-btn--disabled'));
+      expect(disabledButton).toBe(true);
+    });
+  });
+});