Merge pull request #92 from Safelite/feature/SSR-204

commit

src/common-components/text-block/text-block.spec.js

@@ -0,0 +1,59 @@
+import { shallowMount } from "@vue/test-utils";
+import TextBlock from "./text-block";
+
+describe("modal.vue", () => {
+    it("Should display 'Text' when 'Text' is defined in the CMS", async () => {
+        // Act
+        const wrapper = shallowMount(TextBlock, {
+            mixins: [mockMixin],
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Text"]));
+    });
+
+    it("Should contain the typeStyle class as defined by the prop", async () => {
+        // Act
+        const wrapper = shallowMount(TextBlock, {
+            mixins: [mockMixin],
+            propsData: mockProps,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockProps["typeStyle"]));
+    });
+    it("Should contain the justifyText class as defined by the prop", async () => {
+        // Act
+        const wrapper = shallowMount(TextBlock, {
+            mixins: [mockMixin],
+            propsData: mockProps,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockProps["justifyText"]));
+    });
+    it("Should contain the fontWeight class as defined by the prop", async () => {
+        // Act
+        const wrapper = shallowMount(TextBlock, {
+            mixins: [mockMixin],
+            propsData: mockProps,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockProps["fontWeight"]));
+    });
+});
+
+///////////////
+// Constants //
+///////////////
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            return mockCmsContent[cmsFieldName];
+        }),
+    },
+};
+
+const mockProps = {
+    fontWeight: "mockFontWeight",
+    typeStyle: "mockTypeStyle",
+    justifyText: "mockJustifyText",
+};
+
+const mockCmsContent = {
+    Text: "Sample text here.",
+};

src/common-components/text-block/text-block.vue

@@ -0,0 +1,40 @@
+<template>
+    <div
+        class="text-block d-flex w-100 mt-2"
+        :class="[justifyText, typeStyle, fontWeight]"
+        v-html="this.TextBlockCopy"></div>
+</template>
+
+<script>
+export default {
+    name: "textBlock",
+    props: {
+        justifyText: String, // left, right, center
+        typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
+        fontWeight: String, // bold=500, default is 400
+        cmsWidgetName: String,
+    },
+    computed: {
+        TextBlockCopy() {
+            return this.getCmsContent(this.cmsWidgetName, "Text");
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.text-block {
+    &.left {
+        justify-content: flex-start;
+    }
+    &.right {
+        justify-content: flex-end;
+    }
+    &.center {
+        justify-content: center;
+    }
+    &.bold {
+        font-weight: 500;
+    }
+}
+</style>