opensource/freeCodeCamp
3
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-08-31 01:14:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

test: move delete modal coverage to client (#68129)

Browse Source 
Co-authored-by: sembauke <sembauke@users.noreply.github.com>
This commit is contained in:
Sem Bauke
2026-06-23 18:57:39 +02:00
committed by GitHub
parent c85eaad8ae
commit e522579d08
2 changed files with 104 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/settings/delete-modal.test.tsx
+104
View File
@@ -0,0 +1,104 @@
import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import DeleteModal from './delete-modal';
vi.mock('react-i18next', () => ({
Trans: ({
children,
values
}: {
children: React.ReactNode;
values?: { email?: string };
}) =>
React.isValidElement<{ children?: React.ReactNode }>(children)
? React.cloneElement(children, {}, values?.email)
: children,
useTranslation: () => ({
t: (
key: string,
options: { verifyText?: string } | undefined = undefined
) => (options?.verifyText ? `${key} ${options.verifyText}` : key)
})
}));
const verifyDeleteText = 'settings.danger.verify-delete-text';
function renderDeleteModal(
props: Partial<React.ComponentProps<typeof DeleteModal>> = {}
) {
return render(
<DeleteModal delete={vi.fn()} onHide={vi.fn()} show={true} {...props} />
);
}
describe('<DeleteModal />', () => {
beforeEach(() => {
vi.stubGlobal(
'ResizeObserver',
class ResizeObserver {
observe = vi.fn();
unobserve = vi.fn();
disconnect = vi.fn();
}
);
});
it('renders the delete account warning and disabled confirmation button', () => {
renderDeleteModal();
expect(
screen.getByRole('dialog', { name: 'settings.danger.delete-title' })
).toBeInTheDocument();
expect(screen.getByText('settings.danger.delete-p1')).toBeInTheDocument();
expect(screen.getByText('settings.danger.delete-p2')).toBeInTheDocument();
expect(
screen.getByRole('link', { name: 'support@freecodecamp.org' })
).toHaveAttribute('href', 'mailto:support@freecodecamp.org');
expect(
screen.getByRole('button', { name: 'settings.danger.nevermind' })
).toBeInTheDocument();
expect(
screen.getByRole('button', { name: 'settings.danger.certain' })
).toHaveAttribute('aria-disabled', 'true');
expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
});
it('closes when the cancel button is clicked', () => {
const onHide = vi.fn();
renderDeleteModal({ onHide });
fireEvent.click(
screen.getByRole('button', { name: 'settings.danger.nevermind' })
);
expect(onHide).toHaveBeenCalled();
});
it('keeps the confirmation button disabled for incorrect verification text', () => {
renderDeleteModal();
fireEvent.change(screen.getByRole('textbox'), {
target: { value: 'incorrect text' }
});
expect(
screen.getByRole('button', { name: 'settings.danger.certain' })
).toHaveAttribute('aria-disabled', 'true');
});
it('enables deletion when the verification text matches', () => {
const deleteAccount = vi.fn();
renderDeleteModal({ delete: deleteAccount });
fireEvent.change(screen.getByRole('textbox'), {
target: { value: verifyDeleteText }
});
fireEvent.click(
screen.getByRole('button', { name: 'settings.danger.certain' })
);
expect(deleteAccount).toHaveBeenCalled();
});
});
e2e/delete-modal.spec.ts
-93
View File
@@ -21,99 +21,6 @@ test.afterAll(
);
test.describe('Delete Modal component', () => {
test('should render the modal correctly', async ({ page }) => {
await page
.getByRole('button', { name: translations.settings.danger.delete })
.click();
await expect(
page.getByRole('dialog', {
name: translations.settings.danger['delete-title']
})
).toBeVisible();
await expect(
page.getByText(translations.settings.danger['delete-p1'])
).toBeVisible();
await expect(
page.getByText(translations.settings.danger['delete-p2'])
).toBeVisible();
const supportLink = page.getByRole('link', {
name: 'support@freeCodeCamp.org'
});
await expect(supportLink).toBeVisible();
await expect(supportLink).toHaveAttribute(
'href',
'mailto:support@freecodecamp.org'
);
await expect(
page.getByRole('button', { name: translations.settings.danger.nevermind })
).toBeVisible();
await expect(
page.getByRole('button', { name: translations.settings.danger.certain })
).toBeVisible();
await expect(
page.getByRole('button', { name: translations.settings.danger.certain })
).toBeDisabled();
await expect(
page.getByRole('button', { name: translations.buttons.close })
).toBeVisible();
});
test('should close the modal after the user cancels account deleting', async ({
page
}) => {
await page
.getByRole('button', { name: translations.settings.danger.delete })
.click();
await expect(
page.getByRole('dialog', {
name: translations.settings.danger['delete-title']
})
).toBeVisible();
await page
.getByRole('button', { name: translations.settings.danger.nevermind })
.click();
await expect(
page.getByRole('dialog', {
name: translations.settings.danger['delete-title']
})
).not.toBeVisible();
});
test('Delele button should be disabled if user incorrectly fills verify input text', async ({
page
}) => {
await page
.getByRole('button', { name: translations.settings.danger.delete })
.click();
await expect(
page.getByRole('dialog', {
name: translations.settings.danger['delete-title']
})
).toBeVisible();
const verifyDeleteInput = page.getByRole('textbox', {
exact: true
});
await verifyDeleteInput.fill('incorrect text');
await expect(
page.getByRole('button', {
name: translations.settings.danger.certain
})
).toBeDisabled();
});
test('should close the modal and sign the user out after they fill in the verify input text and click delete', async ({
page
}) => {