diff --git a/src/components/LuxInputButton.vue b/src/components/LuxInputButton.vue index bd1ee61..50b60ab 100644 --- a/src/components/LuxInputButton.vue +++ b/src/components/LuxInputButton.vue @@ -41,7 +41,7 @@ export default { */ variation: { type: String, - default: "button", + default: "solid", validator: value => { return value.match(/(solid|outline|text|dropdown|icon)/) }, @@ -51,7 +51,7 @@ export default { */ type: { type: String, - default: "", + default: "button", validator: value => { return value.match(/(|button|submit)/) }, @@ -119,6 +119,7 @@ export default { return "lux-icon-" + this.icon }, }, + emits: ["button-clicked", "system-alert"], methods: { buttonClicked(value) { if (this.customAlertEvent) { diff --git a/tests/unit/specs/components/luxInputButton.spec.js b/tests/unit/specs/components/luxInputButton.spec.js index 343ce6e..dbfc821 100644 --- a/tests/unit/specs/components/luxInputButton.spec.js +++ b/tests/unit/specs/components/luxInputButton.spec.js @@ -1,62 +1,82 @@ import { mount } from "@vue/test-utils" +import { nextTick } from "vue" import LuxInputButton from "@/components/LuxInputButton.vue" import LuxIconBase from "@/components/icons/LuxIconBase.vue" describe("LuxInputButton.vue", () => { let wrapper + beforeEach(() => { + wrapper = mount(LuxInputButton, { + global: { + components: { LuxIconBase }, + }, + }) + }) + describe("ButtonSize", () => { - it("should render different sizes", () => { - wrapper = mount(LuxInputButton, { - props: { - size: "small", - variation: "outline", - }, - global: { - components: { LuxIconBase }, - }, - }) + it("should render different sizes", async () => { + wrapper.setProps({ size: "small" }) + await nextTick() expect(wrapper.get("button").classes()).toContain("small") }) it("should have a default size", () => { - wrapper = mount(LuxInputButton, { - props: { - variation: "outline", - }, - global: { - components: { LuxIconBase }, - }, - }) expect(wrapper.get("button").classes()).toContain("medium") }) }) - describe("Icon", () => { - it("displays an icon", () => { - wrapper = mount(LuxInputButton, { - props: { - variation: "icon", - icon: "search", - }, - global: { - components: { LuxIconBase }, - }, - }) + it("displays an icon", async () => { + wrapper.setProps({ variation: "icon", icon: "search" }) + await nextTick() expect(wrapper.get("button").classes()).toContain("icon") const icon = wrapper.find("lux-icon-search") expect(icon).toBe }) it("does not display an icon", () => { - wrapper = mount(LuxInputButton, { - props: { - variation: "solid", - }, - global: { - components: { LuxIconBase }, + expect(wrapper.get("button").classes()).not.toContain("icon") + }) + }) + describe("Variation", () => { + it("defaults to solid", () => { + expect(wrapper.get("button").classes()).toContain("solid") + }) + it("can be assigned a different variation", async () => { + wrapper.setProps({ variation: "outline" }) + await nextTick() + expect(wrapper.get("button").classes()).toContain("outline") + }) + }) + describe("Type", () => { + it("defaults to being a button", () => { + expect(wrapper.vm.type).toBe("button") + }) + it("can be a submit button", async () => { + wrapper.setProps({ type: "submit" }) + await nextTick() + expect(wrapper.vm.type).toBe("submit") + }) + }) + describe("System alerts", () => { + it("should not emit an alert when there is no alert", () => { + const button1 = wrapper.find("button") + button1.trigger("click") + const emitted1 = wrapper.emitted() + expect(Object.prototype.hasOwnProperty.call(emitted1, "button-clicked")).toBe(true) + expect(Object.prototype.hasOwnProperty.call(emitted1, "system-alert")).toBe(false) + }) + it("emits an alert when there is an alert", async () => { + wrapper.setProps({ + customAlertEvent: { + alertStatus: "success", + alertMessage: "This is my message.", }, }) - expect(wrapper.get("button").classes()).not.toContain("icon") + await nextTick() + const button2 = wrapper.find("button") + button2.trigger("click") + const emitted2 = wrapper.emitted() + expect(Object.prototype.hasOwnProperty.call(emitted2, "system-alert")).toBe(true) }) }) })