diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js b/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js new file mode 100644 index 000000000..01d753c9d --- /dev/null +++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js @@ -0,0 +1,37 @@ +import { mount } from '@vue/test-utils' +import CounterIcon from './CounterIcon' +import BaseIcon from '../BaseIcon/BaseIcon' + +const localVue = global.localVue + +describe('CounterIcon.vue', () => { + let propsData, wrapper, tag + + const Wrapper = () => { + return mount(CounterIcon, { propsData, localVue }) + } + + describe('given a valid icon name and count', () => { + beforeEach(() => { + propsData = { icon: 'comments', count: 1 } + wrapper = Wrapper() + tag = wrapper.find('.ds-tag') + }) + + it('renders BaseIcon', () => { + expect(wrapper.find(BaseIcon).exists()).toBe(true) + }) + + it('renders the count', () => { + expect(tag.text()).toEqual('1') + }) + + it('uses a round tag', () => { + expect(tag.classes()).toContain('ds-tag-round') + }) + + it('uses a primary button', () => { + expect(tag.classes()).toContain('ds-tag-primary') + }) + }) +}) diff --git a/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js b/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js new file mode 100644 index 000000000..df8291957 --- /dev/null +++ b/webapp/components/_new/generic/CounterIcon/CounterIcon.story.js @@ -0,0 +1,19 @@ +import { storiesOf } from '@storybook/vue' +import helpers from '~/storybook/helpers' +import CounterIcon from './CounterIcon.vue' + +storiesOf('CounterIcon', module) + .addDecorator(helpers.layout) + .add('flag icon with button in slot position', () => ({ + components: { CounterIcon }, + data() { + return { icon: 'flag', count: 3 } + }, + template: ` + + + Report Details + + + `, + }))