From a2f24336a94ba715fe0ebcb2ac1401f48dfc9cfc Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 24 Jan 2022 13:52:05 -0500
Subject: [PATCH] Add unit tests to components.

---
 src/App.vue                                   |  3 +-
 src/styles/common-button-styles.scss          | 56 -----------
 .../button-primary/button-primary.spec.js     | 93 ++++++++++++++++++-
 .../button-primary/button-primary.vue         | 33 +++++++
 .../button-secondary/button-secondary.spec.js | 93 ++++++++++++++++++-
 .../button-secondary/button-secondary.vue     | 34 ++++++-
 6 files changed, 251 insertions(+), 61 deletions(-)
 delete mode 100644 src/styles/common-button-styles.scss

diff --git a/src/App.vue b/src/App.vue
index 3d665312e..e6380a315 100644
--- a/src/App.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/styles/common-button-styles.scss b/src/styles/common-button-styles.scss
deleted file mode 100644
index abaf94879..000000000
--- a/src/styles/common-button-styles.scss
+++ /dev/null
@@ -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;
-    }
-  }
-}
diff --git a/src/ux-components/button-primary/button-primary.spec.js b/src/ux-components/button-primary/button-primary.spec.js
index 3d0843e10..39f64111c 100644
--- a/src/ux-components/button-primary/button-primary.spec.js
+++ b/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");
+
+  });
+
+});
diff --git a/src/ux-components/button-primary/button-primary.vue b/src/ux-components/button-primary/button-primary.vue
index ca0cc8505..4b1003f32 100644
--- a/src/ux-components/button-primary/button-primary.vue
+++ b/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>
diff --git a/src/ux-components/button-secondary/button-secondary.spec.js b/src/ux-components/button-secondary/button-secondary.spec.js
index 3d0843e10..b10134228 100644
--- a/src/ux-components/button-secondary/button-secondary.spec.js
+++ b/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");
+
+  });
+
+});
diff --git a/src/ux-components/button-secondary/button-secondary.vue b/src/ux-components/button-secondary/button-secondary.vue
index ec4d7ec0c..c50876387 100644
--- a/src/ux-components/button-secondary/button-secondary.vue
+++ b/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>