From 67dc36c757321e2f5f467cd9002aac8d096dda39 Mon Sep 17 00:00:00 2001 From: Artur Mizera Date: Mon, 4 Jun 2018 22:43:43 +0200 Subject: [PATCH] test: general and single component installation covered (#8) * test: single component installation * test: general installation --- __tests__/Vuent.test.js | 59 ++++++++++++++++++++++++++++++++++++++ __tests__/button.test.js | 20 +++++++++---- __tests__/checkbox.test.js | 26 +++++++++++------ __tests__/header.test.js | 22 +++++++++----- __tests__/input.test.js | 26 +++++++++++------ __tests__/link.test.js | 22 +++++++++----- __tests__/radio.test.js | 28 +++++++++++------- __tests__/select.test.js | 24 ++++++++++------ __tests__/slider.test.js | 30 ++++++++++++------- __tests__/toggle.test.js | 30 ++++++++++++------- __tests__/utils.js | 10 +++++++ jest.config.json | 3 ++ 12 files changed, 222 insertions(+), 78 deletions(-) create mode 100644 __tests__/Vuent.test.js create mode 100644 __tests__/utils.js diff --git a/__tests__/Vuent.test.js b/__tests__/Vuent.test.js new file mode 100644 index 0000000..0f16251 --- /dev/null +++ b/__tests__/Vuent.test.js @@ -0,0 +1,59 @@ +import { createLocalVue } from '@vue/test-utils'; +import { isInstalled, countInstalledPlugins } from './utils'; + +import { + VntButton, + VntCheckbox, + VntHeader, + VntInput, + VntLink, + VntRadio, + VntSelect, + VntSlider, + VntToggle +} from '@/components'; + +import Vuent from '@/'; + +describe('Vuent', () => { + let localVue; + + beforeEach(() => { + localVue = createLocalVue(); + }); + + describe('by default', () => { + + beforeEach(() => { + localVue.use(Vuent); + }); + + test('installs all components', () => { + expect(isInstalled(localVue, VntButton)).toBe(true); + expect(isInstalled(localVue, VntCheckbox)).toBe(true); + expect(isInstalled(localVue, VntHeader)).toBe(true); + expect(isInstalled(localVue, VntInput)).toBe(true); + expect(isInstalled(localVue, VntLink)).toBe(true); + expect(isInstalled(localVue, VntRadio)).toBe(true); + expect(isInstalled(localVue, VntSelect)).toBe(true); + expect(isInstalled(localVue, VntSlider)).toBe(true); + expect(isInstalled(localVue, VntToggle)).toBe(true); + expect(countInstalledPlugins(localVue)).toBe(9); + }); + + }); + + describe('when custom configured', () => { + + test('installs only given components', () => { + Vuent.install(localVue, { + components: [VntButton, VntLink] + }); + expect(isInstalled(localVue, VntButton)).toBe(true); + expect(isInstalled(localVue, VntLink)).toBe(true); + expect(countInstalledPlugins(localVue)).toBe(2); + }); + + }); + +}); diff --git a/__tests__/button.test.js b/__tests__/button.test.js index fd1212a..59fe695 100644 --- a/__tests__/button.test.js +++ b/__tests__/button.test.js @@ -1,13 +1,21 @@ -import { mount } from '@vue/test-utils'; -import Button from '@/components/button'; +import { createLocalVue, mount } from '@vue/test-utils'; +import { VntButton } from '@/components'; +import { isInstalled } from './utils'; describe('Button', () => { let wrapper; + test('can be installed separately', () => { + const localVue = createLocalVue(); + localVue.use(VntButton); + + expect(isInstalled(localVue, VntButton)).toBe(true); + }); + describe('by default', () => { beforeAll(() => { - wrapper = mount(Button); + wrapper = mount(VntButton); }); test('has correct type', () => { @@ -31,7 +39,7 @@ describe('Button', () => { describe('can be disabled', () => { beforeAll(() => { - wrapper = mount(Button, { + wrapper = mount(VntButton, { propsData: { disabled: true } @@ -49,7 +57,7 @@ describe('Button', () => { }); test('can have content set using slot', () => { - wrapper = mount(Button, { + wrapper = mount(VntButton, { slots: { default: 'Custom content' } @@ -59,7 +67,7 @@ describe('Button', () => { test('when clicked invokes passed handler', () => { const mockClick = jest.fn(); - wrapper = mount(Button, { + wrapper = mount(VntButton, { propsData: { click: mockClick } diff --git a/__tests__/checkbox.test.js b/__tests__/checkbox.test.js index 2a55221..8280f1a 100644 --- a/__tests__/checkbox.test.js +++ b/__tests__/checkbox.test.js @@ -1,13 +1,21 @@ -import { mount } from '@vue/test-utils'; -import Checkbox from '@/components/checkbox'; +import { createLocalVue, mount } from '@vue/test-utils'; +import { VntCheckbox } from '@/components'; +import { isInstalled } from './utils'; describe('Checkbox', () => { let wrapper; + test('can be installed separately', () => { + const localVue = createLocalVue(); + localVue.use(VntCheckbox); + + expect(isInstalled(localVue, VntCheckbox)).toBe(true); + }); + describe('by default', () => { beforeAll(() => { - wrapper = mount(Checkbox); + wrapper = mount(VntCheckbox); }); test('is not disabled', () => { @@ -31,7 +39,7 @@ describe('Checkbox', () => { describe('can be disabled', () => { beforeAll(() => { - wrapper = mount(Checkbox, { + wrapper = mount(VntCheckbox, { propsData: { disabled: true } @@ -51,7 +59,7 @@ describe('Checkbox', () => { describe('can be checked', () => { beforeAll(() => { - wrapper = mount(Checkbox, { + wrapper = mount(VntCheckbox, { propsData: { checked: true } @@ -71,7 +79,7 @@ describe('Checkbox', () => { describe('can be checked and disabled', () => { beforeAll(() => { - wrapper = mount(Checkbox, { + wrapper = mount(VntCheckbox, { propsData: { checked: true, disabled: true @@ -94,7 +102,7 @@ describe('Checkbox', () => { }); test('can have content set using slot', () => { - wrapper = mount(Checkbox, { + wrapper = mount(VntCheckbox, { slots: { default: 'Custom content' } @@ -105,7 +113,7 @@ describe('Checkbox', () => { describe('when not disabled, updates passed checked prop', () => { beforeAll(() => { - wrapper = mount(Checkbox, { + wrapper = mount(VntCheckbox, { propsData: { checked: false } @@ -129,7 +137,7 @@ describe('Checkbox', () => { describe('when disabled, doesn\'t change state', () => { beforeAll(() => { - wrapper = mount(Checkbox, { + wrapper = mount(VntCheckbox, { propsData: { checked: false, disabled: true diff --git a/__tests__/header.test.js b/__tests__/header.test.js index 3ea66a3..f1470d8 100644 --- a/__tests__/header.test.js +++ b/__tests__/header.test.js @@ -1,13 +1,21 @@ -import { mount } from '@vue/test-utils'; -import Header from '@/components/header'; +import { createLocalVue, mount } from '@vue/test-utils'; +import { VntHeader } from '@/components'; +import { isInstalled } from './utils'; describe('Header', () => { let wrapper; + test('can be installed separately', () => { + const localVue = createLocalVue(); + localVue.use(VntHeader); + + expect(isInstalled(localVue, VntHeader)).toBe(true); + }); + describe('by default', () => { beforeAll(() => { - wrapper = mount(Header); + wrapper = mount(VntHeader); }); test('renders correctly', () => { @@ -17,7 +25,7 @@ describe('Header', () => { }); test('can have only main header content set', () => { - wrapper = mount(Header, { + wrapper = mount(VntHeader, { slots: { default: 'Header' } @@ -26,7 +34,7 @@ describe('Header', () => { }); test('can have main header content set using named slot', () => { - wrapper = mount(Header, { + wrapper = mount(VntHeader, { slots: { header: 'Header' } @@ -35,7 +43,7 @@ describe('Header', () => { }); test('can have both header and subheader content set', () => { - wrapper = mount(Header, { + wrapper = mount(VntHeader, { slots: { header: 'Header', subheader: 'Subheader' @@ -45,7 +53,7 @@ describe('Header', () => { }); test('can have only subheader content set', () => { - wrapper = mount(Header, { + wrapper = mount(VntHeader, { slots: { subheader: 'Subheader' } diff --git a/__tests__/input.test.js b/__tests__/input.test.js index 6946b89..48dddd3 100644 --- a/__tests__/input.test.js +++ b/__tests__/input.test.js @@ -1,13 +1,21 @@ -import { mount } from '@vue/test-utils'; -import Input from '@/components/input'; +import { createLocalVue, mount } from '@vue/test-utils'; +import { VntInput } from '@/components'; +import { isInstalled } from './utils'; describe('Input', () => { let wrapper; + test('can be installed separately', () => { + const localVue = createLocalVue(); + localVue.use(VntInput); + + expect(isInstalled(localVue, VntInput)).toBe(true); + }); + describe('by default', () => { beforeAll(() => { - wrapper = mount(Input); + wrapper = mount(VntInput); }); test('has correct type', () => { @@ -39,7 +47,7 @@ describe('Input', () => { describe('can be disabled', () => { beforeAll(() => { - wrapper = mount(Input, { + wrapper = mount(VntInput, { propsData: { disabled: true } @@ -59,7 +67,7 @@ describe('Input', () => { describe('can have a custom label', () => { beforeAll(() => { - wrapper = mount(Input, { + wrapper = mount(VntInput, { propsData: { label: 'Custom label' } @@ -79,7 +87,7 @@ describe('Input', () => { describe('can be a password field', () => { beforeAll(() => { - wrapper = mount(Input, { + wrapper = mount(VntInput, { propsData: { type: 'password' } @@ -99,7 +107,7 @@ describe('Input', () => { describe('can have a custom placeholder', () => { beforeAll(() => { - wrapper = mount(Input, { + wrapper = mount(VntInput, { propsData: { placeholder: 'Custom hint' } @@ -119,7 +127,7 @@ describe('Input', () => { describe('can be fully customized', () => { beforeAll(() => { - wrapper = mount(Input, { + wrapper = mount(VntInput, { propsData: { type: 'number', label: 'Custom label', @@ -138,7 +146,7 @@ describe('Input', () => { describe('updates passed value', () => { beforeAll(() => { - wrapper = mount(Input, { + wrapper = mount(VntInput, { propsData: { value: '12345' } diff --git a/__tests__/link.test.js b/__tests__/link.test.js index de6e63c..2b42e98 100644 --- a/__tests__/link.test.js +++ b/__tests__/link.test.js @@ -1,13 +1,21 @@ -import { mount } from '@vue/test-utils'; -import Link from '@/components/link'; +import { createLocalVue, mount } from '@vue/test-utils'; +import { VntLink } from '@/components'; +import { isInstalled } from './utils'; describe('Link', () => { let wrapper; + test('can be installed separately', () => { + const localVue = createLocalVue(); + localVue.use(VntLink); + + expect(isInstalled(localVue, VntLink)).toBe(true); + }); + describe('by default', () => { beforeAll(() => { - wrapper = mount(Link); + wrapper = mount(VntLink); }); test('renders correctly', () => { @@ -27,7 +35,7 @@ describe('Link', () => { describe('can be disabled', () => { beforeAll(() => { - wrapper = mount(Link, { + wrapper = mount(VntLink, { propsData: { disabled: true } @@ -47,7 +55,7 @@ describe('Link', () => { describe('can set target', () => { beforeAll(() => { - wrapper = mount(Link, { + wrapper = mount(VntLink, { propsData: { href: 'http://fluent.microsoft.com' } @@ -67,7 +75,7 @@ describe('Link', () => { describe('can create proper link', () => { beforeAll(() => { - wrapper = mount(Link, { + wrapper = mount(VntLink, { propsData: { href: 'http://fluent.microsoft.com' }, @@ -86,7 +94,7 @@ describe('Link', () => { describe('when passed other standard href attributes', () => { test('passes correctly target attr', () => { - wrapper = mount(Link, { + wrapper = mount(VntLink, { propsData: { href: 'http://fluent.microsoft.com' }, diff --git a/__tests__/radio.test.js b/__tests__/radio.test.js index eddc4c1..ceabb4c 100644 --- a/__tests__/radio.test.js +++ b/__tests__/radio.test.js @@ -1,13 +1,21 @@ -import { mount } from '@vue/test-utils'; -import RadioButton from '@/components/radio'; +import { createLocalVue, mount } from '@vue/test-utils'; +import { VntRadio } from '@/components'; +import { isInstalled } from './utils'; describe('RadioButton', () => { let wrapper; + test('can be installed separately', () => { + const localVue = createLocalVue(); + localVue.use(VntRadio); + + expect(isInstalled(localVue, VntRadio)).toBe(true); + }); + describe('by default', () => { beforeAll(() => { - wrapper = mount(RadioButton); + wrapper = mount(VntRadio); }); test('is not disabled', () => { @@ -35,7 +43,7 @@ describe('RadioButton', () => { describe('can be disabled', () => { beforeAll(() => { - wrapper = mount(RadioButton, { + wrapper = mount(VntRadio, { propsData: { disabled: true } @@ -55,7 +63,7 @@ describe('RadioButton', () => { describe('can be checked', () => { beforeAll(() => { - wrapper = mount(RadioButton, { + wrapper = mount(VntRadio, { attrs: { checked: 'true' } @@ -71,7 +79,7 @@ describe('RadioButton', () => { describe('can be checked and disabled', () => { beforeAll(() => { - wrapper = mount(RadioButton, { + wrapper = mount(VntRadio, { attrs: { checked: 'true' }, @@ -92,7 +100,7 @@ describe('RadioButton', () => { }); test('can have content set using slot', () => { - wrapper = mount(RadioButton, { + wrapper = mount(VntRadio, { slots: { default: 'Custom content' } @@ -103,7 +111,7 @@ describe('RadioButton', () => { describe('can have name attribute', () => { beforeAll(() => { - wrapper = mount(RadioButton, { + wrapper = mount(VntRadio, { propsData: { name: 'groupedRadios' } @@ -123,7 +131,7 @@ describe('RadioButton', () => { describe('when not disabled, emits selected value', () => { beforeAll(() => { - wrapper = mount(RadioButton, { + wrapper = mount(VntRadio, { attrs: { value: 'red' }, @@ -149,7 +157,7 @@ describe('RadioButton', () => { describe('when disabled, doesn\'t emit selected value', () => { beforeAll(() => { - wrapper = mount(RadioButton, { + wrapper = mount(VntRadio, { attrs: { value: 'blue' }, diff --git a/__tests__/select.test.js b/__tests__/select.test.js index c9d0d38..bbda3bf 100644 --- a/__tests__/select.test.js +++ b/__tests__/select.test.js @@ -1,13 +1,21 @@ -import { mount } from '@vue/test-utils'; -import Select from '@/components/select'; +import { createLocalVue, mount } from '@vue/test-utils'; +import { VntSelect } from '@/components'; +import { isInstalled } from './utils'; describe('Select', () => { let wrapper; + test('can be installed separately', () => { + const localVue = createLocalVue(); + localVue.use(VntSelect); + + expect(isInstalled(localVue, VntSelect)).toBe(true); + }); + describe('by default', () => { beforeAll(() => { - wrapper = mount(Select); + wrapper = mount(VntSelect); }); test('is not disabled', () => { @@ -35,7 +43,7 @@ describe('Select', () => { describe('can be disabled', () => { beforeAll(() => { - wrapper = mount(Select, { + wrapper = mount(VntSelect, { propsData: { disabled: true, options: [ @@ -89,7 +97,7 @@ describe('Select', () => { describe('allows to select a new value', () => { beforeAll(() => { - wrapper = mount(Select, { + wrapper = mount(VntSelect, { propsData: { options: [ { value: 1, label: 'List item 1'}, @@ -134,7 +142,7 @@ describe('Select', () => { describe('can have custom label', () => { beforeAll(() => { - wrapper = mount(Select, { + wrapper = mount(VntSelect, { propsData: { label: 'Custom Select' } @@ -154,7 +162,7 @@ describe('Select', () => { describe('can have custom optionText', () => { beforeAll(() => { - wrapper = mount(Select, { + wrapper = mount(VntSelect, { propsData: { optionText: 'text', options: [ @@ -174,7 +182,7 @@ describe('Select', () => { describe('can have custom optionValue', () => { beforeAll(() => { - wrapper = mount(Select, { + wrapper = mount(VntSelect, { propsData: { optionValue: 'id', options: [ diff --git a/__tests__/slider.test.js b/__tests__/slider.test.js index d624728..760f795 100644 --- a/__tests__/slider.test.js +++ b/__tests__/slider.test.js @@ -1,13 +1,21 @@ -import { mount } from '@vue/test-utils'; -import Slider from '@/components/slider'; +import { createLocalVue, mount } from '@vue/test-utils'; +import { VntSlider } from '@/components'; +import { isInstalled } from './utils'; describe('Slider', () => { let wrapper; + test('can be installed separately', () => { + const localVue = createLocalVue(); + localVue.use(VntSlider); + + expect(isInstalled(localVue, VntSlider)).toBe(true); + }); + describe('by default', () => { beforeAll(() => { - wrapper = mount(Slider); + wrapper = mount(VntSlider); }); test('is not disabled', () => { @@ -39,7 +47,7 @@ describe('Slider', () => { describe('can be disabled', () => { beforeAll(() => { - wrapper = mount(Slider, { + wrapper = mount(VntSlider, { propsData: { disabled: true } @@ -59,7 +67,7 @@ describe('Slider', () => { describe('can have custom label', () => { beforeAll(() => { - wrapper = mount(Slider, { + wrapper = mount(VntSlider, { propsData: { label: 'Custom Slider' } @@ -79,7 +87,7 @@ describe('Slider', () => { describe('can have custom min', () => { beforeAll(() => { - wrapper = mount(Slider, { + wrapper = mount(VntSlider, { propsData: { min: 15 } @@ -99,7 +107,7 @@ describe('Slider', () => { describe('can have custom max', () => { beforeAll(() => { - wrapper = mount(Slider, { + wrapper = mount(VntSlider, { propsData: { max: 200 } @@ -117,7 +125,7 @@ describe('Slider', () => { }); test('can have some other attribute set', () => { - wrapper = mount(Slider, { + wrapper = mount(VntSlider, { attrs: { step: '5', 'aria-label': 'a11y label' @@ -127,7 +135,7 @@ describe('Slider', () => { }); test('can have content set using slot', () => { - wrapper = mount(Slider, { + wrapper = mount(VntSlider, { slots: { default: 'Custom content' } @@ -138,7 +146,7 @@ describe('Slider', () => { describe('when not disabled, updates passed value prop', () => { beforeAll(() => { - wrapper = mount(Slider, { + wrapper = mount(VntSlider, { propsData: { value: 30 } @@ -162,7 +170,7 @@ describe('Slider', () => { describe('when disabled, doesn\'t change state', () => { beforeAll(() => { - wrapper = mount(Slider, { + wrapper = mount(VntSlider, { propsData: { value: 3, disabled: true diff --git a/__tests__/toggle.test.js b/__tests__/toggle.test.js index 56bf3fc..e1fa476 100644 --- a/__tests__/toggle.test.js +++ b/__tests__/toggle.test.js @@ -1,13 +1,21 @@ -import { mount } from '@vue/test-utils'; -import Toggle from '@/components/toggle'; +import { createLocalVue, mount } from '@vue/test-utils'; +import { VntToggle } from '@/components'; +import { isInstalled } from './utils'; describe('Toggle', () => { let wrapper; + test('can be installed separately', () => { + const localVue = createLocalVue(); + localVue.use(VntToggle); + + expect(isInstalled(localVue, VntToggle)).toBe(true); + }); + describe('by default', () => { beforeAll(() => { - wrapper = mount(Toggle); + wrapper = mount(VntToggle); }); test('is not disabled', () => { @@ -39,7 +47,7 @@ describe('Toggle', () => { describe('can be disabled', () => { beforeAll(() => { - wrapper = mount(Toggle, { + wrapper = mount(VntToggle, { propsData: { disabled: true } @@ -59,7 +67,7 @@ describe('Toggle', () => { describe('can be checked', () => { beforeAll(() => { - wrapper = mount(Toggle, { + wrapper = mount(VntToggle, { propsData: { checked: true } @@ -79,7 +87,7 @@ describe('Toggle', () => { describe('can have custom "Off" state label', () => { beforeAll(() => { - wrapper = mount(Toggle, { + wrapper = mount(VntToggle, { propsData: { labelOff: 'Custom Off' } @@ -100,7 +108,7 @@ describe('Toggle', () => { describe('can have custom "On" state label', () => { beforeAll(() => { - wrapper = mount(Toggle, { + wrapper = mount(VntToggle, { propsData: { labelOn: 'Custom On' } @@ -120,7 +128,7 @@ describe('Toggle', () => { describe('can be checked and disabled', () => { beforeAll(() => { - wrapper = mount(Toggle, { + wrapper = mount(VntToggle, { propsData: { checked: true, disabled: true @@ -143,7 +151,7 @@ describe('Toggle', () => { }); test('can have content set using slot', () => { - wrapper = mount(Toggle, { + wrapper = mount(VntToggle, { slots: { default: 'Custom content' } @@ -154,7 +162,7 @@ describe('Toggle', () => { describe('when not disabled, updates passed checked prop', () => { beforeAll(() => { - wrapper = mount(Toggle, { + wrapper = mount(VntToggle, { propsData: { checked: false } @@ -178,7 +186,7 @@ describe('Toggle', () => { describe('when disabled, doesn\'t change state', () => { beforeAll(() => { - wrapper = mount(Toggle, { + wrapper = mount(VntToggle, { propsData: { checked: false, disabled: true diff --git a/__tests__/utils.js b/__tests__/utils.js new file mode 100644 index 0000000..f65165f --- /dev/null +++ b/__tests__/utils.js @@ -0,0 +1,10 @@ +export function isInstalled(localVue, plugin) { + return !!localVue._installedPlugins + .find(installedPlugin => installedPlugin.name === plugin.name); +} + +export function countInstalledPlugins(localVue) { + return localVue._installedPlugins + .filter(installedPlugin => !!installedPlugin.name).length; + +} diff --git a/jest.config.json b/jest.config.json index 20b7659..7a75c27 100644 --- a/jest.config.json +++ b/jest.config.json @@ -13,6 +13,9 @@ "snapshotSerializers": [ "/node_modules/jest-serializer-vue" ], + "testMatch": [ + "**/__tests__/**/(*.)+(spec|test).js" + ], "transform": { "^.+\\.js$": "/node_modules/babel-jest", ".*\\.(vue)$": "/node_modules/vue-jest"