diff --git a/README.md b/README.md
index f2c6bd7d98..5a30f68205 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,7 @@ This project uses [LHCI](https://www.npmjs.com/package/@lhci/cli).
```bash
yarn global add @lhci/cli
-yarn test-lighthouse
+yarn test-lighthouse
```
## Testing - macros and scripts
diff --git a/src/components/button/_macro.spec.js b/src/components/button/_macro.spec.js
index 12b398ad7d..6733f50118 100644
--- a/src/components/button/_macro.spec.js
+++ b/src/components/button/_macro.spec.js
@@ -5,296 +5,316 @@ import * as cheerio from 'cheerio';
import axe from '../../tests/helpers/axe';
import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
-describe('macro: button', () => {
- it('has the provided `id` attribute', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- id: 'example-id',
- }),
- );
-
- expect($('#example-id').length).toBe(1);
- });
-
- it('has additionally provided `attributes`', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- attributes: {
- a: 123,
- b: 456,
- },
- }),
- );
-
- expect($('button').attr('a')).toBe('123');
- expect($('button').attr('b')).toBe('456');
- });
-
- it('has expected style classes', () => {
- const $ = cheerio.load(renderComponent('button'));
-
- expect($('.ons-btn .ons-btn__inner').length).toBe(1);
- });
-
- it('has provided variant style classes', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- variants: ['variant-a', 'variant-b'],
- }),
- );
-
- expect($('.ons-btn').hasClass('ons-btn--variant-a')).toBe(true);
- expect($('.ons-btn').hasClass('ons-btn--variant-b')).toBe(true);
- });
-
- it('has download variant style class when `variants` contains `download`', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- url: 'http://example.com',
- variants: 'download',
- }),
- );
-
- expect($('.ons-btn').hasClass('ons-btn--download')).toBe(true);
- });
-
- it('has `download` icon when `variants` contains "download"', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
+describe('FOR: Macro: Button', () => {
+ describe('GIVEN: Params: no params', () => {
+ describe('WHEN: there are no params provided', () => {
+ test('THEN: has expected style classes', () => {
+ const $ = cheerio.load(renderComponent('button'));
+ expect($('.ons-btn .ons-btn__inner').length).toBe(1);
+ });
- faker.renderComponent('button', {
- url: 'http://example.com',
- variants: 'download',
+ test('THEN: the button is rendered', () => {
+ const $ = cheerio.load(renderComponent('button'));
+ expect($('button').length).toBe(1);
+ });
});
-
- expect(iconsSpy.occurrences[0].iconType).toBe('download');
- });
-
- it('has provided variant style classes when `variants` contains "print"', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- variants: 'print',
- }),
- );
-
- expect($('.ons-btn').hasClass('ons-btn--print')).toBe(true);
- expect($('.ons-btn').hasClass('ons-u-d-no')).toBe(true);
- expect($('.ons-btn').hasClass('ons-js-print-btn')).toBe(true);
});
-
- it('has `print` icon when `variants` contains "print"', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
-
- faker.renderComponent('button', {
- url: 'http://example.com',
- variants: 'print',
+ describe('GIVEN: Params: text, name and value', () => {
+ describe('WHEN: text, name and value params are provided', () => {
+ test('THEN: passes jest-axe checks', async () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ text: 'Example button',
+ name: 'example',
+ value: 'example-value',
+ }),
+ );
+ const results = await axe($.html());
+ expect(results).toHaveNoViolations();
+ });
});
-
- expect(iconsSpy.occurrences[0].iconType).toBe('print');
- });
-
- it('has provided variant style classes when `variants` contains "loader"', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- variants: 'loader',
- }),
- );
-
- expect($('.ons-btn').hasClass('ons-btn--loader')).toBe(true);
- expect($('.ons-btn').hasClass('ons-js-loader')).toBe(true);
- expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
});
-
- it('has `loader` icon when `variants` contains "loader"', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
-
- faker.renderComponent('button', {
- variants: 'loader',
+ describe('GIVEN: Params: id', () => {
+ describe('WHEN: the id param is provided', () => {
+ it('THEN: the button has the provided id', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ id: 'example-id',
+ }),
+ );
+ expect($('#example-id').length).toBe(1);
+ });
});
-
- expect(iconsSpy.occurrences[0].iconType).toBe('loader');
});
-
- it('has `chevron` icon when `variants` contains "mobile"', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
-
- faker.renderComponent('button', {
- variants: 'mobile',
+ describe('GIVEN: Params: attributes', () => {
+ describe('WHEN: the attributes param is provided', () => {
+ it('THEN: the button has the additionally provided attributes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ attributes: {
+ a: 123,
+ b: 456,
+ },
+ }),
+ );
+ expect($('button').attr('a')).toBe('123');
+ expect($('button').attr('b')).toBe('456');
+ });
});
-
- expect(iconsSpy.occurrences[0].iconType).toBe('chevron');
- });
-
- it('has provided variant style classes when `variants` contains "timer"', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- variants: 'timer',
- }),
- );
-
- expect($('.ons-btn').hasClass('ons-js-timer')).toBe(true);
- expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
});
-
- it('has additionally provided style classes', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- classes: 'extra-class another-extra-class',
- }),
- );
-
- expect($('.ons-btn').hasClass('extra-class')).toBe(true);
- expect($('.ons-btn').hasClass('another-extra-class')).toBe(true);
+ describe('GIVEN: Params: text', () => {
+ describe('WHEN: the text param is provided', () => {
+ test('THEN: the button has the label text', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ text: 'Click > me!',
+ }),
+ );
+ expect($('.ons-btn__text').html()).toBe('Click > me!');
+ });
+ });
});
-
- it('has additionally provided inner style classes', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- innerClasses: 'extra-inner-class another-extra-inner-class',
- }),
- );
-
- expect($('.ons-btn__inner').hasClass('extra-inner-class')).toBe(true);
- expect($('.ons-btn__inner').hasClass('another-extra-inner-class')).toBe(true);
+ describe('GIVEN: Params: name', () => {
+ describe('WHEN: the name param is provided', () => {
+ test('THEN: the button renders with the provided name', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ name: 'example',
+ }),
+ );
+ expect($('button').attr('name')).toBe('example');
+ });
+ });
});
-
- it('has label text when `text` is provided', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- text: 'Click > me!',
- }),
- );
-
- expect($('.ons-btn__text').html()).toBe('Click > me!');
+ describe('GIVEN: Params: value', () => {
+ describe('WHEN: the value param is provided', () => {
+ test('THEN: the button renders with the provided value', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ value: 'example-value',
+ }),
+ );
+ expect($('button').attr('value')).toBe('example-value');
+ });
+ });
});
-
- it('has label text when `html` is provided', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- html: 'Click me!',
- }),
- );
-
- expect($('.ons-btn__text').html()).toBe('Click me!');
+ describe('GIVEN: Params: buttonContext', () => {
+ describe('WHEN: buttonContext parameter is provided', () => {
+ test('THEN: the button has the provided button context', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ buttonContext: 'button context text',
+ }),
+ );
+ expect($('.ons-btn__context').text()).toBe('button context text');
+ });
+ });
});
-
- it('has button context text when `buttonContext` is provided', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- buttonContext: 'button context text',
- }),
- );
-
- expect($('.ons-btn__context').text()).toBe('button context text');
+ describe('GIVEN: Params: html', () => {
+ describe('WHEN: html parameter is provided', () => {
+ test('THEN: the button label has the provided html', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ html: 'Click me!',
+ }),
+ );
+ expect($('.ons-btn__text').html()).toBe('Click me!');
+ });
+ });
});
-
- it('has custom icon before button text', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- text: 'Click me!',
- iconPosition: 'before',
- iconType: 'exit',
- }),
- );
-
- expect($('.ons-icon + .ons-btn__text').text()).toBe('Click me!');
+ describe('GIVEN: Params: iconPosition', () => {
+ describe('WHEN: iconPosition is set to before for custom icon', () => {
+ test('THEN: renders custom icon before button text', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ text: 'Click me!',
+ iconPosition: 'before',
+ iconType: 'exit',
+ }),
+ );
+ expect($('.ons-icon + .ons-btn__text').text()).toBe('Click me!');
+ });
+ });
+ describe('WHEN: iconPosition is set to after for custom icon', () => {
+ test('THEN: renders custom icon after button text', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ text: 'Click me!',
+ iconPosition: 'after',
+ iconType: 'exit',
+ }),
+ );
+ expect($('.ons-btn__text + .ons-icon').prev().text()).toBe('Click me!');
+ });
+ });
});
- it('has custom icon after button text', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- text: 'Click me!',
- iconPosition: 'after',
- iconType: 'exit',
- }),
- );
-
- expect($('.ons-btn__text + .ons-icon').prev().text()).toBe('Click me!');
+ describe('GIVEN: Params: iconType', () => {
+ describe('WHEN: iconType parameter is provided', () => {
+ test('THEN: the button has an svg element', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ text: 'Click me!',
+ iconPosition: 'after',
+ iconType: 'exit',
+ }),
+ );
+ expect($('svg').length).toBe(1);
+ });
+ });
});
- describe('mode: standard', () => {
- it('passes jest-axe checks', async () => {
- const $ = cheerio.load(
- renderComponent('button', {
- text: 'Example button',
- name: 'example',
- value: 'example-value',
- }),
- );
-
- const results = await axe($.html());
- expect(results).toHaveNoViolations();
+ describe('GIVEN: Params: variants', () => {
+ describe('WHEN: variants are present', () => {
+ test('THEN: the button has the expected variant classes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: ['variant-a', 'variant-b'],
+ }),
+ );
+
+ expect($('.ons-btn').hasClass('ons-btn--variant-a')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-btn--variant-b')).toBe(true);
+ });
});
+ describe('WHEN: variants contains download', () => {
+ test('THEN: the button has the download class', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ url: 'http://example.com',
+ variants: 'download',
+ }),
+ );
+ expect($('.ons-btn').hasClass('ons-btn--download')).toBe(true);
+ });
+ test('THEN: the button has the download icon', () => {
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
- it('is an `button` element', () => {
- const $ = cheerio.load(renderComponent('button'));
+ faker.renderComponent('button', {
+ url: 'http://example.com',
+ variants: 'download',
+ });
- expect($('button').length).toBe(1);
+ expect(iconsSpy.occurrences[0].iconType).toBe('download');
+ });
+ test('THEN: the button has the download attribute', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: 'download',
+ }),
+ );
+
+ expect($('.ons-btn').attr('download')).toBeDefined();
+ });
});
+ describe('WHEN: variants contains loader', () => {
+ test('THEN: the button has the loader classes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: 'loader',
+ }),
+ );
+
+ expect($('.ons-btn').hasClass('ons-btn--loader')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-js-loader')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
+ });
+ test('THEN: the button has the loader icon', () => {
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
- it('has the provided `type` attribute', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- type: 'special-type',
- }),
- );
+ faker.renderComponent('button', {
+ variants: 'loader',
+ });
- expect($('button').attr('type')).toBe('special-type');
+ expect(iconsSpy.occurrences[0].iconType).toBe('loader');
+ });
});
-
- it('has the provided `type` attribute even if print variant is provided', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- type: 'special-type',
- variants: 'print',
- }),
- );
-
- expect($('button').attr('type')).toBe('special-type');
+ describe('WHEN: variants contains timer', () => {
+ test('THEN: the button has the timer classes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: 'timer',
+ }),
+ );
+
+ expect($('.ons-btn').hasClass('ons-js-timer')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
+ });
});
+ describe('WHEN: variants contains print', () => {
+ test('THEN: renders provided variant style classes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: 'print',
+ }),
+ );
+
+ expect($('.ons-btn').hasClass('ons-btn--print')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-u-d-no')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-js-print-btn')).toBe(true);
+ });
- it('defaults to being a "submit" button when `type` is not provided', () => {
- const $ = cheerio.load(renderComponent('button'));
-
- expect($('button').attr('type')).toBe('submit');
- });
+ test('THEN: button has the print icon', () => {
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
- it('defaults to being a "button" when `type` is not provided and `variants` contains "print"', () => {
- const $ = cheerio.load(
- renderComponent('button', {
+ faker.renderComponent('button', {
+ url: 'http://example.com',
variants: 'print',
- }),
- );
+ });
- expect($('button').attr('type')).toBe('button');
+ expect(iconsSpy.occurrences[0].iconType).toBe('print');
+ });
});
-
- it('has the provided `value` attribute', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- value: 'special-value',
- }),
- );
-
- expect($('button').attr('value')).toBe('special-value');
+ });
+ describe('GIVEN: Params: type', () => {
+ describe('WHEN: type parameter is provided', () => {
+ test('THEN: has the provided type attribute', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ type: 'special-type',
+ }),
+ );
+
+ expect($('button').attr('type')).toBe('special-type');
+ });
});
+ describe('WHEN: type parameter is provided and variant contains print', () => {
+ test('THEN: has the provided type attribute', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ type: 'special-type',
+ variants: 'print',
+ }),
+ );
+
+ expect($('button').attr('type')).toBe('special-type');
+ });
+ });
+ describe('WHEN: type parameter is not provided', () => {
+ test('THEN: defaults to being a submit button', () => {
+ const $ = cheerio.load(renderComponent('button'));
- it('has the provided `name` attribute', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- name: 'special-name',
- }),
- );
-
- expect($('button').attr('name')).toBe('special-name');
+ expect($('button').attr('type')).toBe('submit');
+ });
+ });
+ describe('WHEN: type parameter is not provided and variant contains print', () => {
+ test('THEN: defaults to being a button', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: 'print',
+ }),
+ );
+
+ expect($('button').attr('type')).toBe('button');
+ });
});
});
- describe('mode: link', () => {
- it('passes jest-axe checks', async () => {
+ describe('GIVEN: Params: url', () => {
+ describe('WHEN: url parameter is provided', () => {
const $ = cheerio.load(
renderComponent('button', {
text: 'Example button',
@@ -303,154 +323,164 @@ describe('macro: button', () => {
url: 'http://example.com',
}),
);
+ test('THEN: passes jest-axe checks', async () => {
+ const results = await axe($.html());
+ expect(results).toHaveNoViolations();
+ });
- const results = await axe($.html());
- expect(results).toHaveNoViolations();
- });
-
- it('is an `a` element', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- url: 'http://example.com',
- }),
- );
+ test('THEN: renders an element', () => {
+ expect($('a').length).toBe(1);
+ });
- expect($('a').length).toBe(1);
- });
+ test('THEN: has expected style classes', () => {
+ expect($('a').hasClass('ons-btn')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-btn--link')).toBe(true);
+ expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
+ });
- it('has expected style classes', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- url: 'http://example.com',
- }),
- );
+ test('THEN: the link points to the provided url', () => {
+ expect($('a').attr('href')).toBe('http://example.com');
+ });
- expect($('a').hasClass('ons-btn')).toBe(true);
- expect($('.ons-btn').hasClass('ons-btn--link')).toBe(true);
- expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
- });
+ test('THEN: the link button has the arrow-next icon by default', () => {
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
- it('has the provided link', () => {
- const $ = cheerio.load(
- renderComponent('button', {
+ faker.renderComponent('button', {
url: 'http://example.com',
- }),
- );
+ });
- expect($('a').attr('href')).toBe('http://example.com');
- });
+ expect(iconsSpy.occurrences[0].iconType).toBe('arrow-next');
+ });
- it('has `arrow-next` icon by default', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
+ test('THEN: the role attribute is set to button', () => {
+ expect($('.ons-btn').attr('role')).toBe('button');
+ });
- faker.renderComponent('button', {
- url: 'http://example.com',
+ test('THEN: the link does not have a name attribute', () => {
+ expect($('a').attr('name')).toBeUndefined();
});
- expect(iconsSpy.occurrences[0].iconType).toBe('arrow-next');
+ test('THEN: the link does not have a value attribute', () => {
+ expect($('a').attr('value')).toBeUndefined();
+ });
});
-
- it('has no icon when noIcon is set to true', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
-
- faker.renderComponent('button', {
- url: 'http://example.com',
- noIcon: true,
+ describe('WHEN: url parameter is provided and newWindow is true', () => {
+ test('THEN: has default new window description', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ url: 'http://example.com',
+ newWindow: true,
+ }),
+ );
+ expect($('.ons-btn__new-window-description').text()).toBe('(opens in a new tab)');
});
-
- expect(iconsSpy.occurrences[0]).toBeUndefined();
});
-
- it('has default `arrow-next` icon when noIcon is set to false', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
-
- faker.renderComponent('button', {
- url: 'http://example.com',
- noIcon: false,
+ describe('WHEN: url parameter is provided, newWindow is true and newWindowDescription is provided', () => {
+ test('THEN: has custom new window description', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ url: 'http://example.com',
+ newWindow: true,
+ newWindowDescription: 'custom opens in a new window text',
+ }),
+ );
+ expect($('.ons-btn__new-window-description').text()).toBe('(custom opens in a new window text)');
});
-
- expect(iconsSpy.occurrences[0].iconType).toBe('arrow-next');
});
+ });
- it('opens in a new window when `newWindow` is `true`', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- url: 'http://example.com',
- newWindow: true,
- }),
- );
-
- expect($('a').attr('target')).toBe('_blank');
- expect($('a').attr('rel')).toBe('noopener');
+ describe('GIVEN: Params: classes', () => {
+ describe('WHEN: classes parameter is provided', () => {
+ test('THEN: the button has the additionally provided style classes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ classes: 'extra-class another-extra-class',
+ }),
+ );
+
+ expect($('.ons-btn').hasClass('extra-class')).toBe(true);
+ expect($('.ons-btn').hasClass('another-extra-class')).toBe(true);
+ });
});
-
- it('has `external-link` icon when `newWindow` is `true`', () => {
- const faker = templateFaker();
- const iconsSpy = faker.spy('icon');
-
- faker.renderComponent('button', {
- url: 'http://example.com',
- newWindow: true,
+ describe('WHEN: innerClasses parameter is provided', () => {
+ test('THEN: the button inner has the additionally provided inner style classes', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ innerClasses: 'extra-inner-class another-extra-inner-class',
+ }),
+ );
+
+ expect($('.ons-btn__inner').hasClass('extra-inner-class')).toBe(true);
+ expect($('.ons-btn__inner').hasClass('another-extra-inner-class')).toBe(true);
});
-
- expect(iconsSpy.occurrences[0].iconType).toBe('external-link');
});
+ });
- it('has the `button` role', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- url: 'http://example.com',
- }),
- );
-
- expect($('.ons-btn').attr('role')).toBe('button');
+ describe('GIVEN: Params: removeDownloadAttribute', () => {
+ describe('WHEN: variants contains download and removeDownloadAttribute is true', () => {
+ test('THEN: the button does not have the download attribute', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ variants: 'download',
+ removeDownloadAttribute: true,
+ }),
+ );
+
+ expect($('.ons-btn').attr('download')).toBeUndefined();
+ });
});
+ });
- it('has a default new window description when `newWindow` is `true`', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- url: 'http://example.com',
- newWindow: true,
- }),
- );
-
- expect($('.ons-btn__new-window-description').text()).toBe('(opens in a new tab)');
- });
+ describe('GIVEN: Params: noIcon', () => {
+ describe('WHEN: noIcon is set to true', () => {
+ test('THEN: the button does not have the default arrow-next icon', () => {
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
- it('has a custom new window description when `newWindow` is `true` and `newWindowDescription` is provided', () => {
- const $ = cheerio.load(
- renderComponent('button', {
+ faker.renderComponent('button', {
url: 'http://example.com',
- newWindow: true,
- newWindowDescription: 'custom opens in a new window text',
- }),
- );
+ noIcon: true,
+ });
- expect($('.ons-btn__new-window-description').text()).toBe('(custom opens in a new window text)');
+ expect(iconsSpy.occurrences[0]).toBeUndefined();
+ });
});
+ describe('WHEN: noIcon is set to false', () => {
+ test('THEN: the button has the default arrow-next icon', () => {
+ const faker = templateFaker();
+ const iconsSpy = faker.spy('icon');
- it('has the `download` attribute when `variants` contains "download"', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- variants: 'download',
- }),
- );
+ faker.renderComponent('button', {
+ url: 'http://example.com',
+ noIcon: false,
+ });
- expect($('.ons-btn').attr('download')).toBeDefined();
+ expect(iconsSpy.occurrences[0].iconType).toBe('arrow-next');
+ });
});
+ });
- it('does not have the `download` attribute when `variants` contains "download" and `removeDownloadAttribute` is `true`', () => {
- const $ = cheerio.load(
- renderComponent('button', {
- variants: 'download',
- removeDownloadAttribute: true,
- }),
- );
-
- expect($('.ons-btn').attr('download')).toBeUndefined();
+ describe('GIVEN: Params: listeners', () => {
+ describe('WHEN: listeners are provided', () => {
+ test('THEN: the button renders each listener', () => {
+ const $ = cheerio.load(
+ renderComponent('button', {
+ id: 'example-id',
+ listeners: {
+ click: `alert('Input was clicked')`,
+ keypress: `alert('Key was pressed')`,
+ },
+ }),
+ );
+ const script = $('script').html();
+ expect(script).toContain(
+ `document.getElementById("example-id").addEventListener('click', function(){ alert('Input was clicked') });`,
+ );
+ expect(script).toContain(
+ `document.getElementById("example-id").addEventListener('keypress', function(){ alert('Key was pressed') });`,
+ );
+ });
});
});
});
diff --git a/src/components/button/example-button-group.njk b/src/components/button/example-button-group.njk
index 0663e0b273..e4a9b19575 100644
--- a/src/components/button/example-button-group.njk
+++ b/src/components/button/example-button-group.njk
@@ -10,6 +10,7 @@
onsButton({
"type": 'button',
"text": 'Cancel',
+ "name": 'example',
"variants": 'secondary'
})
}}