Permalink
Browse files

feat(form-text): New functional component (#846)

* Create form-text.js

* Make b-form-text component available

* Update meta.json

* Create demo.html

* Create demo.js

* Create form-text.spec.js

* Update form-text.spec.js

* Update demo.html

* Update form-text.spec.js

* fix(spec): pass failing tests

* Update demo.html
  • Loading branch information...
tmorehouse committed Aug 15, 2017
1 parent e130b49 commit 2ed74707afeef9c1b7fc665aa2509db18c8a3f63
@@ -1,7 +1,7 @@
{
"title": "Form",
"component": "bForm",
"components": ["bFormRow"],
"components": ["bFormRow", "bFormText"],
"events": [
{
"event": "submit",
@@ -0,0 +1,40 @@
import { mergeData } from "../utils";

export const props = {
id: {
type: String,
default: null
},
tag: {
type: String,
default: "small"
},
textVariant: {
type: String,
default: "muted"
},
inline: {
type: Boolean,
default: false
}
};

export default {
functional: true,
props,
render(h, { props, data, children }) {
return h(
props.tag,
mergeData(data, {
class: {
'form-text': !Boolean(props.inline),
[`text-${props.textVariant}`]: Boolean(props.textVariant)
},
attrs: {
id: props.id
}
}),
children
);
}
};
@@ -24,6 +24,7 @@ import bDropdownDivider from "./dropdown-divider.vue";
import bDropdownHeader from "./dropdown-header.vue";
import bForm from "./form.vue";
import bFormRow from "./form-row";
import bFormText from "./form-text";
import bFormFieldset from "./form-fieldset.vue";
import bFormCheckbox from "./form-checkbox.vue";
import bFormRadio from "./form-radio.vue";
@@ -82,6 +83,7 @@ export {
bDropdownHeader,
bForm,
bFormRow,
bFormText,
bFormCheckbox,
bFormFieldset,
bFormFieldset as bFormGroup,
@@ -0,0 +1,77 @@
import { loadFixture, testVM } from "../helpers";

describe("form-text", async () => {
beforeEach(loadFixture("form-text"));
testVM();

it("default should be tag small", async () => {
const { app: { $refs } } = window;
expect($refs.default).toBeElement("small");
});

it("default should have id", async () => {
const { app: { $refs } } = window;
expect($refs.default.getAttribute("id")).toBe("default");
});

it("default should have base class", async () => {
const { app: { $refs } } = window;
expect($refs.default).toHaveClass("form-text");
});

it("default should have muted variant", async () => {
const { app: { $refs } } = window;
expect($refs.default).toHaveClass("text-muted");
});

it("default should have content", async () => {
const { app: { $refs } } = window;
expect($refs.default.textContent).toContain("default");
});

it("custom should be tag p", async () => {
const { app: { $refs } } = window;
expect($refs.custom).toBeElement("p");
});

it("custom should have base class", async () => {
const { app: { $refs } } = window;
expect($refs.custom).toHaveClass("form-text");
});

it("custom should have content", async () => {
const { app: { $refs } } = window;
expect($refs.custom.textContent).toContain("custom");
});

it("variant should have base class", async () => {
const { app: { $refs } } = window;
expect($refs.variant).toHaveClass("form-text");
});

it("variant should have danger variant", async () => {
const { app: { $refs } } = window;
expect($refs.variant).toHaveClass("text-danger");
});

it("variant should have danger variant", async () => {
const { app: { $refs } } = window;
expect($refs.variant.textContent).toContain("variant");
});

it("inline should not have base class", async () => {
const { app: { $refs } } = window;
expect($refs.inline).not.toHaveClass("form-text");
});

it("inline should have variant muted", async () => {
const { app: { $refs } } = window;
expect($refs.inline).toHaveClass("text-muted");
});

it("inline should have content", async () => {
const { app: { $refs } } = window;
expect($refs.inline.textContent).toContain("inline");
});

});
@@ -0,0 +1,13 @@
<div id="app">
<!-- default -->
<b-form-text ref="default" id="default">default</b-form-text>
<br>
<!-- custom tag -->
<b-form-text tag="p" ref="custom">custom</b-form-text>
<br>
<!-- text variant -->
<b-form-text text-variant="danger" ref="variant">variant</b-form-text>
<br>
<!-- inline -->
<b-form-text inline ref="inline">inline</b-form-text>
</div>
@@ -0,0 +1,3 @@
window.app = new Vue({
el: '#app'
});

0 comments on commit 2ed7470

Please sign in to comment.