From 42e69a21b39e17a7c407362668b872e18228321b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 00:52:39 -0300 Subject: [PATCH 01/55] Delete progress.html --- .../progress/fixtures/progress.html | 20 ------------------- 1 file changed, 20 deletions(-) delete mode 100644 src/components/progress/fixtures/progress.html diff --git a/src/components/progress/fixtures/progress.html b/src/components/progress/fixtures/progress.html deleted file mode 100644 index 1bd2ae5cf16..00000000000 --- a/src/components/progress/fixtures/progress.html +++ /dev/null @@ -1,20 +0,0 @@ -
- - - - - - - - - - - - - - - - - Click me - -
From 79b9f1b1dfa89ed87044607f916b462a12a9e643 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 00:54:51 -0300 Subject: [PATCH 02/55] Delete progress.js --- src/components/progress/fixtures/progress.js | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 src/components/progress/fixtures/progress.js diff --git a/src/components/progress/fixtures/progress.js b/src/components/progress/fixtures/progress.js deleted file mode 100644 index 9b84df99443..00000000000 --- a/src/components/progress/fixtures/progress.js +++ /dev/null @@ -1,11 +0,0 @@ -window.app = new Vue({ - el: '#app', - data: { - progress: Math.random() * 100 - }, - methods: { - clicked() { - this.progress = Math.random() * 100 - } - } -}) From 0ac7166e63b785a7fe8b956f50be10810f87e5b1 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 00:56:19 -0300 Subject: [PATCH 03/55] Delete navbar.html --- src/components/navbar/fixtures/navbar.html | 44 ---------------------- 1 file changed, 44 deletions(-) delete mode 100644 src/components/navbar/fixtures/navbar.html diff --git a/src/components/navbar/fixtures/navbar.html b/src/components/navbar/fixtures/navbar.html deleted file mode 100644 index 1020f72be52..00000000000 --- a/src/components/navbar/fixtures/navbar.html +++ /dev/null @@ -1,44 +0,0 @@ -
- - - - - - Bootstrap - - - - - Support - Docs - Contact Us - - - - - EN - - - ES - - - - - - Profile - - - Sign out - - - - CustomClassInNavLink - - - - - - -
From 493911f64dbfc985a4e8576151a00b85d250a00a Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 00:56:31 -0300 Subject: [PATCH 04/55] Delete navbar.js --- src/components/navbar/fixtures/navbar.js | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/components/navbar/fixtures/navbar.js diff --git a/src/components/navbar/fixtures/navbar.js b/src/components/navbar/fixtures/navbar.js deleted file mode 100644 index 0bae7b95202..00000000000 --- a/src/components/navbar/fixtures/navbar.js +++ /dev/null @@ -1,3 +0,0 @@ -window.app = new Vue({ - el: '#app' -}) From b67833cda08e956a3b8e07a5fcab7c144ead0c78 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 01:00:24 -0300 Subject: [PATCH 05/55] Delete navbar-dropdown.spec.js --- src/components/navbar/navbar-dropdown.spec.js | 20 ------------------- 1 file changed, 20 deletions(-) delete mode 100644 src/components/navbar/navbar-dropdown.spec.js diff --git a/src/components/navbar/navbar-dropdown.spec.js b/src/components/navbar/navbar-dropdown.spec.js deleted file mode 100644 index 49d8e5ca6d7..00000000000 --- a/src/components/navbar/navbar-dropdown.spec.js +++ /dev/null @@ -1,20 +0,0 @@ -import { loadFixture, testVM } from '../../../tests/utils' - -describe('navbar', () => { - beforeEach(loadFixture(__dirname, 'navbar')) - testVM() - - it('should have custom toggle class in nav-item-dropdown', async () => { - const { - app: { $refs } - } = window - const extraClass = $refs.extraToggleClasses - expect(extraClass).toBeDefined() - expect(extraClass.$refs.toggle).toBeDefined() - expect(extraClass.$refs.toggle).toHaveAllClasses([ - 'nav-link', - 'dropdown-toggle', - 'nav-link-custom' - ]) - }) -}) From 31978e2324b2278c0450b3ae0c71472b58fe65ee Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 01:09:59 -0300 Subject: [PATCH 06/55] Create nav-item-dropdown.spec.js --- src/components/nav/nav-item-dropdown.spec.js | 22 ++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 src/components/nav/nav-item-dropdown.spec.js diff --git a/src/components/nav/nav-item-dropdown.spec.js b/src/components/nav/nav-item-dropdown.spec.js new file mode 100644 index 00000000000..ce7b35303b2 --- /dev/null +++ b/src/components/nav/nav-item-dropdown.spec.js @@ -0,0 +1,22 @@ +import NavItemDropdown from './nav-item-dropdown' +import { mount } from '@vue/test-utils' + +describe('nav-item-dropdown', () => { + it('should have custom toggle class in nav-item-dropdown', async () => { + const wrapper = mount(NavItemDropdown, { + propsData: { + text: 'toggle', + extraToggleClasses: 'nav-link-custom' + } + }) + expect(wrapper.isVueInstance()).toBe(true) + expect(wrapper.findAll('.dropdown-toggle').length).toBe(1) + const $toggle = wrapper.find('.dropdown-toggle') + + expect($toggle.classes()).toBeContain('nav-link') + expect($toggle.classes()).toBeContain('dropdown-toggle') + expect($toggle.classes()).toBeContain('nav-link-custom') + + wrapper.destroy() + }) +}) From 0bd31c4c64828eefc8583427e4b05f6431ced8a0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 01:25:03 -0300 Subject: [PATCH 07/55] Update collapse.html --- .../collapse/fixtures/collapse.html | 241 +++++++++--------- 1 file changed, 126 insertions(+), 115 deletions(-) diff --git a/src/components/collapse/fixtures/collapse.html b/src/components/collapse/fixtures/collapse.html index 90e9972a40f..6110a4ffdfa 100644 --- a/src/components/collapse/fixtures/collapse.html +++ b/src/components/collapse/fixtures/collapse.html @@ -1,118 +1,129 @@
- -

Basic example - Directive Modifiers

-

- - Toggle Collapse 1 - -

- - Collapse 1 contents Here - - -

Basic example - Directive Argument

-

- - Toggle Collapse 2 - -

- - Collapse 2 contents Here - - -

Initially Open Example

-

- - Toggle Collapse 3 - -

- - - Initially visible Collapse 3 contents Here - - - -

v-model Example

-

- - Toggle Collapse 4 - -

- - - Initially visible Collapse 4 contents Here - - - -

Multiple Targets Example

-

- - Toggle Multi Collapse 1 & 2 - -

- - Multi-Collapse 1 contents Here - -

This paragraph doesn't collapse

- - Multi-Collapse 2 contents Here - - -

Accordion example

- Toggle Accordion 1 - - - Accordion 1 contents Here - - - Toggle Accordion 2 - - - Accordion 2 contents Here - - - Toggle Accordion 3 - - - Accordion 3 contents Here - + +

Basic example - Directive Modifiers

+

+ + Toggle Collapse 1 + +

+ + Collapse 1 contents Here + + + +

Basic example - Directive Argument

+

+ + Toggle Collapse 2 + +

+ + Collapse 2 contents Here + + + +

Initially Open Example

+

+ + Toggle Collapse 3 + +

+ + Initially visible Collapse 3 contents Here + + + +

v-model Example

+

+ + Toggle Collapse 4 + +

+ + Initially visible Collapse 4 contents Here + + + +

Multiple Targets Example

+

+ + Toggle Multi Collapse 1 & 2 + +

+ + Multi-Collapse 1 contents Here + +

This paragraph doesn't collapse

+ + Multi-Collapse 2 contents Here + + + +

Accordion example

+ + Toggle Accordion 1 + + + Accordion 1 contents Here + + + Toggle Accordion 2 + + + Accordion 2 contents Here + + + Toggle Accordion 3 + + + Accordion 3 contents Here + + + +

Inside Navbar

+ + + +

Nav Collapse contents Here

 +
From 322cb1b4dfe8772ae4dce9e8f1d4e84810216424 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 01:28:29 -0300 Subject: [PATCH 08/55] Update nav-item-dropdown.spec.js --- src/components/nav/nav-item-dropdown.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/nav/nav-item-dropdown.spec.js b/src/components/nav/nav-item-dropdown.spec.js index ce7b35303b2..8de9df4c9a8 100644 --- a/src/components/nav/nav-item-dropdown.spec.js +++ b/src/components/nav/nav-item-dropdown.spec.js @@ -12,10 +12,10 @@ describe('nav-item-dropdown', () => { expect(wrapper.isVueInstance()).toBe(true) expect(wrapper.findAll('.dropdown-toggle').length).toBe(1) const $toggle = wrapper.find('.dropdown-toggle') - - expect($toggle.classes()).toBeContain('nav-link') - expect($toggle.classes()).toBeContain('dropdown-toggle') - expect($toggle.classes()).toBeContain('nav-link-custom') + + expect($toggle.classes()).toContain('nav-link') + expect($toggle.classes()).toContain('dropdown-toggle') + expect($toggle.classes()).toContain('nav-link-custom') wrapper.destroy() }) From ff067dc2f8ef1d850ee8baabd2b8849deef1efe5 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 01:47:49 -0300 Subject: [PATCH 09/55] Create media-aside.spec.js --- src/components/media/media-aside.spec.js | 55 ++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/components/media/media-aside.spec.js diff --git a/src/components/media/media-aside.spec.js b/src/components/media/media-aside.spec.js new file mode 100644 index 00000000000..f4b2630909f --- /dev/null +++ b/src/components/media/media-aside.spec.js @@ -0,0 +1,55 @@ +import MediaAside from './media-aside' +import { mount } from '@vue/test-utils' + +describe('media-aside', () => { + it('has expected default structure', async () => { + const wrapper = mount(MediaAside) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('d-flex') + expect(wrapper.classes()).toContain('align-self-top') + expect(wrapper.text()).toEqual('') + }) + + it('has custom root element when prop tag set', async () => { + const wrapper = mount(MediaAside, { + propsData: { + tag: 'span' + } + }) + + expect(wrapper.is('span')).toBe(true) + expect(wrapper.classes()).toContain('d-flex') + expect(wrapper.classes()).toContain('align-self-top') + expect(wrapper.classes().length).toBe(2) + expect(wrapper.text()).toEqual('') + }) + + it('has alignment class when prop vertical-align set', async () => { + const wrapper = mount(MediaAside, { + propsData: { + verticalAlign: 'bottom' + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('d-flex') + expect(wrapper.classes()).toContain('align-self-bottom') + expect(wrapper.classes().length).toBe(2) + }) + + it('renders default slot content', async () => { + const wrapper = mount(MediaAside, { + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('d-flex') + expect(wrapper.classes()).toContain('align-self-top') + expect(wrapper.classes().length).toBe(2) + expect(wrapper.findAll('b').length).toBe(1) + expect(wrapper.find('b').text).toBe('foobar') + }) +}) From 03ab6e6faed25072063068fd0b470c7cba773d0c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 01:51:18 -0300 Subject: [PATCH 10/55] Update media-aside.spec.js --- src/components/media/media-aside.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/media/media-aside.spec.js b/src/components/media/media-aside.spec.js index f4b2630909f..27133a5a81b 100644 --- a/src/components/media/media-aside.spec.js +++ b/src/components/media/media-aside.spec.js @@ -50,6 +50,6 @@ describe('media-aside', () => { expect(wrapper.classes()).toContain('align-self-top') expect(wrapper.classes().length).toBe(2) expect(wrapper.findAll('b').length).toBe(1) - expect(wrapper.find('b').text).toBe('foobar') + expect(wrapper.find('b').text()).toBe('foobar') }) }) From 1dc9229dc40ec8edd765fdc077c447b06e12d3fc Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 01:55:18 -0300 Subject: [PATCH 11/55] Create media-body.spec.js --- src/components/media/media-body.spec.js | 41 +++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/components/media/media-body.spec.js diff --git a/src/components/media/media-body.spec.js b/src/components/media/media-body.spec.js new file mode 100644 index 00000000000..c4cc92f670f --- /dev/null +++ b/src/components/media/media-body.spec.js @@ -0,0 +1,41 @@ +import MediaBody from './media-body' +import { mount } from '@vue/test-utils' + +describe('media-body', () => { + it('has expected default structure', async () => { + const wrapper = mount(MediaBody) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('media-body') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('') + }) + + it('custom root element when prop tag is set', async () => { + const wrapper = mount(MediaBody, { + propsData: { + tag: 'article' + } + }) + + expect(wrapper.is('article')).toBe(true) + expect(wrapper.classes()).toContain('media-body') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('') + }) + + it('renders default slot content', async () => { + const wrapper = mount(MediaBody, { + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('media-body') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('b').length).toBe(1) + expect(wrapper.find('b').text()).toEqual('foobar') + expect(wrapper.text()).toEqual('foobar') + }) +}) From d0cd166be0d84ec2963cab174e0f9e88d8fb39cb Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 03:43:01 -0300 Subject: [PATCH 12/55] Update media.spec.js --- src/components/media/media.spec.js | 128 ++++++++++++++++++++++++++++- 1 file changed, 125 insertions(+), 3 deletions(-) diff --git a/src/components/media/media.spec.js b/src/components/media/media.spec.js index 3827ed164c8..d0753a7f65b 100644 --- a/src/components/media/media.spec.js +++ b/src/components/media/media.spec.js @@ -1,6 +1,128 @@ -import { loadFixture, testVM } from '../../../tests/utils' +import Media from './media' +import { mount } from '@vue/test-utils' describe('media', () => { - beforeEach(loadFixture(__dirname, 'media')) - testVM() + it('has expected default structure', async () => { + const wrapper = mount(Media) + + expect(wrapper.is('div')).tobe(true) + expect(wrapper.classes()).toContain('media') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.media-body').length).toBe(1) + expect(wrapper.findAll('.d-flex').length).toBe(1) + expect(wrapper.text()).toEqual('') + // Should have only two child elements + expect(wrapper.findAll('.media > *').length).toBe(2) + // Has expected child order + expect(wrapper.find('.media > .d-flex + .media-body').exists()).toBe(true) + expect(wrapper.find('.media > .media-body + .d-flex').exists()).toBe(false) + // Aside has extra classes + expect(wrapper.find('.d-flex').classes()).toContain('mr-3') + }) + + it('renders custom root element when tag prop set', async () => { + const wrapper = mount(Media, { + propsData: { + tag: 'section' + } + }) + + expect(wrapper.is('section')).tobe(true) + expect(wrapper.classes()).toContain('media') + expect(wrapper.classes().length).toBe(1) + }) + + it('has expected structure when prop right-align is set', async () => { + const wrapper = mount(Media, { + propsData: { + rightAlign: true + } + }) + + expect(wrapper.is('div')).tobe(true) + expect(wrapper.classes()).toContain('media') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.media-body').length).toBe(1) + expect(wrapper.findAll('.d-flex').length).toBe(1) + expect(wrapper.text()).toEqual('') + // Should have only two child elements + expect(wrapper.findAll('.media > *').length).toBe(2) + // Has expected child order + expect(wrapper.find('.media > .media-body + .d-flex').exists()).toBe(true) + expect(wrapper.find('.media > .d-flex + .media-body').exists()).toBe(false) + // Aside has extra classes + expect(wrapper.find('.d-flex').classes()).toContain('ml-3') + }) + + it('places default slot inside media-body', async () => { + const wrapper = mount(Media, { + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('div')).tobe(true) + expect(wrapper.classes()).toContain('media') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.media-body').length).toBe(1) + expect(wrapper.text()).toEqual('foobar') + expect(wrapper.find('.media-body').text()).toEqual('foobar') + }) + + it('does not have child media-body is prop no-body set', async () => { + const wrapper = mount(Media, { + propsData: { + noBody: true + } + }) + + expect(wrapper.is('div')).tobe(true) + expect(wrapper.classes()).toContain('media') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.media-body').length).toBe(0) + expect(wrapper.text()).toEqual('') + // Should have no child elements + expect(wrapper.findAll('.media > *').length).toBe(0) + }) + + it('places default slot inside self when no-body set', async () => { + const wrapper = mount(Media, { + propsData: { + noBody: true + }, + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('div')).tobe(true) + expect(wrapper.classes()).toContain('media') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.media-body').length).toBe(0) + expect(wrapper.text()).toEqual('foobar') + }) + + it('sets vertialAlign prop on media-aside child', async () => { + const wrapper = mount(Media, { + propsData: { + vertialAlign: 'bottom' + }, + slots: { + aside: 'foobar' + } + }) + + expect(wrapper.is('div')).tobe(true) + expect(wrapper.classes()).toContain('media') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.media-body').length).toBe(1) + expect(wrapper.findAll('.d-flex').length).toBe(1) + expect(wrapper.text()).toEqual('foobar') + // Should have only two child elements + expect(wrapper.findAll('.media > *').length).toBe(2) + // Should have media aside with self align bottom + expect(wrapper.find('d-flex').classes()).toContain('align-self-bottom') + // Should have content in aside + expect(wrapper.find('d-flex').text()).toEqual('foobar') + }) }) From 4d812b10405ffe299d6de22571788f2a8c564520 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 03:43:15 -0300 Subject: [PATCH 13/55] Delete media.html --- src/components/media/fixtures/media.html | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 src/components/media/fixtures/media.html diff --git a/src/components/media/fixtures/media.html b/src/components/media/fixtures/media.html deleted file mode 100644 index 69d431cd513..00000000000 --- a/src/components/media/fixtures/media.html +++ /dev/null @@ -1,13 +0,0 @@ -
- - -
Center-aligned media
-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

- - - -
Center-aligned media
-

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

- -
From 59967dc74fd6f75f29e0eeb863200fa7fa336ede Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 03:43:25 -0300 Subject: [PATCH 14/55] Delete media.js --- src/components/media/fixtures/media.js | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/components/media/fixtures/media.js diff --git a/src/components/media/fixtures/media.js b/src/components/media/fixtures/media.js deleted file mode 100644 index 0bae7b95202..00000000000 --- a/src/components/media/fixtures/media.js +++ /dev/null @@ -1,3 +0,0 @@ -window.app = new Vue({ - el: '#app' -}) From 62f87d13255dc419241e23cf448880fccf96f783 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 03:46:07 -0300 Subject: [PATCH 15/55] Update media.spec.js --- src/components/media/media.spec.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/media/media.spec.js b/src/components/media/media.spec.js index d0753a7f65b..178a9ad8122 100644 --- a/src/components/media/media.spec.js +++ b/src/components/media/media.spec.js @@ -5,7 +5,7 @@ describe('media', () => { it('has expected default structure', async () => { const wrapper = mount(Media) - expect(wrapper.is('div')).tobe(true) + expect(wrapper.is('div')).toBe(true) expect(wrapper.classes()).toContain('media') expect(wrapper.classes().length).toBe(1) expect(wrapper.findAll('.media-body').length).toBe(1) @@ -27,7 +27,7 @@ describe('media', () => { } }) - expect(wrapper.is('section')).tobe(true) + expect(wrapper.is('section')).toBe(true) expect(wrapper.classes()).toContain('media') expect(wrapper.classes().length).toBe(1) }) @@ -39,7 +39,7 @@ describe('media', () => { } }) - expect(wrapper.is('div')).tobe(true) + expect(wrapper.is('div')).toBe(true) expect(wrapper.classes()).toContain('media') expect(wrapper.classes().length).toBe(1) expect(wrapper.findAll('.media-body').length).toBe(1) @@ -61,7 +61,7 @@ describe('media', () => { } }) - expect(wrapper.is('div')).tobe(true) + expect(wrapper.is('div')).toBe(true) expect(wrapper.classes()).toContain('media') expect(wrapper.classes().length).toBe(1) expect(wrapper.findAll('.media-body').length).toBe(1) @@ -76,7 +76,7 @@ describe('media', () => { } }) - expect(wrapper.is('div')).tobe(true) + expect(wrapper.is('div')).toBe(true) expect(wrapper.classes()).toContain('media') expect(wrapper.classes().length).toBe(1) expect(wrapper.findAll('.media-body').length).toBe(0) @@ -95,7 +95,7 @@ describe('media', () => { } }) - expect(wrapper.is('div')).tobe(true) + expect(wrapper.is('div')).toBe(true) expect(wrapper.classes()).toContain('media') expect(wrapper.classes().length).toBe(1) expect(wrapper.findAll('.media-body').length).toBe(0) @@ -112,7 +112,7 @@ describe('media', () => { } }) - expect(wrapper.is('div')).tobe(true) + expect(wrapper.is('div')).toBe(true) expect(wrapper.classes()).toContain('media') expect(wrapper.classes().length).toBe(1) expect(wrapper.findAll('.media-body').length).toBe(1) From 0ec5abc846e6d5955e0363a64e1b6e5791a08af2 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 03:52:32 -0300 Subject: [PATCH 16/55] Update media.spec.js --- src/components/media/media.spec.js | 36 ++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 9 deletions(-) diff --git a/src/components/media/media.spec.js b/src/components/media/media.spec.js index 178a9ad8122..793c03d9555 100644 --- a/src/components/media/media.spec.js +++ b/src/components/media/media.spec.js @@ -11,13 +11,8 @@ describe('media', () => { expect(wrapper.findAll('.media-body').length).toBe(1) expect(wrapper.findAll('.d-flex').length).toBe(1) expect(wrapper.text()).toEqual('') - // Should have only two child elements - expect(wrapper.findAll('.media > *').length).toBe(2) - // Has expected child order - expect(wrapper.find('.media > .d-flex + .media-body').exists()).toBe(true) - expect(wrapper.find('.media > .media-body + .d-flex').exists()).toBe(false) - // Aside has extra classes - expect(wrapper.find('.d-flex').classes()).toContain('mr-3') + // Should have only one child element + expect(wrapper.findAll('.media > *').length).toBe(1) }) it('renders custom root element when tag prop set', async () => { @@ -32,10 +27,34 @@ describe('media', () => { expect(wrapper.classes().length).toBe(1) }) - it('has expected structure when prop right-align is set', async () => { + it('has expected structure when slot aside present', async () => { + const wrapper = mount(Media, { + slots: { + aside: 'foobar' + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('media') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.media-body').length).toBe(1) + expect(wrapper.findAll('.d-flex').length).toBe(1) + // Should have only two child elements + expect(wrapper.findAll('.media > *').length).toBe(2) + // Has expected child order + expect(wrapper.find('.media > .d-flex + .media-body').exists()).toBe(true) + expect(wrapper.find('.media > .media-body + .d-flex').exists()).toBe(false) + // Aside has extra classes + expect(wrapper.find('.d-flex').classes()).toContain('mr-3') + }) + + it('has expected structure when prop right-align is set and slot aside present', async () => { const wrapper = mount(Media, { propsData: { rightAlign: true + }, + slots: { + aside: 'foobar' } }) @@ -44,7 +63,6 @@ describe('media', () => { expect(wrapper.classes().length).toBe(1) expect(wrapper.findAll('.media-body').length).toBe(1) expect(wrapper.findAll('.d-flex').length).toBe(1) - expect(wrapper.text()).toEqual('') // Should have only two child elements expect(wrapper.findAll('.media > *').length).toBe(2) // Has expected child order From eda1dff8fed2bfb46a5a48f72d22febe8eadcf13 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 03:54:41 -0300 Subject: [PATCH 17/55] Update media.spec.js --- src/components/media/media.spec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/media/media.spec.js b/src/components/media/media.spec.js index 793c03d9555..7e5ca7c3898 100644 --- a/src/components/media/media.spec.js +++ b/src/components/media/media.spec.js @@ -9,7 +9,7 @@ describe('media', () => { expect(wrapper.classes()).toContain('media') expect(wrapper.classes().length).toBe(1) expect(wrapper.findAll('.media-body').length).toBe(1) - expect(wrapper.findAll('.d-flex').length).toBe(1) + expect(wrapper.findAll('.d-flex').length).toBe(0) expect(wrapper.text()).toEqual('') // Should have only one child element expect(wrapper.findAll('.media > *').length).toBe(1) @@ -139,8 +139,8 @@ describe('media', () => { // Should have only two child elements expect(wrapper.findAll('.media > *').length).toBe(2) // Should have media aside with self align bottom - expect(wrapper.find('d-flex').classes()).toContain('align-self-bottom') + expect(wrapper.find('.d-flex').classes()).toContain('align-self-bottom') // Should have content in aside - expect(wrapper.find('d-flex').text()).toEqual('foobar') + expect(wrapper.find('.d-flex').text()).toEqual('foobar') }) }) From 4d7dbc353fff2512f34c6fa9444288ed20d9858d Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 03:56:42 -0300 Subject: [PATCH 18/55] Update media.spec.js --- src/components/media/media.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/media/media.spec.js b/src/components/media/media.spec.js index 7e5ca7c3898..5dc493a0ade 100644 --- a/src/components/media/media.spec.js +++ b/src/components/media/media.spec.js @@ -123,7 +123,7 @@ describe('media', () => { it('sets vertialAlign prop on media-aside child', async () => { const wrapper = mount(Media, { propsData: { - vertialAlign: 'bottom' + verticalAlign: 'bottom' }, slots: { aside: 'foobar' From 91d8f04a282fa0d460ac29380eed79260c17f7d9 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 04:03:56 -0300 Subject: [PATCH 19/55] Create input-group-text.spec.js --- .../input-group/input-group-text.spec.js | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/components/input-group/input-group-text.spec.js diff --git a/src/components/input-group/input-group-text.spec.js b/src/components/input-group/input-group-text.spec.js new file mode 100644 index 00000000000..9f66c124376 --- /dev/null +++ b/src/components/input-group/input-group-text.spec.js @@ -0,0 +1,39 @@ +import InputGroupText from './input-group.text' +export { mount } from '@vue/test-utils' + +describe('input-group-text', () => { + it('has expected default structure', async () => { + const wrapper = mount(InputGroupText) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group-text') + expect(wrapper.classes().length()).toBe(1) + expect(wrapper.text()).toBe('') + }) + + it('has custom root element when prop tag set', async () => { + const wrapper = mount(InputGroupText, { + propsData: { + tag: 'span' + } + }) + + expect(wrapper.is('span')).toBe(true) + expect(wrapper.classes()).toContain('input-group-text') + expect(wrapper.classes().length()).toBe(1) + expect(wrapper.text()).toBe('') + }) + + it('renders content of default slot', async () => { + const wrapper = mount(InputGroupText, { + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group-text') + expect(wrapper.classes().length()).toBe(1) + expect(wrapper.text()).toBe('foobar') + }) +}) From eea0a21478036121488a907248ede80c2e1494fe Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 04:08:21 -0300 Subject: [PATCH 20/55] Update input-group-text.spec.js --- src/components/input-group/input-group-text.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/input-group/input-group-text.spec.js b/src/components/input-group/input-group-text.spec.js index 9f66c124376..dc0f986ec2b 100644 --- a/src/components/input-group/input-group-text.spec.js +++ b/src/components/input-group/input-group-text.spec.js @@ -1,5 +1,5 @@ import InputGroupText from './input-group.text' -export { mount } from '@vue/test-utils' +import { mount } from '@vue/test-utils' describe('input-group-text', () => { it('has expected default structure', async () => { From eb141ba77aed19589b0ad9a0f343f235fa6970ab Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 04:11:26 -0300 Subject: [PATCH 21/55] Update input-group-text.spec.js --- src/components/input-group/input-group-text.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/input-group/input-group-text.spec.js b/src/components/input-group/input-group-text.spec.js index dc0f986ec2b..8c5538c06b8 100644 --- a/src/components/input-group/input-group-text.spec.js +++ b/src/components/input-group/input-group-text.spec.js @@ -1,4 +1,4 @@ -import InputGroupText from './input-group.text' +import InputGroupText from './input-group-text' import { mount } from '@vue/test-utils' describe('input-group-text', () => { From 4168d5c389a14e2ec9fccffba3ca8b5cbf21c3ed Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 04:18:58 -0300 Subject: [PATCH 22/55] Update input-group-text.spec.js --- src/components/input-group/input-group-text.spec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/input-group/input-group-text.spec.js b/src/components/input-group/input-group-text.spec.js index 8c5538c06b8..d629e326d9e 100644 --- a/src/components/input-group/input-group-text.spec.js +++ b/src/components/input-group/input-group-text.spec.js @@ -7,7 +7,7 @@ describe('input-group-text', () => { expect(wrapper.is('div')).toBe(true) expect(wrapper.classes()).toContain('input-group-text') - expect(wrapper.classes().length()).toBe(1) + expect(wrapper.classes().length).toBe(1) expect(wrapper.text()).toBe('') }) @@ -20,7 +20,7 @@ describe('input-group-text', () => { expect(wrapper.is('span')).toBe(true) expect(wrapper.classes()).toContain('input-group-text') - expect(wrapper.classes().length()).toBe(1) + expect(wrapper.classes().length).toBe(1) expect(wrapper.text()).toBe('') }) @@ -33,7 +33,7 @@ describe('input-group-text', () => { expect(wrapper.is('div')).toBe(true) expect(wrapper.classes()).toContain('input-group-text') - expect(wrapper.classes().length()).toBe(1) + expect(wrapper.classes().length).toBe(1) expect(wrapper.text()).toBe('foobar') }) }) From 180145f195799608e4ec2b4697d814bc26fcdd31 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 04:20:16 -0300 Subject: [PATCH 23/55] Create input-group-append.spec.js --- .../input-group/input-group-append.spec.js | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 src/components/input-group/input-group-append.spec.js diff --git a/src/components/input-group/input-group-append.spec.js b/src/components/input-group/input-group-append.spec.js new file mode 100644 index 00000000000..31149e5e25d --- /dev/null +++ b/src/components/input-group/input-group-append.spec.js @@ -0,0 +1,74 @@ +import InputGroupAppend from './input-group-append' +import { mount } from '@vue/test-utils' + +describe('input-group-append', () => { + it('has expected default structure', async () => { + const wrapper = mount(InputGroupAppend) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group-append') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.input-group-append > *').length).toBe(0) + expect(wrapper.text()).toEqual('') + }) + + it('renders custom root element when tag prop is set', async () => { + const wrapper = mount(InputGroupAppend, { + propsData: { + tag: 'span' + } + }) + + expect(wrapper.is('span')).toBe(true) + expect(wrapper.classes()).toContain('input-group-append') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.input-group-append > *').length).toBe(0) + expect(wrapper.text()).toEqual('') + }) + + it('renders content of default slot', async () => { + const wrapper = mount(InputGroupAppend, { + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group-append') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('foobar') + }) + + it('renders child input-group-text when prop is-text set', async () => { + const wrapper = mount(InputGroupAppend, { + propsData: { + isText: true + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group-append') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.input-group-text').length).toBe(1) + expect(wrapper.findAll('.input-group-append > .input-group-text').length).toBe(1) + expect(wrapper.text()).toEqual('') + }) + + it('renders default slot inside child input-group-text when prop is-text set', async () => { + const wrapper = mount(InputGroupAppend, { + propsData: { + isText: true + }, + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group-append') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.input-group-text').length).toBe(1) + expect(wrapper.text()).toEqual('foobar') + expect(wrapper.find('.input-group-text').text()).toEqual('foobar') + }) +}) From 1c0d09eeded7bcff40fa663552bf545132024e19 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 04:22:49 -0300 Subject: [PATCH 24/55] Create input-group-prepend.spec.js --- .../input-group/input-group-prepend.spec.js | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 src/components/input-group/input-group-prepend.spec.js diff --git a/src/components/input-group/input-group-prepend.spec.js b/src/components/input-group/input-group-prepend.spec.js new file mode 100644 index 00000000000..fae9617b342 --- /dev/null +++ b/src/components/input-group/input-group-prepend.spec.js @@ -0,0 +1,74 @@ +import InputGroupPrepend from './input-group-prepend' +import { mount } from '@vue/test-utils' + +describe('input-group-prepend', () => { + it('has expected default structure', async () => { + const wrapper = mount(InputGroupPrepend) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group-prepend') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.input-group-prepend > *').length).toBe(0) + expect(wrapper.text()).toEqual('') + }) + + it('renders custom root element when tag prop is set', async () => { + const wrapper = mount(InputGroupPrepend, { + propsData: { + tag: 'span' + } + }) + + expect(wrapper.is('span')).toBe(true) + expect(wrapper.classes()).toContain('input-group-prepend') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.input-group-prepend > *').length).toBe(0) + expect(wrapper.text()).toEqual('') + }) + + it('renders content of default slot', async () => { + const wrapper = mount(InputGroupPrepend, { + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group-prepend') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('foobar') + }) + + it('renders child input-group-text when prop is-text set', async () => { + const wrapper = mount(InputGroupPrepend, { + propsData: { + isText: true + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group-prepend') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.input-group-text').length).toBe(1) + expect(wrapper.findAll('.input-group-prepend > .input-group-text').length).toBe(1) + expect(wrapper.text()).toEqual('') + }) + + it('renders default slot inside child input-group-text when prop is-text set', async () => { + const wrapper = mount(InputGroupPrepend, { + propsData: { + isText: true + }, + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group-prepend') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.input-group-text').length).toBe(1) + expect(wrapper.text()).toEqual('foobar') + expect(wrapper.find('.input-group-text').text()).toEqual('foobar') + }) +}) From feece917c7af2ac6eb9e3c6b0f522daf1513dd9f Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 04:39:41 -0300 Subject: [PATCH 25/55] Update input-group.spec.js --- .../input-group/input-group.spec.js | 244 +++++++----------- 1 file changed, 88 insertions(+), 156 deletions(-) diff --git a/src/components/input-group/input-group.spec.js b/src/components/input-group/input-group.spec.js index 77ef7fe727a..3d4ba42f6a2 100644 --- a/src/components/input-group/input-group.spec.js +++ b/src/components/input-group/input-group.spec.js @@ -1,170 +1,102 @@ -import { loadFixture, testVM } from '../../../tests/utils' +import Inputgroup from './input-group' +import { mount } from '@vue/test-utils' describe('input-group', () => { - beforeEach(loadFixture(__dirname, 'input-group')) - testVM() - - it("should have '.input-group' class on root element", async () => { - const { - app: { $refs } - } = window - - const refs = ['basic', 'components'] - - refs.forEach(ref => { - expect($refs[ref]).toHaveClass('input-group') - }) - }) - - it("should have role 'group' on root element", async () => { - const { - app: { $refs } - } = window - - const refs = ['basic', 'components'] - - refs.forEach(ref => { - expect($refs[ref].getAttribute('role')).toBe('group') + it('should have expected default structure', async () => { + const wrapper = mount(InputGroup) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.attributes('role')).toBeDefined() + expect(wrapper.attributes('role')).toEqual('group') + expect(wrapper.findAll('.input-group > *').length).toBe(0) + expect(wrapper.text()).toEqual('') + }) + + it('should render custom root element when prop tag is set', async () => { + const wrapper = mount(InputGroup, { + propsData: { + tag: 'span' + } }) - }) - it('basic should have `div.input-group-prepend` as first child', async () => { - const { - app: { $refs } - } = window - - const left = $refs.basic.children[0] - expect(left).toBeDefined() - expect(left).toHaveClass('input-group-prepend') + expect(wrapper.is('span')).toBe(true) + expect(wrapper.classes()).toContain('input-group') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.attributes('role')).toBeDefined() + expect(wrapper.attributes('role')).toEqual('group') + expect(wrapper.findAll('.input-group > *').length).toBe(0) }) - it('basic should have content in left `.input-group-prepend`', async () => { - const { - app: { $refs } - } = window - - const left = $refs.basic.children[0] - expect(left).toBeDefined() - expect(left.textContent).toContain('$') - }) - - it('basic should have right `.input-group-append` as last child', async () => { - const { - app: { $refs } - } = window - - const right = $refs.basic.children[2] - expect(right).toBeDefined() - expect(right).toHaveClass('input-group-append') - }) - - it('basic should have content in `.input-group-append`', async () => { - const { - app: { $refs } - } = window - - const right = $refs.basic.children[2] - expect(right).toBeDefined() - expect(right.textContent).toContain('.00') - }) - - it('basic should have input as second child', async () => { - const { - app: { $refs } - } = window - - const input = $refs.basic.children[1] - expect(input).toBeDefined() - expect(input.tagName).toBe('INPUT') - }) - - it('components should have `.input-group-prepend` as first child', async () => { - const { - app: { $refs } - } = window - - const left = $refs.components.children[0] - expect(left).toBeDefined() - expect(left).toHaveClass('input-group-prepend') - }) - - it('components should have content in left `.input-group-prepend`', async () => { - const { - app: { $refs } - } = window - - const left = $refs.components.children[0] - expect(left).toBeDefined() - expect(left.textContent).toContain('$') - }) - - it('components should have right `.input-group-append` as last child', async () => { - const { - app: { $refs } - } = window - - const right = $refs.components.children[2] - expect(right).toBeDefined() - expect(right).toHaveClass('input-group-append') - }) - - it('components should have button in right `.input-group-append`', async () => { - const { - app: { $refs } - } = window - - const right = $refs.components.children[2] - expect(right).toBeDefined() - const button = right.children[0] - expect(button).toBeDefined() - expect(button.tagName).toBe('BUTTON') - }) - - it('components should have input as second child', async () => { - const { - app: { $refs } - } = window - - const input = $refs.components.children[1] - expect(input).toBeDefined() - expect(input.tagName).toBe('INPUT') - }) - - it("large should have '.input-group-lg' class on root element", async () => { - const { - app: { $refs } - } = window - - expect($refs.large).toHaveClass('input-group-lg') - }) - - it("small should have '.input-group-sm' class on root element", async () => { - const { - app: { $refs } - } = window + it('should apply size class when when prop size is set', async () => { + const wrapper = mount(InputGroup, { + propsData: { + size: 'lg' + } + }) - expect($refs.small).toHaveClass('input-group-sm') + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group') + expect(wrapper.classes()).toContain('input-group-lg') + expect(wrapper.classes().length).toBe(2) }) - it("tags should have root Element type of `fieldset'", async () => { - const { - app: { $refs } - } = window + it('should render default slot content', async () => { + const wrapper = mount(InputGroup, { + slots: { + default: 'foobar' + } + }) - const tags = $refs.tags - expect(tags).toBeDefined() - expect(tags.tagName).toBe('FIELDSET') - }) + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('foobar') + expect(wrapper.findAll('.input-group > *').length).toBe(0) + }) + + it('renders input-group-prepend & input-group-append when prepend & append props set', async () => { + const wrapper = mount(InputGroup, { + propsData: { + prepend: 'foo', + append: 'bar' + }, + slots: { + default: 'foobar' + } + }) - it("tags should have addon Element type of `span'", async () => { - const { - app: { $refs } - } = window + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('foobar') + expect(wrapper.findAll('.input-group > *').length).toBe(2) + expect(wrapper.findAll('.input-group-prepend').length).toBe(1) + expect(wrapper.findAll('.input-group-prepend > .input-group-text').length).toBe(1) + expect(wrapper.findAll('.input-group-append').length).toBe(1) + expect(wrapper.findAll('.input-group-append > .input-group-text').length).toBe(1) + expect(wrapper.find('.input-group > .input-group-prepend ~ .input-group-append').exists()).toBe(true) + }) + + it('renders input-group-prepend & input-group-append when prepend & append slots present', async () => { + const wrapper = mount(InputGroup, { + slots: { + default: 'foobar', + prepend: 'foo', + append: 'bar' + } + }) - const tags = $refs.tags - expect(tags).toBeDefined() - const left = tags.children[0] - expect(left).toBeDefined() - expect(left.tagName).toBe('SPAN') + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('input-group') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('foobar') + expect(wrapper.findAll('.input-group > *').length).toBe(2) + expect(wrapper.findAll('.input-group-prepend').length).toBe(1) + expect(wrapper.findAll('.input-group-prepend > .input-group-text').length).toBe(0) + expect(wrapper.findAll('.input-group-append').length).toBe(1) + expect(wrapper.findAll('.input-group-append > .input-group-text').length).toBe(0) + expect(wrapper.find('.input-group > .input-group-prepend ~ .input-group-append').exists()).toBe(true) }) }) From dd885519306841b5e6f176635907780d0eff7501 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 04:39:55 -0300 Subject: [PATCH 26/55] Delete input-group.html --- .../input-group/fixtures/input-group.html | 20 ------------------- 1 file changed, 20 deletions(-) delete mode 100644 src/components/input-group/fixtures/input-group.html diff --git a/src/components/input-group/fixtures/input-group.html b/src/components/input-group/fixtures/input-group.html deleted file mode 100644 index 067f0be0611..00000000000 --- a/src/components/input-group/fixtures/input-group.html +++ /dev/null @@ -1,20 +0,0 @@ -
- - - - - - $ - - AA - - - - - - - - $ - - -
From 276d0391c55fb5454fb5b55d79619c6333217a9c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 04:40:03 -0300 Subject: [PATCH 27/55] Delete input-group.js --- src/components/input-group/fixtures/input-group.js | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/components/input-group/fixtures/input-group.js diff --git a/src/components/input-group/fixtures/input-group.js b/src/components/input-group/fixtures/input-group.js deleted file mode 100644 index 0bae7b95202..00000000000 --- a/src/components/input-group/fixtures/input-group.js +++ /dev/null @@ -1,3 +0,0 @@ -window.app = new Vue({ - el: '#app' -}) From 3182a369e8ea476c5355d0e4ffa1ad038656dd49 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 04:42:12 -0300 Subject: [PATCH 28/55] Update input-group.spec.js --- src/components/input-group/input-group.spec.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/input-group/input-group.spec.js b/src/components/input-group/input-group.spec.js index 3d4ba42f6a2..47483ede0c6 100644 --- a/src/components/input-group/input-group.spec.js +++ b/src/components/input-group/input-group.spec.js @@ -1,4 +1,4 @@ -import Inputgroup from './input-group' +import InputGroup from './input-group' import { mount } from '@vue/test-utils' describe('input-group', () => { @@ -76,7 +76,9 @@ describe('input-group', () => { expect(wrapper.findAll('.input-group-prepend > .input-group-text').length).toBe(1) expect(wrapper.findAll('.input-group-append').length).toBe(1) expect(wrapper.findAll('.input-group-append > .input-group-text').length).toBe(1) - expect(wrapper.find('.input-group > .input-group-prepend ~ .input-group-append').exists()).toBe(true) + expect(wrapper.find('.input-group > .input-group-prepend ~ .input-group-append').exists()).toBe( + true + ) }) it('renders input-group-prepend & input-group-append when prepend & append slots present', async () => { @@ -97,6 +99,8 @@ describe('input-group', () => { expect(wrapper.findAll('.input-group-prepend > .input-group-text').length).toBe(0) expect(wrapper.findAll('.input-group-append').length).toBe(1) expect(wrapper.findAll('.input-group-append > .input-group-text').length).toBe(0) - expect(wrapper.find('.input-group > .input-group-prepend ~ .input-group-append').exists()).toBe(true) + expect(wrapper.find('.input-group > .input-group-prepend ~ .input-group-append').exists()).toBe( + true + ) }) }) From de768e5a850105f47d890ca7ec7802e6a7d44ba1 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 04:46:31 -0300 Subject: [PATCH 29/55] Update input-group.spec.js --- src/components/input-group/input-group.spec.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/input-group/input-group.spec.js b/src/components/input-group/input-group.spec.js index 47483ede0c6..9a0626f92f5 100644 --- a/src/components/input-group/input-group.spec.js +++ b/src/components/input-group/input-group.spec.js @@ -70,12 +70,14 @@ describe('input-group', () => { expect(wrapper.is('div')).toBe(true) expect(wrapper.classes()).toContain('input-group') expect(wrapper.classes().length).toBe(1) - expect(wrapper.text()).toEqual('foobar') + expect(wrapper.text()).toEqual('foofoobarbar') expect(wrapper.findAll('.input-group > *').length).toBe(2) expect(wrapper.findAll('.input-group-prepend').length).toBe(1) expect(wrapper.findAll('.input-group-prepend > .input-group-text').length).toBe(1) + expect(wrapper.find('.input-group-prepend').text()).toBe('foo') expect(wrapper.findAll('.input-group-append').length).toBe(1) expect(wrapper.findAll('.input-group-append > .input-group-text').length).toBe(1) + expect(wrapper.find('.input-group-append').text()).toBe('bar') expect(wrapper.find('.input-group > .input-group-prepend ~ .input-group-append').exists()).toBe( true ) @@ -93,12 +95,14 @@ describe('input-group', () => { expect(wrapper.is('div')).toBe(true) expect(wrapper.classes()).toContain('input-group') expect(wrapper.classes().length).toBe(1) - expect(wrapper.text()).toEqual('foobar') + expect(wrapper.text()).toEqual('foofobarbar') expect(wrapper.findAll('.input-group > *').length).toBe(2) expect(wrapper.findAll('.input-group-prepend').length).toBe(1) expect(wrapper.findAll('.input-group-prepend > .input-group-text').length).toBe(0) + expect(wrapper.find('.input-group-prepend').text()).toBe('foo') expect(wrapper.findAll('.input-group-append').length).toBe(1) expect(wrapper.findAll('.input-group-append > .input-group-text').length).toBe(0) + expect(wrapper.find('.input-group-append').text()).toBe('bar') expect(wrapper.find('.input-group > .input-group-prepend ~ .input-group-append').exists()).toBe( true ) From 6d8467272391a3ab8107fc30f9d46e61d77db85e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 04:51:27 -0300 Subject: [PATCH 30/55] Update input-group.spec.js --- src/components/input-group/input-group.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/input-group/input-group.spec.js b/src/components/input-group/input-group.spec.js index 9a0626f92f5..9cb78088bda 100644 --- a/src/components/input-group/input-group.spec.js +++ b/src/components/input-group/input-group.spec.js @@ -95,7 +95,7 @@ describe('input-group', () => { expect(wrapper.is('div')).toBe(true) expect(wrapper.classes()).toContain('input-group') expect(wrapper.classes().length).toBe(1) - expect(wrapper.text()).toEqual('foofobarbar') + expect(wrapper.text()).toEqual('foofoobarbar') expect(wrapper.findAll('.input-group > *').length).toBe(2) expect(wrapper.findAll('.input-group-prepend').length).toBe(1) expect(wrapper.findAll('.input-group-prepend > .input-group-text').length).toBe(0) From 2322129dd8af492c2a92c39f3f14237f04192459 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 04:59:50 -0300 Subject: [PATCH 31/55] Update container.spec.js --- src/components/layout/container.spec.js | 134 +++++++++--------------- 1 file changed, 48 insertions(+), 86 deletions(-) diff --git a/src/components/layout/container.spec.js b/src/components/layout/container.spec.js index 634cd3b1560..f64c71e3ece 100644 --- a/src/components/layout/container.spec.js +++ b/src/components/layout/container.spec.js @@ -1,90 +1,52 @@ -import { loadFixture, testVM } from '../../../tests/utils' +import Container from './container' +import { mount } from '@/test-utils' describe('container', () => { - beforeEach(loadFixture(__dirname, 'container')) - testVM() - - it('default should contain default class', async () => { - const { - app: { $refs } - } = window - expect($refs.default).toHaveClass('container') - }) - - it('default should not contain fluid class', async () => { - const { - app: { $refs } - } = window - expect($refs.default).not.toHaveClass('container-fluid') - }) - - it('custom should contain default class', async () => { - const { - app: { $refs } - } = window - expect($refs.custom).toHaveClass('container') - }) - - it('custom should not contain fluid class', async () => { - const { - app: { $refs } - } = window - expect($refs.custom).not.toHaveClass('container-fluid') - }) - - it('fluid should not contain default class', async () => { - const { - app: { $refs } - } = window - expect($refs.fluid).not.toHaveClass('container') - }) - - it('fluid should contain fluid class', async () => { - const { - app: { $refs } - } = window - expect($refs.fluid).toHaveClass('container-fluid') - }) - - it('default should have content', async () => { - const { - app: { $refs } - } = window - expect($refs.default.textContent).toContain('default') - }) - - it('custom should have content', async () => { - const { - app: { $refs } - } = window - expect($refs.custom.textContent).toContain('custom') - }) - - it('fluid should have content', async () => { - const { - app: { $refs } - } = window - expect($refs.fluid.textContent).toContain('fluid') - }) - - it('default should have tag div', async () => { - const { - app: { $refs } - } = window - expect($refs.default).toBeElement('div') - }) - - it('custom should have tag p', async () => { - const { - app: { $refs } - } = window - expect($refs.custom).toBeElement('p') - }) - - it('fluid should have tag div', async () => { - const { - app: { $refs } - } = window - expect($refs.fluid).toBeElement('div') + it('should have expected default structure', async () => { + const wrapper = mount(Container) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('container') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('') + }) + + it('renders custom root element when prop tag set', async () => { + const wrapper = mount(Container, { + propsData: { + tag: 'section' + } + }) + + expect(wrapper.is('section')).toBe(true) + expect(wrapper.classes()).toContain('container') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('') + }) + + it('should have container-fluid class when prop fluid set', async () => { + const wrapper = mount(Container, { + propsData: { + fluid: true + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('container-fluid') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('') + }) + + it('has content from default slot', async () => { + const wrapper = mount(Container, { + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('container') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('foobar') }) }) From c3cec8738937c115dea2cf54f3912cc5bd963573 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 05:02:49 -0300 Subject: [PATCH 32/55] Update container.spec.js --- src/components/layout/container.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/container.spec.js b/src/components/layout/container.spec.js index f64c71e3ece..03df34ecc96 100644 --- a/src/components/layout/container.spec.js +++ b/src/components/layout/container.spec.js @@ -1,5 +1,5 @@ import Container from './container' -import { mount } from '@/test-utils' +import { mount } from '@vue/test-utils' describe('container', () => { it('should have expected default structure', async () => { From 9bebf32ca1c16ed266dbe166f7ca18cdac10d294 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 05:13:00 -0300 Subject: [PATCH 33/55] Update row.spec.js --- src/components/layout/row.spec.js | 143 +++++++++++++++--------------- 1 file changed, 70 insertions(+), 73 deletions(-) diff --git a/src/components/layout/row.spec.js b/src/components/layout/row.spec.js index 6645c6362ec..444bbae4c90 100644 --- a/src/components/layout/row.spec.js +++ b/src/components/layout/row.spec.js @@ -1,94 +1,91 @@ -import { loadFixture, testVM } from '../../../tests/utils' +import Row from './row' +import { mount } from '@vue/test-utils' -describe('form-row', () => { - beforeEach(loadFixture(__dirname, 'row')) - testVM() +describe('row', () => { + it('has expected default structure', async () => { + const wrapper = mount(Row) - it('default should contain base class', async () => { - const { - app: { $refs } - } = window - expect($refs.default).toHaveClass('row') + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('row') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('') }) - it('custom should contain base class', async () => { - const { - app: { $refs } - } = window - expect($refs.custom).toHaveClass('row') - }) + it('renders custom root element when prop tag is set', async () => { + const wrapper = mount(Row, { + propsData: { + tag: 'p' + } + }) - it('noGutters should contain classes', async () => { - const { - app: { $refs } - } = window - expect($refs.noGutters).toHaveClass('row') - expect($refs.noGutters).toHaveClass('no-gutters') + expect(wrapper.is('p')).toBe(true) + expect(wrapper.classes()).toContain('row') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('') }) - it('alignV should contain classes', async () => { - const { - app: { $refs } - } = window - expect($refs.alignV).toHaveClass('row') - expect($refs.alignV).toHaveClass('align-items-center') - }) + it('renders default slot content', async () => { + const wrapper = mount(Row, { + slots: { + default: 'foobar' + } + }) - it('alignH should contain classes', async () => { - const { - app: { $refs } - } = window - expect($refs.alignH).toHaveClass('row') - expect($refs.alignH).toHaveClass('justify-content-center') + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('row') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('foobar') }) - it('alignContent should contain classes', async () => { - const { - app: { $refs } - } = window - expect($refs.alignContent).toHaveClass('row') - expect($refs.alignContent).toHaveClass('align-content-center') - }) + it('has class no-guttens when prop no-gutters is set', async () => { + const wrapper = mount(Row, { + propsData: { + noGutters: true + } + }) - it('default should have content', async () => { - const { - app: { $refs } - } = window - expect($refs.default.textContent).toContain('default') + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('row') + expect(wrapper.classes()).toContain('no-gutters') + expect(wrapper.classes().length).toBe(2) }) - it('custom should have content', async () => { - const { - app: { $refs } - } = window - expect($refs.custom.textContent).toContain('custom') - }) + it('has vertial align class when prop align-v is set', async () => { + const wrapper = mount(Row, { + propsData: { + alignV: 'bottom' + } + }) - it('noGutters should have content', async () => { - const { - app: { $refs } - } = window - expect($refs.noGutters.textContent).toContain('no gutters') + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('row') + expect(wrapper.classes()).toContain('align-items-bottom') + expect(wrapper.classes().length).toBe(2) }) - it('default should have tag div', async () => { - const { - app: { $refs } - } = window - expect($refs.default).toBeElement('div') - }) + it('has horizontal align class when prop align-h is set', async () => { + const wrapper = mount(Row, { + propsData: { + alignH: 'center' + } + }) - it('custom should have tag p', async () => { - const { - app: { $refs } - } = window - expect($refs.custom).toBeElement('p') + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('row') + expect(wrapper.classes()).toContain('justify-content-center') + expect(wrapper.classes().length).toBe(2) }) - it('noGutters should have tag div', async () => { - const { - app: { $refs } - } = window - expect($refs.noGutters).toBeElement('div') + it('has content align class when prop align-content is set', async () => { + const wrapper = mount(Row, { + propsData: { + alignContent: 'stretch' + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('row') + expect(wrapper.classes()).toContain('align-content-stretch') + expect(wrapper.classes().length).toBe(2) }) }) From c3a154fcc45566d88547cf703108b7f3baad77eb Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 05:18:41 -0300 Subject: [PATCH 34/55] Create form-row.spec.js --- src/components/layout/form-row.spec.js | 39 ++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/components/layout/form-row.spec.js diff --git a/src/components/layout/form-row.spec.js b/src/components/layout/form-row.spec.js new file mode 100644 index 00000000000..995fe29112f --- /dev/null +++ b/src/components/layout/form-row.spec.js @@ -0,0 +1,39 @@ +import FormRow from './form-row' +import { mount } from '2vue/test-utils' + +describe('layout > form-row', () => { + it('has expected default structure', aysnc () => { + const wrapper = mount(FormRow) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('form-row') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('') + }) + + it('custom root element when prop tag set', aysnc () => { + const wrapper = mount(FormRow, { + propsData: { + tag: 'span' + } + }) + + expect(wrapper.is('span')).toBe(true) + expect(wrapper.classes()).toContain('form-row') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('') + }) + + it('renders default slot content', aysnc () => { + const wrapper = mount(FormRow, { + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('form-row') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.text()).toEqual('foobar') + }) +}) From ccf18e75341029cb9e79eb7cb1c08d571564e2f9 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 05:19:02 -0300 Subject: [PATCH 35/55] Update container.spec.js --- src/components/layout/container.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/container.spec.js b/src/components/layout/container.spec.js index 03df34ecc96..9c8b5c4329a 100644 --- a/src/components/layout/container.spec.js +++ b/src/components/layout/container.spec.js @@ -1,7 +1,7 @@ import Container from './container' import { mount } from '@vue/test-utils' -describe('container', () => { +describe('layout > container', () => { it('should have expected default structure', async () => { const wrapper = mount(Container) From 3753d63635130e161a520b54576c76fd5bb27b7a Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 05:19:26 -0300 Subject: [PATCH 36/55] Update row.spec.js --- src/components/layout/row.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/row.spec.js b/src/components/layout/row.spec.js index 444bbae4c90..0ad09254e53 100644 --- a/src/components/layout/row.spec.js +++ b/src/components/layout/row.spec.js @@ -1,7 +1,7 @@ import Row from './row' import { mount } from '@vue/test-utils' -describe('row', () => { +describe('layout > row', () => { it('has expected default structure', async () => { const wrapper = mount(Row) From 0b17b0ab73621de62aa6ea2b1d041bee81333fcd Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 05:20:21 -0300 Subject: [PATCH 37/55] Update list-group-item.spec.js --- src/components/list-group/list-group-item.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/list-group/list-group-item.spec.js b/src/components/list-group/list-group-item.spec.js index 0d119072a32..60b09ddc43f 100644 --- a/src/components/list-group/list-group-item.spec.js +++ b/src/components/list-group/list-group-item.spec.js @@ -1,7 +1,7 @@ import ListGroupItem from './list-group-item' import { mount } from '@vue/test-utils' -describe('list-group-item', () => { +describe('list-group > list-group-item', () => { it('default should have tag div', async () => { const wrapper = mount(ListGroupItem) expect(wrapper.is('div')).toBe(true) From 5f296c336cb4c04349600016a7bcf8fd720f7e2b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 05:21:01 -0300 Subject: [PATCH 38/55] Update input-group-append.spec.js --- src/components/input-group/input-group-append.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/input-group/input-group-append.spec.js b/src/components/input-group/input-group-append.spec.js index 31149e5e25d..d580e540f1a 100644 --- a/src/components/input-group/input-group-append.spec.js +++ b/src/components/input-group/input-group-append.spec.js @@ -1,7 +1,7 @@ import InputGroupAppend from './input-group-append' import { mount } from '@vue/test-utils' -describe('input-group-append', () => { +describe('input-group > input-group-append', () => { it('has expected default structure', async () => { const wrapper = mount(InputGroupAppend) From ebf5a6519ab32016bcf454e5f94edce3d1798752 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 05:21:19 -0300 Subject: [PATCH 39/55] Update input-group-prepend.spec.js --- src/components/input-group/input-group-prepend.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/input-group/input-group-prepend.spec.js b/src/components/input-group/input-group-prepend.spec.js index fae9617b342..28ed7483859 100644 --- a/src/components/input-group/input-group-prepend.spec.js +++ b/src/components/input-group/input-group-prepend.spec.js @@ -1,7 +1,7 @@ import InputGroupPrepend from './input-group-prepend' import { mount } from '@vue/test-utils' -describe('input-group-prepend', () => { +describe('input-group > input-group-prepend', () => { it('has expected default structure', async () => { const wrapper = mount(InputGroupPrepend) From 9b3a80c70cdb04e3cec5c65fe386779f63bea320 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 05:21:38 -0300 Subject: [PATCH 40/55] Update input-group-text.spec.js --- src/components/input-group/input-group-text.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/input-group/input-group-text.spec.js b/src/components/input-group/input-group-text.spec.js index d629e326d9e..d8eec1415f6 100644 --- a/src/components/input-group/input-group-text.spec.js +++ b/src/components/input-group/input-group-text.spec.js @@ -1,7 +1,7 @@ import InputGroupText from './input-group-text' import { mount } from '@vue/test-utils' -describe('input-group-text', () => { +describe('input-group > input-group-text', () => { it('has expected default structure', async () => { const wrapper = mount(InputGroupText) From a24080c25eeb7d65aa1bac951f63ab2ca3c0fa98 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 05:23:18 -0300 Subject: [PATCH 41/55] Update form-row.spec.js --- src/components/layout/form-row.spec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/layout/form-row.spec.js b/src/components/layout/form-row.spec.js index 995fe29112f..a72d3c4d3f2 100644 --- a/src/components/layout/form-row.spec.js +++ b/src/components/layout/form-row.spec.js @@ -2,7 +2,7 @@ import FormRow from './form-row' import { mount } from '2vue/test-utils' describe('layout > form-row', () => { - it('has expected default structure', aysnc () => { + it('has expected default structure', async () => { const wrapper = mount(FormRow) expect(wrapper.is('div')).toBe(true) @@ -11,7 +11,7 @@ describe('layout > form-row', () => { expect(wrapper.text()).toEqual('') }) - it('custom root element when prop tag set', aysnc () => { + it('custom root element when prop tag set', async () => { const wrapper = mount(FormRow, { propsData: { tag: 'span' @@ -24,7 +24,7 @@ describe('layout > form-row', () => { expect(wrapper.text()).toEqual('') }) - it('renders default slot content', aysnc () => { + it('renders default slot content', async () => { const wrapper = mount(FormRow, { slots: { default: 'foobar' From 023f1fe5ec2f6c9626d9f5b0998a3c74e43b73aa Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 05:28:16 -0300 Subject: [PATCH 42/55] Update row.spec.js --- src/components/layout/row.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/layout/row.spec.js b/src/components/layout/row.spec.js index 0ad09254e53..762c5ec2922 100644 --- a/src/components/layout/row.spec.js +++ b/src/components/layout/row.spec.js @@ -53,13 +53,13 @@ describe('layout > row', () => { it('has vertial align class when prop align-v is set', async () => { const wrapper = mount(Row, { propsData: { - alignV: 'bottom' + alignV: 'baseline' } }) expect(wrapper.is('div')).toBe(true) expect(wrapper.classes()).toContain('row') - expect(wrapper.classes()).toContain('align-items-bottom') + expect(wrapper.classes()).toContain('align-items-baseline') expect(wrapper.classes().length).toBe(2) }) From 8f6e92a4f93e40e8bcb4035d301f9af6fb591798 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 05:28:48 -0300 Subject: [PATCH 43/55] Update form-row.spec.js --- src/components/layout/form-row.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/form-row.spec.js b/src/components/layout/form-row.spec.js index a72d3c4d3f2..ac8b3674110 100644 --- a/src/components/layout/form-row.spec.js +++ b/src/components/layout/form-row.spec.js @@ -1,5 +1,5 @@ import FormRow from './form-row' -import { mount } from '2vue/test-utils' +import { mount } from '@vue/test-utils' describe('layout > form-row', () => { it('has expected default structure', async () => { From 9788e93eb1ee561d429f056a4bfc4d6fe90f7f55 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 05:30:33 -0300 Subject: [PATCH 44/55] Update col.spec.js --- src/components/layout/col.spec.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/layout/col.spec.js b/src/components/layout/col.spec.js index ff06eb6e656..468622e9f53 100644 --- a/src/components/layout/col.spec.js +++ b/src/components/layout/col.spec.js @@ -1,6 +1,5 @@ import { loadFixture, testVM } from '../../../tests/utils' -// TODO: Export function from col.js function computeBkPtClass(type, breakpoint, val) { let className = type if (val === false || val === null || val === undefined) { @@ -18,7 +17,7 @@ function computeBkPtClass(type, breakpoint, val) { return className.toLowerCase() } -describe('col', () => { +describe('layout > col', () => { beforeEach(loadFixture(__dirname, 'col')) testVM() From e4ef5db2ef30fe62ddd228110ae33d09c5407c57 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 15:01:01 -0300 Subject: [PATCH 45/55] Update col.spec.js --- src/components/layout/col.spec.js | 202 +++++++++++++++++++----------- 1 file changed, 129 insertions(+), 73 deletions(-) diff --git a/src/components/layout/col.spec.js b/src/components/layout/col.spec.js index 468622e9f53..ca6575d775b 100644 --- a/src/components/layout/col.spec.js +++ b/src/components/layout/col.spec.js @@ -1,71 +1,147 @@ -import { loadFixture, testVM } from '../../../tests/utils' - -function computeBkPtClass(type, breakpoint, val) { - let className = type - if (val === false || val === null || val === undefined) { - return undefined - } - if (breakpoint) { - className += `-${breakpoint}` - } - if (type === 'col' && (val === '' || val === true)) { - // .col-md - return className.toLowerCase() - } - // .order-md-6 - className += `-${val}` - return className.toLowerCase() -} +import Col from './col' +import { mount } from '@vue/test-utils' describe('layout > col', () => { - beforeEach(loadFixture(__dirname, 'col')) - testVM() + it('should have default expected structure', async () => { + const wrapper = mount(Col) - it("should apply '.col' when no props passed", async () => { - const { $refs } = window.app - expect($refs.basic).toHaveClass('col') + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('col') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.col > *').length).toBe(0) + expect(wrapper.text()).toEqual('') }) - it("should apply '.col-*' class with 'cols' prop", async () => { - const { $refs } = window.app - $refs.cols.forEach((vnode, i) => { - const size = i + 1 - expect(vnode).toHaveClass(`col-${size}`) - expect(vnode).not.toHaveClass('col') + it('renders custom root element when tag prop set', async () => { + const wrapper = mount(Col, { + propsData: { + tag: 'span' + } }) + + expect(wrapper.is('span')).toBe(true) + expect(wrapper.classes()).toContain('col') + expect(wrapper.classes().length).toBe(1) + expect(wrapper.findAll('.col > *').length).toBe(0) + expect(wrapper.text()).toEqual('') + }) + + it('should apply breakpoint specific col-{bp}-{#} classes', async () => { + const wrapper = mount(Col, { + propsData: { + cols: 6, + sm: 5, + md: 4, + lg: 3, + xl: 2 + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('col-6') + expect(wrapper.classes()).toContain('col-sm-5') + expect(wrapper.classes()).toContain('col-md-4') + expect(wrapper.classes()).toContain('col-lg-3') + expect(wrapper.classes()).toContain('col-xl-2') + expect(wrapper.classes().length).toBe(5) + }) + + it('should apply ".offset-*" classes with "offset-{bp}-{#}" props', async () => { + const wrapper = mount(Col, { + propsData: { + offset: 6, + offsetSm: 5, + offsetMd: 4, + offsetLg: 3, + offsetXl: 2 + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('col') + expect(wrapper.classes()).toContain('offset-6') + expect(wrapper.classes()).toContain('offset-sm-5') + expect(wrapper.classes()).toContain('offset-md-4') + expect(wrapper.classes()).toContain('offset-lg-3') + expect(wrapper.classes()).toContain('offset-xl-2') + expect(wrapper.classes().length).toBe(6) + }) + + it('should apply ".order-*" classes with "order-{bp}-{#}" props', async () => { + const wrapper = mount(Col, { + propsData: { + order: 6, + orderSm: 5, + orderMd: 4, + orderLg: 3, + orderXl: 2 + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('col') + expect(wrapper.classes()).toContain('order-6') + expect(wrapper.classes()).toContain('order-sm-5') + expect(wrapper.classes()).toContain('order-md-4') + expect(wrapper.classes()).toContain('order-lg-3') + expect(wrapper.classes()).toContain('order-xl-2') + expect(wrapper.classes().length).toBe(6) }) - it("should apply '.offset-*' class with 'offset' prop", async () => { - const { $refs } = window.app - $refs.offset.forEach((vnode, i) => { - const size = i + 1 - expect(vnode).toHaveClass(`offset-${size}`) + it("should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop", async () => { + const wrapper = mount(Col, { + propsData: { + col: true, + sm: true, + md: true, + lg: true, + xl: true + } }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('col') + expect(wrapper.classes()).toContain('col-sm') + expect(wrapper.classes()).toContain('col-md') + expect(wrapper.classes()).toContain('col-lg') + expect(wrapper.classes()).toContain('col-xl') + expect(wrapper.classes().length).toBe(5) }) - it("should apply '.order-*' class with 'order' prop", async () => { - const { $refs } = window.app - $refs.order.forEach((vnode, i) => { - const size = i + 1 - expect(vnode).toHaveClass(`order-${size}`) + it("should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop set to empty string", async () => { + const wrapper = mount(Col, { + propsData: { + col: true, // col only accepts boolean + sm: '', + md: '', + lg: '', + xl: '' + } }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('col') + expect(wrapper.classes()).toContain('col-sm') + expect(wrapper.classes()).toContain('col-md') + expect(wrapper.classes()).toContain('col-lg') + expect(wrapper.classes()).toContain('col-xl') + expect(wrapper.classes().length).toBe(5) }) - it("should apply breakpoint classes for 'col', 'offset', 'order' props", async () => { - const { $refs } = window.app - for (const bkpt of ['sm', 'md', 'lg', 'xl']) { - $refs[`multi-${bkpt}`].forEach((vnode, i) => { - const size = i + 1 - expect(vnode).toHaveAllClasses([ - `col-${bkpt}-${size}`, - `offset-${bkpt}-${size}`, - `order-${bkpt}-${size}` - ]) - expect(vnode).not.toHaveClass('col') - }) - } + it('should apply ".align-self-*" class with "align-self" prop', async () => { + const wrapper = mount(Col, { + propsData: { + alignSelf: 'center' + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('col') + expect(wrapper.classes()).toContain('align-self-center') + expect(wrapper.classes().length).toBe(2) }) + /* it('computeBkPtClass helper should compute boolean classes', async () => { expect(computeBkPtClass('col', 'sm', true)).toBe('col-sm') expect(computeBkPtClass('col', 'md', true)).toBe('col-md') @@ -86,25 +162,5 @@ describe('layout > col', () => { expect(computeBkPtClass('col', 'lg', false)).toBe(undefined) expect(computeBkPtClass('col', 'xl', false)).toBe(undefined) }) - - it("should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop", async () => { - const { $refs } = window.app - ;['sm', 'md', 'lg', 'xl'].forEach((bkpt, idx) => { - // Shorthand binding - expect($refs[bkpt]).toHaveClass(`col-${bkpt}`) - // Dynamically bound using object literals { sm: true } - expect($refs[`boolean-breakpoints`][idx]).toHaveClass(`col-${bkpt}`) - expect($refs[`boolean-breakpoints`][idx]).not.toHaveClass('col') - }) - }) - - it("should apply 'tag'", async () => { - const { $refs } = window.app - expect($refs.tag).toBeElement('section') - }) - - it("should apply '.align-self-*' class with 'align-self' prop", async () => { - const { $refs } = window.app - expect($refs.alignSelf).toHaveClass('align-self-center') - }) + */ }) From a558a2e20d1a657aa71f7ca44cd6cc0fd6209a36 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 15:09:50 -0300 Subject: [PATCH 46/55] Update col.spec.js --- src/components/layout/col.spec.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/layout/col.spec.js b/src/components/layout/col.spec.js index ca6575d775b..69ce1ecf4ae 100644 --- a/src/components/layout/col.spec.js +++ b/src/components/layout/col.spec.js @@ -1,6 +1,20 @@ -import Col from './col' +import ColAsync from './col' import { mount } from '@vue/test-utils' +// Vue test utils doesnt currently support mounting Async Components +// So we have to resolve the component ourselves +// https://github.com/vuejs/vue-test-utils/issues/1012 +let Col +if (typeof ColAsync === 'function') { + // is async, so call resolve + ColAsync((cmp) => { + Col = cmp + }) +} else { + // Not async function + Col = ColAsync +} + describe('layout > col', () => { it('should have default expected structure', async () => { const wrapper = mount(Col) From 778256c5a7292b54d35cf971e7afcb9cfa94172b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 15:16:52 -0300 Subject: [PATCH 47/55] Update col.spec.js --- src/components/layout/col.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/col.spec.js b/src/components/layout/col.spec.js index 69ce1ecf4ae..336d8f63032 100644 --- a/src/components/layout/col.spec.js +++ b/src/components/layout/col.spec.js @@ -7,7 +7,7 @@ import { mount } from '@vue/test-utils' let Col if (typeof ColAsync === 'function') { // is async, so call resolve - ColAsync((cmp) => { + ColAsync(cmp => { Col = cmp }) } else { From f146a386368de9cef9183bb11f79fad7d5b281dd Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 15:28:47 -0300 Subject: [PATCH 48/55] Update col.js --- src/components/layout/col.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/layout/col.js b/src/components/layout/col.js index e3f5c1006da..4e4e403898c 100644 --- a/src/components/layout/col.js +++ b/src/components/layout/col.js @@ -136,9 +136,11 @@ export default (resolve, reject) => { } } + const hasColClasses = classList.some(className => /^col-/.test(className)) + classList.push({ - // Default to .col if no other classes generated nor `cols` specified. - col: props.col || (classList.length === 0 && !props.cols), + // Default to .col if no other col-{bp}-* classes generated nor `cols` specified. + col: props.col || (!hasColClasses && !props.cols), [`col-${props.cols}`]: props.cols, [`offset-${props.offset}`]: props.offset, [`order-${props.order}`]: props.order, From b9dd2e46fb8f1e479d165e556cf299dbec7513b5 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 15:37:43 -0300 Subject: [PATCH 49/55] Update col.spec.js --- src/components/layout/col.spec.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/layout/col.spec.js b/src/components/layout/col.spec.js index 336d8f63032..4352e5a0245 100644 --- a/src/components/layout/col.spec.js +++ b/src/components/layout/col.spec.js @@ -60,6 +60,18 @@ describe('layout > col', () => { expect(wrapper.classes().length).toBe(5) }) + it('should not have class "col" when only single breakpoint prop specified', async () => { + const wrapper = mount(Col, { + propsData: { + sm: 5 + } + }) + + expect(wrapper.is('div')).toBe(true) + expect(wrapper.classes()).toContain('col-sm-5') + expect(wrapper.classes().length).toBe(1) + }) + it('should apply ".offset-*" classes with "offset-{bp}-{#}" props', async () => { const wrapper = mount(Col, { propsData: { @@ -125,7 +137,6 @@ describe('layout > col', () => { it("should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop set to empty string", async () => { const wrapper = mount(Col, { propsData: { - col: true, // col only accepts boolean sm: '', md: '', lg: '', @@ -134,12 +145,11 @@ describe('layout > col', () => { }) expect(wrapper.is('div')).toBe(true) - expect(wrapper.classes()).toContain('col') expect(wrapper.classes()).toContain('col-sm') expect(wrapper.classes()).toContain('col-md') expect(wrapper.classes()).toContain('col-lg') expect(wrapper.classes()).toContain('col-xl') - expect(wrapper.classes().length).toBe(5) + expect(wrapper.classes().length).toBe(4) }) it('should apply ".align-self-*" class with "align-self" prop', async () => { From a7d016a23f7a2e2bdba350a5429f1f153c2d2b15 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 16:14:39 -0300 Subject: [PATCH 50/55] Delete row.html --- src/components/layout/fixtures/row.html | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 src/components/layout/fixtures/row.html diff --git a/src/components/layout/fixtures/row.html b/src/components/layout/fixtures/row.html deleted file mode 100644 index 38ca428db0e..00000000000 --- a/src/components/layout/fixtures/row.html +++ /dev/null @@ -1,14 +0,0 @@ -
- - default - - custom - - no gutters - - align v - - align h - - align content -
From e08117b9e7730c3440d65c5bbf43260d18d9e866 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 16:14:52 -0300 Subject: [PATCH 51/55] Delete container.html --- src/components/layout/fixtures/container.html | 10 ---------- 1 file changed, 10 deletions(-) delete mode 100644 src/components/layout/fixtures/container.html diff --git a/src/components/layout/fixtures/container.html b/src/components/layout/fixtures/container.html deleted file mode 100644 index ec6507aacf0..00000000000 --- a/src/components/layout/fixtures/container.html +++ /dev/null @@ -1,10 +0,0 @@ -
- - default -
- - custom -
- - fluid -
From e2dd45e1a5b55b991fb921b9b50048a9059c2f25 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 16:15:04 -0300 Subject: [PATCH 52/55] Delete col.html --- src/components/layout/fixtures/col.html | 42 ------------------------- 1 file changed, 42 deletions(-) delete mode 100644 src/components/layout/fixtures/col.html diff --git a/src/components/layout/fixtures/col.html b/src/components/layout/fixtures/col.html deleted file mode 100644 index ac1f900281f..00000000000 --- a/src/components/layout/fixtures/col.html +++ /dev/null @@ -1,42 +0,0 @@ -
-
-
- -

Hello Vue!

- - - - - - - - - -
- -
- - -
-
-
From 02af73bfa381cef5d9d5fcbd574ec9774ee5bb39 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 16:15:14 -0300 Subject: [PATCH 53/55] Delete col.js --- src/components/layout/fixtures/col.js | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 src/components/layout/fixtures/col.js diff --git a/src/components/layout/fixtures/col.js b/src/components/layout/fixtures/col.js deleted file mode 100644 index 630ab8a7ae4..00000000000 --- a/src/components/layout/fixtures/col.js +++ /dev/null @@ -1,13 +0,0 @@ -window.app = new Vue({ - el: '#app', - data: { - breakpoints: ['sm', 'md', 'lg', 'xl'], - breakpointObjs: [ - { sm: true, key: 'sm' }, - { md: true, key: 'md' }, - { lg: true, key: 'lg' }, - { xl: true, key: 'xl' } - ], - sizes: Array.from({ length: 12 }).map((_, i) => i + 1) - } -}) From 06b5e2e31d661d5dea4610e8d4b732cd5f36ab0d Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 16:15:24 -0300 Subject: [PATCH 54/55] Delete container.js --- src/components/layout/fixtures/container.js | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/components/layout/fixtures/container.js diff --git a/src/components/layout/fixtures/container.js b/src/components/layout/fixtures/container.js deleted file mode 100644 index 0bae7b95202..00000000000 --- a/src/components/layout/fixtures/container.js +++ /dev/null @@ -1,3 +0,0 @@ -window.app = new Vue({ - el: '#app' -}) From 8a5045ee844b4584aa39a292a56f1b16d506e61f Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 31 Mar 2019 16:15:35 -0300 Subject: [PATCH 55/55] Delete row.js --- src/components/layout/fixtures/row.js | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/components/layout/fixtures/row.js diff --git a/src/components/layout/fixtures/row.js b/src/components/layout/fixtures/row.js deleted file mode 100644 index 0bae7b95202..00000000000 --- a/src/components/layout/fixtures/row.js +++ /dev/null @@ -1,3 +0,0 @@ -window.app = new Vue({ - el: '#app' -})