Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
c65798a
commit a84c14b
Showing
3 changed files
with
164 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
window.app = new Vue({ | ||
el: "#app" | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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") | ||
}) | ||
|
||
}); |