From 46b6483c9085c1b968448fcccc3af14e9cc57a0a Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 2 Dec 2019 20:48:12 +0100
Subject: [PATCH] Add story/spec for CounterIcon component

---
 .../generic/CounterIcon/CounterIcon.spec.js   | 37 +++++++++++++++++++
 .../generic/CounterIcon/CounterIcon.story.js  | 19 ++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 webapp/components/_new/generic/CounterIcon/CounterIcon.spec.js
 create mode 100644 webapp/components/_new/generic/CounterIcon/CounterIcon.story.js

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: `
+      <counter-icon icon="pizza" :count="count">
+        <ds-button ghost primary>
+          Report Details
+        </ds-button>
+      </counter-icon>
+    `,
+  }))