Skip to content

chore(unit testing): convert jumbotron test #2973

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 1, 2019
Merged

chore(unit testing): convert jumbotron test #2973

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c2852ee
Update jumbotron.spec.js
tmorehouse Apr 1, 2019
9b5fec3
Update jumbotron.spec.js
tmorehouse Apr 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
337 changes: 151 additions & 186 deletions src/components/jumbotron/jumbotron.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,211 +1,176 @@
import { loadFixture, testVM } from '../../../tests/utils'
import Jumbotron from './jumbotron'
import { mount } from '@vue/test-utils'

describe('jumbotron', () => {
beforeEach(loadFixture(__dirname, 'jumbotron'))
testVM()

it('All examples should contain base class', async () => {
const {
app: { $refs }
} = window
;['default', 'tags', 'level', 'slots', 'content', 'fluid', 'containerFluid'].forEach(ref => {
expect($refs[ref]).toHaveClass('jumbotron')
})
})
it('has expected default structure', async () => {
const wrapper = mount(Jumbotron)

it('fluid and containerFluid should contain jumbotron-fluid class', async () => {
const {
app: { $refs }
} = window
;['fluid', 'containerFluid'].forEach(ref => {
expect($refs[ref]).toHaveClass('jumbotron-fluid')
})
expect(wrapper.is('div')).toBe(true)
expect(wrapper.classes()).toContain('jumbotron')
expect(wrapper.classes().length).toBe(1)
expect(wrapper.text()).toEqual('')
})

it('All others should not contain jumbotron-fluid class', async () => {
const {
app: { $refs }
} = window
;['default', 'tags', 'level', 'slots', 'content'].forEach(ref => {
expect($refs[ref]).not.toHaveClass('jumbotron-fluid')
it('renders with custom root element when props tag is set', async () => {
const wrapper = mount(Jumbotron, {
propsData: {
tag: 'article'
}
})
})

it("All examples except tags should have root elemwnt of type 'div'", async () => {
const {
app: { $refs }
} = window
;['default', 'level', 'slots', 'content', 'fluid', 'containerFluid'].forEach(ref => {
expect($refs[ref]).toBeElement('div')
})
expect($refs.tags).not.toBeElement('div')
})

it("default should have first child h1 with content and class 'display-3'", async () => {
const {
app: { $refs }
} = window
const h1 = $refs.default.children[0]
expect(h1).toBeDefined()
expect(h1).toBeElement('h1')
expect(h1).toHaveClass('display-3')
expect(h1.textContent).toContain('header prop')
expect(wrapper.is('article')).toBe(true)
expect(wrapper.classes()).toContain('jumbotron')
expect(wrapper.classes().length).toBe(1)
expect(wrapper.text()).toEqual('')
})

it('default should have second child with tag p with class lead and have content', async () => {
const {
app: { $refs }
} = window
const p = $refs.default.children[1]
expect(p).toBeDefined()
expect(p).toBeElement('p')
expect(p).toHaveClass('lead')
expect(p.textContent).toContain('lead prop')
})

it('default should have third child with content', async () => {
const {
app: { $refs }
} = window
const p = $refs.default.children[2]
expect(p).toBeDefined()
expect(p).toBeElement('p')
expect(p.textContent).toContain('content')
})

it('slots should have first child h1 with content', async () => {
const {
app: { $refs }
} = window
const h1 = $refs.slots.children[0]
expect(h1).toBeDefined()
expect(h1).toBeElement('h1')
expect(h1.textContent).toContain('header slot')
})
it('has border when prop border-variant is set', async () => {
const wrapper = mount(Jumbotron, {
propsData: {
borderVariant: 'danger'
}
})

it('slots should have second child with tag p with class lead and have content', async () => {
const {
app: { $refs }
} = window
const p = $refs.slots.children[1]
expect(p).toBeDefined()
expect(p).toBeElement('p')
expect(p).toHaveClass('lead')
expect(p.textContent).toContain('lead slot')
expect(wrapper.is('div')).toBe(true)
expect(wrapper.classes()).toContain('jumbotron')
expect(wrapper.classes()).toContain('border')
expect(wrapper.classes()).toContain('border-danger')
expect(wrapper.classes().length).toBe(3)
})

it('slots should have third child with content', async () => {
const {
app: { $refs }
} = window
const p = $refs.slots.children[2]
expect(p).toBeDefined()
expect(p).toBeElement('p')
expect(p.textContent).toContain('content')
})
it('has background variant when prop bg-variant is set', async () => {
const wrapper = mount(Jumbotron, {
propsData: {
bgVariant: 'info'
}
})

it("level should have first child h1 with content and class 'display-4'", async () => {
const {
app: { $refs }
} = window
const level = $refs.level
expect(level).toBeDefined()
const h1 = level.children[0]
expect(h1).toBeDefined()
expect(h1).toBeElement('h1')
expect(h1).toHaveClass('display-4')
expect(h1.textContent).toContain('header prop')
expect(wrapper.is('div')).toBe(true)
expect(wrapper.classes()).toContain('jumbotron')
expect(wrapper.classes()).toContain('bg-info')
expect(wrapper.classes().length).toBe(2)
})

it("tags should have custom root tag of 'article'", async () => {
const {
app: { $refs }
} = window
const tags = $refs.tags
expect(tags).toBeDefined()
expect(tags).toBeElement('article')
})
it('has text variant when prop text-variant is set', async () => {
const wrapper = mount(Jumbotron, {
propsData: {
textVariant: 'primary'
}
})

it("tags should have custom header tag of 'h2' with content", async () => {
const {
app: { $refs }
} = window
const header = $refs.tags.children[0]
expect(header).toBeDefined()
expect(header).toBeElement('h2')
expect(header).toHaveClass('display-3')
expect(header.textContent).toContain('header prop')
expect(wrapper.is('div')).toBe(true)
expect(wrapper.classes()).toContain('jumbotron')
expect(wrapper.classes()).toContain('text-primary')
expect(wrapper.classes().length).toBe(2)
})

it("tags should have custom lead tag of 'div' with content and class 'lead'", async () => {
const {
app: { $refs }
} = window
const lead = $refs.tags.children[1]
expect(lead).toBeDefined()
expect(lead).toBeElement('div')
expect(lead).toHaveClass('lead')
expect(lead.textContent).toContain('lead prop')
})
it('renders default slot content', async () => {
const wrapper = mount(Jumbotron, {
slots: {
default: 'foobar'
}
})

it("content should have one child with tag p and text 'content'", async () => {
const {
app: { $refs }
} = window
const content = $refs.content
expect(content).toBeDefined()
expect(content.children.length).toBe(1)
expect(content.children[0]).toBeElement('p')
expect(content.children[0].textContent).toContain('content')
})
expect(wrapper.is('div')).toBe(true)
expect(wrapper.classes()).toContain('jumbotron')
expect(wrapper.classes().length).toBe(1)
expect(wrapper.text()).toEqual('foobar')
expect(wrapper.findAll('.jumbotron > *').length).toBe(0)
})

it('renders default slot content inside container when fluid prop set', async () => {
const wrapper = mount(Jumbotron, {
propsData: {
fluid: true
},
slots: {
default: 'foobar'
}
})

it("fluid should have child with class 'container`", async () => {
const {
app: { $refs }
} = window
const fluid = $refs.fluid
expect(fluid).toBeDefined()
expect(fluid.children.length).toBe(1)
const container = fluid.children[0]
expect(container).toBeDefined()
expect(container).toBeElement('div')
expect(container).toHaveClass('container')
})
expect(wrapper.is('div')).toBe(true)
expect(wrapper.classes()).toContain('jumbotron')
expect(wrapper.classes()).toContain('jumbotron-fluid')
expect(wrapper.classes().length).toBe(2)
expect(wrapper.findAll('.jumbotron > *').length).toBe(1)
expect(wrapper.findAll('.container').length).toBe(1)
expect(wrapper.find('.container').is('div')).toBe(true)
expect(wrapper.find('.container').text()).toEqual('foobar')
expect(wrapper.text()).toEqual('foobar')
})

it('renders default slot content inside container-fluid when fluid prop and container-fluid set', async () => {
const wrapper = mount(Jumbotron, {
propsData: {
fluid: true,
containerFluid: true
},
slots: {
default: 'foobar'
}
})

it("containerFluid should have child with class 'container-fluid`", async () => {
const {
app: { $refs }
} = window
const fluid = $refs.containerFluid
expect(fluid).toBeDefined()
expect(fluid.children.length).toBe(1)
const container = fluid.children[0]
expect(container).toBeDefined()
expect(container).toBeElement('div')
expect(container).toHaveClass('container-fluid')
})
expect(wrapper.is('div')).toBe(true)
expect(wrapper.classes()).toContain('jumbotron')
expect(wrapper.classes()).toContain('jumbotron-fluid')
expect(wrapper.classes().length).toBe(2)
expect(wrapper.findAll('.jumbotron > *').length).toBe(1)
expect(wrapper.findAll('.container').length).toBe(0)
expect(wrapper.findAll('.container-fluid').length).toBe(1)
expect(wrapper.find('.container-fluid').is('div')).toBe(true)
expect(wrapper.find('.container-fluid').text()).toEqual('foobar')
expect(wrapper.text()).toEqual('foobar')
})

it('renders header lead and content when using props', async () => {
const wrapper = mount(Jumbotron, {
propsData: {
header: 'foo',
lead: 'bar'
},
slots: {
default: '<span>baz</span>'
}
})

it("fluid should have child 'container' with content", async () => {
const {
app: { $refs }
} = window
const fluid = $refs.fluid
const container = fluid.children[0]
expect(container.children.length).toBe(3)
expect(container.children[0].textContent).toContain('header')
expect(container.children[1].textContent).toContain('lead')
expect(container.children[2].textContent).toContain('content')
})
expect(wrapper.is('div')).toBe(true)
expect(wrapper.classes()).toContain('jumbotron')
expect(wrapper.classes().length).toBe(1)
expect(wrapper.findAll('h1').length).toBe(1)
expect(wrapper.find('h1').classes()).toContain('display-3')
expect(wrapper.find('h1').classes().length).toBe(1)
expect(wrapper.find('h1').text()).toEqual('foo')
expect(wrapper.findAll('p').length).toBe(1)
expect(wrapper.find('p').classes()).toContain('lead')
expect(wrapper.find('p').classes().length).toBe(1)
expect(wrapper.find('p').text()).toEqual('bar')
expect(wrapper.findAll('span').length).toBe(1)
expect(wrapper.find('span').text()).toEqual('baz')
expect(wrapper.find('.jumbotron > h1 + p + span').exists()).toBe(true)
})

it('renders header lead and content when using slots', async () => {
const wrapper = mount(Jumbotron, {
slots: {
header: 'foo',
lead: 'bar',
default: '<span>baz</span>'
}
})

it("containerFluid should have child 'container-fluid' with content", async () => {
const {
app: { $refs }
} = window
const fluid = $refs.containerFluid
const container = fluid.children[0]
expect(container.children.length).toBe(3)
expect(container.children[0].textContent).toContain('header')
expect(container.children[1].textContent).toContain('lead')
expect(container.children[2].textContent).toContain('content')
expect(wrapper.is('div')).toBe(true)
expect(wrapper.classes()).toContain('jumbotron')
expect(wrapper.classes().length).toBe(1)
expect(wrapper.findAll('h1').length).toBe(1)
expect(wrapper.find('h1').classes()).toContain('display-3')
expect(wrapper.find('h1').classes().length).toBe(1)
expect(wrapper.find('h1').text()).toEqual('foo')
expect(wrapper.findAll('p').length).toBe(1)
expect(wrapper.find('p').classes()).toContain('lead')
expect(wrapper.find('p').classes().length).toBe(1)
expect(wrapper.find('p').text()).toEqual('bar')
expect(wrapper.findAll('span').length).toBe(1)
expect(wrapper.find('span').text()).toEqual('baz')
expect(wrapper.find('.jumbotron > h1 + p + span').exists()).toBe(true)
})
})