diff --git a/src/components/alert/alert.spec.js b/src/components/alert/alert.spec.js index c21a5fd4b4e..5ff7c5da677 100644 --- a/src/components/alert/alert.spec.js +++ b/src/components/alert/alert.spec.js @@ -1,9 +1,9 @@ -import Alert from './alert' +import BAlert from './alert' import { mount } from '@vue/test-utils' describe('alert', () => { it('hidden alert renders comment node', async () => { - const wrapper = mount(Alert) + const wrapper = mount(BAlert) expect(wrapper.isVueInstance()).toBe(true) await wrapper.vm.$nextTick() expect(wrapper.isEmpty()).toBe(true) @@ -13,7 +13,7 @@ describe('alert', () => { }) it('hidden alert (show = "0") renders comment node', async () => { - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: '0' } @@ -27,7 +27,7 @@ describe('alert', () => { }) it('hidden alert (show = 0) renders comment node', async () => { - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: 0 } @@ -41,7 +41,7 @@ describe('alert', () => { }) it('visible alert has default class names and attributes', async () => { - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: true } @@ -65,7 +65,7 @@ describe('alert', () => { }) it('visible alert (show = "") has default class names and attributes', async () => { - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: '' } @@ -89,7 +89,7 @@ describe('alert', () => { }) it('visible alert has variant when prop variant is set', async () => { - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: true, variant: 'success' @@ -110,7 +110,7 @@ describe('alert', () => { }) it('renders content from default slot', async () => { - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: true }, @@ -130,7 +130,7 @@ describe('alert', () => { }) it('hidden alert shows when show prop set', async () => { - const wrapper = mount(Alert) + const wrapper = mount(BAlert) expect(wrapper.isVueInstance()).toBe(true) await wrapper.vm.$nextTick() @@ -151,7 +151,7 @@ describe('alert', () => { }) it('dismissible alert should have class alert-dismissible', async () => { - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: true, dismissible: true @@ -168,7 +168,7 @@ describe('alert', () => { }) it('dismissible alert should have close button', async () => { - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: true, dismissible: true @@ -185,7 +185,7 @@ describe('alert', () => { }) it('dismissible alert should have close button with custom aria-label', async () => { - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: true, dismissible: true, @@ -203,7 +203,7 @@ describe('alert', () => { }) it('dismiss button click should close alert', async () => { - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: true, dismissible: true @@ -234,13 +234,13 @@ describe('alert', () => { }) it('should have class fade when prop fade=true', async () => { - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: true, fade: true }, stubs: { - // the builtin stub doesn't execute the transition hooks + // The builtin stub doesn't execute the transition hooks // so we let it use the real transition component transition: false } @@ -259,13 +259,13 @@ describe('alert', () => { }) it('fade transition works', async () => { - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: false, fade: true }, stubs: { - // the builtin stub doesn't execute the transition hooks + // The builtin stub doesn't execute the transition hooks // so we let it use the real transition component transition: false } @@ -293,7 +293,7 @@ describe('alert', () => { await wrapper.vm.$nextTick() await new Promise(resolve => requestAnimationFrame(resolve)) - // dismissed wont be emitted unless dismissible=true or show is a number + // Dismissed won't be emitted unless dismissible=true or show is a number expect(wrapper.emitted('dismissed')).not.toBeDefined() expect(wrapper.isEmpty()).toBe(true) @@ -304,7 +304,7 @@ describe('alert', () => { it('dismiss countdown emits dismiss-count-down event', async () => { jest.useFakeTimers() - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: 3 } @@ -341,7 +341,7 @@ describe('alert', () => { it('dismiss countdown emits dismiss-count-down event when show is number as string', async () => { jest.useFakeTimers() - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: '3' } @@ -378,7 +378,7 @@ describe('alert', () => { it('dismiss countdown handles when show value is changed', async () => { jest.useFakeTimers() - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: 2 } @@ -430,7 +430,7 @@ describe('alert', () => { it('dismiss countdown handles when alert dismissed early', async () => { jest.useFakeTimers() - const wrapper = mount(Alert, { + const wrapper = mount(BAlert, { propsData: { show: 2, dismissible: true diff --git a/src/components/badge/badge.spec.js b/src/components/badge/badge.spec.js index df448a5140b..2094490572f 100644 --- a/src/components/badge/badge.spec.js +++ b/src/components/badge/badge.spec.js @@ -1,9 +1,9 @@ -import Badge from './badge' +import BBadge from './badge' import { mount } from '@vue/test-utils' describe('badge', () => { it('should have base classes', async () => { - const wrapper = mount(Badge) + const wrapper = mount(BBadge) expect(wrapper.is('span')).toBe(true) expect(wrapper.classes()).toContain('badge') expect(wrapper.classes()).toContain('badge-secondary') @@ -14,7 +14,7 @@ describe('badge', () => { }) it('should have default slot content', async () => { - const wrapper = mount(Badge, { + const wrapper = mount(BBadge, { slots: { default: 'foobar' } @@ -30,7 +30,7 @@ describe('badge', () => { }) it('should apply variant class', async () => { - const wrapper = mount(Badge, { + const wrapper = mount(BBadge, { propsData: { variant: 'danger' } @@ -44,7 +44,7 @@ describe('badge', () => { }) it('should apply pill class', async () => { - const wrapper = mount(Badge, { + const wrapper = mount(BBadge, { propsData: { pill: true } @@ -58,7 +58,7 @@ describe('badge', () => { }) it('should have active class when prop active set', async () => { - const wrapper = mount(Badge, { + const wrapper = mount(BBadge, { propsData: { active: true } @@ -72,7 +72,7 @@ describe('badge', () => { }) it('should have disabled class when prop disabled set', async () => { - const wrapper = mount(Badge, { + const wrapper = mount(BBadge, { propsData: { disabled: true } @@ -86,7 +86,7 @@ describe('badge', () => { }) it('renders custom root element', async () => { - const wrapper = mount(Badge, { + const wrapper = mount(BBadge, { propsData: { tag: 'small' } @@ -100,7 +100,7 @@ describe('badge', () => { }) it('renders link when href provided', async () => { - const wrapper = mount(Badge, { + const wrapper = mount(BBadge, { propsData: { href: '/foo/bar' } diff --git a/src/components/breadcrumb/breadcrumb-item.spec.js b/src/components/breadcrumb/breadcrumb-item.spec.js index f85a536fbca..e221623db78 100644 --- a/src/components/breadcrumb/breadcrumb-item.spec.js +++ b/src/components/breadcrumb/breadcrumb-item.spec.js @@ -1,9 +1,9 @@ -import BreadcrumbItem from './breadcrumb-item' +import BBreadcrumbItem from './breadcrumb-item' import { mount } from '@vue/test-utils' describe('breadcrumb-item', () => { it('has default classes and structure', async () => { - const wrapper = mount(BreadcrumbItem) + const wrapper = mount(BBreadcrumbItem) expect(wrapper.is('li')).toBe(true) expect(wrapper.classes()).toContain('breadcrumb-item') expect(wrapper.classes()).not.toContain('active') @@ -11,7 +11,7 @@ describe('breadcrumb-item', () => { }) it('has class active when prop active is set', async () => { - const wrapper = mount(BreadcrumbItem, { + const wrapper = mount(BBreadcrumbItem, { propsData: { active: true } @@ -23,14 +23,14 @@ describe('breadcrumb-item', () => { }) it('has link as child', async () => { - const wrapper = mount(BreadcrumbItem) + const wrapper = mount(BBreadcrumbItem) expect(wrapper.is('li')).toBe(true) expect(wrapper.find('a').exists()).toBe(true) expect(wrapper.find('a').attributes('href')).toBe('#') }) it('has link as child and href', async () => { - const wrapper = mount(BreadcrumbItem, { + const wrapper = mount(BBreadcrumbItem, { propsData: { href: '/foo/bar' } @@ -41,7 +41,7 @@ describe('breadcrumb-item', () => { }) it('has child span and class active when prop active is set', async () => { - const wrapper = mount(BreadcrumbItem, { + const wrapper = mount(BBreadcrumbItem, { propsData: { active: true } @@ -54,7 +54,7 @@ describe('breadcrumb-item', () => { }) it('has child text content from prop text', async () => { - const wrapper = mount(BreadcrumbItem, { + const wrapper = mount(BBreadcrumbItem, { propsData: { active: true, text: 'foobar' @@ -68,7 +68,7 @@ describe('breadcrumb-item', () => { }) it('has child text content from prop html', async () => { - const wrapper = mount(BreadcrumbItem, { + const wrapper = mount(BBreadcrumbItem, { propsData: { active: true, html: 'foobar' @@ -82,7 +82,7 @@ describe('breadcrumb-item', () => { }) it('has child text content from default slot', async () => { - const wrapper = mount(BreadcrumbItem, { + const wrapper = mount(BBreadcrumbItem, { propsData: { active: true }, diff --git a/src/components/breadcrumb/breadcrumb-link.spec.js b/src/components/breadcrumb/breadcrumb-link.spec.js index 248845e2601..c809d0984b6 100644 --- a/src/components/breadcrumb/breadcrumb-link.spec.js +++ b/src/components/breadcrumb/breadcrumb-link.spec.js @@ -1,9 +1,9 @@ -import BreadcrumbLink from './breadcrumb-link' +import BBreadcrumbLink from './breadcrumb-link' import { mount } from '@vue/test-utils' describe('breadcrumb-link', () => { it('has default classes and structure', async () => { - const wrapper = mount(BreadcrumbLink) + const wrapper = mount(BBreadcrumbLink) expect(wrapper.is('a')).toBe(true) expect(wrapper.attributes('href')).toBeDefined() expect(wrapper.attributes('href')).toBe('#') @@ -13,7 +13,7 @@ describe('breadcrumb-link', () => { }) it('has content from default slot', async () => { - const wrapper = mount(BreadcrumbLink, { + const wrapper = mount(BBreadcrumbLink, { slots: { default: 'foobar' } @@ -22,7 +22,7 @@ describe('breadcrumb-link', () => { }) it('has content from text prop', async () => { - const wrapper = mount(BreadcrumbLink, { + const wrapper = mount(BBreadcrumbLink, { propsData: { text: 'foobar' } @@ -31,7 +31,7 @@ describe('breadcrumb-link', () => { }) it('has content from html prop', async () => { - const wrapper = mount(BreadcrumbLink, { + const wrapper = mount(BBreadcrumbLink, { propsData: { html: 'foobar' } @@ -40,7 +40,7 @@ describe('breadcrumb-link', () => { }) it('has attribute aria-current when active', async () => { - const wrapper = mount(BreadcrumbLink, { + const wrapper = mount(BBreadcrumbLink, { propsData: { active: true } @@ -52,7 +52,7 @@ describe('breadcrumb-link', () => { }) it('has attribute aria-current with custom value when active', async () => { - const wrapper = mount(BreadcrumbLink, { + const wrapper = mount(BBreadcrumbLink, { propsData: { active: true, ariaCurrent: 'foobar' @@ -65,7 +65,7 @@ describe('breadcrumb-link', () => { }) it('renders link when href is set', async () => { - const wrapper = mount(BreadcrumbLink, { + const wrapper = mount(BBreadcrumbLink, { propsData: { href: '/foo/bar' } @@ -78,7 +78,7 @@ describe('breadcrumb-link', () => { }) it('does not render a link when href is set and active', async () => { - const wrapper = mount(BreadcrumbLink, { + const wrapper = mount(BBreadcrumbLink, { propsData: { active: true, href: '/foo/bar' diff --git a/src/components/breadcrumb/breadcrumb.spec.js b/src/components/breadcrumb/breadcrumb.spec.js index 52547ff72d0..53b49be3f5c 100644 --- a/src/components/breadcrumb/breadcrumb.spec.js +++ b/src/components/breadcrumb/breadcrumb.spec.js @@ -1,9 +1,9 @@ -import Breadcrumb from './breadcrumb' +import BBreadcrumb from './breadcrumb' import { mount } from '@vue/test-utils' describe('breadcrumb', () => { it('should have expected default structure', async () => { - const wrapper = mount(Breadcrumb) + const wrapper = mount(BBreadcrumb) expect(wrapper.is('ol')).toBe(true) expect(wrapper.classes()).toContain('breadcrumb') @@ -12,7 +12,7 @@ describe('breadcrumb', () => { }) it('should render default slot when no items provided', async () => { - const wrapper = mount(Breadcrumb, { + const wrapper = mount(BBreadcrumb, { slots: { default: 'foobar' } @@ -24,8 +24,8 @@ describe('breadcrumb', () => { expect(wrapper.text()).toBe('foobar') }) - it('should accpet items', () => { - const wrapper = mount(Breadcrumb, { + it('should accept items', () => { + const wrapper = mount(BBreadcrumb, { propsData: { items: [ { text: 'Home', href: '/' }, @@ -87,7 +87,7 @@ describe('breadcrumb', () => { ).toBe('/admin/manage') expect($lis.at(2).text()).toBe('Manage') - // last item should have active state + // Last item should have active state expect($lis.at(3).classes()).toContain('active') expect( $lis @@ -99,7 +99,7 @@ describe('breadcrumb', () => { }) it('should apply active class to active item', async () => { - const wrapper = mount(Breadcrumb, { + const wrapper = mount(BBreadcrumb, { propsData: { items: [ { text: 'Home', href: '/' }, @@ -156,7 +156,7 @@ describe('breadcrumb', () => { ).toBe('/admin/manage') expect($lis.at(2).text()).toBe('Manage') - // last item should have active state + // Last item should have active state expect($lis.at(3).classes()).not.toContain('active') expect( $lis diff --git a/src/components/button-group/button-group.spec.js b/src/components/button-group/button-group.spec.js index ea67a4864bc..b4f8eede9f7 100644 --- a/src/components/button-group/button-group.spec.js +++ b/src/components/button-group/button-group.spec.js @@ -1,9 +1,9 @@ -import ButtonGroup from './button-group' +import BButtonGroup from './button-group' import { mount } from '@vue/test-utils' describe('button-group', () => { it('has expected default structure', async () => { - const wrapper = mount(ButtonGroup) + const wrapper = mount(BButtonGroup) expect(wrapper.is('div')).toBe(true) expect(wrapper.classes()).toContain('btn-group') expect(wrapper.classes().length).toBe(1) @@ -13,7 +13,7 @@ describe('button-group', () => { }) it('should render default slot', async () => { - const wrapper = mount(ButtonGroup, { + const wrapper = mount(BButtonGroup, { slots: { default: 'foobar' } @@ -28,7 +28,7 @@ describe('button-group', () => { }) it('should apply vertical class', async () => { - const wrapper = mount(ButtonGroup, { + const wrapper = mount(BButtonGroup, { propsData: { vertical: true } @@ -40,7 +40,7 @@ describe('button-group', () => { }) it('should apply size class', async () => { - const wrapper = mount(ButtonGroup, { + const wrapper = mount(BButtonGroup, { propsData: { size: 'sm' } @@ -52,7 +52,7 @@ describe('button-group', () => { }) it('should apply size class when vertical', async () => { - const wrapper = mount(ButtonGroup, { + const wrapper = mount(BButtonGroup, { propsData: { size: 'sm', vertical: true @@ -66,7 +66,7 @@ describe('button-group', () => { }) it('has custom role when aria-role prop set', async () => { - const wrapper = mount(ButtonGroup, { + const wrapper = mount(BButtonGroup, { propsData: { ariaRole: 'foobar' } diff --git a/src/components/button-toolbar/button-toolbar.spec.js b/src/components/button-toolbar/button-toolbar.spec.js index 8c1f8ab66d5..90706b9ba98 100644 --- a/src/components/button-toolbar/button-toolbar.spec.js +++ b/src/components/button-toolbar/button-toolbar.spec.js @@ -1,42 +1,42 @@ -import ButtonToolbar from './button-toolbar' -import ButtonGroup from '../button-group/button-group' -import Button from '../button/button' +import BButtonToolbar from './button-toolbar' +import BButtonGroup from '../button-group/button-group' +import BButton from '../button/button' import { mount } from '@vue/test-utils' import Vue from 'vue' describe('button-toolbar', () => { it('toolbar root should be "div"', async () => { - const wrapper = mount(ButtonToolbar, {}) + const wrapper = mount(BButtonToolbar, {}) expect(wrapper.is('div')).toBe(true) wrapper.destroy() }) it('toolbar should contain base class', async () => { - const wrapper = mount(ButtonToolbar, {}) + const wrapper = mount(BButtonToolbar, {}) expect(wrapper.classes()).toContain('btn-toolbar') wrapper.destroy() }) it('toolbar should not have class "justify-content-between"', async () => { - const wrapper = mount(ButtonToolbar, {}) + const wrapper = mount(BButtonToolbar, {}) expect(wrapper.classes()).not.toContain('justify-content-between') wrapper.destroy() }) it('toolbar should have role', async () => { - const wrapper = mount(ButtonToolbar, {}) + const wrapper = mount(BButtonToolbar, {}) expect(wrapper.attributes('role')).toBe('toolbar') wrapper.destroy() }) it('toolbar should not have tabindex by default', async () => { - const wrapper = mount(ButtonToolbar, {}) + const wrapper = mount(BButtonToolbar, {}) expect(wrapper.attributes('tabindex')).not.toBeDefined() wrapper.destroy() }) it('toolbar should have class "justify-content-between" when justify set', async () => { - const wrapper = mount(ButtonToolbar, { + const wrapper = mount(BButtonToolbar, { propsData: { justify: true } @@ -47,7 +47,7 @@ describe('button-toolbar', () => { }) it('toolbar should have tabindex when key-nav set', async () => { - const wrapper = mount(ButtonToolbar, { + const wrapper = mount(BButtonToolbar, { propsData: { keyNav: true } @@ -85,10 +85,13 @@ describe('button-toolbar', () => { // Test App for keynav const App = Vue.extend({ render(h) { - return h(ButtonToolbar, { props: { keyNav: true } }, [ - h(ButtonGroup, {}, [h(Button, {}, 'a'), h(Button, {}, 'b')]), - h(ButtonGroup, {}, [h(Button, { props: { disabled: true } }, 'c'), h(Button, {}, 'd')]), - h(ButtonGroup, {}, [h(Button, {}, 'e'), h(Button, {}, 'f')]) + return h(BButtonToolbar, { props: { keyNav: true } }, [ + h(BButtonGroup, {}, [h(BButton, {}, 'a'), h(BButton, {}, 'b')]), + h(BButtonGroup, {}, [ + h(BButton, { props: { disabled: true } }, 'c'), + h(BButton, {}, 'd') + ]), + h(BButtonGroup, {}, [h(BButton, {}, 'e'), h(BButton, {}, 'f')]) ]) } }) @@ -106,15 +109,15 @@ describe('button-toolbar', () => { const $groups = wrapper.findAll('.btn-group') expect($groups).toBeDefined() expect($groups.length).toBe(3) - expect($groups.is(ButtonGroup)).toBe(true) + expect($groups.is(BButtonGroup)).toBe(true) const $btns = wrapper.findAll('button') expect($btns).toBeDefined() expect($btns.length).toBe(6) - expect($btns.is(Button)).toBe(true) + expect($btns.is(BButton)).toBe(true) expect($btns.at(0).is('button[tabindex="-1"')).toBe(true) expect($btns.at(1).is('button[tabindex="-1"')).toBe(true) - expect($btns.at(2).is('button[tabindex="-1"')).toBe(false) // disabled button + expect($btns.at(2).is('button[tabindex="-1"')).toBe(false) // Disabled button expect($btns.at(3).is('button[tabindex="-1"')).toBe(true) expect($btns.at(4).is('button[tabindex="-1"')).toBe(true) expect($btns.at(5).is('button[tabindex="-1"')).toBe(true) diff --git a/src/components/button/button-close.spec.js b/src/components/button/button-close.spec.js index 433f1e5162f..94e53e906ad 100644 --- a/src/components/button/button-close.spec.js +++ b/src/components/button/button-close.spec.js @@ -1,30 +1,30 @@ -import ButtonClose from './button-close' +import BButtonClose from './button-close' import { mount } from '@vue/test-utils' describe('button-close', () => { it('has root element "button"', async () => { - const wrapper = mount(ButtonClose) + const wrapper = mount(BButtonClose) expect(wrapper.is('button')).toBe(true) }) it('has class close', async () => { - const wrapper = mount(ButtonClose) + const wrapper = mount(BButtonClose) expect(wrapper.classes()).toContain('close') expect(wrapper.classes().length).toBe(1) }) it('has attribute type=button', async () => { - const wrapper = mount(ButtonClose) + const wrapper = mount(BButtonClose) expect(wrapper.attributes('type')).toBe('button') }) it('does not have attribute disabled by default', async () => { - const wrapper = mount(ButtonClose) + const wrapper = mount(BButtonClose) expect(wrapper.attributes('disabled')).not.toBeDefined() }) it('has attribute disabled when prop disabled is set', async () => { - const wrapper = mount(ButtonClose, { + const wrapper = mount(BButtonClose, { context: { props: { disabled: true } } @@ -33,12 +33,12 @@ describe('button-close', () => { }) it('has attribute aria-label=Close by default', async () => { - const wrapper = mount(ButtonClose) + const wrapper = mount(BButtonClose) expect(wrapper.attributes('aria-label')).toBe('Close') }) it('has custom attribute aria-label=Close when prop aria-label set', async () => { - const wrapper = mount(ButtonClose, { + const wrapper = mount(BButtonClose, { context: { props: { ariaLabel: 'foobar' } } @@ -47,7 +47,7 @@ describe('button-close', () => { }) it('has variant class when variant prop set', async () => { - const wrapper = mount(ButtonClose, { + const wrapper = mount(BButtonClose, { context: { props: { textVariant: 'primary' } } @@ -58,13 +58,13 @@ describe('button-close', () => { }) it('should have default content', async () => { - const wrapper = mount(ButtonClose) + const wrapper = mount(BButtonClose) // '×' gets converted to '×' expect(wrapper.text()).toContain('×') }) it('should have custom content from default slot', async () => { - const wrapper = mount(ButtonClose, { + const wrapper = mount(BButtonClose, { slots: { default: 'foobar' } @@ -77,7 +77,7 @@ describe('button-close', () => { const spy1 = jest.fn(e => { event = e }) - const wrapper = mount(ButtonClose, { + const wrapper = mount(BButtonClose, { context: { on: { click: spy1 } }, @@ -106,7 +106,7 @@ describe('button-close', () => { it('should not emit "click" event when disabled and clicked', async () => { const spy1 = jest.fn() - const wrapper = mount(ButtonClose, { + const wrapper = mount(BButtonClose, { context: { props: { disabled: true @@ -126,24 +126,22 @@ describe('button-close', () => { expect(spy1).not.toHaveBeenCalled() - /* - * For some reason, JSDOM emits a click on button when clicking inner element - * Although testing in docs, this click is not emitted when disabled. - * Appears to be a bug in JSDOM - * - // Does not emit click on inner element clicks - const span = wrapper.find('span') - expect(span).toBeDefined() - span.trigger('click') - - expect(spy1).not.toHaveBeenCalled() - */ + // For some reason, JSDOM emits a click on button when clicking inner element + // Although testing in docs, this click is not emitted when disabled + // Appears to be a bug in JSDOM + // + // // Does not emit click on inner element clicks + // const span = wrapper.find('span') + // expect(span).toBeDefined() + // span.trigger('click') + // + // expect(spy1).not.toHaveBeenCalled() }) it('handles multiple click listeners', async () => { const spy1 = jest.fn() const spy2 = jest.fn() - const wrapper = mount(ButtonClose, { + const wrapper = mount(BButtonClose, { context: { on: { click: [spy1, spy2] } } diff --git a/src/components/button/button.spec.js b/src/components/button/button.spec.js index 7047262b12c..9e34f953e9a 100644 --- a/src/components/button/button.spec.js +++ b/src/components/button/button.spec.js @@ -1,9 +1,9 @@ -import Button from './button' +import BButton from './button' import { mount } from '@vue/test-utils' describe('button', () => { it('has default structure and classes', async () => { - const wrapper = mount(Button) + const wrapper = mount(BButton) expect(wrapper.is('button')).toBe(true) expect(wrapper.attributes('type')).toBeDefined() @@ -21,7 +21,7 @@ describe('button', () => { }) it('renders a link when href provided', async () => { - const wrapper = mount(Button, { + const wrapper = mount(BButton, { propsData: { href: '/foo/bar' } @@ -43,7 +43,7 @@ describe('button', () => { }) it('renders default slot content', async () => { - const wrapper = mount(Button, { + const wrapper = mount(BButton, { slots: { default: 'foobar' } @@ -60,7 +60,7 @@ describe('button', () => { }) it('applies variant class', async () => { - const wrapper = mount(Button, { + const wrapper = mount(BButton, { propsData: { variant: 'danger' } @@ -75,7 +75,7 @@ describe('button', () => { }) it('applies block class', async () => { - const wrapper = mount(Button, { + const wrapper = mount(BButton, { propsData: { block: true } @@ -91,7 +91,7 @@ describe('button', () => { }) it('renders custom root element', async () => { - const wrapper = mount(Button, { + const wrapper = mount(BButton, { propsData: { tag: 'div' } @@ -114,7 +114,7 @@ describe('button', () => { }) it('button has attribute disabled when disabled set', async () => { - const wrapper = mount(Button, { + const wrapper = mount(BButton, { propsData: { disabled: true } @@ -130,7 +130,7 @@ describe('button', () => { }) it('link has attribute aria-disabled when disabled set', async () => { - const wrapper = mount(Button, { + const wrapper = mount(BButton, { propsData: { href: '/foo/bar', disabled: true @@ -141,10 +141,10 @@ describe('button', () => { expect(wrapper.classes()).toContain('btn') expect(wrapper.classes()).toContain('btn-secondary') expect(wrapper.classes()).toContain('disabled') - // Both b-button and b-link add hte class 'disabled' - // vue-functional-data-merge or Vue doesn't appear to de-dup classes + // Both and add the class 'disabled' + // `vue-functional-data-merge` or Vue doesn't appear to de-dup classes // expect(wrapper.classes().length).toBe(3) - // actually returns 4, as disabled is there twice + // Actually returns 4, as disabled is there twice expect(wrapper.attributes('aria-disabled')).toBeDefined() expect(wrapper.attributes('aria-disabled')).toBe('true') }) @@ -152,7 +152,7 @@ describe('button', () => { it('should emit click event when clicked', async () => { let called = 0 let evt = null - const wrapper = mount(Button, { + const wrapper = mount(BButton, { listeners: { click: e => { evt = e @@ -171,7 +171,7 @@ describe('button', () => { it('should not emit click event when clicked and disabled', async () => { let called = 0 - const wrapper = mount(Button, { + const wrapper = mount(BButton, { propsData: { disabled: true }, @@ -189,7 +189,7 @@ describe('button', () => { }) it('should not have `.active` class and `aria-pressed` when pressed is null', async () => { - const wrapper = mount(Button, { + const wrapper = mount(BButton, { propsData: { pressed: null } @@ -204,7 +204,7 @@ describe('button', () => { }) it('should not have `.active` class and have `aria-pressed="false"` when pressed is false', async () => { - const wrapper = mount(Button, { + const wrapper = mount(BButton, { propsData: { pressed: false } @@ -218,7 +218,7 @@ describe('button', () => { }) it('should have `.active` class and have `aria-pressed="true"` when pressed is true', async () => { - const wrapper = mount(Button, { + const wrapper = mount(BButton, { propsData: { pressed: true } @@ -232,7 +232,7 @@ describe('button', () => { }) it('pressed should have `.focus` class when focused', async () => { - const wrapper = mount(Button, { + const wrapper = mount(BButton, { propsData: { pressed: false } @@ -248,7 +248,7 @@ describe('button', () => { it('should update the parent sync value on click and when pressed is not null', async () => { let called = 0 const values = [] - const wrapper = mount(Button, { + const wrapper = mount(BButton, { propsData: { pressed: false }, diff --git a/src/components/card/card-body.spec.js b/src/components/card/card-body.spec.js index 8e799d3fc42..385ea048947 100644 --- a/src/components/card/card-body.spec.js +++ b/src/components/card/card-body.spec.js @@ -1,20 +1,20 @@ -import CardBody from './card-body' +import BCardBody from './card-body' import { mount } from '@vue/test-utils' describe('card-body', () => { it('has root element "div"', async () => { - const wrapper = mount(CardBody) + const wrapper = mount(BCardBody) expect(wrapper.is('div')).toBe(true) }) it('has class card-body', async () => { - const wrapper = mount(CardBody) + const wrapper = mount(BCardBody) expect(wrapper.classes()).toContain('card-body') expect(wrapper.classes().length).toBe(1) }) it('has custom root element when prop bodyTag is set', async () => { - const wrapper = mount(CardBody, { + const wrapper = mount(BCardBody, { context: { props: { bodyTag: 'article' @@ -26,7 +26,7 @@ describe('card-body', () => { }) it('has class bg-info when prop bodyBgVariant=info', async () => { - const wrapper = mount(CardBody, { + const wrapper = mount(BCardBody, { context: { props: { bodyBgVariant: 'info' } } @@ -37,7 +37,7 @@ describe('card-body', () => { }) it('has class text-info when prop bodyTextVariant=info', async () => { - const wrapper = mount(CardBody, { + const wrapper = mount(BCardBody, { context: { props: { bodyTextVariant: 'info' } } @@ -48,7 +48,7 @@ describe('card-body', () => { }) it('has class border-info when prop bodyBorderVariant=info', async () => { - const wrapper = mount(CardBody, { + const wrapper = mount(BCardBody, { context: { props: { bodyBorderVariant: 'info' } } @@ -59,7 +59,7 @@ describe('card-body', () => { }) it('has all variant classes when all variant props set', async () => { - const wrapper = mount(CardBody, { + const wrapper = mount(BCardBody, { context: { props: { bodyTextVariant: 'info', @@ -76,7 +76,7 @@ describe('card-body', () => { }) it('has class "card-img-overlay" when overlay="true"', async () => { - const wrapper = mount(CardBody, { + const wrapper = mount(BCardBody, { context: { props: { overlay: true @@ -89,7 +89,7 @@ describe('card-body', () => { }) it('has card-title when title prop is set', async () => { - const wrapper = mount(CardBody, { + const wrapper = mount(BCardBody, { context: { props: { title: 'title' @@ -100,7 +100,7 @@ describe('card-body', () => { }) it('has card-sub-title when sub-title prop is set', async () => { - const wrapper = mount(CardBody, { + const wrapper = mount(BCardBody, { context: { props: { subTitle: 'sub title' diff --git a/src/components/card/card-footer.spec.js b/src/components/card/card-footer.spec.js index ab30eb13d8b..ca34d9a3fe5 100644 --- a/src/components/card/card-footer.spec.js +++ b/src/components/card/card-footer.spec.js @@ -1,20 +1,20 @@ -import CardFooter from './card-footer' +import BCardFooter from './card-footer' import { mount } from '@vue/test-utils' describe('card-footer', () => { it('has root element "div"', async () => { - const wrapper = mount(CardFooter) + const wrapper = mount(BCardFooter) expect(wrapper.is('div')).toBe(true) }) it('has class card-header', async () => { - const wrapper = mount(CardFooter) + const wrapper = mount(BCardFooter) expect(wrapper.classes()).toContain('card-footer') expect(wrapper.classes().length).toBe(1) }) it('has custom root element when prop footerTag is set', async () => { - const wrapper = mount(CardFooter, { + const wrapper = mount(BCardFooter, { context: { props: { footerTag: 'footer' @@ -26,7 +26,7 @@ describe('card-footer', () => { }) it('has class bg-info when prop footerBgVariant=info', async () => { - const wrapper = mount(CardFooter, { + const wrapper = mount(BCardFooter, { context: { props: { footerBgVariant: 'info' } } @@ -37,7 +37,7 @@ describe('card-footer', () => { }) it('has class text-info when prop footerTextVariant=info', async () => { - const wrapper = mount(CardFooter, { + const wrapper = mount(BCardFooter, { context: { props: { footerTextVariant: 'info' } } @@ -48,7 +48,7 @@ describe('card-footer', () => { }) it('has class border-info when prop footerBorderVariant=info', async () => { - const wrapper = mount(CardFooter, { + const wrapper = mount(BCardFooter, { context: { props: { footerBorderVariant: 'info' } } @@ -59,7 +59,7 @@ describe('card-footer', () => { }) it('has all variant classes when all variant props set', async () => { - const wrapper = mount(CardFooter, { + const wrapper = mount(BCardFooter, { context: { props: { footerTextVariant: 'info', diff --git a/src/components/card/card-group.spec.js b/src/components/card/card-group.spec.js index e2c6796eee5..b3e52e2db61 100644 --- a/src/components/card/card-group.spec.js +++ b/src/components/card/card-group.spec.js @@ -1,20 +1,20 @@ -import CardGroup from './card-group' +import BCardGroup from './card-group' import { mount } from '@vue/test-utils' describe('card-group', () => { it('has root element "div"', async () => { - const wrapper = mount(CardGroup) + const wrapper = mount(BCardGroup) expect(wrapper.is('div')).toBe(true) }) it('has class card-group', async () => { - const wrapper = mount(CardGroup) + const wrapper = mount(BCardGroup) expect(wrapper.classes()).toContain('card-group') expect(wrapper.classes().length).toBe(1) }) it('has custom root element when prop tag is set', async () => { - const wrapper = mount(CardGroup, { + const wrapper = mount(BCardGroup, { context: { props: { tag: 'article' @@ -26,7 +26,7 @@ describe('card-group', () => { }) it('has class card-deck when prop deck=true', async () => { - const wrapper = mount(CardGroup, { + const wrapper = mount(BCardGroup, { context: { props: { deck: true } } @@ -36,7 +36,7 @@ describe('card-group', () => { }) it('has class card-columns when prop columns=true', async () => { - const wrapper = mount(CardGroup, { + const wrapper = mount(BCardGroup, { context: { props: { columns: true } } @@ -46,7 +46,7 @@ describe('card-group', () => { }) it('accepts custom classes', async () => { - const wrapper = mount(CardGroup, { + const wrapper = mount(BCardGroup, { context: { class: ['foobar'] } diff --git a/src/components/card/card-header.spec.js b/src/components/card/card-header.spec.js index 1afca4be1ae..2427ed2c1a4 100644 --- a/src/components/card/card-header.spec.js +++ b/src/components/card/card-header.spec.js @@ -1,20 +1,20 @@ -import CardHeader from './card-header' +import BCardHeader from './card-header' import { mount } from '@vue/test-utils' describe('card-header', () => { it('has root element "div"', async () => { - const wrapper = mount(CardHeader) + const wrapper = mount(BCardHeader) expect(wrapper.is('div')).toBe(true) }) it('has class card-header', async () => { - const wrapper = mount(CardHeader) + const wrapper = mount(BCardHeader) expect(wrapper.classes()).toContain('card-header') expect(wrapper.classes().length).toBe(1) }) it('has custom root element when prop headerTag is set', async () => { - const wrapper = mount(CardHeader, { + const wrapper = mount(BCardHeader, { context: { props: { headerTag: 'header' @@ -26,7 +26,7 @@ describe('card-header', () => { }) it('has class bg-info when prop headerBgVariant=info', async () => { - const wrapper = mount(CardHeader, { + const wrapper = mount(BCardHeader, { context: { props: { headerBgVariant: 'info' } } @@ -37,7 +37,7 @@ describe('card-header', () => { }) it('has class text-info when prop headerTextVariant=info', async () => { - const wrapper = mount(CardHeader, { + const wrapper = mount(BCardHeader, { context: { props: { headerTextVariant: 'info' } } @@ -48,7 +48,7 @@ describe('card-header', () => { }) it('has class border-info when prop headerBorderVariant=info', async () => { - const wrapper = mount(CardHeader, { + const wrapper = mount(BCardHeader, { context: { props: { headerBorderVariant: 'info' } } @@ -59,7 +59,7 @@ describe('card-header', () => { }) it('has all variant classes when all variant props set', async () => { - const wrapper = mount(CardHeader, { + const wrapper = mount(BCardHeader, { context: { props: { headerTextVariant: 'info', diff --git a/src/components/card/card-img-lazy.spec.js b/src/components/card/card-img-lazy.spec.js index a75fe29097e..f15f4917d1a 100644 --- a/src/components/card/card-img-lazy.spec.js +++ b/src/components/card/card-img-lazy.spec.js @@ -1,9 +1,9 @@ -import CardImgLazy from './card-img-lazy' +import BCardImgLazy from './card-img-lazy' import { mount } from '@vue/test-utils' describe('card-image', () => { it('default has tag "img"', async () => { - const wrapper = mount(CardImgLazy, { + const wrapper = mount(BCardImgLazy, { context: { props: { src: 'https://picsum.photos/600/300/?image=25' @@ -14,7 +14,7 @@ describe('card-image', () => { }) it('default has data src attribute', async () => { - const wrapper = mount(CardImgLazy, { + const wrapper = mount(BCardImgLazy, { context: { props: { src: 'https://picsum.photos/600/300/?image=25' @@ -25,7 +25,7 @@ describe('card-image', () => { }) it('default does not have alt attribute', async () => { - const wrapper = mount(CardImgLazy, { + const wrapper = mount(BCardImgLazy, { context: { props: { src: 'https://picsum.photos/600/300/?image=25' @@ -36,7 +36,7 @@ describe('card-image', () => { }) it('default has attributes width and height set to 1', async () => { - const wrapper = mount(CardImgLazy, { + const wrapper = mount(BCardImgLazy, { context: { props: { src: 'https://picsum.photos/600/300/?image=25' @@ -50,7 +50,7 @@ describe('card-image', () => { }) it('default has class "card-img"', async () => { - const wrapper = mount(CardImgLazy, { + const wrapper = mount(BCardImgLazy, { context: { props: { src: 'https://picsum.photos/600/300/?image=25' @@ -61,7 +61,7 @@ describe('card-image', () => { }) it('has class "card-img-top" when prop top=true', async () => { - const wrapper = mount(CardImgLazy, { + const wrapper = mount(BCardImgLazy, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -73,7 +73,7 @@ describe('card-image', () => { }) it('has class "card-img-bottom" when prop bottom=true', async () => { - const wrapper = mount(CardImgLazy, { + const wrapper = mount(BCardImgLazy, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -85,7 +85,7 @@ describe('card-image', () => { }) it('has class "card-img-top" when props top=true and bottom=true', async () => { - const wrapper = mount(CardImgLazy, { + const wrapper = mount(BCardImgLazy, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -98,7 +98,7 @@ describe('card-image', () => { }) it('has class "card-img-left" when prop left=true', async () => { - const wrapper = mount(CardImgLazy, { + const wrapper = mount(BCardImgLazy, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -110,7 +110,7 @@ describe('card-image', () => { }) it('has class "card-img-right" when prop right=true', async () => { - const wrapper = mount(CardImgLazy, { + const wrapper = mount(BCardImgLazy, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -122,7 +122,7 @@ describe('card-image', () => { }) it('has attribute alt when prop alt set', async () => { - const wrapper = mount(CardImgLazy, { + const wrapper = mount(BCardImgLazy, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -135,7 +135,7 @@ describe('card-image', () => { }) it('has attribute width when prop width set', async () => { - const wrapper = mount(CardImgLazy, { + const wrapper = mount(BCardImgLazy, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -148,7 +148,7 @@ describe('card-image', () => { }) it('has attribute heigth when prop height set', async () => { - const wrapper = mount(CardImgLazy, { + const wrapper = mount(BCardImgLazy, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', diff --git a/src/components/card/card-img.spec.js b/src/components/card/card-img.spec.js index 8e873504a30..f87e402d3e5 100644 --- a/src/components/card/card-img.spec.js +++ b/src/components/card/card-img.spec.js @@ -1,9 +1,9 @@ -import CardImg from './card-img' +import BCardImg from './card-img' import { mount } from '@vue/test-utils' describe('card-image', () => { it('default has tag "img"', async () => { - const wrapper = mount(CardImg, { + const wrapper = mount(BCardImg, { context: { props: { src: 'https://picsum.photos/600/300/?image=25' @@ -14,7 +14,7 @@ describe('card-image', () => { }) it('default has src attribute', async () => { - const wrapper = mount(CardImg, { + const wrapper = mount(BCardImg, { context: { props: { src: 'https://picsum.photos/600/300/?image=25' @@ -25,7 +25,7 @@ describe('card-image', () => { }) it('default does not have attributes alt, width, or height', async () => { - const wrapper = mount(CardImg, { + const wrapper = mount(BCardImg, { context: { props: { src: 'https://picsum.photos/600/300/?image=25' @@ -38,7 +38,7 @@ describe('card-image', () => { }) it('default has class "card-img"', async () => { - const wrapper = mount(CardImg, { + const wrapper = mount(BCardImg, { context: { props: { src: 'https://picsum.photos/600/300/?image=25' @@ -50,7 +50,7 @@ describe('card-image', () => { }) it('has class "card-img-top" when prop top=true', async () => { - const wrapper = mount(CardImg, { + const wrapper = mount(BCardImg, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -63,7 +63,7 @@ describe('card-image', () => { }) it('has class "card-img-bottom" when prop bottom=true', async () => { - const wrapper = mount(CardImg, { + const wrapper = mount(BCardImg, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -76,7 +76,7 @@ describe('card-image', () => { }) it('has class "card-img-top" when props top=true and bottom=true', async () => { - const wrapper = mount(CardImg, { + const wrapper = mount(BCardImg, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -90,7 +90,7 @@ describe('card-image', () => { }) it('has class "card-img-left" when prop left=true', async () => { - const wrapper = mount(CardImg, { + const wrapper = mount(BCardImg, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -103,7 +103,7 @@ describe('card-image', () => { }) it('has class "card-img-right" when prop right=true', async () => { - const wrapper = mount(CardImg, { + const wrapper = mount(BCardImg, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -116,7 +116,7 @@ describe('card-image', () => { }) it('has attribute alt when prop alt set', async () => { - const wrapper = mount(CardImg, { + const wrapper = mount(BCardImg, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -129,7 +129,7 @@ describe('card-image', () => { }) it('has attribute width when prop width set', async () => { - const wrapper = mount(CardImg, { + const wrapper = mount(BCardImg, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', @@ -142,7 +142,7 @@ describe('card-image', () => { }) it('has attribute heigth when prop height set', async () => { - const wrapper = mount(CardImg, { + const wrapper = mount(BCardImg, { context: { props: { src: 'https://picsum.photos/600/300/?image=25', diff --git a/src/components/card/card-sub-title.spec.js b/src/components/card/card-sub-title.spec.js index a3070499a54..c3b007436e9 100644 --- a/src/components/card/card-sub-title.spec.js +++ b/src/components/card/card-sub-title.spec.js @@ -1,21 +1,21 @@ -import CardSubTitle from './card-sub-title' +import BCardSubTitle from './card-sub-title' import { mount } from '@vue/test-utils' describe('card-sub-title', () => { it('default has tag "h6"', async () => { - const wrapper = mount(CardSubTitle) + const wrapper = mount(BCardSubTitle) expect(wrapper.is('h6')).toBe(true) }) it('default has class "card-subtitle" and "text-muted"', async () => { - const wrapper = mount(CardSubTitle) + const wrapper = mount(BCardSubTitle) expect(wrapper.classes()).toContain('card-subtitle') expect(wrapper.classes()).toContain('text-muted') expect(wrapper.classes().length).toBe(2) }) it('renders custom tag', async () => { - const wrapper = mount(CardSubTitle, { + const wrapper = mount(BCardSubTitle, { context: { props: { subTitleTag: 'div' } } @@ -24,7 +24,7 @@ describe('card-sub-title', () => { }) it('accepts subTitleTextVariant value', async () => { - const wrapper = mount(CardSubTitle, { + const wrapper = mount(BCardSubTitle, { context: { props: { subTitleTextVariant: 'info' } } @@ -35,7 +35,7 @@ describe('card-sub-title', () => { }) it('has content from default slot', async () => { - const wrapper = mount(CardSubTitle, { + const wrapper = mount(BCardSubTitle, { slots: { default: 'foobar' } diff --git a/src/components/card/card-text.spec.js b/src/components/card/card-text.spec.js index 66674326385..2100c1f1705 100644 --- a/src/components/card/card-text.spec.js +++ b/src/components/card/card-text.spec.js @@ -1,19 +1,19 @@ -import CardText from './card-text' +import BCardText from './card-text' import { mount } from '@vue/test-utils' describe('card-text', () => { it('has root element "p"', async () => { - const wrapper = mount(CardText) + const wrapper = mount(BCardText) expect(wrapper.is('p')).toBe(true) }) it('has class card-text', async () => { - const wrapper = mount(CardText) + const wrapper = mount(BCardText) expect(wrapper.classes()).toContain('card-text') }) it('has custom root element "div" when prop text-tag=div', async () => { - const wrapper = mount(CardText, { + const wrapper = mount(BCardText, { context: { props: { textTag: 'div' @@ -25,7 +25,7 @@ describe('card-text', () => { }) it('accepts custom classes', async () => { - const wrapper = mount(CardText, { + const wrapper = mount(BCardText, { context: { class: ['foobar'] } diff --git a/src/components/card/card-title.spec.js b/src/components/card/card-title.spec.js index 7f1b7d70531..b8627edb974 100644 --- a/src/components/card/card-title.spec.js +++ b/src/components/card/card-title.spec.js @@ -1,20 +1,20 @@ -import CardTitle from './card-title' +import BCardTitle from './card-title' import { mount } from '@vue/test-utils' describe('card-title', () => { it('default has tag "h4"', async () => { - const wrapper = mount(CardTitle) + const wrapper = mount(BCardTitle) expect(wrapper.is('h4')).toBe(true) }) it('default has class "card-title"', async () => { - const wrapper = mount(CardTitle) + const wrapper = mount(BCardTitle) expect(wrapper.classes()).toContain('card-title') expect(wrapper.classes().length).toBe(1) }) it('renders custom tag', async () => { - const wrapper = mount(CardTitle, { + const wrapper = mount(BCardTitle, { context: { props: { titleTag: 'div' } } @@ -23,7 +23,7 @@ describe('card-title', () => { }) it('has content from default slot', async () => { - const wrapper = mount(CardTitle, { + const wrapper = mount(BCardTitle, { slots: { default: 'bar' } diff --git a/src/components/card/card.spec.js b/src/components/card/card.spec.js index ca709cb9a06..6a891e0ded9 100644 --- a/src/components/card/card.spec.js +++ b/src/components/card/card.spec.js @@ -1,9 +1,9 @@ -import Card from './card' +import BCard from './card' import { mount } from '@vue/test-utils' describe('card', () => { it('default has expected structure', async () => { - const wrapper = mount(Card) + const wrapper = mount(BCard) // Outer div expect(wrapper.is('div')).toBe(true) @@ -22,7 +22,7 @@ describe('card', () => { }) it('should not contain "card-body" if prop no-body set', async () => { - const wrapper = mount(Card, { + const wrapper = mount(BCard, { propsData: { noBody: true } @@ -40,7 +40,7 @@ describe('card', () => { }) it('renders custom root element when tag prop set', async () => { - const wrapper = mount(Card, { + const wrapper = mount(BCard, { propsData: { tag: 'article', noBody: true @@ -55,7 +55,7 @@ describe('card', () => { }) it('applies variant classes to root element', async () => { - const wrapper = mount(Card, { + const wrapper = mount(BCard, { propsData: { noBody: true, bgVariant: 'info', @@ -75,7 +75,7 @@ describe('card', () => { }) it('applies text align class to when align prop set', async () => { - const wrapper = mount(Card, { + const wrapper = mount(BCard, { propsData: { noBody: true, align: 'right' @@ -91,7 +91,7 @@ describe('card', () => { }) it('should have content from default slot', async () => { - const wrapperBody = mount(Card, { + const wrapperBody = mount(BCard, { propsData: { noBody: false }, @@ -99,7 +99,7 @@ describe('card', () => { default: 'foobar' } }) - const wrapperNoBody = mount(Card, { + const wrapperNoBody = mount(BCard, { propsData: { noBody: true }, @@ -120,7 +120,7 @@ describe('card', () => { }) it('should have class flex-row when img-left set', async () => { - const wrapper = mount(Card, { + const wrapper = mount(BCard, { propsData: { noBody: true, imgLeft: true @@ -134,7 +134,7 @@ describe('card', () => { }) it('should have class flex-row-reverse when img-right set', async () => { - const wrapper = mount(Card, { + const wrapper = mount(BCard, { propsData: { noBody: true, imgRight: true @@ -148,7 +148,7 @@ describe('card', () => { }) it('should have class flex-row when img-left and img-right set', async () => { - const wrapper = mount(Card, { + const wrapper = mount(BCard, { propsData: { noBody: true, imgLeft: true, @@ -164,7 +164,7 @@ describe('card', () => { }) it('should have header and footer when header and footer props are set', async () => { - const wrapper = mount(Card, { + const wrapper = mount(BCard, { propsData: { header: 'foo', footer: 'bar' @@ -189,7 +189,7 @@ describe('card', () => { }) it('should have img at top', async () => { - const wrapper = mount(Card, { + const wrapper = mount(BCard, { propsData: { imgSrc: '/foo/bar', imgAlt: 'foobar', @@ -213,7 +213,7 @@ describe('card', () => { }) it('should have img at bottom', async () => { - const wrapper = mount(Card, { + const wrapper = mount(BCard, { propsData: { imgSrc: '/foo/bar', imgAlt: 'foobar', @@ -237,7 +237,7 @@ describe('card', () => { }) it('should have img overlay', async () => { - const wrapper = mount(Card, { + const wrapper = mount(BCard, { propsData: { imgSrc: '/foo/bar', imgAlt: 'foobar', diff --git a/src/components/carousel/carousel-slide.spec.js b/src/components/carousel/carousel-slide.spec.js index a7ab98bc4e5..01419d607b8 100644 --- a/src/components/carousel/carousel-slide.spec.js +++ b/src/components/carousel/carousel-slide.spec.js @@ -1,16 +1,16 @@ -import CarouselSlide from './carousel-slide' +import BCarouselSlide from './carousel-slide' import { mount } from '@vue/test-utils' describe('carousel-slide', () => { it('has root element "div"', async () => { - const wrapper = mount(CarouselSlide) + const wrapper = mount(BCarouselSlide) expect(wrapper.is('div')).toBe(true) wrapper.destroy() }) it('has class carousel-item', async () => { - const wrapper = mount(CarouselSlide) + const wrapper = mount(BCarouselSlide) expect(wrapper.classes()).toContain('carousel-item') expect(wrapper.classes().length).toBe(1) @@ -18,7 +18,7 @@ describe('carousel-slide', () => { }) it('has role=listitem', async () => { - const wrapper = mount(CarouselSlide) + const wrapper = mount(BCarouselSlide) expect(wrapper.attributes('role')).toBeDefined() expect(wrapper.attributes('role')).toBe('listitem') @@ -26,7 +26,7 @@ describe('carousel-slide', () => { }) it('has child div.carousel-caption by default', async () => { - const wrapper = mount(CarouselSlide) + const wrapper = mount(BCarouselSlide) expect(wrapper.find('.carousel-caption').exists()).toBe(true) expect(wrapper.find('.carousel-caption').is('div')).toBe(true) @@ -34,28 +34,28 @@ describe('carousel-slide', () => { }) it('does not have image by default', async () => { - const wrapper = mount(CarouselSlide) + const wrapper = mount(BCarouselSlide) expect(wrapper.find('img').exists()).toBe(false) wrapper.destroy() }) it('does not have caption tag h3 by default', async () => { - const wrapper = mount(CarouselSlide) + const wrapper = mount(BCarouselSlide) expect(wrapper.find('h3').exists()).toBe(false) wrapper.destroy() }) it('does not have text tag p by default', async () => { - const wrapper = mount(CarouselSlide) + const wrapper = mount(BCarouselSlide) expect(wrapper.find('p').exists()).toBe(false) wrapper.destroy() }) it('renders default slot inside carousel-caption', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { slots: { default: 'foobar' } @@ -67,7 +67,7 @@ describe('carousel-slide', () => { }) it('has caption tag h3 when prop caption is set', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { propsData: { caption: 'foobar' } @@ -80,7 +80,7 @@ describe('carousel-slide', () => { }) it('has text tag p when prop text is set', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { propsData: { text: 'foobar' } @@ -93,7 +93,7 @@ describe('carousel-slide', () => { }) it('has custom content tag when prop contentTag is set', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { propsData: { contentTag: 'span' } @@ -105,7 +105,7 @@ describe('carousel-slide', () => { }) it('has display classes on .carousel-caption when prop contentVisibleUp is set', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { propsData: { contentVisibleUp: 'lg' } @@ -119,7 +119,7 @@ describe('carousel-slide', () => { }) it('does not have style background when prop background not set', async () => { - const wrapper = mount(CarouselSlide) + const wrapper = mount(BCarouselSlide) if (wrapper.attributes('style')) { // Vue always includes a style attr when passed an empty style object expect(wrapper.attributes('style')).not.toContain('background:') @@ -132,7 +132,7 @@ describe('carousel-slide', () => { }) it('has style background when prop background is set', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { propsData: { background: 'rgb(1, 2, 3)' } @@ -145,7 +145,7 @@ describe('carousel-slide', () => { }) it('has style background inherited from carousel parent', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { provide: { bvCarousel: { background: 'rgb(1, 2, 3)' @@ -160,7 +160,7 @@ describe('carousel-slide', () => { }) it('has custom caption tag when prop captionTag is set', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { propsData: { captionTag: 'h1', caption: 'foobar' @@ -174,7 +174,7 @@ describe('carousel-slide', () => { }) it('has custom text tag when prop textTag is set', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { propsData: { textTag: 'span', text: 'foobar' @@ -188,7 +188,7 @@ describe('carousel-slide', () => { }) it('has image when prop img-src is set', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { propsData: { imgSrc: 'https://picsum.photos/1024/480/?image=52' } @@ -201,7 +201,7 @@ describe('carousel-slide', () => { }) it('has image when prop img-blank is set', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { propsData: { imgBlank: true } @@ -214,7 +214,7 @@ describe('carousel-slide', () => { }) it('has image with alt attribute when prop img-alt is set', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { propsData: { imgSrc: 'https://picsum.photos/1024/480/?image=52', imgAlt: 'foobar' @@ -229,7 +229,7 @@ describe('carousel-slide', () => { }) it('has image with width and height attrs when props img-width and img-height are set', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { propsData: { imgSrc: 'https://picsum.photos/1024/480/?image=52', imgWidth: '1024', @@ -247,7 +247,7 @@ describe('carousel-slide', () => { }) it('has image with width and height attrs inherited from carousel parent', async () => { - const wrapper = mount(CarouselSlide, { + const wrapper = mount(BCarouselSlide, { provide: { // Mock carousel injection bvCarousel: { diff --git a/src/components/carousel/carousel.spec.js b/src/components/carousel/carousel.spec.js index 65677328702..f389ca17240 100644 --- a/src/components/carousel/carousel.spec.js +++ b/src/components/carousel/carousel.spec.js @@ -1,5 +1,5 @@ -import Carousel from './carousel' -import Slide from './carousel-slide' +import BCarousel from './carousel' +import BCarouselSlide from './carousel-slide' import { mount, createLocalVue as CreateLocalVue } from '@vue/test-utils' const localVue = new CreateLocalVue() @@ -19,7 +19,7 @@ const appDef = { }, render(h) { return h( - Carousel, + BCarousel, { props: { interval: this.interval, @@ -31,10 +31,10 @@ const appDef = { } }, [ - h(Slide, {}, 'slide 1'), - h(Slide, {}, 'slide 2'), - h(Slide, {}, 'slide 3'), - h(Slide, {}, 'slide 4') + h(BCarouselSlide, {}, 'slide 1'), + h(BCarouselSlide, {}, 'slide 2'), + h(BCarouselSlide, {}, 'slide 3'), + h(BCarouselSlide, {}, 'slide 4') ] ) } @@ -42,7 +42,7 @@ const appDef = { describe('carousel', () => { it('has expected default structure', async () => { - const wrapper = mount(Carousel, { + const wrapper = mount(BCarousel, { localVue: localVue, attachToDocument: true }) @@ -65,7 +65,7 @@ describe('carousel', () => { expect(wrapper.attributes('id')).toBeDefined() const id = wrapper.attributes('id') - // slide wrapper + // Slide wrapper //
expect(wrapper.findAll('.carousel > .carousel-inner').length).toBe(1) const $inner = wrapper.find('.carousel > .carousel-inner') @@ -76,14 +76,14 @@ describe('carousel', () => { expect($inner.attributes('id')).toBeDefined() expect($inner.attributes('id')).toEqual(`${id}___BV_inner_`) - // controls (none by default) + // Controls (none by default) // // expect(wrapper.findAll('.carousel > .carousel-control-prev').length).toBe(0) expect(wrapper.findAll('.carousel > .carousel-control-next').length).toBe(0) expect(wrapper.findAll('a').length).toBe(0) - // indicators (hidden by default) + // Indicators (hidden by default) //