From dda8e3dec5a9d307e339b953c2502195dd2c780a Mon Sep 17 00:00:00 2001
From: Dylan Kilgore <dkilgore@eightfold.ai>
Date: Wed, 22 Feb 2023 16:33:17 -0800
Subject: [PATCH] chore: icon: adds unit tests

---
 src/components/Icon/Icon.test.tsx             | 102 ++++++++++++++
 .../Icon/__snapshots__/Icon.test.tsx.snap     | 127 ++++++++++++++++++
 2 files changed, 229 insertions(+)
 create mode 100644 src/components/Icon/Icon.test.tsx
 create mode 100644 src/components/Icon/__snapshots__/Icon.test.tsx.snap

diff --git a/src/components/Icon/Icon.test.tsx b/src/components/Icon/Icon.test.tsx
new file mode 100644
index 000000000..15e0935d5
--- /dev/null
+++ b/src/components/Icon/Icon.test.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import Enzyme from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import MatchMediaMock from 'jest-matchmedia-mock';
+import { Icon, IconName, IconSize } from './';
+import { render } from '@testing-library/react';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+let matchMedia: any;
+
+describe('Icon', () => {
+  beforeAll(() => {
+    matchMedia = new MatchMediaMock();
+  });
+
+  afterEach(() => {
+    matchMedia.clear();
+  });
+
+  test('Renders without crashing', () => {
+    const { container } = render(<Icon path={IconName.mdiMagnify} />);
+    expect(() => container).not.toThrowError();
+    expect(container.querySelector('.icon-wrapper')).toBeTruthy();
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Renders with the correct icon', () => {
+    const { container } = render(<Icon path={IconName.mdiMagnify} />);
+    expect(container.querySelector('path').getAttribute('d')).toBe(
+      'M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z'
+    );
+  });
+
+  test('Renders with the correct color', () => {
+    const { container } = render(
+      <Icon path={IconName.mdiMagnify} color="#666666" />
+    );
+    expect(container.querySelector('path').getAttribute('style')).toBe(
+      'fill: #666666;'
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Renders with the correct additional classes', () => {
+    const { container } = render(
+      <Icon path={IconName.mdiMagnify} classNames="custom-class" />
+    );
+    expect(
+      container
+        .querySelector('.icon-wrapper')
+        .classList.contains('custom-class')
+    ).toBe(true);
+  });
+
+  test('Renders with the correct title attribute', () => {
+    const { container } = render(
+      <Icon path={IconName.mdiMagnify} title="Search Icon" />
+    );
+    expect(container.querySelector('title').innerHTML).toBe('Search Icon');
+  });
+
+  test('Icon is large', () => {
+    const { container } = render(
+      <Icon path={IconName.mdiMagnify} size={IconSize.Large} />
+    );
+    expect(container.querySelector('svg').getAttribute('style')).toBe(
+      'width: 24px; height: 24px;'
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Icon is medium', () => {
+    const { container } = render(
+      <Icon path={IconName.mdiMagnify} size={IconSize.Medium} />
+    );
+    expect(container.querySelector('svg').getAttribute('style')).toBe(
+      'width: 20px; height: 20px;'
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Icon is small', () => {
+    const { container } = render(
+      <Icon path={IconName.mdiMagnify} size={IconSize.Small} />
+    );
+    expect(container.querySelector('svg').getAttribute('style')).toBe(
+      'width: 16px; height: 16px;'
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Icon is xsmall', () => {
+    const { container } = render(
+      <Icon path={IconName.mdiMagnify} size={IconSize.XSmall} />
+    );
+    expect(container.querySelector('svg').getAttribute('style')).toBe(
+      'width: 14px; height: 14px;'
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Icon/__snapshots__/Icon.test.tsx.snap b/src/components/Icon/__snapshots__/Icon.test.tsx.snap
new file mode 100644
index 000000000..13b750fc1
--- /dev/null
+++ b/src/components/Icon/__snapshots__/Icon.test.tsx.snap
@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon Icon is large 1`] = `
+<div>
+  <span
+    aria-hidden="false"
+    class="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style="width: 24px; height: 24px;"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+        style="fill: currentColor;"
+      />
+    </svg>
+  </span>
+</div>
+`;
+
+exports[`Icon Icon is medium 1`] = `
+<div>
+  <span
+    aria-hidden="false"
+    class="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style="width: 20px; height: 20px;"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+        style="fill: currentColor;"
+      />
+    </svg>
+  </span>
+</div>
+`;
+
+exports[`Icon Icon is small 1`] = `
+<div>
+  <span
+    aria-hidden="false"
+    class="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style="width: 16px; height: 16px;"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+        style="fill: currentColor;"
+      />
+    </svg>
+  </span>
+</div>
+`;
+
+exports[`Icon Icon is xsmall 1`] = `
+<div>
+  <span
+    aria-hidden="false"
+    class="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style="width: 14px; height: 14px;"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+        style="fill: currentColor;"
+      />
+    </svg>
+  </span>
+</div>
+`;
+
+exports[`Icon Renders with the correct color 1`] = `
+<div>
+  <span
+    aria-hidden="false"
+    class="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style="width: 20px; height: 20px;"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+        style="fill: #666666;"
+      />
+    </svg>
+  </span>
+</div>
+`;
+
+exports[`Icon Renders without crashing 1`] = `
+<div>
+  <span
+    aria-hidden="false"
+    class="icon-wrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style="width: 20px; height: 20px;"
+      viewBox="0 0 24 24"
+    >
+      <path
+        d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+        style="fill: currentColor;"
+      />
+    </svg>
+  </span>
+</div>
+`;