Permalink
Browse files

perf(input-group): convert to functional component (#1288)

* Temp comment out test

* perf(input-gropup): Convert to functional component

* re-Enable tests

* Delete input-group.vue

* Update input-group.html
  • Loading branch information...
tmorehouse committed Nov 5, 2017
1 parent a84c14b commit bd4c3c38ce0c4317b8a95e1ab4bae3ef06bd61ea
@@ -4,9 +4,9 @@
</b-input-group>
<b-input-group ref="components">
<b-input-group-addon>$</b-input-group-addon>
<b-input-group-addon slot="left">$</b-input-group-addon>
<b-input></b-input>
<b-input-group-button>
<b-input-group-button slot="right">
<b-button>Button</b-button>
</b-input-group-button>
</b-input-group>
@@ -1,3 +1,65 @@
import bInputGroup from './input-group.vue';
import { mergeData } from "../../utils";
import InputGroupAddon from './input-group-addon';
export default bInputGroup;
export const props = {
id: {
type: String,
default: null
},
size: {
type: String,
default: null
},
left: {
type: String,
default: null
},
right: {
type: String,
default: null
},
tag: {
type: String,
default: 'div'
}
};
export default {
functional: true,
props: props,
render(h, { props, data, slots }) {
let childNodes = [];
// Left Slot / Prop
if (slots().left) {
childNodes.push(slots().left);
} else if (props.left) {
childNodes.push(h(InputGroupAddon, { domProps: { innerHTML: props.left } }))
}
// Default slot
childNodes.push(slots().default);
// Right slot / prop
if (slots().right) {
childNodes.push(slots().right);
} else if (props.left) {
childNodes.push(h(InputGroupAddon, { domProps: { innerHTML: props.right } }))
}
return h(
props.tag,
mergeData(data, {
staticClass: 'input-group',
class: {
[`input-group-${props.size}`]: Boolean(props.size)
},
attrs: {
id: props.id || null,
role: "group"
}
}),
childNodes
);
}
};
@@ -10,7 +10,7 @@ describe("input-group", async () => {
const refs = ["basic", "components"]
refs.forEach(ref => {
expect($refs[ref].$el).toHaveClass("input-group")
expect($refs[ref]).toHaveClass("input-group")
})
})
@@ -20,78 +20,78 @@ describe("input-group", async () => {
const refs = ["basic", "components"]
refs.forEach(ref => {
expect($refs[ref].$el.getAttribute("role")).toBe("group")
expect($refs[ref].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]
const left = $refs.basic.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]
const left = $refs.basic.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]
const right = $refs.basic.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]
const right = $refs.basic.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]
const input = $refs.basic.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]
const left = $refs.components.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]
const left = $refs.components.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]
const right = $refs.components.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]
const right = $refs.components.children[2]
expect(right).toBeDefined()
const button = right.children[0]
expect(button).toBeDefined()
@@ -101,39 +101,39 @@ describe("input-group", async () => {
it("components should have input as second child", async () => {
const { app: { $refs } } = window
const input = $refs.components.$el.children[1]
const input = $refs.components.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")
expect($refs.large).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")
expect($refs.small).toHaveClass("input-group-sm")
})
it("tags should have root Element type of `fieldset'", async () => {
const { app: { $refs } } = window
const tags = $refs.tags.$el
const tags = $refs.tags
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
const tags = $refs.tags
expect(tags).toBeDefined()
const left = tags.children[0]
expect(left).toBeDefined()
expect(left.tagName).toBe("SPAN")
})
});
})

This file was deleted.

Oops, something went wrong.

0 comments on commit bd4c3c3

Please sign in to comment.