React: Add tests for react (text-mask#451)

revan63 · Mar 14, 2017 · 24330a4 · 24330a4
1 parent f491527
commit 24330a4
Show file tree

Hide file tree

Showing 2 changed files with 269 additions and 4 deletions.
diff --git a/react/src/reactTextMask.js b/react/src/reactTextMask.js
@@ -19,10 +19,12 @@ export const MaskedInput = React.createClass({
  keepCharPositions: PropTypes.bool
  },
 
+ createTextMaskInputElement,
+
  initTextMask() {
  const {props, props: {value}} = this
 
- this.textMaskInputElement = createTextMaskInputElement({inputElement: this.inputElement, ...props})
+ this.textMaskInputElement = this.createTextMaskInputElement({inputElement: this.inputElement, ...props})
  this.textMaskInputElement.update(value)
  },
 

diff --git a/react/test/reactTextMask.spec.js b/react/test/reactTextMask.spec.js
@@ -2,9 +2,16 @@ import React from 'react'
 import ReactTestUtils from 'react-addons-test-utils'
 import packageJson from '../package.json'
 
-const MaskedInput = (isVerify()) ?
- require(`../${packageJson.main}`).default :
- require('../src/reactTextMask.js').default
+const ReactTextMask = (isVerify()) ?
+ require(`../${packageJson.main}`) :
+ require('../src/reactTextMask.js')
+
+const MaskedInput = ReactTextMask.default
+const conformToMask = ReactTextMask.conformToMask
+
+const emailMask = (isVerify()) ?
+ require('../../addons/dist/emailMask.js').default :
+ require('../../addons/src/emailMask.js').default
 
 describe('MaskedInput', () => {
  it('does not throw when instantiated', () => {
@@ -26,4 +33,260 @@ describe('MaskedInput', () => {
  () => ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
  ).not.to.throw()
  })
+
+ it('renders correctly with an undefined value', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
+ guide={true}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+ expect(renderedDOMComponent.value).to.equal('')
+ })
+
+ it('renders correctly with an initial value', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ value='123'
+ mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
+ guide={true}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+ expect(renderedDOMComponent.value).to.equal('(123) ___-____')
+ })
+
+ it('createTextMaskInputElement is a function', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
+ guide={true}/>
+ )
+ expect(typeof maskedInput.createTextMaskInputElement).to.equal('function')
+ })
+
+ it('calls createTextMaskInputElement with the correct config', () => {
+ const mask = ['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
+ const guide = true
+ const placeholderChar = '*'
+ const keepCharPositions = true
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ mask={mask}
+ guide={guide}
+ placeholderChar={placeholderChar}
+ keepCharPositions={keepCharPositions}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+
+ // stub the createTextMaskInputElement method
+ maskedInput.createTextMaskInputElement = (config) => {
+ expect(typeof config).to.equal('object')
+ expect(config.inputElement).to.equal(renderedDOMComponent)
+ expect(config.mask).to.equal(mask)
+ expect(config.guide).to.equal(guide)
+ expect(config.placeholderChar).to.equal(placeholderChar)
+ expect(config.keepCharPositions).to.equal(keepCharPositions)
+ return {
+ update() {}
+ }
+ }
+ maskedInput.initTextMask()
+ })
+
+ it('sets textMaskInputElement and calls textMaskInputElement.update with the correct value', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ value='123'
+ mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
+ />
+ )
+
+ // stub the createTextMaskInputElement method
+ maskedInput.createTextMaskInputElement = () => {
+ return {
+ update(value) {
+ expect(value).to.equal('123')
+ }
+ }
+ }
+ maskedInput.initTextMask()
+ expect(typeof maskedInput.textMaskInputElement).to.equal('object')
+ })
+
+ it('initializes textMaskInputElement property', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
+ guide={true}/>
+ )
+ expect(typeof maskedInput.textMaskInputElement).to.equal('object')
+ expect(typeof maskedInput.textMaskInputElement.state).to.equal('object')
+ expect(typeof maskedInput.textMaskInputElement.state.previousConformedValue).to.equal('string')
+ expect(typeof maskedInput.textMaskInputElement.update).to.equal('function')
+ })
+
+ it('does not render masked characters', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ value='abc'
+ mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
+ guide={true}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+ expect(renderedDOMComponent.value).to.equal('')
+ })
+
+ it('does not allow masked characters', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
+ guide={true}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+
+ expect(renderedDOMComponent.value).to.equal('')
+ maskedInput.textMaskInputElement.update('abc')
+ expect(renderedDOMComponent.value).to.equal('')
+ })
+
+ it('can be disabled by setting the mask to false', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ value='123abc'
+ mask={false}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+ expect(renderedDOMComponent.value).to.equal('123abc')
+ })
+
+ it('can call textMaskInputElement.update to update the inputElement.value', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+
+ expect(renderedDOMComponent.value).to.equal('')
+
+ renderedDOMComponent.value = '12345'
+ maskedInput.textMaskInputElement.update()
+ expect(renderedDOMComponent.value).to.equal('(123) 45_-____')
+ })
+
+ it('can pass value to textMaskInputElement.update method', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ value='123'
+ mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+
+ expect(renderedDOMComponent.value).to.equal('(123) ___-____')
+ maskedInput.textMaskInputElement.update('1234')
+ expect(renderedDOMComponent.value).to.equal('(123) 4__-____')
+ })
+
+ it('can pass textMaskConfig to textMaskInputElement.update method', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ value='123'
+ mask={false}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+
+ expect(renderedDOMComponent.value).to.equal('123')
+
+ maskedInput.textMaskInputElement.update('1234', {
+ inputElement: renderedDOMComponent,
+ mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
+ })
+ expect(renderedDOMComponent.value).to.equal('(123) 4__-____')
+ })
+
+ it('accepts function as mask property', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ value='1234'
+ mask={(value) => {
+ expect(value).to.equal('1234')
+ return ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
+ }}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+ expect(renderedDOMComponent.value).to.equal('(123) 4__-____')
+ })
+
+ it('accepts object as mask property', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ value='abc'
+ mask={emailMask}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+ expect(renderedDOMComponent.value).to.equal('abc@ .')
+ })
+
+ it('accepts pipe function', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ value='1234'
+ mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
+ pipe={(value) => {
+ expect(value).to.equal('(123) 4__-____')
+ return 'abc'
+ }}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+ expect(renderedDOMComponent.value).to.equal('abc')
+ })
+
+ it('calls textMaskInputElement.update and props.onChange when an input event is received', () => {
+ const onChangeSpy = sinon.spy((event) => {
+ expect(event.key).to.equal('a')
+ })
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ value='123'
+ onChange={onChangeSpy}
+ mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
+ guide={true}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+ maskedInput.textMaskInputElement.update = sinon.spy(() => {})
+ ReactTestUtils.Simulate.input(renderedDOMComponent, {key: 'a', keyCode: 65, which: 65})
+ expect(onChangeSpy.callCount).to.equal(1)
+ expect(maskedInput.textMaskInputElement.update.callCount).to.equal(1)
+ })
+
+ it('calls textMaskInputElement.update when an input event is received when props.onChange is not set', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ value='123'
+ mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
+ guide={true}/>
+ )
+ const renderedDOMComponent = ReactTestUtils.findRenderedDOMComponentWithTag(maskedInput, 'input')
+ maskedInput.textMaskInputElement.update = sinon.spy(() => {})
+
+ ReactTestUtils.Simulate.input(renderedDOMComponent, {key: 'a', keyCode: 65, which: 65})
+ expect(maskedInput.textMaskInputElement.update.callCount).to.equal(1)
+ })
+
+ it('calls textMaskInputElement.update via onChange method', () => {
+ const maskedInput = ReactTestUtils.renderIntoDocument(
+ <MaskedInput
+ value='123'
+ mask={['(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
+ guide={true}/>
+ )
+ maskedInput.textMaskInputElement.update = sinon.spy(() => {})
+ maskedInput.onChange()
+ expect(maskedInput.textMaskInputElement.update.callCount).to.equal(1)
+ })
+})
+
+describe('conformToMask', () => {
+ it('is a function', () => {
+ expect(typeof conformToMask).to.equal('function')
+ })
 })