Add unit tests to components.

src/App.vue

@@ -5,7 +5,6 @@
 <style lang="scss">
   @import "./node_modules/bootstrap/scss/bootstrap";
   @import "@/styles/common-styles.scss";
-  @import "@/styles/common-button-styles.scss";
   @import "@/styles/common-list-styles.scss";
   @import "@/styles/common-typography-styles.scss";
 </style>

src/styles/common-button-styles.scss

@@ -1,56 +0,0 @@
-//Custom button styles
-.btn {
-  &.btn-primary {
-    position: relative;
-    background: $blue-700;
-    @include blue-gradient;
-    border: none;
-    border-radius: $border-radius-lg;
-    color: $white;
-    transition: all 150ms linear;
-    &:hover {
-      background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
-    }
-    &:focus, // Mouse, touch, stylus focus
-    &:focus-visible { // Keyboard focus for accessibility
-      outline: none;
-      box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
-      color: $white;
-      @include blue-gradient;
-    }
-    &:disabled {
-      background: $gray-100 !important;
-      background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important;
-      color: $gray !important;
-      height: 48px;
-      border: none;
-      border-radius: $border-radius-lg;
-    }
-  }
-  &.btn-secondary {
-    position: relative;
-    background: transparent;
-    border: 1px solid $blue;
-    border-radius: $border-radius-lg;
-    color: $blue;
-    transition: all 150ms linear;
-    &:hover {
-      color: $white;
-      @include blue-gradient;
-    }
-    &:focus, // Mouse, touch, stylus focus
-    &:focus-visible { // Keyboard focus for accessibility
-      outline: none;
-      box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
-      color: $white;
-      @include blue-gradient;
-    }
-    &:disabled {
-      background: transparent;
-      color: $gray !important;
-      height: 48px;
-      border: 1px solid $gray-300;
-      border-radius: $border-radius-lg;
-    }
-  }
-}

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

@@ -1 +1,92 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import buttonPrimary from "./button-primary";
+import { nextTick } from "vue";
+
+describe("buttonPrimary.vue", () => {
+
+  it("Should return aria-disabled state", async () => {
+    // Act
+    const wrapper = shallowMount(buttonPrimary, {
+      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(buttonPrimary, {
+      propsData: {
+        loaderColor: "blue",
+        loaderEnabled: true
+      },
+    });
+
+    // Assert
+
+    const label = wrapper.find("label");
+
+    wrapper.vm.displayComponent();
+
+    await nextTick();
+
+    const loader = wrapper.find("loader-stub");
+
+    expect(loader.attributes('class')).toContain("blue");
+
+  });
+
+  it("Should return loader position", async () => {
+    // Act
+    const wrapper = shallowMount(buttonPrimary, {
+      propsData: {
+        loaderPosition: "right",
+        loaderEnabled: true
+      },
+    });
+
+    // Assert
+
+    const label = wrapper.find("label");
+
+    wrapper.vm.displayComponent();
+
+    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(buttonPrimary, {
+      propsData: {
+        sizeInRem: 1,
+        loaderEnabled: true
+      },
+    });
+
+    // Assert
+
+    const label = wrapper.find("label");
+
+    wrapper.vm.displayComponent();
+
+    await nextTick();
+
+    const loader = wrapper.find("loader-stub");
+
+    expect(loader.attributes('style')).toContain("1rem");
+
+  });
+
+});

src/ux-components/button-primary/button-primary.vue

@@ -41,3 +41,36 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+.btn {
+  &.btn-primary {
+    position: relative;
+    background: $blue-700;
+    @include blue-gradient;
+    border: none;
+    border-radius: $border-radius-lg;
+    color: $white;
+    transition: all 150ms linear;
+    &:hover {
+      background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
+    }
+    &:focus, // Mouse, touch, stylus focus
+    &:focus-visible { // Keyboard focus for accessibility
+      outline: none;
+      box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+      color: $white;
+      @include blue-gradient;
+    }
+    &:disabled {
+      background: $gray-100 !important;
+      background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%) !important;
+      color: $gray !important;
+      height: 48px;
+      border: none;
+      border-radius: $border-radius-lg;
+    }
+  }
+}
+
+</style>

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

@@ -1 +1,92 @@
-test.todo("some test to be written in the future");
+import { shallowMount } from "@vue/test-utils";
+import buttonSecondary from "./button-secondary";
+import { nextTick } from "vue";
+
+describe("buttonSecondary.vue", () => {
+
+  it("Should return aria-disabled state", async () => {
+    // Act
+    const wrapper = shallowMount(buttonSecondary, {
+      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(buttonSecondary, {
+      propsData: {
+        loaderColor: "blue",
+        loaderEnabled: true
+      },
+    });
+
+    // Assert
+
+    const label = wrapper.find("label");
+
+    wrapper.vm.displayComponent();
+
+    await nextTick();
+
+    const loader = wrapper.find("loader-stub");
+
+    expect(loader.attributes('class')).toContain("blue");
+
+  });
+
+  it("Should return loader position", async () => {
+    // Act
+    const wrapper = shallowMount(buttonSecondary, {
+      propsData: {
+        loaderPosition: "right",
+        loaderEnabled: true
+      },
+    });
+
+    // Assert
+
+    const label = wrapper.find("label");
+
+    wrapper.vm.displayComponent();
+
+    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(buttonSecondary, {
+      propsData: {
+        sizeInRem: 1,
+        loaderEnabled: true
+      },
+    });
+
+    // Assert
+
+    const label = wrapper.find("label");
+
+    wrapper.vm.displayComponent();
+
+    await nextTick();
+
+    const loader = wrapper.find("loader-stub");
+
+    expect(loader.attributes('style')).toContain("1rem");
+
+  });
+
+});

src/ux-components/button-secondary/button-secondary.vue

@@ -18,7 +18,7 @@
 <script>
 import loader from "@/ux-components/loader/loader";
 export default {
-  name: "buttonPrimary",
+  name: "buttonSecondary",
   props: {
     buttonText: String,
     isDisabled: Boolean,
@@ -41,3 +41,35 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+.btn {
+  &.btn-secondary {
+    position: relative;
+    background: transparent;
+    border: 1px solid $blue;
+    border-radius: $border-radius-lg;
+    color: $blue;
+    transition: all 150ms linear;
+    &:hover {
+      color: $white;
+      @include blue-gradient;
+    }
+    &:focus, // Mouse, touch, stylus focus
+    &:focus-visible { // Keyboard focus for accessibility
+      outline: none;
+      box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
+      color: $white;
+      @include blue-gradient;
+    }
+    &:disabled {
+      background: transparent;
+      color: $gray !important;
+      height: 48px;
+      border: 1px solid $gray-300;
+      border-radius: $border-radius-lg;
+    }
+  }
+}
+
+</style>