From b234dfa4ca90a194e70bf62f62b8006abfa6df8a Mon Sep 17 00:00:00 2001 From: bmauger Date: Fri, 21 Jan 2022 14:42:40 -0500 Subject: [PATCH 1/3] CSR-266 create text link variations. --- src/layouts/component-test/component-test.vue | 31 ++++++--- src/styles/common-styles.scss | 35 ---------- src/ux-components/text-link/text-link.spec.js | 1 + src/ux-components/text-link/text-link.vue | 69 +++++++++++++++++++ 4 files changed, 91 insertions(+), 45 deletions(-) create mode 100644 src/ux-components/text-link/text-link.spec.js create mode 100644 src/ux-components/text-link/text-link.vue diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue index 2ac9f56c6..06ce8a1dc 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -631,18 +631,27 @@
- Text Link (default text link behavior) -

- Text Link Small (.small) -

- Footer Link (.footer-link) -

- Navigation Link (.navigation-link) +

+

+

+
-

Typogrophy

+

Typography

@@ -888,7 +897,8 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import funnelHeader from "@/common-components/funnel-header/funnel-header"; import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal"; import checkbox from "@/ux-components/checkbox/checkbox"; -import buttonQuestion from "@/common-components/button-question/button-question" +import buttonQuestion from "@/common-components/button-question/button-question"; +import textLink from "@/ux-components/text-link/text-link"; export default { name: "App", components: { @@ -902,7 +912,8 @@ export default { listButtonHorizontal, checkbox, funnelHeader, - buttonQuestion + buttonQuestion, + textLink }, data() { return { diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss index ba18099ff..a4915049b 100644 --- a/src/styles/common-styles.scss +++ b/src/styles/common-styles.scss @@ -10,41 +10,6 @@ body { box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper } } - a { - color: $blue; - text-decoration: none; - border-bottom: 1px solid $blue; - line-height: 26px; - padding: 0 0 4px 0; - font-weight: 500; - &:hover { - color: $blue-700; - } - &.small { - line-height: 24px; - &:hover { - color: $blue-700; - } - } - &.navigation-link { - color: $black; - border-bottom: 1px solid $black; - line-height: 26px; - } - &.footer-link { - color: $gray-500; - text-decoration: none; - border-bottom: 1px solid transparent; - line-height: 20px; - padding: 0 0 2px 0; - font-weight: 400; - font-size: .75rem; - &:hover { - border-bottom: 1px solid $gray-500; - padding: 0 0 2px 0; - } - } - } .pointer { cursor: pointer; } diff --git a/src/ux-components/text-link/text-link.spec.js b/src/ux-components/text-link/text-link.spec.js new file mode 100644 index 000000000..3d0843e10 --- /dev/null +++ b/src/ux-components/text-link/text-link.spec.js @@ -0,0 +1 @@ +test.todo("some test to be written in the future"); diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue new file mode 100644 index 000000000..15d677c9f --- /dev/null +++ b/src/ux-components/text-link/text-link.vue @@ -0,0 +1,69 @@ + + + + + From 616db70e3efce4f47e0306b2bc795ceb5f1d98ec Mon Sep 17 00:00:00 2001 From: bmauger Date: Sat, 22 Jan 2022 12:07:40 -0500 Subject: [PATCH 2/3] CSR-266 add unit tests. --- src/ux-components/text-link/text-link.spec.js | 69 ++++++++++++++++++- 1 file changed, 68 insertions(+), 1 deletion(-) diff --git a/src/ux-components/text-link/text-link.spec.js b/src/ux-components/text-link/text-link.spec.js index 3d0843e10..4c3458137 100644 --- a/src/ux-components/text-link/text-link.spec.js +++ b/src/ux-components/text-link/text-link.spec.js @@ -1 +1,68 @@ -test.todo("some test to be written in the future"); +import { shallowMount } from "@vue/test-utils"; +import textLink from "./text-link"; +import { nextTick } from "vue"; + +describe("text-link.vue", () => { + + it("Should return text-link type is navigation if prop navigation is true", async () => { + // Act + const wrapper = shallowMount(textLink, { + propsData: { + navigation: true, + }, + }); + + // Assert + const paragraph = wrapper.find("a"); + + // Expect + expect(paragraph.attributes('class')).toContain("navigation-link"); + }); + + it("Should return text-link type is footer if prop footer is true", async () => { + // Act + const wrapper = shallowMount(textLink, { + propsData: { + footer: true, + }, + }); + + // Assert + const paragraph = wrapper.find("a"); + + // Expect + expect(paragraph.attributes('class')).toContain("footer-link"); + }); + + it("Should return text-link type is textSmall if prop textSmall is true", async () => { + // Act + const wrapper = shallowMount(textLink, { + propsData: { + textSmall: true, + }, + }); + + // Assert + const paragraph = wrapper.find("a"); + + // Expect + expect(paragraph.attributes('class')).toContain("small"); + }); + + it("Should return text for href", async () => { + // Act + const wrapper = shallowMount(textLink, { + propsData: { + text: "This is link text" + }, + }); + + // Assert + const paragraph = wrapper.find("a"); + + // Expect + expect(paragraph.text()).toEqual("This is link text"); + + }); + +}); From 3cfd3b14aa1f16c656d110c16698a6cfc0651574 Mon Sep 17 00:00:00 2001 From: bmauger Date: Mon, 24 Jan 2022 09:38:32 -0500 Subject: [PATCH 3/3] Add unit test for checkbox.vue. To raise global percentage. --- src/ux-components/checkbox/checkbox.spec.js | 86 ++++++++++++++++++++- 1 file changed, 85 insertions(+), 1 deletion(-) diff --git a/src/ux-components/checkbox/checkbox.spec.js b/src/ux-components/checkbox/checkbox.spec.js index 3d0843e10..e5536f97c 100644 --- a/src/ux-components/checkbox/checkbox.spec.js +++ b/src/ux-components/checkbox/checkbox.spec.js @@ -1 +1,85 @@ -test.todo("some test to be written in the future"); +import { shallowMount } from "@vue/test-utils"; +import checkbox from "./checkbox"; +import { nextTick } from "vue"; + +describe("checkbox.vue", () => { + + it("Should return checkbox name", async () => { + // Act + const wrapper = shallowMount(checkbox, { + propsData: { + checkboxName: "Checkbox" + }, + }); + + // Assert + const input = wrapper.find("input"); + + // Expect + expect(input.attributes().name).toEqual("Checkbox"); + + }); + + it("Should return checkbox id", async () => { + // Act + const wrapper = shallowMount(checkbox, { + propsData: { + buttonID: "Checkbox ID" + }, + }); + + // Assert + const input = wrapper.find("input"); + + // Expect + expect(input.attributes().id).toEqual("Checkbox ID"); + + }); + + it("Should return tabindex value", async () => { + // Act + const wrapper = shallowMount(checkbox, { + propsData: { + tabIndex: "1" + }, + }); + + // Assert + const input = wrapper.find("input"); + + // Expect + expect(input.attributes().tabindex).toEqual("1"); + + }); + + it("Should return label text", async () => { + // Act + const wrapper = shallowMount(checkbox, { + propsData: { + checkboxLabel: "label text" + }, + }); + + // Assert + const paragraph = wrapper.find("p"); + + expect(paragraph.text()).toEqual("label text"); + + }); + + it("Should return label text", async () => { + // Act + const wrapper = shallowMount(checkbox, { + propsData: { + screenReaderOnlyText: "screenreader text" + }, + }); + + // Assert + const paragraph = wrapper.find("span"); + + expect(paragraph.text()).toEqual("screenreader text"); + + }); + +});