chore: add tests for react-* headless components (#347)

Basic testing to verify the components in `Authenticator`, `Uploader`,
and `UploadsList` call the expected API functions from their respective
providers.

packages/react-keyring/package.json

@@ -10,7 +10,9 @@
     "types": "build/types/react-keyring/src/index.d.ts"
   },
   "scripts": {
-    "compile": "../../node_modules/.bin/tsc -p tsconfig.json --noEmit --emitDeclarationOnly false"
+    "compile": "../../node_modules/.bin/tsc -p tsconfig.json --noEmit --emitDeclarationOnly false",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "files": [
     "build/*",
@@ -31,6 +33,8 @@
     "ariakit-react-utils": "0.17.0-next.27"
   },
   "devDependencies": {
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "@ucanto/interface": "^4.2.3",
     "@ucanto/principal": "^4.2.3",
     "@web3-storage/access": "^9.3.0"

packages/react-keyring/test/Authenticator.spec.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import 'fake-indexeddb/auto'
+import { test, expect, vi } from 'vitest'
+import user from '@testing-library/user-event'
+import { render, screen } from '@testing-library/react'
+
+import { KeyringContext, keyringContextDefaultValue, KeyringContextValue } from '../src/providers/Keyring'
+import { Authenticator, CancelButton, Form, EmailInput } from '../src/index'
+
+test('CancelButton', async () => {
+  const cancelRegisterSpace = vi.fn()
+  const contextValue: KeyringContextValue = [
+    keyringContextDefaultValue[0],
+    { ...keyringContextDefaultValue[1], cancelRegisterSpace }
+  ]
+  render(
+    <KeyringContext.Provider value={contextValue}>
+      <Authenticator>
+        <CancelButton>Cancel</CancelButton>
+      </Authenticator>
+    </KeyringContext.Provider>
+  )
+
+  const cancelButton = screen.getByText('Cancel')
+  await user.click(cancelButton)
+
+  expect(cancelRegisterSpace).toHaveBeenCalledOnce()
+})
+
+test('Form', async () => {
+  const createSpace = vi.fn()
+  const registerSpace = vi.fn()
+
+  const contextValue: KeyringContextValue = [
+    keyringContextDefaultValue[0],
+    {
+      ...keyringContextDefaultValue[1],
+      createSpace,
+      registerSpace
+    }
+  ]
+  render(
+    <KeyringContext.Provider value={contextValue}>
+      <Authenticator>
+        <Form>
+          <EmailInput placeholder='Email' />
+          <input type='submit' value='Create Space' />
+        </Form>
+      </Authenticator>
+    </KeyringContext.Provider>
+  )
+
+  const myEmail = '[email protected]'
+  const emailInput = screen.getByPlaceholderText('Email')
+  await user.click(emailInput)
+  await user.keyboard(myEmail)
+
+  const submitButton = screen.getByText('Create Space')
+  await user.click(submitButton)
+
+  expect(createSpace).toHaveBeenCalledOnce()
+  expect(registerSpace).toHaveBeenCalledWith(myEmail)
+})

packages/react-uploader/package.json

@@ -10,7 +10,9 @@
     "types": "build/types/react-uploader/src/index.d.ts"
   },
   "scripts": {
-    "compile": "../../node_modules/.bin/tsc -p tsconfig.json --noEmit --emitDeclarationOnly false"
+    "compile": "../../node_modules/.bin/tsc -p tsconfig.json --noEmit --emitDeclarationOnly false",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "files": [
     "build/*",
@@ -35,5 +37,9 @@
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3"
   }
 }

packages/react-uploader/test/Uploader.spec.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import 'fake-indexeddb/auto'
+import { test, expect, vi } from 'vitest'
+import user from '@testing-library/user-event'
+import { render, screen } from '@testing-library/react'
+
+import { UploaderContext, uploaderContextDefaultValue, UploaderContextValue } from '../src/providers/Uploader'
+import { Uploader, Input, Form } from '../src/index'
+
+test('Form', async () => {
+  const uploadFile = vi.fn()
+
+  const contextValue: UploaderContextValue = [
+    uploaderContextDefaultValue[0],
+    {
+      ...uploaderContextDefaultValue[1],
+      uploadFile
+    }
+  ]
+  render(
+    <UploaderContext.Provider value={contextValue}>
+      <Uploader>
+        <Form>
+          <Input data-testid='file-upload' />
+          <input type='submit' value='Upload' />
+        </Form>
+      </Uploader>
+    </UploaderContext.Provider>
+  )
+
+  const file = new File(['hello'], 'hello.txt', { type: 'text/plain' })
+
+  const fileInput = screen.getByTestId('file-upload')
+  await user.upload(fileInput, file)
+
+  const submitButton = screen.getByText('Upload')
+  await user.click(submitButton)
+
+  expect(uploadFile).toHaveBeenCalledWith(file)
+})

packages/react-uploads-list/package.json

@@ -10,7 +10,9 @@
     "types": "build/types/react-uploads-list/src/index.d.ts"
   },
   "scripts": {
-    "compile": "../../node_modules/.bin/tsc -p tsconfig.json --noEmit --emitDeclarationOnly false"
+    "compile": "../../node_modules/.bin/tsc -p tsconfig.json --noEmit --emitDeclarationOnly false",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "files": [
     "build/*",
@@ -34,5 +36,9 @@
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3"
   }
-}
+}

packages/react-uploads-list/test/UploadsList.spec.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import 'fake-indexeddb/auto'
+import { test, expect, vi } from 'vitest'
+import user from '@testing-library/user-event'
+import { render, screen } from '@testing-library/react'
+
+import { UploadsListContext, uploadsListContextDefaultValue, UploadsListContextValue } from '../src/providers/UploadsList'
+import { UploadsList, NextButton, ReloadButton } from '../src/index'
+
+test('Form', async () => {
+  const reload = vi.fn()
+  const next = vi.fn()
+
+  const contextValue: UploadsListContextValue = [
+    uploadsListContextDefaultValue[0],
+    {
+      ...uploadsListContextDefaultValue[1],
+      reload,
+      next
+    }
+  ]
+  render(
+    <UploadsListContext.Provider value={contextValue}>
+      <UploadsList>
+        {({ uploadsList }) => (
+          <div>
+            <ul>
+              {uploadsList?.[0].data?.map(({ root }) => (
+                <li key={root.toString()}>{root.toString()}</li>
+              ))}
+            </ul>
+            <NextButton>Next</NextButton>
+            <ReloadButton>Reload</ReloadButton>
+          </div>
+        )}
+      </UploadsList>
+    </UploadsListContext.Provider>
+  )
+
+  const reloadButton = screen.getByText('Reload')
+  await user.click(reloadButton)
+
+  expect(reload).toHaveBeenCalledOnce()
+
+  const nextButton = screen.getByText('Next')
+  await user.click(nextButton)
+
+  expect(next).toHaveBeenCalledOnce()
+})