From d5e74eb69a66399711303d7a3e4550484617e939 Mon Sep 17 00:00:00 2001
From: depimomo <depimomo@users.noreply.github.com>
Date: Thu, 6 Oct 2022 17:07:05 +0700
Subject: [PATCH] Test: add test for DataTag component (#2858)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Test: add test for DataTag component

* Test: assert background color for DataTag component

Co-authored-by: Monica Kristiadi <monica.kristiadi@tech.jago.com>
Co-authored-by: Manish Kumar ⛄ <manishprivet@protonmail.com>
Co-authored-by: Claudio Wunder <cwunder@gnome.org>
---
 .../__snapshots__/index.test.tsx.snap         | 34 +++++++++++++++++++
 .../DataTag/__tests__/index.test.tsx          | 27 +++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 src/components/DataTag/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 src/components/DataTag/__tests__/index.test.tsx

diff --git a/src/components/DataTag/__tests__/__snapshots__/index.test.tsx.snap b/src/components/DataTag/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000..2bd80b1a13
--- /dev/null
+++ b/src/components/DataTag/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Data Tag component renders with blue background color when tag is 'M' 1`] = `
+<div>
+  <span
+    class="dataTag"
+    data-tag="M"
+  >
+    M
+  </span>
+</div>
+`;
+
+exports[`Data Tag component renders with red background color when tag is 'E' 1`] = `
+<div>
+  <span
+    class="dataTag"
+    data-tag="E"
+  >
+    E
+  </span>
+</div>
+`;
+
+exports[`Data Tag component renders with yellow background color when tag is 'C' 1`] = `
+<div>
+  <span
+    class="dataTag"
+    data-tag="C"
+  >
+    C
+  </span>
+</div>
+`;
diff --git a/src/components/DataTag/__tests__/index.test.tsx b/src/components/DataTag/__tests__/index.test.tsx
new file mode 100644
index 0000000000..ed3c3597fc
--- /dev/null
+++ b/src/components/DataTag/__tests__/index.test.tsx
@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import DataTag from '..';
+
+describe('Data Tag component', () => {
+  it(`renders with red background color when tag is 'E'`, () => {
+    const { container } = render(<DataTag tag="E" />);
+
+    expect(container).toHaveStyle('background-color: var(--danger6)');
+    expect(container).toMatchSnapshot();
+  });
+
+  it(`renders with yellow background color when tag is 'C'`, () => {
+    const { container } = render(<DataTag tag="C" />);
+
+    expect(container).toHaveStyle('background-color: var(--warning4)');
+    expect(container).toMatchSnapshot();
+  });
+
+  it(`renders with blue background color when tag is 'M'`, () => {
+    const { container } = render(<DataTag tag="M" />);
+
+    expect(container).toHaveStyle('background-color: var(--info6)');
+    expect(container).toMatchSnapshot();
+  });
+});