CSR-266 add unit test.

src/layouts/component-test/component-test.vue

@@ -26,13 +26,14 @@
         isPrimary
         buttonText="Primary"
         loaderColor="white"
-        sizeInRem="1" />
+        sizeInRem="1"
+        />
       </div>
     </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
-        <buttonSecondary
+        <buttonMain
-        buttonText="Secondary"
+        buttonText="secondary"
         loaderColor="white"
         sizeInRem="1"
         />
@@ -889,7 +890,6 @@
 
 <script>
 import buttonMain from "@/ux-components/button-main/button-main";
-import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
 import buttonBack from "@/common-components/button-back/button-back";
 import listCard from "@/ux-components/list-card/list-card";
 import listButton from "@/ux-components/list-button/list-button";
@@ -904,7 +904,6 @@ export default {
   name: "App",
   components: {
     buttonMain,
-    buttonSecondary,
     buttonBack,
     listCard,
     listButton,

src/ux-components/button-main/button-main.spec.js

@@ -0,0 +1,108 @@
+import { shallowMount } from "@vue/test-utils";
+import buttonMain from "./button-main";
+import { nextTick } from "vue";
+
+describe("buttonMain.vue", () => {
+
+  it("Should return btn-primary class", async () => {
+    // Act
+    const wrapper = shallowMount(buttonMain, {
+      propsData: {
+        isPrimary: true
+      },
+    });
+
+    // Assert
+    const button = wrapper.find("button");
+
+    // Expect
+    expect(button.attributes('class')).toContain("btn-primary");
+
+  });
+
+  it("Should return aria-disabled state", async () => {
+    // Act
+    const wrapper = shallowMount(buttonMain, {
+      propsData: {
+        isDisabled: true
+      },
+    });
+
+    // Assert
+    const button = wrapper.find("button");
+
+    // Expect
+    expect(button.attributes()["aria-disabled"]).toEqual("true");
+
+  });
+
+  it("Should return loader color", async () => {
+    // Act
+    const wrapper = shallowMount(buttonMain, {
+      propsData: {
+        loaderColor: "blue",
+        loaderEnabled: true
+      },
+    });
+
+    // Assert
+
+    const label = wrapper.find("label");
+
+    wrapper.vm.clicked();
+
+    await nextTick();
+
+    const loader = wrapper.find("loader-stub");
+
+    expect(loader.attributes('class')).toContain("blue");
+
+  });
+
+  it("Should return loader position", async () => {
+    // Act
+    const wrapper = shallowMount(buttonMain, {
+      propsData: {
+        loaderPosition: "right",
+        loaderEnabled: true
+      },
+    });
+
+    // Assert
+
+    const label = wrapper.find("label");
+
+    wrapper.vm.clicked();
+
+    await nextTick();
+
+    const loader = wrapper.find("loader-stub");
+
+    expect(loader.attributes('class')).toContain("right");
+
+  });
+
+  it("Should return loader size in rem", async () => {
+    // Act
+    const wrapper = shallowMount(buttonMain, {
+      propsData: {
+        sizeInRem: 1,
+        loaderEnabled: true
+      },
+    });
+
+    // Assert
+
+    const label = wrapper.find("label");
+
+    wrapper.vm.clicked();
+
+    await nextTick();
+
+    const loader = wrapper.find("loader-stub");
+
+    expect(loader.attributes('style')).toContain("1rem");
+
+  });
+
+});