test: add MnemonicWordInput.test.tsx

src/components/MnemonicWordInput.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '../testUtils'
+import { Bip39MnemonicWordInput, MnemonicWordInputProps } from './MnemonicWordInput'
+
+const NOOP = () => {}
+
+describe('<Bip39MnemonicWordInput />', () => {
+  const validBip39MnemonicWord = 'abandon'
+  const invalidBip39MnemonicWord = 'not a bip39 word!'
+
+  const setup = (props: MnemonicWordInputProps) => {
+    render(<Bip39MnemonicWordInput {...props} />)
+  }
+
+  it('should render without errors', async () => {
+    setup({ index: 0, value: '', setValue: NOOP })
+
+    expect(await screen.findByTestId('mnemonic-word-input')).toBeVisible()
+  })
+
+  it('should report if input is NOT included in the BIP-39 wordlist', async () => {
+    setup({ index: 0, value: invalidBip39MnemonicWord, setValue: NOOP })
+
+    const input = await screen.findByTestId('mnemonic-word-input')
+    expect(input).toBeVisible()
+    expect(input).toHaveClass('is-invalid')
+    expect(input).not.toHaveClass('is-valid')
+  })
+
+  it('should report if input IS INCLUDED in the BIP-39 wordlist', async () => {
+    setup({ index: 0, value: validBip39MnemonicWord, setValue: NOOP })
+
+    const input = await screen.findByTestId('mnemonic-word-input')
+    expect(input).toBeVisible()
+    expect(input).toHaveClass('is-valid')
+    expect(input).not.toHaveClass('is-invalid')
+  })
+})

src/components/MnemonicWordInput.tsx

@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next'
 import { MNEMONIC_WORDS } from '../constants/bip39words'
 import styles from './MnemonicWordInput.module.css'
 
-interface MnemonicWordInputProps {
-  forwardRef: (el: HTMLInputElement) => void
+export interface MnemonicWordInputProps {
+  forwardRef?: (el: HTMLInputElement) => void
   index: number
   value: string
   setValue: (value: string, index: number) => void
@@ -30,6 +30,7 @@ const MnemonicWordInput = ({
     <rb.InputGroup>
       <rb.InputGroup.Text className={styles.seedwordIndexBackup}>{index + 1}.</rb.InputGroup.Text>
       <rb.Form.Control
+        data-testid="mnemonic-word-input"
         ref={forwardRef}
         type="text"
         placeholder={`${t('create_wallet.placeholder_seed_word_input')} ${index + 1}`}