Merge pull request #814 from Marvin9/unit-tests

[ignitus-Shared/atoms]: unit tests

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultSearchInput/Components/__snapshots__/defaultSearchInput.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DefaultSearchInput /> should render 1`] = `
+<div
+  class="css-33optf"
+>
+  <svg
+    aria-label="SearchIcon"
+    class="css-vbfihd"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>
+      SearchIcon
+    </title>
+    <path
+      d="M0 0h24v24H0V0z"
+      fill="none"
+    />
+    <path
+      d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+    />
+  </svg>
+  <input
+    class="css-i28mn1"
+    name="Input"
+    placeholder="Placeholder"
+    type="text"
+  />
+</div>
+`;

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultSearchInput/Components/defaultSearchInput.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { mount, render } from 'enzyme';
+
+import { DefaultSearchInput } from './index';
+import { InputTypes } from '../types';
+import SearchIcon from '../../../ignitus-Assets/ignitus-Icons/searchIcon';
+
+const props: InputTypes = {
+  type: 'text',
+  placeholder: 'Placeholder',
+  name: 'Input',
+};
+
+const input = 'input[type="text"]';
+
+let wrapper;
+beforeEach(() => {
+  wrapper = mount(<DefaultSearchInput {...props} />);
+});
+
+describe('<DefaultSearchInput />', () => {
+  it('should render', () => {
+    wrapper = render(<DefaultSearchInput {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render input with proper props passed', () => {
+    const wrapperInputProps = wrapper.find(input).props();
+    expect(wrapperInputProps.type).toBe(props.type);
+    expect(wrapperInputProps.placeholder).toBe(props.placeholder);
+    expect(wrapperInputProps.name).toBe(props.name);
+  });
+
+  it('should render input & SearchIcon', () => {
+    expect(wrapper.find('input[type="text"]').length).toBe(1);
+    expect(wrapper.find(SearchIcon).length).toBe(1);
+  });
+});

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultTag/Components/__snapshots__/defaultTag.test.tsx.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DefaultTag1 /> should render 1`] = `
+.emotion-0 {
+  background: #fff;
+  color: #000;
+  text-align: center;
+  border-radius: 2rem;
+  line-height: 1rem;
+  padding: 1rem 2rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: space-around;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: space-around;
+  justify-content: space-around;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.5rem;
+  cursor: pointer;
+}
+
+<span
+  class="emotion-0"
+  color="#000"
+>
+  Label
+</span>
+`;
+
+exports[`<DefaultTag2 /> should render 1`] = `
+.emotion-1 {
+  background: #fff;
+  color: #000;
+  text-align: center;
+  border-radius: 2rem;
+  line-height: 1rem;
+  padding: 1rem 2rem;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: space-around;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: space-around;
+  justify-content: space-around;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin: 0.5rem;
+  cursor: pointer;
+}
+
+.emotion-0 {
+  width: 1.4rem;
+  fill: #000;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 0.03rem;
+}
+
+<span
+  class="emotion-1"
+  color="#000"
+>
+  <svg
+    aria-label="CrossIcon"
+    class="emotion-0"
+    color="#000"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>
+      CrossIcon
+    </title>
+    <path
+      d="M0 0h24v24H0V0z"
+      fill="none"
+    />
+    <path
+      d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+    />
+  </svg>
+  Label
+</span>
+`;

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultTag/Components/defaultTag.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { mount, render } from 'enzyme';
+import emotionSerializer, { matchers } from 'jest-emotion';
+
+import { DefaultTag1, DefaultTag2 } from './index';
+import { InputTypes } from '../types';
+import CrossIcon from '../../../ignitus-Assets/ignitus-Icons/crossIcon';
+
+const props: InputTypes = {
+  label: 'Label',
+  color: '#000',
+  background: '#fff',
+};
+
+let wrapper;
+
+expect.addSnapshotSerializer(emotionSerializer);
+expect.extend(matchers);
+
+const styleCheck = () => {
+  const span = wrapper.find('span');
+  expect(span).toHaveStyleRule('color', props.color);
+  expect(span).toHaveStyleRule('background', props.background);
+};
+
+describe('<DefaultTag1 />', () => {
+  beforeEach(() => {
+    wrapper = mount(<DefaultTag1 {...props} />);
+  });
+
+  it('should render', () => {
+    wrapper = render(<DefaultTag1 {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render span tag with label', () => {
+    expect(wrapper.find('span').text()).toBe(props.label);
+  });
+
+  it('should render span with style passed in prop', styleCheck);
+});
+
+describe('<DefaultTag2 />', () => {
+  beforeEach(() => {
+    wrapper = mount(<DefaultTag2 {...props} />);
+  });
+
+  it('should render', () => {
+    wrapper = render(<DefaultTag2 {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render span tag with label & CrossIcon', () => {
+    expect(wrapper.find('span').length).toBe(1);
+    expect(wrapper.find(CrossIcon).length).toBe(1);
+  });
+
+  it('should render span with style passed in prop', styleCheck);
+});