test: add test for TextContent component (#133)

Co-authored-by: Jayanthan

src/packages/TextContent/__snapshots__/test.tsx.snap

@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TextContent /> Should render text content in different variants of color 1`] = `
+.c0 {
+  font-size: 1.4rem;
+  color: #222222;
+}
+
+.c1 {
+  font-size: 1.6rem;
+  color: #222222;
+}
+
+.c2 {
+  font-size: 1.8rem;
+  color: #222222;
+}
+
+<div>
+  <span
+    class="c0"
+  >
+    This is a statement
+  </span>
+  <span
+    class="c1"
+  >
+    This is a statement
+  </span>
+  <span
+    class="c2"
+  >
+    This is a statement
+  </span>
+</div>
+`;
+
+exports[`<TextContent /> Should render text content in different variants of size 1`] = `
+.c0 {
+  font-size: 1.4rem;
+  color: #F8F7FB;
+}
+
+.c1 {
+  font-size: 1.4rem;
+  color: #222222;
+}
+
+.c2 {
+  font-size: 1.4rem;
+  color: #022B54;
+}
+
+.c3 {
+  font-size: 1.4rem;
+  color: #53C3D0;
+}
+
+<div>
+  <span
+    class="c0"
+    color="white"
+  >
+    This is a statement
+  </span>
+  <span
+    class="c1"
+    color="black"
+  >
+    This is a statement
+  </span>
+  <span
+    class="c2"
+    color="primary"
+  >
+    This is a statement
+  </span>
+  <span
+    class="c3"
+    color="secondary"
+  >
+    This is a statement
+  </span>
+</div>
+`;
+
+exports[`<TextContent /> Should render text content in different variants of tag 1`] = `
+.c0 {
+  font-size: 1.4rem;
+  color: #222222;
+}
+
+<div>
+  <p
+    class="c0"
+  >
+    This is a statement
+  </p>
+  <span
+    class="c0"
+  >
+    This is a statement
+  </span>
+  <i
+    class="c0"
+  >
+    This is a statement
+  </i>
+  <b
+    class="c0"
+  >
+    This is a statement
+  </b>
+  <mark
+    class="c0"
+  >
+    This is a statement
+  </mark>
+</div>
+`;

src/packages/TextContent/test.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { render, screen } from '../../utils/testUtils'
+
+import TextContent from '.'
+
+describe('<TextContent />', () => {
+  it('Should render text content', () => {
+    render(<TextContent value="This is a statement" />)
+    const text = screen.getByText('This is a statement')
+
+    expect(text).toBeInTheDocument()
+  })
+
+  it('Should render text content in different variants of tag', () => {
+    const { container } = render(
+      <>
+        <TextContent value="This is a statement" tag="p" />
+        <TextContent value="This is a statement" tag="span" />
+        <TextContent value="This is a statement" tag="i" />
+        <TextContent value="This is a statement" tag="b" />
+        <TextContent value="This is a statement" tag="mark" />
+      </>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('Should render text content in different variants of size', () => {
+    const { container } = render(
+      <>
+        <TextContent value="This is a statement" color="white" />
+        <TextContent value="This is a statement" color="black" />
+        <TextContent value="This is a statement" color="primary" />
+        <TextContent value="This is a statement" color="secondary" />
+      </>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+
+  it('Should render text content in different variants of color', () => {
+    const { container } = render(
+      <>
+        <TextContent value="This is a statement" size="small" />
+        <TextContent value="This is a statement" size="medium" />
+        <TextContent value="This is a statement" size="large" />
+      </>
+    )
+
+    expect(container).toMatchSnapshot()
+  })
+})