import { shallowMount } from "@vue/test-utils"; import buttonMain from "./button-main"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { nextTick } from "vue"; describe("buttonMain.vue", () => { it("Should return btn-primary class", () => { // Arrange/Act const wrapper = shallowMount( buttonMain, setupMocks({ props: { isPrimary: true, }, }) ); const button = wrapper.find("button"); // Assert expect(button.attributes("class")).toContain("btn-primary"); }); it("Should return aria-disabled state", () => { // Arrange/Act const wrapper = shallowMount( buttonMain, setupMocks({ props: { isDisabled: true, }, }) ); const button = wrapper.find("button"); // Assert expect(button.attributes()["aria-disabled"]).toEqual("true"); }); it("Should return loader color", async () => { // Arrange const wrapper = shallowMount( buttonMain, setupMocks({ props: { loaderColor: "blue", loaderEnabled: true, }, }) ); // Act wrapper.vm.clicked(); await nextTick(); // Assert const loader = wrapper.find("loader-stub"); expect(loader.attributes("class")).toContain("blue"); }); it("Should return loader position", async () => { // Arrange const wrapper = shallowMount( buttonMain, setupMocks({ props: { loaderPosition: "right", loaderEnabled: true, }, }) ); // Act wrapper.vm.clicked(); await nextTick(); // Assert const loader = wrapper.find("loader-stub"); expect(loader.attributes("class")).toContain("right"); }); it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => { // Arrange const wrapper = shallowMount( buttonMain, setupMocks({ props: { loaderPosition: "right", loaderEnabled: true, }, }) ); wrapper.setData({ isLoaderDisplayed: true }); // Act wrapper.vm.removeLoader(); await nextTick(); // Assert const loader = wrapper.find("loader-stub"); expect(wrapper.vm.isLoaderDisplayed).toBe(false); }); it("Should set 'isLoaderDisplayed' to false when calling 'resetButtonStyle'", async () => { // Arrange const wrapper = shallowMount( buttonMain, setupMocks({ props: { loaderPosition: "right", loaderEnabled: true, }, }) ); wrapper.setData({ isLoaderDisplayed: true }); // Act wrapper.vm.resetButtonStyle(); await nextTick(); // Assert expect(wrapper.vm.isLoaderDisplayed).toBe(false); }); it("Should emit 'click-event' event when clicking if the button is enabled", async () => { // Arrange const wrapper = shallowMount( buttonMain, setupMocks({ props: { loaderPosition: "right", loaderEnabled: true, isDisabled: false }, }) ); const buttonElement = wrapper.find("button"); // Act buttonElement.trigger("click"); await nextTick(); // Assert expect(wrapper.emitted("click-event")).toBeTruthy(); }); it("Should not emit 'click-event' event when clicking if the button is disabled", async () => { // Arrange const wrapper = shallowMount( buttonMain, setupMocks({ props: { loaderPosition: "right", loaderEnabled: true, isDisabled: true }, }) ); const buttonElement = wrapper.find("button"); // Act buttonElement.trigger("click"); await nextTick(); // Assert expect(wrapper.emitted("click-event")).toBeFalsy(); }); }); function setupMocks(mountOptionsMockData = {}) { const defaultMountOptions = { route: { query: { fmgPage: "page-name" } } }; const baseMountOptions = getMountOptions( Object.assign(defaultMountOptions, mountOptionsMockData) ); const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions); return allMountOptions; }