Mathis/lemma
1
0
Fork 0
mirror of https://github.com/lordmathis/lemma.git synced 2025-11-06 16:04:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor modal tests for improved clarity and consistency in content and actions

Browse Source
This commit is contained in:
Matúš Námešný
2025-06-29 16:06:35 +02:00
parent 8d9222d084
commit 32d03347fc
12 changed files with 122 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/src/components/modals/account/DeleteAccountModal.test.tsx
View File

@@ -28,8 +28,8 @@ describe('DeleteAccountModal', () => {
mockOnConfirm.mockResolvedValue(undefined);
});
describe('Modal Visibility', () => {
it('shows modal with warning and form when opened', () => {
describe('Modal Visibility and Content', () => {
it('renders modal with correct content when opened', () => {
render(
<DeleteAccountModal
opened={true}
@@ -50,11 +50,15 @@ describe('DeleteAccountModal', () => {
expect(
screen.getByTestId('delete-account-password-input')
).toBeInTheDocument();
expect(screen.getByTestId('cancel-delete-button')).toBeInTheDocument();
expect(screen.getByTestId('confirm-delete-button')).toBeInTheDocument();
expect(
screen.getByTestId('cancel-delete-account-button')
).toBeInTheDocument();
expect(
screen.getByTestId('confirm-delete-account-button')
).toBeInTheDocument();
});
it('hides modal when closed', () => {
it('does not render when closed', () => {
render(
<DeleteAccountModal
opened={false}
@@ -67,7 +71,7 @@ describe('DeleteAccountModal', () => {
});
});
describe('Password Input and Validation', () => {
describe('Form Validation', () => {
it('updates password value when user types', () => {
render(
<DeleteAccountModal
@@ -93,7 +97,7 @@ describe('DeleteAccountModal', () => {
);
const passwordInput = screen.getByTestId('delete-account-password-input');
const deleteButton = screen.getByTestId('confirm-delete-button');
const deleteButton = screen.getByTestId('confirm-delete-account-button');
// Test empty password
fireEvent.click(deleteButton);
@@ -104,8 +108,10 @@ describe('DeleteAccountModal', () => {
fireEvent.click(deleteButton);
expect(mockOnConfirm).not.toHaveBeenCalled();
});
});
it('submits with valid password and clears field on success', async () => {
describe('User Actions', () => {
it('calls onConfirm with valid password and clears field on success', async () => {
render(
<DeleteAccountModal
opened={true}
@@ -115,7 +121,7 @@ describe('DeleteAccountModal', () => {
);
const passwordInput = screen.getByTestId('delete-account-password-input');
const deleteButton = screen.getByTestId('confirm-delete-button');
const deleteButton = screen.getByTestId('confirm-delete-account-button');
fireEvent.change(passwordInput, { target: { value: 'validpassword' } });
fireEvent.click(deleteButton);
@@ -129,6 +135,20 @@ describe('DeleteAccountModal', () => {
});
});
it('calls onClose when cancel button is clicked', () => {
render(
<DeleteAccountModal
opened={true}
onClose={mockOnClose}
onConfirm={mockOnConfirm}
/>
);
fireEvent.click(screen.getByTestId('cancel-delete-account-button'));
expect(mockOnClose).toHaveBeenCalled();
expect(mockOnConfirm).not.toHaveBeenCalled();
});
it('preserves password in field when submission fails', async () => {
mockOnConfirm.mockRejectedValue(new Error('Invalid password'));
@@ -141,7 +161,7 @@ describe('DeleteAccountModal', () => {
);
const passwordInput = screen.getByTestId('delete-account-password-input');
const deleteButton = screen.getByTestId('confirm-delete-button');
const deleteButton = screen.getByTestId('confirm-delete-account-button');
fireEvent.change(passwordInput, { target: { value: 'wrongpassword' } });
fireEvent.click(deleteButton);
@@ -165,7 +185,7 @@ describe('DeleteAccountModal', () => {
/>
);
const cancelButton = screen.getByTestId('cancel-delete-button');
const cancelButton = screen.getByTestId('cancel-delete-account-button');
fireEvent.click(cancelButton);
expect(mockOnClose).toHaveBeenCalled();
@@ -182,7 +202,7 @@ describe('DeleteAccountModal', () => {
);
const passwordInput = screen.getByTestId('delete-account-password-input');
const deleteButton = screen.getByTestId('confirm-delete-button');
const deleteButton = screen.getByTestId('confirm-delete-account-button');
fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
@@ -240,7 +260,7 @@ describe('DeleteAccountModal', () => {
fireEvent.change(passwordInput, { target: { value: 'userpassword' } });
// 3. User confirms deletion
const deleteButton = screen.getByTestId('confirm-delete-button');
const deleteButton = screen.getByTestId('confirm-delete-account-button');
fireEvent.click(deleteButton);
// 4. System processes deletion
@@ -267,7 +287,7 @@ describe('DeleteAccountModal', () => {
const passwordInput = screen.getByTestId('delete-account-password-input');
fireEvent.change(passwordInput, { target: { value: 'somepassword' } });
const cancelButton = screen.getByTestId('cancel-delete-button');
const cancelButton = screen.getByTestId('cancel-delete-account-button');
fireEvent.click(cancelButton);
// Modal closes without deletion

4
app/src/components/modals/account/DeleteAccountModal.tsx
View File

@@ -62,14 +62,14 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
<Button
variant="default"
onClick={onClose}
data-testid="cancel-delete-button"
data-testid="cancel-delete-account-button"
>
Cancel
</Button>
<Button
color="red"
onClick={() => void handleConfirm()}
data-testid="confirm-delete-button"
data-testid="confirm-delete-account-button"
>
Delete
</Button>

8
app/src/components/modals/account/EmailPasswordModal.test.tsx
View File

@@ -29,8 +29,8 @@ describe('EmailPasswordModal', () => {
mockOnConfirm.mockResolvedValue(true);
});
describe('Modal Visibility', () => {
it('shows modal with email confirmation message when opened', () => {
describe('Modal Visibility and Content', () => {
it('renders modal with correct content when opened', () => {
render(
<EmailPasswordModal
opened={true}
@@ -55,7 +55,7 @@ describe('EmailPasswordModal', () => {
).toBeInTheDocument();
});
it('hides modal when closed', () => {
it('does not render when closed', () => {
render(
<EmailPasswordModal
opened={false}
@@ -68,7 +68,7 @@ describe('EmailPasswordModal', () => {
expect(screen.queryByText('Confirm Password')).not.toBeInTheDocument();
});
it('displays different email addresses correctly', () => {
it('displays various email addresses correctly', () => {
const customEmail = 'user@custom.com';
render(
<EmailPasswordModal

38
app/src/components/modals/file/CreateFileModal.test.tsx
View File

@@ -49,20 +49,26 @@ describe('CreateFileModal', () => {
mockModalContext.setNewFileModalVisible.mockClear();
});
describe('Basic functionality', () => {
it('renders modal with all essential elements', () => {
describe('Modal Visibility and Content', () => {
it('renders modal with correct content when opened', () => {
render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
expect(screen.getByText('Create New File')).toBeInTheDocument();
expect(screen.getByTestId('file-name-input')).toBeInTheDocument();
expect(screen.getByTestId('cancel-create-button')).toBeInTheDocument();
expect(screen.getByTestId('confirm-create-button')).toBeInTheDocument();
expect(
screen.getByTestId('cancel-create-file-button')
).toBeInTheDocument();
expect(
screen.getByTestId('confirm-create-file-button')
).toBeInTheDocument();
});
});
it('closes modal when cancel button is clicked', () => {
describe('User Actions', () => {
it('calls onClose when cancel button is clicked', () => {
render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
fireEvent.click(screen.getByTestId('cancel-create-button'));
fireEvent.click(screen.getByTestId('cancel-create-file-button'));
expect(mockModalContext.setNewFileModalVisible).toHaveBeenCalledWith(
false
@@ -77,11 +83,13 @@ describe('CreateFileModal', () => {
expect((fileNameInput as HTMLInputElement).value).toBe('test-file.md');
});
});
describe('Form Validation', () => {
it('has disabled create button when input is empty', () => {
render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
const createButton = screen.getByTestId('confirm-create-button');
const createButton = screen.getByTestId('confirm-create-file-button');
expect(createButton).toBeDisabled();
});
@@ -89,7 +97,7 @@ describe('CreateFileModal', () => {
render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
const fileNameInput = screen.getByTestId('file-name-input');
const createButton = screen.getByTestId('confirm-create-button');
const createButton = screen.getByTestId('confirm-create-file-button');
fireEvent.change(fileNameInput, { target: { value: 'test.md' } });
@@ -97,12 +105,12 @@ describe('CreateFileModal', () => {
});
});
describe('File creation flow', () => {
it('creates file successfully with valid input', async () => {
describe('File Creation Flow', () => {
it('calls onCreateFile when confirmed with valid input', async () => {
render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
const fileNameInput = screen.getByTestId('file-name-input');
const createButton = screen.getByTestId('confirm-create-button');
const createButton = screen.getByTestId('confirm-create-file-button');
fireEvent.change(fileNameInput, { target: { value: 'new-document.md' } });
fireEvent.click(createButton);
@@ -136,7 +144,7 @@ describe('CreateFileModal', () => {
render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
const fileNameInput = screen.getByTestId('file-name-input');
const createButton = screen.getByTestId('confirm-create-button');
const createButton = screen.getByTestId('confirm-create-file-button');
fireEvent.change(fileNameInput, {
target: { value: ' spaced-file.md ' },
@@ -161,7 +169,7 @@ describe('CreateFileModal', () => {
render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
const fileNameInput = screen.getByTestId('file-name-input');
const createButton = screen.getByTestId('confirm-create-button');
const createButton = screen.getByTestId('confirm-create-file-button');
fireEvent.change(fileNameInput, { target: { value: ' ' } });
@@ -170,7 +178,7 @@ describe('CreateFileModal', () => {
});
});
describe('File name variations', () => {
describe('File Name Variations', () => {
it.each([
['file-with_special.chars (1).md', 'special characters'],
['README', 'no extension'],
@@ -180,7 +188,7 @@ describe('CreateFileModal', () => {
render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
const fileNameInput = screen.getByTestId('file-name-input');
const createButton = screen.getByTestId('confirm-create-button');
const createButton = screen.getByTestId('confirm-create-file-button');
fireEvent.change(fileNameInput, { target: { value: fileName } });
fireEvent.click(createButton);

4
app/src/components/modals/file/CreateFileModal.tsx
View File

@@ -49,13 +49,13 @@ const CreateFileModal: React.FC<CreateFileModalProps> = ({ onCreateFile }) => {
<Button
variant="default"
onClick={() => setNewFileModalVisible(false)}
data-testid="cancel-create-button"
data-testid="cancel-create-file-button"
>
Cancel
</Button>
<Button
onClick={() => void handleSubmit()}
data-testid="confirm-create-button"
data-testid="confirm-create-file-button"
disabled={!fileName.trim()}
>
Create

32
app/src/components/modals/file/DeleteFileModal.test.tsx
View File

@@ -49,8 +49,8 @@ describe('DeleteFileModal', () => {
mockModalContext.setDeleteFileModalVisible.mockClear();
});
describe('Basic functionality', () => {
it('renders modal with file confirmation and action buttons', () => {
describe('Modal Visibility and Content', () => {
it('renders modal with correct content when opened', () => {
render(
<DeleteFileModal
onDeleteFile={mockOnDeleteFile}
@@ -62,8 +62,12 @@ describe('DeleteFileModal', () => {
expect(
screen.getByText(/Are you sure you want to delete "test-file.md"?/)
).toBeInTheDocument();
expect(screen.getByTestId('cancel-delete-button')).toBeInTheDocument();
expect(screen.getByTestId('confirm-delete-button')).toBeInTheDocument();
expect(
screen.getByTestId('cancel-delete-file-button')
).toBeInTheDocument();
expect(
screen.getByTestId('confirm-delete-file-button')
).toBeInTheDocument();
});
it('renders modal with null file selection', () => {
@@ -76,8 +80,10 @@ describe('DeleteFileModal', () => {
screen.getByText(/Are you sure you want to delete/)
).toBeInTheDocument();
});
});
it('closes modal when cancel button is clicked', () => {
describe('User Actions', () => {
it('calls onClose when cancel button is clicked', () => {
render(
<DeleteFileModal
onDeleteFile={mockOnDeleteFile}
@@ -85,7 +91,7 @@ describe('DeleteFileModal', () => {
/>
);
fireEvent.click(screen.getByTestId('cancel-delete-button'));
fireEvent.click(screen.getByTestId('cancel-delete-file-button'));
expect(mockModalContext.setDeleteFileModalVisible).toHaveBeenCalledWith(
false
@@ -93,8 +99,8 @@ describe('DeleteFileModal', () => {
});
});
describe('File deletion flow', () => {
it('deletes file successfully when confirmed', async () => {
describe('File Deletion Flow', () => {
it('calls onDeleteFile when confirmed', async () => {
render(
<DeleteFileModal
onDeleteFile={mockOnDeleteFile}
@@ -102,7 +108,7 @@ describe('DeleteFileModal', () => {
/>
);
fireEvent.click(screen.getByTestId('confirm-delete-button'));
fireEvent.click(screen.getByTestId('confirm-delete-file-button'));
await waitFor(() => {
expect(mockOnDeleteFile).toHaveBeenCalledWith('document.md');
@@ -120,7 +126,7 @@ describe('DeleteFileModal', () => {
<DeleteFileModal onDeleteFile={mockOnDeleteFile} selectedFile={null} />
);
fireEvent.click(screen.getByTestId('confirm-delete-button'));
fireEvent.click(screen.getByTestId('confirm-delete-file-button'));
expect(mockOnDeleteFile).not.toHaveBeenCalled();
});
@@ -130,7 +136,7 @@ describe('DeleteFileModal', () => {
<DeleteFileModal onDeleteFile={mockOnDeleteFile} selectedFile="" />
);
fireEvent.click(screen.getByTestId('confirm-delete-button'));
fireEvent.click(screen.getByTestId('confirm-delete-file-button'));
expect(mockOnDeleteFile).not.toHaveBeenCalled();
});
@@ -143,7 +149,7 @@ describe('DeleteFileModal', () => {
/>
);
fireEvent.click(screen.getByTestId('cancel-delete-button'));
fireEvent.click(screen.getByTestId('cancel-delete-file-button'));
expect(mockOnDeleteFile).not.toHaveBeenCalled();
expect(mockModalContext.setDeleteFileModalVisible).toHaveBeenCalledWith(
@@ -171,7 +177,7 @@ describe('DeleteFileModal', () => {
screen.getByText(`Are you sure you want to delete "${fileName}"?`)
).toBeInTheDocument();
fireEvent.click(screen.getByTestId('confirm-delete-button'));
fireEvent.click(screen.getByTestId('confirm-delete-file-button'));
await waitFor(() => {
expect(mockOnDeleteFile).toHaveBeenCalledWith(fileName);

4
app/src/components/modals/file/DeleteFileModal.tsx
View File

@@ -33,14 +33,14 @@ const DeleteFileModal: React.FC<DeleteFileModalProps> = ({
<Button
variant="default"
onClick={() => setDeleteFileModalVisible(false)}
data-testid="cancel-delete-button"
data-testid="cancel-delete-file-button"
>
Cancel
</Button>
<Button
color="red"
onClick={() => void handleConfirm()}
data-testid="confirm-delete-button"
data-testid="confirm-delete-file-button"
>
Delete
</Button>

42
app/src/components/modals/git/CommitMessageModal.test.tsx
View File

@@ -55,20 +55,26 @@ describe('CommitMessageModal', () => {
mockModalContext.setCommitMessageModalVisible.mockClear();
});
describe('Modal Rendering and Controls', () => {
it('renders modal with form elements when open', () => {
describe('Modal Visibility and Content', () => {
it('renders modal with correct content when opened', () => {
render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
expect(screen.getByText('Enter Commit Message')).toBeInTheDocument();
expect(screen.getByTestId('commit-message-input')).toBeInTheDocument();
expect(screen.getByTestId('cancel-commit-button')).toBeInTheDocument();
expect(screen.getByTestId('commit-button')).toBeInTheDocument();
expect(
screen.getByTestId('cancel-commit-message-button')
).toBeInTheDocument();
expect(
screen.getByTestId('confirm-commit-message-button')
).toBeInTheDocument();
});
});
it('closes modal when cancel button is clicked', () => {
describe('User Actions', () => {
it('calls onClose when cancel button is clicked', () => {
render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
const cancelButton = screen.getByTestId('cancel-commit-button');
const cancelButton = screen.getByTestId('cancel-commit-message-button');
fireEvent.click(cancelButton);
expect(
@@ -77,7 +83,7 @@ describe('CommitMessageModal', () => {
});
});
describe('Form Input and Validation', () => {
describe('Form Validation', () => {
it('updates input value when user types', () => {
render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
@@ -90,7 +96,7 @@ describe('CommitMessageModal', () => {
it('disables commit button when input is empty', () => {
render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
const commitButton = screen.getByTestId('commit-button');
const commitButton = screen.getByTestId('confirm-commit-message-button');
expect(commitButton).toBeDisabled();
});
@@ -98,18 +104,20 @@ describe('CommitMessageModal', () => {
render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
const messageInput = screen.getByTestId('commit-message-input');
const commitButton = screen.getByTestId('commit-button');
const commitButton = screen.getByTestId('confirm-commit-message-button');
fireEvent.change(messageInput, { target: { value: 'Test commit' } });
expect(commitButton).not.toBeDisabled();
});
});
it('trims whitespace from commit messages', async () => {
describe('Commit and Push Flow', () => {
it('calls onCommitAndPush with trimmed message', async () => {
render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
const messageInput = screen.getByTestId('commit-message-input');
const commitButton = screen.getByTestId('commit-button');
const commitButton = screen.getByTestId('confirm-commit-message-button');
fireEvent.change(messageInput, {
target: { value: ' Update README ' },
@@ -120,14 +128,12 @@ describe('CommitMessageModal', () => {
expect(mockOnCommitAndPush).toHaveBeenCalledWith('Update README');
});
});
});
describe('Form Submission', () => {
it('calls onCommitAndPush with message when commit button clicked', async () => {
it('calls onCommitAndPush when commit button clicked', async () => {
render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
const messageInput = screen.getByTestId('commit-message-input');
const commitButton = screen.getByTestId('commit-button');
const commitButton = screen.getByTestId('confirm-commit-message-button');
fireEvent.change(messageInput, {
target: { value: 'Fix bug in editor' },
@@ -165,7 +171,7 @@ describe('CommitMessageModal', () => {
render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
const messageInput = screen.getByTestId('commit-message-input');
const commitButton = screen.getByTestId('commit-button');
const commitButton = screen.getByTestId('confirm-commit-message-button');
fireEvent.change(messageInput, { target: { value: 'Initial commit' } });
fireEvent.click(commitButton);
@@ -197,8 +203,8 @@ describe('CommitMessageModal', () => {
it('has accessible buttons with proper roles', () => {
render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
const cancelButton = screen.getByTestId('cancel-commit-button');
const commitButton = screen.getByTestId('commit-button');
const cancelButton = screen.getByTestId('cancel-commit-message-button');
const commitButton = screen.getByTestId('confirm-commit-message-button');
// Mantine buttons are semantic HTML buttons
expect(cancelButton.tagName).toBe('BUTTON');

4
app/src/components/modals/git/CommitMessageModal.tsx
View File

@@ -53,13 +53,13 @@ const CommitMessageModal: React.FC<CommitMessageModalProps> = ({
<Button
variant="default"
onClick={() => setCommitMessageModalVisible(false)}
data-testid="cancel-commit-button"
data-testid="cancel-commit-message-button"
>
Cancel
</Button>
<Button
onClick={() => void handleSubmit()}
data-testid="commit-button"
data-testid="confirm-commit-message-button"
disabled={!message.trim()}
>
Commit

4
app/src/components/modals/user/CreateUserModal.test.tsx
View File

@@ -36,8 +36,8 @@ describe('CreateUserModal', () => {
mockOnCreateUser.mockResolvedValue(true);
});
describe('Modal Visibility and Basic Interaction', () => {
it('renders modal when opened with all form elements', () => {
describe('Modal Visibility and Content', () => {
it('renders modal with correct content when opened', () => {
render(
<CreateUserModal
opened={true}

4
app/src/components/modals/user/EditUserModal.test.tsx
View File

@@ -45,8 +45,8 @@ describe('EditUserModal', () => {
mockOnEditUser.mockResolvedValue(true);
});
describe('Modal Visibility and Form Pre-population', () => {
it('renders modal when opened with all form elements pre-populated', () => {
describe('Modal Visibility and Content', () => {
it('renders modal with correct content when opened', () => {
render(
<EditUserModal
opened={true}

10
app/src/components/modals/workspace/CreateWorkspaceModal.test.tsx
View File

@@ -89,8 +89,8 @@ describe('CreateWorkspaceModal', () => {
mockUseModalContext.mockReturnValue(mockModalContext);
});
describe('Modal Visibility and Basic Interaction', () => {
it('renders modal with form elements when visible', () => {
describe('Modal Visibility and Content', () => {
it('renders modal with correct content when opened', () => {
render(
<CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
);
@@ -119,8 +119,10 @@ describe('CreateWorkspaceModal', () => {
screen.queryByText('Create New Workspace')
).not.toBeInTheDocument();
});
});
it('closes modal when cancel button is clicked', () => {
describe('User Actions', () => {
it('calls onClose when cancel button is clicked', () => {
render(
<CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
);
@@ -268,7 +270,7 @@ describe('CreateWorkspaceModal', () => {
});
});
describe('Successful Workspace Creation', () => {
describe('Workspace Creation Flow', () => {
it('completes full successful creation flow', async () => {
render(
<CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />