mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-21 01:15:35 +00:00
7bf319646a
- Remove `e2e` folder entirely - Remove all hacky resolutions and yarn patches - Remove `@types/jasmine`, `js2ts` (convert a JS file to TS), and `vue-template-compiler` from `private/` - Remove e2e CI job - Add browsers tests for vue, svelte, and react headless components and hooks. - Add new (browser) tests for transloadit, aws-s3, and dashboard. - Remove final useless scripts from `package.json`, use direct references in CI. - Fix Dropzone component accessibility discovered during testing - Clean up github workflows (move linters.yml into ci.yml, update e2e.yml) **Why Vitest Browser Mode?** We could have used playwright but vitest browser mode uses it under the hood and we get the use the vitest we know a love. No two entirely different setups, no different assertions to relearn, write e2e tests as if you're writing unit tests. Easy, fast, beautiful. https://vitest.dev/guide/browser/ **Has every single e2e test been rewritten?** No there were quite a few tests that have a lot overlap with existing or newly added tests. There were also some tests that were so heavily mocked inside and out you start to wonder what the value still is. Open to discuss which tests still need to be added.
124 lines
4.1 KiB
TypeScript
124 lines
4.1 KiB
TypeScript
import { userEvent } from '@vitest/browser/context'
|
|
import { describe, expect, test } from 'vitest'
|
|
import { render } from 'vitest-browser-react'
|
|
import App from '../src/App'
|
|
|
|
const createMockFile = (name: string, type: string, size: number = 1024) => {
|
|
return new File(['test content'], name, { type })
|
|
}
|
|
|
|
describe('App', () => {
|
|
test('renders all main sections and upload button is initially disabled', async () => {
|
|
const screen = render(<App />)
|
|
|
|
await expect.element(screen.getByText('With list')).toBeInTheDocument()
|
|
await expect.element(screen.getByText('With grid')).toBeInTheDocument()
|
|
await expect
|
|
.element(screen.getByText('With custom dropzone'))
|
|
.toBeInTheDocument()
|
|
|
|
const uploadButton = screen.getByRole('button', { name: /upload/i })
|
|
await expect.element(uploadButton).toBeInTheDocument()
|
|
await expect.element(uploadButton).toBeDisabled()
|
|
})
|
|
|
|
test('can add and remove files and upload', async () => {
|
|
const screen = render(<App />)
|
|
|
|
const fileInput = document.getElementById(
|
|
'uppy-dropzone-file-input',
|
|
) as Element
|
|
await userEvent.upload(fileInput, createMockFile('test.txt', 'text/plain'))
|
|
|
|
// for list and grid
|
|
for (const element of screen.getByText('test.txt').elements()) {
|
|
await expect.element(element).toBeInTheDocument()
|
|
}
|
|
await screen.getByText('remove').first().click()
|
|
for (const element of screen.getByText('test.txt').elements()) {
|
|
await expect.element(element).not.toBeInTheDocument()
|
|
}
|
|
|
|
await userEvent.upload(fileInput, createMockFile('test.txt', 'text/plain'))
|
|
await screen.getByRole('button', { name: /upload/i }).click()
|
|
await expect
|
|
.element(screen.getByRole('button', { name: /complete/i }))
|
|
.toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
describe('ScreenCapture Component', () => {
|
|
test('renders with title, control buttons, and close functionality works', async () => {
|
|
const screen = render(<App />)
|
|
|
|
await screen.getByRole('button', { name: 'Screen Capture' }).click()
|
|
|
|
await expect
|
|
.element(screen.getByRole('heading', { name: 'Screen Capture' }))
|
|
.toBeInTheDocument()
|
|
|
|
await expect
|
|
.element(screen.getByRole('button', { name: 'Screenshot' }))
|
|
.toBeInTheDocument()
|
|
await expect
|
|
.element(screen.getByRole('button', { name: 'Record' }))
|
|
.toBeInTheDocument()
|
|
await expect
|
|
.element(screen.getByRole('button', { name: 'Stop' }))
|
|
.toBeInTheDocument()
|
|
await expect
|
|
.element(screen.getByRole('button', { name: 'Submit' }))
|
|
.toBeInTheDocument()
|
|
await expect
|
|
.element(screen.getByRole('button', { name: 'Discard' }))
|
|
.toBeInTheDocument()
|
|
|
|
const closeButton = screen.getByText('✕')
|
|
await closeButton.click()
|
|
})
|
|
})
|
|
|
|
describe('Webcam Component', () => {
|
|
test('renders with title, control buttons, and close functionality works', async () => {
|
|
const screen = render(<App />)
|
|
|
|
await screen.getByRole('button', { name: 'Webcam' }).click()
|
|
|
|
await expect
|
|
.element(screen.getByRole('heading', { name: 'Camera' }))
|
|
.toBeInTheDocument()
|
|
|
|
await expect
|
|
.element(screen.getByRole('button', { name: 'Snapshot' }))
|
|
.toBeInTheDocument()
|
|
await expect
|
|
.element(screen.getByRole('button', { name: 'Record' }))
|
|
.toBeInTheDocument()
|
|
await expect
|
|
.element(screen.getByRole('button', { name: 'Stop' }))
|
|
.toBeInTheDocument()
|
|
await expect
|
|
.element(screen.getByRole('button', { name: 'Submit' }))
|
|
.toBeInTheDocument()
|
|
await expect
|
|
.element(screen.getByRole('button', { name: 'Discard' }))
|
|
.toBeInTheDocument()
|
|
|
|
const closeButton = screen.getByText('✕')
|
|
await closeButton.click()
|
|
})
|
|
})
|
|
|
|
describe('RemoteSource Component', () => {
|
|
test('renders login button and login interaction works', async () => {
|
|
const screen = render(<App />)
|
|
|
|
await screen.getByRole('button', { name: 'Dropbox' }).click()
|
|
|
|
const loginButton = screen.getByRole('button', { name: 'Login' })
|
|
await expect.element(loginButton).toBeInTheDocument()
|
|
|
|
await loginButton.click()
|
|
await expect.element(loginButton).toBeInTheDocument()
|
|
})
|
|
})
|