diff --git a/src/HOCS/_tests_/makeWithLoadingIndicator.test.jsx b/src/HOCS/_tests_/makeWithLoadingIndicator.test.jsx new file mode 100644 index 0000000..78a0563 --- /dev/null +++ b/src/HOCS/_tests_/makeWithLoadingIndicator.test.jsx @@ -0,0 +1,88 @@ +import React from 'react' +import { mount } from 'enzyme' + +import Cube from '../../components/Cube' +import SimpleCircle from '../../components/SimpleCircle' + +import makeWithLoadingIndicator, { getSpinner } from '../makeWithLoadingIndicator' + +const CustomComponent = () =>

CustomComponent

+ +describe('getSpinner()', () => { + it('should render Cube', () => { + const result = getSpinner('Cube') + + expect(result).toEqual(Cube) + }) + + it('should render SimpleCircle', () => { + const result = getSpinner('SimpleCircle') + + expect(result).toEqual(SimpleCircle) + }) + + it('should render custom component', () => { + const result = getSpinner(CustomComponent) + + expect(result).toEqual(CustomComponent) + }) +}) // end getSpinner() + +describe('makeWithLoadingIndicator', () => { + const WrappedComponent = (props) => ( +

WrappedComponent

+ ) + + it('should render wrapped component, if condition HOC returns false', () => { + const condition = () => false + const widthLoadingIndicator = makeWithLoadingIndicator({ condition }) + + const ComponentWithLoadingIndicator = widthLoadingIndicator(WrappedComponent) + + const wrapper = mount() + expect(wrapper.find(WrappedComponent).exists()).toBe(true) + expect(wrapper.find(SimpleCircle).exists()).toBe(false) + }) + + it('should render SimpleCircle by default if condition returns true', () => { + const condition = () => true + const widthLoadingIndicator = makeWithLoadingIndicator({ condition }) + + const ComponentWithLoadingIndicator = widthLoadingIndicator(WrappedComponent) + + const wrapper = mount() + expect(wrapper.find(SimpleCircle).exists()).toBe(true) + expect(wrapper.find(WrappedComponent).exists()).toBe(false) + }) + + it('should render CustomComponent if condition returns true and custom spinner was defined', () => { + const condition = () => true + const widthLoadingIndicator = makeWithLoadingIndicator({ + condition, + spinnerType: CustomComponent + }) + + const ComponentWithLoadingIndicator = widthLoadingIndicator(WrappedComponent) + + const wrapper = mount() + expect(wrapper.find(SimpleCircle).exists()).toBe(false) + expect(wrapper.find(WrappedComponent).exists()).toBe(false) + expect(wrapper.find(CustomComponent).exists()).toBe(true) + }) + + it('should render custom Container if condition is true', () => { + const Container = () =>

Container

+ const condition = () => true + + const widthLoadingIndicator = makeWithLoadingIndicator({ + Container, + condition + }) + + const ComponentWithLoadingIndicator = widthLoadingIndicator(WrappedComponent) + + const wrapper = mount() + expect(wrapper.find(Container).exists()).toBe(true) + expect(wrapper.find(WrappedComponent).exists()).toBe(false) + }) +}) // end makeWithLoadingIndicator diff --git a/src/HOCS/makeWithLoadingIndicator.jsx b/src/HOCS/makeWithLoadingIndicator.jsx index 8464d48..664e681 100644 --- a/src/HOCS/makeWithLoadingIndicator.jsx +++ b/src/HOCS/makeWithLoadingIndicator.jsx @@ -6,7 +6,7 @@ import { branch, renderComponent } from 'recompose' import Cube from '../components/Cube' import SimpleCircle from '../components/SimpleCircle' -const getSpinner = (spinnerType: string | React.Node): React.Node => { +export const getSpinner = (spinnerType: string | React.Node): React.Node => { switch (spinnerType) { case 'Cube': return Cube @@ -17,7 +17,7 @@ const getSpinner = (spinnerType: string | React.Node): React.Node => { } } -export const makeWithLoadingIndicator = ({ +const makeWithLoadingIndicator = ({ Container = React.Fragment, condition, spinnerType = 'SimpleCircle', @@ -46,3 +46,5 @@ export const makeWithLoadingIndicator = ({ }) ) } + +export default makeWithLoadingIndicator diff --git a/src/_tests_/index.test.js b/src/_tests_/index.test.js new file mode 100644 index 0000000..03f2bed --- /dev/null +++ b/src/_tests_/index.test.js @@ -0,0 +1,33 @@ +import HOCSpinners, { + Cube, + makeWithLoadingIndicator, + SimpleCircle +} from '../index' + +describe('HOCSpinners default export', () => { + it('should contain makeWithLoadingIndicator', () => { + expect(HOCSpinners.makeWithLoadingIndicator).toBeDefined() + }) + + it('should contain Cube', () => { + expect(HOCSpinners.Cube).toBeDefined() + }) + + it('should contain SimpleCircle', () => { + expect(HOCSpinners.SimpleCircle).toBeDefined() + }) +}) // end default export + +describe('Named exports', () => { + it('should export makeWithLoadingIndicator', () => { + expect(makeWithLoadingIndicator).toBeDefined() + }) + + it('should export Cube', () => { + expect(Cube).toBeDefined() + }) + + it('should export SimpleCircle', () => { + expect(SimpleCircle).toBeDefined() + }) +}) // end named exports diff --git a/src/components/SimpleCircle/_tests_/index.test.js b/src/components/SimpleCircle/_tests_/index.test.js new file mode 100644 index 0000000..e827380 --- /dev/null +++ b/src/components/SimpleCircle/_tests_/index.test.js @@ -0,0 +1,27 @@ +import React from 'react' +import { shallow } from 'enzyme' + +import Wrapper from '../../Wrapper' +import SimpleCircle, { Circle } from '../index' + +describe('SimpleCircle', () => { + it('should render Wrapper', () => { + const wrapper = shallow() + + expect(wrapper.find(Wrapper).exists()).toBe(true) + }) + + it('should render Circle', () => { + const wrapper = shallow() + + expect(wrapper.find(Circle).exists()).toBe(true) + }) +}) + +describe('Circle', () => { + it('should render
', () => { + const wrapper = shallow() + + expect(wrapper.find('div').exists()).toBe(true) + }) +}) diff --git a/src/components/SimpleCircle/index.jsx b/src/components/SimpleCircle/index.jsx index 6bdf6a8..7a66a60 100644 --- a/src/components/SimpleCircle/index.jsx +++ b/src/components/SimpleCircle/index.jsx @@ -5,7 +5,7 @@ import { colors } from '../../config' import Wrapper from '../Wrapper' -const Circle = styled.div` +export const Circle = styled.div` @keyframes spin { 0% { transform: rotate(0deg); diff --git a/src/index.js b/src/index.js index 3cd7de2..817b8f2 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,16 @@ -import { makeWithLoadingIndicator } from './HOCS/makeWithLoadingIndicator' +import makeWithLoadingIndicator from './HOCS/makeWithLoadingIndicator' import Cube from './components/Cube' +import SimpleCircle from './components/SimpleCircle' +// Components export { Cube } +export { SimpleCircle } + +// HOCs export { makeWithLoadingIndicator } export default { makeWithLoadingIndicator, - Cube + Cube, + SimpleCircle }