Skip to content

[PRMP-827] Review - API Integration for Review #964

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lillie-dae wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[PRMP-827] Review - API Integration for Review #964

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 18 additions & 35 deletions ...e/ReviewDetailsAddMoreChoicePage.test.tsx → .../ReviewDetailsAddMoreChoiceStage.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { afterEach, beforeEach, describe, expect, it, vi, Mock } from 'vitest';
import ReviewDetailsAddMoreChoicePage from './ReviewDetailsAddMoreChoicePage';
import ReviewDetailsAddMoreChoiceStage from './ReviewDetailsAddMoreChoiceStage';
import { runAxeTest } from '../../../../helpers/test/axeTestHelper';
import { getConfigForDocType } from '../../../../helpers/utils/documentType';

vi.mock('../../../../helpers/utils/documentType');

const mockNavigate = vi.fn();
const mockReviewId = 'test-review-123';
Expand All @@ -19,18 +16,10 @@ vi.mock('react-router-dom', async (): Promise<unknown> => {
};
});

const mockgetConfigForDocType = getConfigForDocType as Mock;

describe('ReviewDetailsAddMoreChoicePage', () => {
const testReviewSnoMed = '16521000000101';
const mockConfig = {
displayName: 'Test Document Type',
};

beforeEach(() => {
vi.clearAllMocks();
import.meta.env.VITE_ENVIRONMENT = 'vitest';
mockgetConfigForDocType.mockReturnValue(mockConfig);
});

afterEach(() => {
Expand All @@ -39,7 +28,7 @@ describe('ReviewDetailsAddMoreChoicePage', () => {

describe('Rendering', () => {
it('renders the page heading correctly', () => {
render(<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />);
render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

expect(
screen.getByRole('heading', {
Expand All @@ -49,13 +38,13 @@ describe('ReviewDetailsAddMoreChoicePage', () => {
});

it('renders back button with correct text', () => {
render(<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />);
render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

expect(screen.getByText('Go back')).toBeInTheDocument();
});

it('renders both radio button options', () => {
render(<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />);
render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

const yesRadio = screen.getByRole('radio', {
name: /Yes I have more scanned paper records to add for this patient/i,
Expand All @@ -71,21 +60,21 @@ describe('ReviewDetailsAddMoreChoicePage', () => {
});

it('renders continue button', () => {
render(<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />);
render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument();
});

it('does not show error message initially', () => {
render(<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />);
render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

expect(screen.queryByText('Select an option')).not.toBeInTheDocument();
});
});

describe('Error Handling', () => {
it('displays error message when continue is clicked without selection', async () => {
render(<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />);
render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

const continueButton = screen.getByRole('button', { name: 'Continue' });
await userEvent.click(continueButton);
Expand All @@ -96,7 +85,7 @@ describe('ReviewDetailsAddMoreChoicePage', () => {
});

it('does not navigate when no selection is made', async () => {
render(<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />);
render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

const continueButton = screen.getByRole('button', { name: 'Continue' });
await userEvent.click(continueButton);
Expand All @@ -108,7 +97,7 @@ describe('ReviewDetailsAddMoreChoicePage', () => {
});

it('clears error message when yes radio button is selected', async () => {
render(<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />);
render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

const continueButton = screen.getByRole('button', { name: 'Continue' });
await userEvent.click(continueButton);
Expand All @@ -128,7 +117,7 @@ describe('ReviewDetailsAddMoreChoicePage', () => {
});

it('clears error message when no radio button is selected', async () => {
render(<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />);
render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

const continueButton = screen.getByRole('button', { name: 'Continue' });
await userEvent.click(continueButton);
Expand All @@ -150,7 +139,7 @@ describe('ReviewDetailsAddMoreChoicePage', () => {

describe('User Interactions', () => {
it('allows selecting the yes radio button', async () => {
render(<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />);
render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

const yesRadio = screen.getByRole('radio', {
name: /Yes I have more scanned paper records to add for this patient/i,
Expand All @@ -163,7 +152,7 @@ describe('ReviewDetailsAddMoreChoicePage', () => {
});

it('allows selecting the no radio button', async () => {
render(<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />);
render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

const noRadio = screen.getByRole('radio', {
name: /No, I don't have anymore scanned paper records to add for this patient/i,
Expand All @@ -176,7 +165,7 @@ describe('ReviewDetailsAddMoreChoicePage', () => {
});

it('allows changing selection from yes to no', async () => {
render(<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />);
render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

const yesRadio = screen.getByRole('radio', {
name: /Yes I have more scanned paper records to add for this patient/i,
Expand All @@ -198,10 +187,10 @@ describe('ReviewDetailsAddMoreChoicePage', () => {
});

it('prevents default form submission', async () => {
render(<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />);
render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

const form = screen.getByRole('button', { name: 'Continue' }).closest('form');
const submitHandler = vi.fn((e) => e.preventDefault());
const submitHandler = vi.fn((e: Event) => e.preventDefault());
form?.addEventListener('submit', submitHandler);

const continueButton = screen.getByRole('button', { name: 'Continue' });
Expand All @@ -213,18 +202,14 @@ describe('ReviewDetailsAddMoreChoicePage', () => {

describe('Accessibility', () => {
it('passes axe accessibility tests in initial state', async () => {
const { container } = render(
<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />,
);
const { container } = render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

const results = await runAxeTest(container);
expect(results).toHaveNoViolations();
});

it('passes axe accessibility tests in error state', async () => {
const { container } = render(
<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />,
);
const { container } = render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

const continueButton = screen.getByRole('button', { name: 'Continue' });
await userEvent.click(continueButton);
Expand All @@ -238,9 +223,7 @@ describe('ReviewDetailsAddMoreChoicePage', () => {
});

it('passes axe accessibility tests with radio button selected', async () => {
const { container } = render(
<ReviewDetailsAddMoreChoicePage reviewSnoMed={testReviewSnoMed} />,
);
const { container } = render(<ReviewDetailsAddMoreChoiceStage reviewData={null} />);

const yesRadio = screen.getByRole('radio', {
name: /Yes I have more scanned paper records to add for this patient/i,
Expand Down
9 changes: 5 additions & 4 deletions ...cePage/ReviewDetailsAddMoreChoicePage.tsx → ...Stage/ReviewDetailsAddMoreChoiceStage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@ import { Button, Fieldset, Radios } from 'nhsuk-react-components';
import { useNavigate, useParams } from 'react-router-dom';
import { navigateUrlParam, routeChildren } from '../../../../types/generic/routes';
import BackButton from '../../../generic/backButton/BackButton';
import { ReviewDetails } from '../../../../types/generic/reviews';

type ReviewDetailsAddMoreChoicePageProps = {
reviewSnoMed: string;
reviewData: ReviewDetails | null;
};

type AddMoreChoice = 'yes' | 'no' | '';

const ReviewDetailsAddMoreChoicePage: React.FC<ReviewDetailsAddMoreChoicePageProps> = ({
reviewSnoMed,
const ReviewDetailsAddMoreChoiceStage: React.FC<ReviewDetailsAddMoreChoicePageProps> = ({
reviewData,
}) => {
const navigate = useNavigate();
const [addMoreChoice, setAddMoreChoice] = useState<AddMoreChoice>('');
Expand Down Expand Up @@ -92,4 +93,4 @@ const ReviewDetailsAddMoreChoicePage: React.FC<ReviewDetailsAddMoreChoicePagePro
);
};

export default ReviewDetailsAddMoreChoicePage;
export default ReviewDetailsAddMoreChoiceStage;
Loading
Loading