kawa/Ready2Blob
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

feat(05-03): migrate BackendSelectionStep.test.tsx from fireEvent to userEvent

Browse Source 
- Replace fireEvent import with userEvent from @testing-library/user-event
- Add const user = userEvent.setup() inside each test body using interactions
- Replace fireEvent.click(azureButton) with await user.click(azureButton)
- Replace fireEvent.change(nameInput) with await user.clear() + await user.type()
- Make all interaction tests async
This commit is contained in:
kawa
2026-03-30 09:42:32 +02:00
parent d17476858b
commit 9b6d8a8137
1 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wizard/BackendSelectionStep.test.tsx
+17 -9
View File
@@ -2,7 +2,8 @@
// Covers WIZD-01: card grid renders Azure Blob, Amazon S3, S3-Compatible (Azure first)
// Covers WIZD-04: remote name field validates alphanumeric/dash/underscore
import { describe, it, expect } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { WizardProvider } from '../../store/context';
import { BackendSelectionStep } from './BackendSelectionStep';
@@ -42,16 +43,18 @@ describe('BackendSelectionStep', () => {
expect(azureIdx).toBeLessThan(s3Idx);
});
it('clicking a backend card dispatches SET_BACKEND_TYPE and SET_STEP', () => {
it('clicking a backend card dispatches SET_BACKEND_TYPE and SET_STEP', async () => {
const user = userEvent.setup();
renderStep();
// Fill in a valid remote name first
const nameInput = screen.getByRole('textbox');
fireEvent.change(nameInput, { target: { value: 'my-remote' } });
await user.clear(nameInput);
await user.type(nameInput, 'my-remote');
// Click the Azure card — if navigation dispatches SET_STEP(1), component may unmount
// We verify no validation error appears (meaning dispatch proceeded)
const azureButton = screen.getAllByRole('button').find(b => b.textContent?.includes('Azure Blob Storage'))!;
expect(azureButton).toBeDefined();
fireEvent.click(azureButton);
await user.click(azureButton);
// After successful navigation step fires, no validation alert should be present
expect(screen.queryByRole('alert')).toBeNull();
});
@@ -77,10 +80,11 @@ describe('BackendSelectionStep', () => {
});
it('shows inline error after first Next attempt with invalid name', async () => {
const user = userEvent.setup();
renderStep();
// Click a card without filling in name — triggers validation
const azureButton = screen.getAllByRole('button').find(b => b.textContent?.includes('Azure Blob Storage'))!;
fireEvent.click(azureButton);
await user.click(azureButton);
// Error should appear after async validation
await waitFor(() => {
expect(screen.getByRole('alert')).toBeDefined();
@@ -89,11 +93,13 @@ describe('BackendSelectionStep', () => {
});
it('accepts alphanumeric, dashes, and underscores', async () => {
const user = userEvent.setup();
renderStep();
const nameInput = screen.getByRole('textbox');
fireEvent.change(nameInput, { target: { value: 'my-remote_01' } });
await user.clear(nameInput);
await user.type(nameInput, 'my-remote_01');
const azureButton = screen.getAllByRole('button').find(b => b.textContent?.includes('Azure Blob Storage'))!;
fireEvent.click(azureButton);
await user.click(azureButton);
// Valid name — no alert should appear (wait briefly to confirm no error appears)
await waitFor(() => {
expect(screen.queryByRole('alert')).toBeNull();
@@ -101,11 +107,13 @@ describe('BackendSelectionStep', () => {
});
it('rejects names with spaces or special characters', async () => {
const user = userEvent.setup();
renderStep();
const nameInput = screen.getByRole('textbox');
fireEvent.change(nameInput, { target: { value: 'my remote!' } });
await user.clear(nameInput);
await user.type(nameInput, 'my remote!');
const azureButton = screen.getAllByRole('button').find(b => b.textContent?.includes('Azure Blob Storage'))!;
fireEvent.click(azureButton);
await user.click(azureButton);
// Invalid name — alert should appear after async validation
await waitFor(() => {
expect(screen.getByRole('alert')).toBeDefined();