Add test for react-captcha

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(
+      <Captcha
+        audioUrl='/captcha.opus'
+        imageUrl='/captcha.svg'
+      />,
+    )
+    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()
+    })
+
+  })
+
+})

packages/react-captcha/src/Captcha.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 
 export interface CaptchaProps {
-  onChange: (value: React.ChangeEvent<HTMLInputElement>) => void
-  value: string
   audioUrl?: string
   imageUrl: string
 }
@@ -15,9 +13,12 @@ export interface CaptchaState {
 }
 
 export class Captcha extends React.PureComponent<CaptchaProps, CaptchaState> {
+  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<CaptchaProps, CaptchaState> {
     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<CaptchaProps, CaptchaState> {
         {type === 'image' && (
           <>
             <img key={attempt} src={imageUrl} />
-            <a onClick={this.refresh}>
+            <a className='action-refresh' onClick={this.refresh}>
               Refresh
             </a>
-            <a onClick={this.changeToAudio}>
-              Click here for image version
-            </a>
+            {this.props.audioUrl && (
+              <a className='action-audio' onClick={this.changeToAudio}>
+                Click here for image version
+                </a>
+            )}
           </>
         )}
         {type === 'audio' && (
           <>
             <audio key={attempt} controls src={audioUrl} />
-            <a onClick={this.refresh}>
+            <a className='action-refresh' onClick={this.refresh}>
               Refresh
             </a>
-            <a onClick={this.changeToImage}>
+            <a className='action-image' onClick={this.changeToImage}>
               Click here for audio version
             </a>
           </>
         )}
-        <input key={attempt} value={value} onChange={onChange} />
       </div>
     )
   }