Merge pull request #17 from coderan-io/feature/inputs

Feature/inputs

Author: EranNL

__tests__/FieldBase.test.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { mount, render } from 'enzyme';
+import FieldBase from '@/components/Field/FieldBase';
+import { Variant } from '@/components';
+import { FieldContext } from '@/components/Field/FieldContext';
+
+describe('FieldBase test', () => {
+    it('should render field base', () => {
+        const container = render(
+            <div>
+                <FieldBase />
+            </div>
+        );
+
+        expect(container.find('.form-field-base').length).toBe(1);
+    });
+
+    it('should set variant', () => {
+        const container = render(
+            <div>
+                <FieldBase
+                    variant={Variant.PRIMARY}
+                />
+            </div>
+        );
+
+        expect(container.find('.form-field-base.form-field-primary').length).toBe(1);
+    });
+
+    it('should set variant', () => {
+        const container = render(
+            <div>
+                <FieldBase
+                    variant={Variant.PRIMARY}
+                />
+            </div>
+        );
+
+        expect(container.find('.form-field-base.form-field-primary').length).toBe(1);
+    });
+
+    it('should make floating label component', () => {
+        const container = render(
+            <div>
+                <FieldBase
+                    label={<strong>test</strong>}
+                />
+            </div>
+        );
+
+        expect(container.find('.form-field-base').hasClass('floating-label')).toBeTruthy();
+        expect(container.find('.form-field-base .form-field-label-floating strong').text())
+            .toBe('test');
+    });
+
+    it('should make invalid state icon', () => {
+        const container = render(
+            <div>
+                <FieldBase
+                    label={<strong>test</strong>}
+                    valid={false}
+                >
+                    <FieldContext.Consumer>
+                        {({ stateIcon }) => stateIcon}
+                    </FieldContext.Consumer>
+                </FieldBase>
+            </div>
+        );
+
+        expect(container.find('.field-state-icon .icon-close-circle').length).toBe(1);
+    })
+
+    it('should make valid state icon', () => {
+        const container = render(
+            <div>
+                <FieldBase
+                    label={<strong>test</strong>}
+                    valid={true}
+                >
+                    <FieldContext.Consumer>
+                        {({ stateIcon }) => stateIcon}
+                    </FieldContext.Consumer>
+                </FieldBase>
+            </div>
+        );
+
+        expect(container.find('.field-state-icon .icon-checkmark-circle-2').length).toBe(1);
+    })
+
+    it('should change focus and value', () => {
+        const container = mount(
+            <div>
+                <FieldBase>
+                    <FieldContext.Consumer>
+                        {({ changeFocus, changeValue }) => {
+                            changeFocus(true);
+                            changeValue(true);
+                            return undefined
+                        }}
+                    </FieldContext.Consumer>
+                </FieldBase>
+            </div>
+        );
+
+        expect(container.find('.form-field-base.focused.has-value').length).toBe(1);
+    })
+
+    it('should render actions', () => {
+        const container = mount(
+            <div>
+                <FieldBase actions={<span>foo</span>} />
+            </div>
+        );
+
+        expect(container.find('.form-field-base .form-field-actions span').text()).toBe('foo');
+    });
+});

__tests__/FieldContainer.test.tsx

@@ -0,0 +1,25 @@
+import { render } from 'enzyme';
+import React from 'react';
+import FieldContainer from '@/components/Field/FieldContainer';
+
+describe('FieldBase test', () => {
+    it('should render field container', () => {
+        const container = render(
+            <div>
+                <FieldContainer/>
+            </div>
+        );
+
+        expect(container.find('.form-field-container').length).toBe(1);
+    });
+
+    it('should render field container toggle', () => {
+        const container = render(
+            <div>
+                <FieldContainer toggles />
+            </div>
+        );
+
+        expect(container.find('.form-field-container.toggles').length).toBe(1);
+    });
+});

__tests__/FieldContext.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { FieldContext } from '@/components/Field/FieldContext';
+
+describe('FieldContext test', () => {
+    it('should use default values when no consumer used', () => {
+        const mockChangeValue = jest.fn();
+        const mockChangeFocus = jest.fn();
+        const container = render(
+            <div>
+                <FieldContext.Consumer>
+                    {({ changeValue, changeFocus }) => {
+                        const a = changeValue(true);
+                        const b = changeFocus(true);
+
+                        return <span>{a === undefined && b === undefined ? 'undefined' : 'defined'}</span>;
+                    }}
+                </FieldContext.Consumer>
+            </div>,
+            { context: {
+                changeValue: mockChangeValue,
+                changeFocus: mockChangeFocus
+            } }
+        )
+
+        expect(container.find('span').text()).toBe('undefined');
+    });
+})

__tests__/Form.test.tsx

@@ -0,0 +1,60 @@
+import { render } from 'enzyme';
+import React from 'react';
+import FormGroup from '@/components/Form/Group';
+import FormLabel from '@/components/Form/Label';
+import FormMessage from '@/components/Form/Message';
+
+describe('Form test', () => {
+    it('should render form-group', () => {
+        const container = render(
+            <div>
+                <FormGroup/>
+            </div>
+        );
+
+        expect(container.find('.form-group').length).toBe(1);
+    });
+
+    it('should render form label', () => {
+        const container = render(
+            <div>
+                <FormLabel />
+            </div>
+        );
+
+        expect(container.find('.form-label').length).toBe(1);
+    });
+
+    it('should render form message', () => {
+        const container = render(
+            <div>
+                <FormMessage>Message</FormMessage>
+            </div>
+        );
+
+        expect(container.find('.form-message').length).toBe(1);
+        expect((container.find('.form-message').text())).toBe('Message');
+    });
+
+    it('should render valid form message', () => {
+        const container = render(
+            <div>
+                <FormMessage valid>Message</FormMessage>
+            </div>
+        );
+
+        expect(container.find('.form-message.form-message-valid').length).toBe(1);
+        expect((container.find('.form-message').text())).toBe('Message');
+    });
+
+    it('should render invalid form message', () => {
+        const container = render(
+            <div>
+                <FormMessage valid={false}>Message</FormMessage>
+            </div>
+        );
+
+        expect(container.find('.form-message.form-message-invalid').length).toBe(1);
+        expect((container.find('.form-message').text())).toBe('Message');
+    });
+});

__tests__/Selectfield.test.tsx

@@ -0,0 +1,112 @@
+import { mount, render } from 'enzyme';
+import React from 'react';
+import { SelectField } from '@/components';
+
+describe('SelectField test', () => {
+    it('should render text input', () => {
+        const container = render(
+            <div>
+                <SelectField />
+            </div>
+        );
+
+        expect(container.find('.form-field-base select').length).toBe(1);
+    });
+
+    it('Should set initial value with value prop', () => {
+        const fn = jest.fn();
+
+        const container = mount(
+            <SelectField value="foo" onChange={() => fn()}>
+                <option value="" />
+                <option value="foo">bar</option>
+            </SelectField>
+        );
+
+        expect(container.find('select').props().value).toBe('foo');
+    });
+
+    it('Should set initial value with defaultValue prop', () => {
+        const fn = jest.fn();
+
+        const container = mount(
+            <SelectField defaultValue="foo" onChange={() => fn()}>
+                <option value="" />
+                <option value="foo">bar</option>
+            </SelectField>
+        );
+
+        expect(container.find('select').props().value).toBe('foo');
+    });
+
+    it('Should set initial value based on selected option', () => {
+        const fn = jest.fn();
+
+        const container = mount(
+            <SelectField onChange={() => fn()}>
+                <option value="" />
+                <option value="foo" selected>bar</option>
+            </SelectField>
+        );
+
+        expect(container.find('select').props().value).toBe('foo');
+    });
+
+    it('should give focus class when focused', () => {
+        const container = mount(
+            <SelectField/>
+        );
+
+        container.find('select').simulate('focus');
+
+        expect(container.find('.form-field-base').hasClass('focused')).toBeTruthy();
+    });
+
+    it('should not have focus class when blurred after focus', () => {
+        const container = mount(
+            <SelectField/>
+        );
+
+        container.find('select').simulate('focus').simulate('blur');
+
+        expect(container.find('.form-field-base').hasClass('focused')).toBeFalsy();
+    });
+
+    it('should call onChange method when changing', () => {
+        const fn = jest.fn();
+
+        const container = mount(
+            <SelectField onChange={() => fn()}/>
+        );
+
+        container.find('select').simulate('change');
+
+        expect(fn).toHaveBeenCalled();
+    });
+
+    it('should not call onChange method when ommited', () => {
+        const fn = jest.fn();
+
+        const container = mount(
+            <SelectField/>
+        );
+
+        container.find('select').simulate('change');
+
+        expect(fn).not.toHaveBeenCalled();
+    });
+
+    it('should ignore invalid react elements and select last selected option', () => {
+
+        const container = mount(
+            <SelectField>
+                {undefined}
+                <div />
+                <option selected value="foo"></option>
+                <option selected value="bar"></option>
+            </SelectField>
+        );
+
+        expect(container.find('select').props().value).toBe('bar');
+    });
+});