From bc6588187bff854e50e8bab790144b5143180c97 Mon Sep 17 00:00:00 2001
From: Sweety Sharma <126869417+sweetyTW@users.noreply.github.com>
Date: Fri, 3 Nov 2023 01:05:34 +0530
Subject: [PATCH] test: add test for TextContent component (#133)

Co-authored-by: Jayanthan
---
 .../TextContent/__snapshots__/test.tsx.snap   | 120 ++++++++++++++++++
 src/packages/TextContent/test.tsx             |  52 ++++++++
 2 files changed, 172 insertions(+)
 create mode 100644 src/packages/TextContent/__snapshots__/test.tsx.snap
 create mode 100644 src/packages/TextContent/test.tsx

diff --git a/src/packages/TextContent/__snapshots__/test.tsx.snap b/src/packages/TextContent/__snapshots__/test.tsx.snap
new file mode 100644
index 0000000..39c9947
--- /dev/null
+++ b/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>
+`;
diff --git a/src/packages/TextContent/test.tsx b/src/packages/TextContent/test.tsx
new file mode 100644
index 0000000..bea1418
--- /dev/null
+++ b/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()
+  })
+})