tests

Author: snikidev

README.md

@@ -1,5 +1,4 @@
 - label
-- write tests
 - disable style
 - run tests & update snapshots
 - build package

dist/index.js

@@ -57,6 +57,7 @@
     "@babel/core": "7.0.0",
     "@types/enzyme": "^3.9.1",
     "@types/jest": "^24.0.12",
+    "@types/sinon": "^7.0.11",
     "@typescript-eslint/eslint-plugin": "^1.7.0",
     "@typescript-eslint/parser": "^1.7.0",
     "awesome-typescript-loader": "^5.2.1",

package.json

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { shallow, mount } from 'enzyme';
-//@ts-ignore
 import * as sinon from 'sinon';
 
+import { Inputs } from '../components/interfaces';
 import MultiFieldsInput from '../components/index';
 
 describe('MultiFieldsInput', () => {
-  const inputs = [
+  const inputs: Inputs[] = [
     {
       type: 'number',
       maxLength: 2,
@@ -29,7 +29,6 @@ describe('MultiFieldsInput', () => {
       <MultiFieldsInput
         label="Sort Code"
         name="sortCode"
-        //@ts-ignore
         inputs={inputs}
         value="202020"
         onBlur={() => {}}
@@ -46,25 +45,37 @@ describe('MultiFieldsInput', () => {
       <MultiFieldsInput
         label="Sort Code"
         name="sortCode"
-        //@ts-ignore
         inputs={inputs}
         value="202122"
         onBlur={spyBlur}
         onChange={spyChange}
       />
     );
+    const instance = component.instance() as MultiFieldsInput;
 
     component
       .find('input[name="sortCode0"]')
       .simulate('change', { target: { name: 'sortCode0', value: '10' } });
 
     expect(spyChange.calledOnce).toBe(true);
     component.update();
+
     expect(component.find('input[name="sortCode0"]').prop('value')).toBe('10');
-    //call getValue() method and see if it returns the correct value as well
+    expect(instance.getValue()).toBe('102122');
   });
 
   it('Error class is activated when not valid', () => {
-    // expect(component).toMatchSnapshot();
+    const component = mount(
+      <MultiFieldsInput
+        label="Sort Code"
+        name="sortCode"
+        inputs={inputs}
+        isValid={false}
+        value="202020"
+        onBlur={() => {}}
+        onChange={() => {}}
+      />
+    );
+    expect(component.find('input.rmfi-error').length).toBe(3);
   });
 });

src/__tests__/index.test.tsx

@@ -98,7 +98,7 @@ class MultiFieldsInput extends Component<Props> {
   };
 
   render() {
-    const { inputs, isValid, name } = this.props;
+    const { inputs, isValid, name, label } = this.props;
     const { state } = this;
 
     const globalProps = {
@@ -108,6 +108,11 @@ class MultiFieldsInput extends Component<Props> {
 
     return (
       <div className="rmfi-container">
+        {label && (
+          <label htmlFor={name} className="rmfi-label">
+            {label}
+          </label>
+        )}
         {inputs.map((field, index) => {
           return (
             <input

src/components/index.tsx

@@ -1,4 +1,4 @@
-interface Inputs {
+export interface Inputs {
   type: 'number' | 'text';
   maxLength: number;
   placeholder: string;
@@ -11,17 +11,16 @@ export interface Target {
   value: string;
 }
 
-export interface Props {
+export interface DefaultProps {
+  autoFocus: boolean;
+  isValid: boolean;
+}
+
+export interface Props extends DefaultProps {
   inputs: Inputs[];
   name: string;
   onBlur(target: Target): void;
   onChange(target: Target): void;
-  isValid?: boolean;
   value?: string;
-  autoFocus?: boolean;
-}
-
-export interface DefaultProps {
-  autoFocus: boolean;
-  isValid: boolean;
+  label?: string;
 }

src/components/interfaces.tsx

@@ -508,6 +508,11 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/sinon@^7.0.11":
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-7.0.11.tgz#6f28f005a36e779b7db0f1359b9fb9eef72aae88"
+  integrity sha512-6ee09Ugx6GyEr0opUIakmxIWFNmqYPjkqa3/BuxCBokA0klsOLPgMD5K4q40lH7/yZVuJVzOfQpd7pipwjngkQ==
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"