test(input-group): create basic tests for input-group (#1287)

* Create input-group.html

* Create input-group.js

* Update input-group.html

* Update input-group.html

* Create input-group.spec.js

* ESLint

* Update input-group.spec.js

* Update input-group.spec.js

* Update input-group.spec.js

* Update input-group.spec.js

Author: tmorehouse

src/components/input-group/fixtures/input-group.html

@@ -0,0 +1,22 @@
+<div id="app">
+    <b-input-group ref="basic" left="$" right=".00">
+        <b-input></b-input>
+    </b-input-group>
+
+    <b-input-group ref="components">
+        <b-input-group-addon>$</b-input-group-addon>
+        <b-input></b-input>
+        <b-input-group-button>
+            <b-button>Button</b-button>
+        </b-input-group-button>
+    </b-input-group>
+
+    <b-input-group ref="large" size="lg"></b-input-group>
+
+    <b-input-group ref="small" size="sm"></b-input-group>
+
+    <b-input-group ref="tags" tag="fieldset">
+        <b-input-group-addon tag="span">$</b-input-group-addon>
+        <b-input></b-input>
+    </b-input-group>
+</div>

src/components/input-group/fixtures/input-group.js

@@ -0,0 +1,3 @@
+window.app = new Vue({
+    el: "#app"
+})

src/components/input-group/input-group.spec.js

@@ -0,0 +1,139 @@
+import { loadFixture, testVM, nextTick, setData } from '../../../tests/utils';
+
+describe("input-group", async () => {
+    beforeEach(loadFixture(__dirname, "input-group"))
+    testVM()
+
+    it("should have '.input-group' class on root element", async () => {
+        const { app: { $refs } } = window
+
+        const refs = ["basic", "components"]
+
+        refs.forEach(ref => {
+            expect($refs[ref].$el).toHaveClass("input-group")
+        })
+    })
+
+    it("should have role 'group' on root element", async () => {
+        const { app: { $refs } } = window
+
+        const refs = ["basic", "components"]
+
+        refs.forEach(ref => {
+            expect($refs[ref].$el.getAttribute("role")).toBe("group")
+        })
+    })
+
+    it("basic should have left `.input-group-addon` as first child", async () => {
+        const { app: { $refs } } = window
+
+        const left = $refs.basic.$el.children[0]
+        expect(left).toBeDefined()
+        expect(left).toHaveClass("input-group-addon")
+    })
+
+    it("basic should have content in left `.input-group-addon`", async () => {
+        const { app: { $refs } } = window
+
+        const left = $refs.basic.$el.children[0]
+        expect(left).toBeDefined()
+        expect(left.textContent).toContain("$")
+    })
+
+    it("basic should have right `.input-group-addon` as last child", async () => {
+        const { app: { $refs } } = window
+
+        const right = $refs.basic.$el.children[2]
+        expect(right).toBeDefined()
+        expect(right).toHaveClass("input-group-addon")
+    })
+
+    it("basic should have content in right `.input-group-addon`", async () => {
+        const { app: { $refs } } = window
+
+        const right = $refs.basic.$el.children[2]
+        expect(right).toBeDefined()
+        expect(right.textContent).toContain(".00")
+    })
+
+    it("basic should have input as second child", async () => {
+        const { app: { $refs } } = window
+
+        const input = $refs.basic.$el.children[1]
+        expect(input).toBeDefined()
+        expect(input.tagName).toBe("INPUT")
+    })
+
+    it("components should have left `.input-group-addon` as first child", async () => {
+        const { app: { $refs } } = window
+
+        const left = $refs.components.$el.children[0]
+        expect(left).toBeDefined()
+        expect(left).toHaveClass("input-group-addon")
+    })
+
+    it("components should have content in left `.input-group-addon`", async () => {
+        const { app: { $refs } } = window
+
+        const left = $refs.components.$el.children[0]
+        expect(left).toBeDefined()
+        expect(left.textContent).toContain("$")
+    })
+
+    it("components should have right `.input-group-btn` as last child", async () => {
+        const { app: { $refs } } = window
+
+        const right = $refs.components.$el.children[2]
+        expect(right).toBeDefined()
+        expect(right).toHaveClass("input-group-btn")
+    })
+
+    it("components should have button in right `.input-group-btn`", async () => {
+        const { app: { $refs } } = window
+
+        const right = $refs.components.$el.children[2]
+        expect(right).toBeDefined()
+        const button = right.children[0]
+        expect(button).toBeDefined()
+        expect(button.tagName).toBe("BUTTON")
+    })
+
+    it("components should have input as second child", async () => {
+        const { app: { $refs } } = window
+
+        const input = $refs.components.$el.children[1]
+        expect(input).toBeDefined()
+        expect(input.tagName).toBe("INPUT")
+    })
+
+    it("large should have '.input-group-lg' class on root element", async () => {
+        const { app: { $refs } } = window
+
+        expect($refs.large.$el).toHaveClass("input-group-lg")
+    })
+
+    it("small should have '.input-group-sm' class on root element", async () => {
+        const { app: { $refs } } = window
+
+        expect($refs.small.$el).toHaveClass("input-group-sm")
+    })
+
+    it("tags should have root Element type of `fieldset'", async () => {
+        const { app: { $refs } } = window
+
+        const tags = $refs.tags.$el
+        expect(tags).toBeDefined()
+        expect(tags.tagName).toBe("FIELDSET")
+    })
+
+    it("tags should have addon Element type of `span'", async () => {
+        const { app: { $refs } } = window
+
+        const tags = $refs.tags.$el
+        expect(tags).toBeDefined()
+        const left = tags.children[0]
+        expect(left).toBeDefined()
+        expect(left.tagName).toBe("SPAN")
+    })
+
+});