bootstrap-vue · tmorehouse · Apr 1, 2019 · Apr 1, 2019 · Apr 1, 2019 · Apr 1, 2019
diff --git a/src/components/form/fixtures/form-row.html b/src/components/form/fixtures/form-row.html
diff --git a/src/components/form/fixtures/form-row.js b/src/components/form/fixtures/form-row.js
diff --git a/src/components/form/fixtures/form-text.html b/src/components/form/fixtures/form-text.html
diff --git a/src/components/form/fixtures/form-text.js b/src/components/form/fixtures/form-text.js
diff --git a/src/components/form/fixtures/form.html b/src/components/form/fixtures/form.html
diff --git a/src/components/form/fixtures/form.js b/src/components/form/fixtures/form.js
diff --git a/src/components/form/form-row.spec.js b/src/components/form/form-row.spec.js
@@ -1,48 +1,12 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import FormRow from './form-row'
+import { mount } from '@vue/test-utils'
 
-describe('form-row', () => {
-  beforeEach(loadFixture(__dirname, 'form-row'))
-  testVM()
+// This component is also fully tested under the layout tests
 
-  it('default should contain base class', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default).toHaveClass('form-row')
-  })
-
-  it('custom should contain base class', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.custom).toHaveClass('form-row')
-  })
-
-  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('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')
+describe('form > form-row', () => {
+  it('works', () => {
+    const wrapper = mount(FormRow)
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('form-row')
   })
 })
diff --git a/src/components/form/form-text.spec.js b/src/components/form/form-text.spec.js
@@ -1,104 +1,81 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import FormText from './form-text'
+import { mount } from '@vue/test-utils'
 
-describe('form-text', () => {
-  beforeEach(loadFixture(__dirname, 'form-text'))
-  testVM()
+describe('form > form-text', () => {
+  it('has expected default structure', async () => {
+    const wrapper = mount(FormText)
 
-  it('default should be tag small', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default).toBeElement('small')
+    expect(wrapper.is('small')).toBe(true)
+    expect(wrapper.classes()).toContain('form-text')
+    expect(wrapper.classes()).toContain('text-muted')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toEqual('')
   })
 
-  it('default should have id', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default.getAttribute('id')).toBe('default')
-  })
-
-  it('default should have base class', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default).toHaveClass('form-text')
-  })
+  it('renders default slot content', async () => {
+    const wrapper = mount(FormText, {
+      slots: {
+        default: 'foobar'
+      }
+    })
 
-  it('default should have muted variant', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default).toHaveClass('text-muted')
+    expect(wrapper.is('small')).toBe(true)
+    expect(wrapper.classes()).toContain('form-text')
+    expect(wrapper.classes()).toContain('text-muted')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toEqual('foobar')
   })
 
-  it('default should have content', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default.textContent).toContain('default')
-  })
+  it('renders custom root element when prop tag set', async () => {
+    const wrapper = mount(FormText, {
+      propsData: {
+        tag: 'p'
+      }
+    })
 
-  it('custom should be tag p', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.custom).toBeElement('p')
+    expect(wrapper.is('p')).toBe(true)
+    expect(wrapper.classes()).toContain('form-text')
+    expect(wrapper.classes()).toContain('text-muted')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toEqual('')
   })
 
-  it('custom should have base class', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.custom).toHaveClass('form-text')
-  })
+  it('has user supplied ID', async () => {
+    const wrapper = mount(FormText, {
+      propsData: {
+        id: 'foo'
+      }
+    })
 
-  it('custom should have content', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.custom.textContent).toContain('custom')
+    expect(wrapper.is('small')).toBe(true)
+    expect(wrapper.attributes('id')).toBeDefined()
+    expect(wrapper.attributes('id')).toEqual('foo')
   })
 
-  it('variant should have base class', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.variant).toHaveClass('form-text')
-  })
+  it('does not have class form-text when prop inline set', async () => {
+    const wrapper = mount(FormText, {
+      propsData: {
+        inline: true
+      }
+    })
 
-  it('variant should have danger variant', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.variant).toHaveClass('text-danger')
+    expect(wrapper.is('small')).toBe(true)
+    expect(wrapper.classes()).not.toContain('form-text')
+    expect(wrapper.classes()).toContain('text-muted')
+    expect(wrapper.classes().length).toBe(1)
   })
 
-  it('variant should have danger variant', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.variant.textContent).toContain('variant')
-  })
-
-  it('inline should not have base class', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.inline).not.toHaveClass('form-text')
-  })
-
-  it('inline should have variant muted', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.inline).toHaveClass('text-muted')
-  })
+  it('has variant class applied when prop text-variant is set', async () => {
+    const wrapper = mount(FormText, {
+      propsData: {
+        textVariant: 'info'
+      }
+    })
 
-  it('inline should have content', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.inline.textContent).toContain('inline')
+    expect(wrapper.is('small')).toBe(true)
+    expect(wrapper.classes()).toContain('form-text')
+    expect(wrapper.classes()).toContain('text-info')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toEqual('')
   })
 })
diff --git a/src/components/form/form.spec.js b/src/components/form/form.spec.js
@@ -1,6 +1,85 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import Form from './form'
+import { mount } from '@vue/test-utils'
 
 describe('form', () => {
-  beforeEach(loadFixture(__dirname, 'form'))
-  testVM()
+  it('has expected default structure', async () => {
+    const wrapper = mount(Form)
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.text()).toEqual('')
+  })
+
+  it('renders default slot content', async () => {
+    const wrapper = mount(Form, {
+      slots: {
+        default: 'foobar'
+      }
+    })
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.attributes('id')).not.toBeDefined()
+    expect(wrapper.attributes('novalidate')).not.toBeDefined()
+    expect(wrapper.text()).toEqual('foobar')
+  })
+
+  it('has class form-inline when prop inline set', async () => {
+    const wrapper = mount(Form, {
+      propsData: {
+        inline: true
+      }
+    })
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes()).toContain('form-inline')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.attributes('id')).not.toBeDefined()
+    expect(wrapper.attributes('novalidate')).not.toBeDefined()
+    expect(wrapper.text()).toEqual('')
+  })
+
+  it('has class was-validation when prop validated set', async () => {
+    const wrapper = mount(Form, {
+      propsData: {
+        validated: true
+      }
+    })
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes()).toContain('was-validated')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.attributes('id')).not.toBeDefined()
+    expect(wrapper.attributes('novalidate')).not.toBeDefined()
+    expect(wrapper.text()).toEqual('')
+  })
+
+  it('has user supplied id', async () => {
+    const wrapper = mount(Form, {
+      propsData: {
+        id: 'foo'
+      }
+    })
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.attributes('id')).toBeDefined()
+    expect(wrapper.attributes('id')).toEqual('foo')
+    expect(wrapper.attributes('novalidate')).not.toBeDefined()
+    expect(wrapper.text()).toEqual('')
+  })
+
+  it('has attribute novalidate when prop novalidate set', async () => {
+    const wrapper = mount(Form, {
+      propsData: {
+        novalidate: true
+      }
+    })
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.attributes('id')).not.toBeDefined()
+    expect(wrapper.attributes('novalidate')).toBeDefined()
+    expect(wrapper.text()).toEqual('')
+  })
 })
diff --git a/src/components/image/img-lazy.spec.js b/src/components/image/img-lazy.spec.js
@@ -15,6 +15,21 @@ describe('img-lazy', () => {
     wrapper.destroy()
   })
 
+  it('is initially shown show prop is set', async () => {
+    const wrapper = mount(ImgLazy, {
+      propsData: {
+        src: src,
+        show: true
+      }
+    })
+    expect(wrapper.is('img')).toBe(true)
+
+    expect(wrapper.attributes('src')).toBeDefined()
+    expect(wrapper.attributes('src')).toBe(src)
+
+    wrapper.destroy()
+  })
+
   it('shows when show prop is set', async () => {
     const wrapper = mount(ImgLazy, {
       propsData: {