Mathis/lemma
1
0
Fork 0
mirror of https://github.com/lordmathis/lemma.git synced 2025-11-05 23:44:22 +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); mockOnConfirm.mockResolvedValue(undefined);
}); });
describe('Modal Visibility', () => { describe('Modal Visibility and Content', () => {
it('shows modal with warning and form when opened', () => { it('renders modal with correct content when opened', () => {
render( render(
<DeleteAccountModal <DeleteAccountModal
opened={true} opened={true}
@@ -50,11 +50,15 @@ describe('DeleteAccountModal', () => {
expect( expect(
screen.getByTestId('delete-account-password-input') screen.getByTestId('delete-account-password-input')
).toBeInTheDocument(); ).toBeInTheDocument();
expect(screen.getByTestId('cancel-delete-button')).toBeInTheDocument(); expect(
expect(screen.getByTestId('confirm-delete-button')).toBeInTheDocument(); 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( render(
<DeleteAccountModal <DeleteAccountModal
opened={false} opened={false}
@@ -67,7 +71,7 @@ describe('DeleteAccountModal', () => {
}); });
}); });
describe('Password Input and Validation', () => { describe('Form Validation', () => {
it('updates password value when user types', () => { it('updates password value when user types', () => {
render( render(
<DeleteAccountModal <DeleteAccountModal
@@ -93,7 +97,7 @@ describe('DeleteAccountModal', () => {
); );
const passwordInput = screen.getByTestId('delete-account-password-input'); 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 // Test empty password
fireEvent.click(deleteButton); fireEvent.click(deleteButton);
@@ -104,8 +108,10 @@ describe('DeleteAccountModal', () => {
fireEvent.click(deleteButton); fireEvent.click(deleteButton);
expect(mockOnConfirm).not.toHaveBeenCalled(); 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( render(
<DeleteAccountModal <DeleteAccountModal
opened={true} opened={true}
@@ -115,7 +121,7 @@ describe('DeleteAccountModal', () => {
); );
const passwordInput = screen.getByTestId('delete-account-password-input'); 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.change(passwordInput, { target: { value: 'validpassword' } });
fireEvent.click(deleteButton); 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 () => { it('preserves password in field when submission fails', async () => {
mockOnConfirm.mockRejectedValue(new Error('Invalid password')); mockOnConfirm.mockRejectedValue(new Error('Invalid password'));
@@ -141,7 +161,7 @@ describe('DeleteAccountModal', () => {
); );
const passwordInput = screen.getByTestId('delete-account-password-input'); 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.change(passwordInput, { target: { value: 'wrongpassword' } });
fireEvent.click(deleteButton); 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); fireEvent.click(cancelButton);
expect(mockOnClose).toHaveBeenCalled(); expect(mockOnClose).toHaveBeenCalled();
@@ -182,7 +202,7 @@ describe('DeleteAccountModal', () => {
); );
const passwordInput = screen.getByTestId('delete-account-password-input'); 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' } }); fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
@@ -240,7 +260,7 @@ describe('DeleteAccountModal', () => {
fireEvent.change(passwordInput, { target: { value: 'userpassword' } }); fireEvent.change(passwordInput, { target: { value: 'userpassword' } });
// 3. User confirms deletion // 3. User confirms deletion
const deleteButton = screen.getByTestId('confirm-delete-button'); const deleteButton = screen.getByTestId('confirm-delete-account-button');
fireEvent.click(deleteButton); fireEvent.click(deleteButton);
// 4. System processes deletion // 4. System processes deletion
@@ -267,7 +287,7 @@ describe('DeleteAccountModal', () => {
const passwordInput = screen.getByTestId('delete-account-password-input'); const passwordInput = screen.getByTestId('delete-account-password-input');
fireEvent.change(passwordInput, { target: { value: 'somepassword' } }); fireEvent.change(passwordInput, { target: { value: 'somepassword' } });
const cancelButton = screen.getByTestId('cancel-delete-button'); const cancelButton = screen.getByTestId('cancel-delete-account-button');
fireEvent.click(cancelButton); fireEvent.click(cancelButton);
// Modal closes without deletion // Modal closes without deletion

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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