Merge pull request #813 from Marvin9/unit-tests

Unit tests

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DefaultPasswordInput /> should render 1`] = `
+<div
+  class="css-1v5y9sx"
+>
+  <svg
+    aria-label="Key Icon"
+    class="css-0"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>
+      Key Icon
+    </title>
+    <path
+      d="M0 0h24v24H0V0z"
+      fill="none"
+    />
+    <path
+      d="M12.65 10C11.7 7.31 8.9 5.5 5.77 6.12c-2.29.46-4.15 2.29-4.63 4.58C.32 14.57 3.26 18 7 18c2.61 0 4.83-1.67 5.65-4H17v2c0 1.1.9 2 2 2s2-.9 2-2v-2c1.1 0 2-.9 2-2s-.9-2-2-2h-8.35zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+    />
+  </svg>
+  <input
+    class="css-0"
+    placeholder="Placeholder"
+    type="password"
+    value="state"
+  />
+  <svg
+    aria-label="Eye Visible Off Icon"
+    class="css-0"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>
+      Eye Visible Off Icon
+    </title>
+    <path
+      d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z"
+      fill="none"
+    />
+    <path
+      d="M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z"
+    />
+  </svg>
+</div>
+`;

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultIconInput/Components/defaultPasswordInput/defaultPasswordInput.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { mount, render } from 'enzyme';
+
+import { DefaultPasswordInput } from './index';
+import { KeyIcon } from '../../../../ignitus-Assets/ignitus-Icons/keyIcon';
+import { EyeVisibleOffIcon } from '../../../../ignitus-Assets/ignitus-Icons/eyeVisibleOffIcon';
+import { EyeVisibleOnIcon } from '../../../../ignitus-Assets/ignitus-Icons/eyeVisibleOnIcon';
+
+const props = {
+  placeholder: 'Placeholder',
+  state: 'state',
+  handleChange: jest.fn(),
+};
+
+let wrapper;
+const inputText = 'input[type="text"]';
+const inputPassword = 'input[type="password"]';
+
+beforeEach(() => {
+  wrapper = mount(<DefaultPasswordInput {...props} />);
+});
+
+describe('<DefaultPasswordInput />', () => {
+  it('should render', () => {
+    wrapper = render(<DefaultPasswordInput {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render key Icon & EyeVisibleOff(initial)', () => {
+    expect(wrapper.find(KeyIcon).length).toBe(1);
+    expect(wrapper.find(EyeVisibleOffIcon).length).toBe(1);
+  });
+
+  it('should render input type password', () => {
+    expect(wrapper.find(inputPassword).length).toBe(1);
+  });
+
+  it('should render input with value of state', () => {
+    expect(wrapper.find(inputPassword).props().value).toBe(props.state);
+  });
+
+  it('should toggle EyeVisible icons on Click', () => {
+    wrapper.find(EyeVisibleOffIcon).simulate('click');
+    expect(wrapper.find(EyeVisibleOffIcon).length).toBe(0);
+    expect(wrapper.find(EyeVisibleOnIcon).length).toBe(1);
+    // input type should also be text
+    expect(wrapper.find(inputPassword).length).toBe(0);
+    expect(wrapper.find(inputText).length).toBe(1);
+  });
+
+  it('should handle change event correctly', () => {
+    wrapper
+      .find(inputPassword)
+      .simulate('change', { target: { value: 'password' } });
+    expect(props.handleChange).toBeCalledWith('password');
+  });
+});

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultIconInput/Components/defaultPasswordInput/index.tsx

@@ -7,8 +7,8 @@ import * as I from './styles';
 
 export const DefaultPasswordInput = ({
   placeholder,
-  handleChange,
   state,
+  handleChange,
   ...rest
 }: DefaultPasswordInputProperties) => {
   const [value, setValue] = useState<string>('');

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultIconInput/types.ts

@@ -10,7 +10,7 @@ export type DefaultIconInputProperties = {
 };
 
 export type DefaultPasswordInputProperties = {
-  state: string;
   placeholder: string;
+  state: string;
   handleChange: (value: string) => void;
 };

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

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DefaultInput /> should render 1`] = `
+<input
+  class="css-8xbheg"
+  name="Input"
+  placeholder="Placeholder"
+  type="text"
+/>
+`;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { mount, render } from 'enzyme';
+
+import { DefaultInput } from './index';
+
+const props = {
+  placeholder: 'Placeholder',
+  type: 'text',
+  name: 'Input',
+  handleChange: jest.fn(),
+};
+
+const input = type => `input[type="${type}"]`;
+
+let wrapper;
+beforeEach(() => {
+  wrapper = mount(<DefaultInput {...props} />);
+});
+
+describe('<DefaultInput />', () => {
+  it('should render', () => {
+    wrapper = render(<DefaultInput {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render input with defined type in prop', () => {
+    expect(wrapper.find(input('text')).length).toBe(1);
+
+    wrapper = mount(<DefaultInput {...{ ...props, type: 'password' }} />);
+    expect(wrapper.find(input('password')).length).toBe(1);
+  });
+
+  it('should handle input change event properly', () => {
+    wrapper
+      .find(input(props.type))
+      .simulate('change', { target: { value: 'value' } });
+
+    expect(props.handleChange).toBeCalledWith('value');
+  });
+});

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultInput/Components/defaultInput.tsx

@@ -2,9 +2,14 @@ import React from 'react';
 import { InputType } from '../types';
 import { Input } from '../styles';
 
-const DefaultInput = ({ placeholder, type, name }: InputType) => (
+const DefaultInput = ({ placeholder, type, name, handleChange }: InputType) => (
   <React.Fragment>
-    <Input placeholder={placeholder} type={type} name={name} />
+    <Input
+      placeholder={placeholder}
+      type={type}
+      name={name}
+      onChange={e => handleChange && handleChange(e.target.value)}
+    />
   </React.Fragment>
 );
 

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultInput/types.ts

@@ -2,4 +2,5 @@ export type InputType = {
   placeholder: string;
   type: string;
   name: string;
+  handleChange?(inputValue: string): Function;
 };

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

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DefaultMultiMediaInput /> should render 1`] = `
+<div
+  class="css-fch366"
+>
+  <div
+    class="css-k2464f"
+  >
+    <textarea
+      class="css-k7ncnn"
+      name="Name"
+      placeholder="Placeholder"
+    />
+  </div>
+  <div
+    class="css-bj1psw"
+  >
+    <div
+      class="css-1oeiakk"
+    >
+      <button
+        class="css-qkkh99"
+      >
+        <svg
+          aria-label="Library Books Icon"
+          class="css-1cood3v"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            Library Books Icon
+          </title>
+          <path
+            d="M3 6c-.55 0-1 .45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1zm17-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 9h-8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1zm-4 4h-4c-.55 0-1-.45-1-1s.45-1 1-1h4c.55 0 1 .45 1 1s-.45 1-1 1zm4-8h-8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1z"
+          />
+        </svg>
+      </button>
+      <button
+        class="css-qkkh99"
+      >
+        <svg
+          aria-label="Poll Icon"
+          class="css-1cood3v"
+          role="img"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            Poll Icon
+          </title>
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM8 17c-.55 0-1-.45-1-1v-5c0-.55.45-1 1-1s1 .45 1 1v5c0 .55-.45 1-1 1zm4 0c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v8c0 .55-.45 1-1 1zm4 0c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1z"
+          />
+        </svg>
+      </button>
+      <button
+        class="css-qkkh99"
+      >
+        <svg
+          aria-label="Pdf Icon"
+          class="css-1cood3v"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            Pdf Icon
+          </title>
+          <path
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
+          <path
+            d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z"
+          />
+        </svg>
+      </button>
+      <button
+        class="css-qkkh99"
+      >
+        <svg
+          aria-label="Video Library Icon"
+          class="css-1cood3v"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            Video Library Icon
+          </title>
+          <path
+            d="M3 6c-.55 0-1 .45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1zm17-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l5.47 4.1c.27.2.27.6 0 .8L12 14.5z"
+          />
+        </svg>
+      </button>
+      <button
+        class="css-qkkh99"
+      >
+        <svg
+          aria-label="Camera Icon"
+          class="css-1cood3v"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            Camera Icon
+          </title>
+          <path
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
+          <path
+            d="M12 15.2C13.7673 15.2 15.2 13.7673 15.2 12C15.2 10.2327 13.7673 8.8 12 8.8C10.2327 8.8 8.8 10.2327 8.8 12C8.8 13.7673 10.2327 15.2 12 15.2ZM9 2L7.17 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4H16.83L15 2H9ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17Z"
+          />
+        </svg>
+      </button>
+    </div>
+    <button
+      class="css-183d2ex"
+    >
+       Post
+    </button>
+  </div>
+</div>
+`;

src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/ignitus-defaultMulti/Components/defaultMultiMediaInput.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { mount, render } from 'enzyme';
+
+import { DefaultMultiMediaInput } from './index';
+
+const props = {
+  placeholder: 'Placeholder',
+  name: 'Name',
+  maxHeightOfInput: 200,
+};
+
+let wrapper;
+beforeEach(() => {
+  wrapper = mount(<DefaultMultiMediaInput {...props} />);
+});
+
+describe('<DefaultMultiMediaInput />', () => {
+  it('should render', () => {
+    wrapper = render(<DefaultMultiMediaInput {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should contain buttons & textarea', () => {
+    // one button with text Post
+    expect(wrapper.findWhere(n => n.text() === 'Post').length).toBe(1);
+
+    // other 5 buttons with svg
+    expect(wrapper.find('button svg').length).toBe(5);
+    expect(wrapper.find('textarea').length).toBe(1);
+  });
+});