Test: add test for DataTag component (#2858)

* 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>

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>
+`;

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();
+  });
+});