diff --git a/packages/react-captcha/src/Captcha.test.tsx b/packages/react-captcha/src/Captcha.test.tsx index e69de29..f88bf58 100644 --- a/packages/react-captcha/src/Captcha.test.tsx +++ b/packages/react-captcha/src/Captcha.test.tsx @@ -0,0 +1,61 @@ +import React from 'react' +import { TestUtils } from '@rondo.dev/react-test' +import { Captcha } from './Captcha' +import T from 'react-dom/test-utils' + +describe('Captcha', () => { + + const t = new TestUtils() + + beforeEach(() => { + render() + }) + + let node: Element + let component: Captcha + function render() { + const result = t.render( + , + ) + node = result.node + component = T.findRenderedComponentWithType(result.component, Captcha) + } + + describe('refresh', () => { + it('updates image / audio key (to reload)', () => { + const refresh = node.querySelector('.action-refresh')! + expect(refresh).toBeDefined() + T.Simulate.click(refresh) + expect(component.state.attempt).toBe(2) + }) + }) + + describe('changeToAudio & changeToImage', () => { + + it('is set to image by default', () => { + expect(node.querySelector('img')).toBeTruthy() + expect(node.querySelector('audio')).toBeFalsy() + }) + + it('switches to audio', () => { + const btnAudio = node.querySelector('.action-audio')! + T.Simulate.click(btnAudio) + expect(node.querySelector('img')).toBeFalsy() + expect(node.querySelector('audio')).toBeTruthy() + }) + + it('switches to image', () => { + const btnAudio = node.querySelector('.action-audio')! + T.Simulate.click(btnAudio) + const btnImage = node.querySelector('.action-image')! + T.Simulate.click(btnImage) + expect(node.querySelector('img')).toBeTruthy() + expect(node.querySelector('audio')).toBeFalsy() + }) + + }) + +}) diff --git a/packages/react-captcha/src/Captcha.tsx b/packages/react-captcha/src/Captcha.tsx index a8bb6c8..e5c1903 100644 --- a/packages/react-captcha/src/Captcha.tsx +++ b/packages/react-captcha/src/Captcha.tsx @@ -1,8 +1,6 @@ import React from 'react' export interface CaptchaProps { - onChange: (value: React.ChangeEvent) => void - value: string audioUrl?: string imageUrl: string } @@ -15,9 +13,12 @@ export interface CaptchaState { } export class Captcha extends React.PureComponent { + static defaultProps = { + name: 'captcha', + } state: CaptchaState = { type: 'image', - attempt: 0, + attempt: 1, } changeType(type: CaptchaType) { this.setState({ type }) @@ -32,7 +33,7 @@ export class Captcha extends React.PureComponent { this.setState({ attempt: this.state.attempt + 1 }) } render() { - const { onChange, value, imageUrl, audioUrl } = this.props + const { imageUrl, audioUrl } = this.props const { attempt, type } = this.state return ( @@ -40,26 +41,27 @@ export class Captcha extends React.PureComponent { {type === 'image' && ( <> - + Refresh - - Click here for image version - + {this.props.audioUrl && ( + + Click here for image version + + )} )} {type === 'audio' && ( <>