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' && (
<>
-
+
Refresh
-
+
Click here for audio version
>
)}
-
)
}