From 1f4b6bc184df1e46066bd86a05388f3fbb6363af Mon Sep 17 00:00:00 2001 From: SriHV <123635670+SriHV@users.noreply.github.com> Date: Wed, 13 Nov 2024 16:48:45 +0000 Subject: [PATCH] Refactor Button component test file to new format (#3353) * Changes in macro.spec.js * changes as per comments * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * changes as per comments * changes as per comments * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> * testing * changes in url param tests * added few more tests * Update src/components/button/_macro.spec.js Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --------- Co-authored-by: Alessio Venturini <112873190+alessioventuriniAND@users.noreply.github.com> Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- README.md | 2 +- src/components/button/_macro.spec.js | 772 +++++++++--------- .../button/example-button-group.njk | 1 + 3 files changed, 403 insertions(+), 372 deletions(-) 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' }) }}