Skip to content

Commit 9d0b8f1

Browse files
sean-corrigan1sean-corrigan1
authored
CCM-6321: adding tests for choose type page (#146)
* CCM-6321: adding tests for choose type page * CCM-6321: address comments and slight refactor
1 parent ab2791b commit 9d0b8f1

File tree

4 files changed

+153
-112
lines changed

4 files changed

+153
-112
lines changed

‎tests/test-team/pages/template-mgmt-base-page.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ export class TemplateMgmtBasePage {
1111

1212
readonly pageHeader: Locator;
1313

14+
readonly errorSummary: Locator;
15+
16+
readonly errorSummaryHeading: Locator;
17+
18+
readonly errorSummaryList: Locator;
19+
1420
readonly continueButton: Locator;
1521

1622
readonly skipLink: Locator;
@@ -31,7 +37,16 @@ export class TemplateMgmtBasePage {
3137
.locator('.nhsuk-back-link__link')
3238
.and(page.getByText('Go back'));
3339

34-
this.pageHeader = page.locator('h1');
40+
this.pageHeader = page.getByRole('heading', { level: 1 });
41+
42+
this.errorSummary = page.getByRole('alert', { name: 'There is a problem' });
43+
44+
this.errorSummaryHeading = page.getByRole('heading', {
45+
level: 2,
46+
name: 'There is a problem',
47+
});
48+
49+
this.errorSummaryList = this.errorSummary.getByRole('listitem');
3550

3651
this.continueButton = page
3752
.locator('[class="nhsuk-button"]')
@@ -44,7 +59,7 @@ export class TemplateMgmtBasePage {
4459
}
4560

4661
async navigateTo(url: string) {
47-
await this.page.goto(url, { waitUntil: 'load' });
62+
await this.page.goto(url);
4863
}
4964

5065
async clickNotifyBannerLink() {

‎tests/test-team/pages/template-mgmt-choose-page.ts‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,18 @@ import { Locator, type Page } from '@playwright/test';
22
import { TemplateMgmtBasePage } from './template-mgmt-base-page';
33

44
export class TemplateMgmtChoosePage extends TemplateMgmtBasePage {
5-
readonly chooseTemplateRadioGroup: Locator;
6-
7-
readonly fieldsetHeading: Locator;
5+
readonly radioButtons: Locator;
86

97
constructor(page: Page) {
108
super(page);
11-
this.chooseTemplateRadioGroup = page.getByRole('radiogroup');
12-
this.fieldsetHeading = page.locator('[class="nhsuk-fieldset__heading"]');
9+
this.radioButtons = page.getByRole('radio');
1310
}
1411

15-
static readonly templateOptions = [
16-
'NHS App message',
17-
'Email',
18-
'Text message (SMS)',
19-
'Letter',
20-
];
21-
22-
private static readonly chooseTemplatePageUrl = `/templates/choose-a-template-type`;
23-
24-
async navigateToChooseTemplatePage(sessionId: string) {
25-
await this.navigateTo(
26-
`${TemplateMgmtChoosePage.chooseTemplatePageUrl}/${sessionId}`
27-
);
12+
async loadPage(sessionId: string) {
13+
await this.navigateTo(`/templates/choose-a-template-type/${sessionId}`);
2814
}
2915

30-
static async checkRadioButton(templateRadioButton: Locator) {
31-
await templateRadioButton.check();
16+
async checkRadioButton(radioButtonLabel: string) {
17+
await this.page.getByLabel(radioButtonLabel).check();
3218
}
3319
}

‎tests/test-team/template-mgmt-component-tests/template-mgmt-choose-page.component.ts‎

Lines changed: 105 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@ import { test, expect } from '@playwright/test';
22
import { TemplateMgmtChoosePage } from '../pages/template-mgmt-choose-page';
33
import { Session, TemplateType } from '../helpers/types';
44
import SessionStorageHelper from '../helpers/session-storage-helper';
5+
import {
6+
assertFooterLinks,
7+
assertGoBackLinkNotPresent,
8+
assertLoginLink,
9+
assertNotifyBannerLink,
10+
assertSkipToMainContent,
11+
} from './template-mgmt-common.steps';
512

613
export const emptySessionData: Session = {
714
__typename: 'SessionStorage',
@@ -13,7 +20,7 @@ export const emptySessionData: Session = {
1320
nhsAppTemplateMessage: '',
1421
};
1522

16-
export const emptySessionDataForRadioSelect: Session = {
23+
export const sessionDataForRadioSelect: Session = {
1724
__typename: 'SessionStorage',
1825
id: '3d98b0c4-6666-0000-0000-95eb27590001',
1926
createdAt: '2024-09-19T23:36:20.815Z',
@@ -25,19 +32,52 @@ export const emptySessionDataForRadioSelect: Session = {
2532

2633
export const nhsAppRadioSelectedSessionData: Session = {
2734
__typename: 'SessionStorage',
28-
id: '3d90000-6666-0000-0000-95eb27590002',
35+
id: 'nhsapp-6666-0000-0000-95eb27590002',
2936
createdAt: '2024-09-19T23:36:20.815Z',
3037
updatedAt: '2024-09-19T23:36:20.815Z',
3138
templateType: TemplateType.NHS_APP,
3239
nhsAppTemplateName: '',
3340
nhsAppTemplateMessage: '',
3441
};
3542

43+
export const emailRadioSelectedSessionData: Session = {
44+
__typename: 'SessionStorage',
45+
id: 'email-6666-0000-0000-95eb27590002',
46+
createdAt: '2024-09-19T23:36:20.815Z',
47+
updatedAt: '2024-09-19T23:36:20.815Z',
48+
templateType: TemplateType.EMAIL,
49+
nhsAppTemplateName: '',
50+
nhsAppTemplateMessage: '',
51+
};
52+
53+
export const letterRadioSelectedSessionData: Session = {
54+
__typename: 'SessionStorage',
55+
id: 'letter-6666-0000-0000-95eb27590002',
56+
createdAt: '2024-09-19T23:36:20.815Z',
57+
updatedAt: '2024-09-19T23:36:20.815Z',
58+
templateType: TemplateType.LETTER,
59+
nhsAppTemplateName: '',
60+
nhsAppTemplateMessage: '',
61+
};
62+
63+
export const smsRadioSelectedSessionData: Session = {
64+
__typename: 'SessionStorage',
65+
id: 'sms-6666-0000-0000-95eb27590002',
66+
createdAt: '2024-09-19T23:36:20.815Z',
67+
updatedAt: '2024-09-19T23:36:20.815Z',
68+
templateType: TemplateType.SMS,
69+
nhsAppTemplateName: '',
70+
nhsAppTemplateMessage: '',
71+
};
72+
3673
test.describe('Choose Template Type Page', () => {
3774
const sessionStorageHelper = new SessionStorageHelper([
3875
emptySessionData,
39-
emptySessionDataForRadioSelect,
76+
sessionDataForRadioSelect,
4077
nhsAppRadioSelectedSessionData,
78+
emailRadioSelectedSessionData,
79+
smsRadioSelectedSessionData,
80+
letterRadioSelectedSessionData,
4181
]);
4282

4383
test.beforeAll(async () => {
@@ -54,54 +94,38 @@ test.describe('Choose Template Type Page', () => {
5494
}) => {
5595
const chooseTemplatePage = new TemplateMgmtChoosePage(page);
5696

57-
await chooseTemplatePage.navigateToChooseTemplatePage(emptySessionData.id);
97+
await chooseTemplatePage.loadPage(emptySessionData.id);
5898

5999
await expect(page).toHaveURL(
60100
`${baseURL}/templates/choose-a-template-type/${emptySessionData.id}`
61101
);
62-
expect(await chooseTemplatePage.fieldsetHeading.textContent()).toBe(
102+
await expect(chooseTemplatePage.pageHeader).toHaveText(
63103
'Choose a template type to create'
64104
);
65105
});
66106

67-
test('should navigate to start page when "notify banner link" clicked', async ({
68-
page,
69-
baseURL,
70-
}) => {
71-
const chooseTemplatePage = new TemplateMgmtChoosePage(page);
72-
73-
await chooseTemplatePage.navigateToChooseTemplatePage(emptySessionData.id);
74-
await chooseTemplatePage.clickNotifyBannerLink();
75-
76-
await expect(page).toHaveURL(
77-
`${baseURL}/templates/create-and-submit-templates`
78-
);
107+
test('common page tests', async ({ page, baseURL }) => {
108+
const props = {
109+
page: new TemplateMgmtChoosePage(page),
110+
id: emptySessionData.id,
111+
baseURL,
112+
};
113+
114+
await assertSkipToMainContent(props);
115+
await assertNotifyBannerLink(props);
116+
await assertFooterLinks(props);
117+
await assertLoginLink(props);
118+
await assertGoBackLinkNotPresent(props);
79119
});
80120

81-
test(
82-
'should navigate to login page when "log in" link clicked',
83-
{ tag: '@Update/CCM-4889' },
84-
async ({ page, baseURL }) => {
85-
const chooseTemplatePage = new TemplateMgmtChoosePage(page);
86-
87-
await chooseTemplatePage.navigateToChooseTemplatePage(
88-
emptySessionData.id
89-
);
90-
await chooseTemplatePage.clickLoginLink();
91-
92-
await expect(page).toHaveURL(`${baseURL}/templates`);
93-
}
94-
);
95-
96-
test('should display correct radio button options', async ({ page }) => {
121+
test('should display correct number of radio button options', async ({
122+
page,
123+
}) => {
97124
const chooseTemplatePage = new TemplateMgmtChoosePage(page);
98125

99-
await chooseTemplatePage.navigateToChooseTemplatePage(emptySessionData.id);
126+
await chooseTemplatePage.loadPage(emptySessionData.id);
100127

101-
await expect(page.locator('[class="nhsuk-radios__item"]')).toHaveCount(4);
102-
await expect(page.locator('[class="nhsuk-radios__item"]')).toHaveText(
103-
TemplateMgmtChoosePage.templateOptions
104-
);
128+
await expect(chooseTemplatePage.radioButtons).toHaveCount(4);
105129
});
106130

107131
test('should display error if no template type option selected and continue button clicked', async ({
@@ -110,62 +134,65 @@ test.describe('Choose Template Type Page', () => {
110134
}) => {
111135
const chooseTemplatePage = new TemplateMgmtChoosePage(page);
112136

113-
await chooseTemplatePage.navigateToChooseTemplatePage(emptySessionData.id);
137+
await chooseTemplatePage.loadPage(emptySessionData.id);
114138
await chooseTemplatePage.clickContinueButton();
115139

116140
await expect(page).toHaveURL(
117141
`${baseURL}/templates/choose-a-template-type/${emptySessionData.id}`
118142
);
119143

120-
expect(await chooseTemplatePage.fieldsetHeading.textContent()).toBe(
121-
'Choose a template type to create'
122-
);
144+
await expect(chooseTemplatePage.errorSummary).toBeVisible();
145+
await expect(chooseTemplatePage.errorSummaryList).toHaveText([
146+
'Select a template type',
147+
]);
148+
});
123149

124-
await expect(page.locator('[class="nhsuk-error-summary"]')).toBeVisible();
150+
for (const { label, path } of [
151+
{ label: 'NHS App message', path: 'nhs-app' },
152+
{ label: 'Email', path: 'email' },
153+
{ label: 'Text message (SMS)', path: 'text-message' },
154+
{ label: 'Letter', path: 'letter' },
155+
])
156+
test(`should navigate to the ${label} template creation page when radio button selected and continue button clicked`, async ({
157+
page,
158+
baseURL,
159+
}) => {
160+
const chooseTemplatePage = new TemplateMgmtChoosePage(page);
125161

126-
await expect(
127-
page
128-
.locator('[class="nhsuk-list nhsuk-error-summary__list"]')
129-
.getByRole('listitem')
130-
).toHaveText(['Select a template type']);
131-
});
162+
await chooseTemplatePage.loadPage(sessionDataForRadioSelect.id);
163+
await chooseTemplatePage.checkRadioButton(label);
164+
await chooseTemplatePage.clickContinueButton();
132165

133-
test('should navigate to the NHS App template creation page when radio button selected and continue button clicked', async ({
134-
page,
135-
baseURL,
136-
}) => {
137-
const chooseTemplatePage = new TemplateMgmtChoosePage(page);
166+
await expect(page).toHaveURL(
167+
`${baseURL}/templates/create-${path}-template/${sessionDataForRadioSelect.id}`
168+
);
169+
});
170+
171+
for (const { label, sessionData } of [
172+
{ label: 'NHS App message', sessionData: nhsAppRadioSelectedSessionData },
173+
{ label: 'Email', sessionData: emailRadioSelectedSessionData },
174+
{ label: 'Text message (SMS)', sessionData: smsRadioSelectedSessionData },
175+
{ label: 'Letter', sessionData: letterRadioSelectedSessionData },
176+
]) {
177+
test(`should display ${label} radio button selected if present in session storage`, async ({
178+
page,
179+
}) => {
180+
const chooseTemplatePage = new TemplateMgmtChoosePage(page);
138181

139-
await chooseTemplatePage.navigateToChooseTemplatePage(
140-
emptySessionDataForRadioSelect.id
141-
);
142-
await TemplateMgmtChoosePage.checkRadioButton(
143-
page.locator('[id="templateType-NHS_APP"]')
144-
);
145-
await chooseTemplatePage.clickContinueButton();
182+
await chooseTemplatePage.loadPage(sessionData.id);
146183

147-
await expect(page).toHaveURL(
148-
`${baseURL}/templates/create-nhs-app-template/${emptySessionDataForRadioSelect.id}`
149-
);
150-
});
184+
expect(page.getByLabel(label)).toBeChecked();
185+
});
186+
}
151187

152-
test('should display NHS App radio button selected if present in session storage', async ({
188+
test('should navigate to error page if sessionId invalid', async ({
153189
page,
190+
baseURL,
154191
}) => {
155192
const chooseTemplatePage = new TemplateMgmtChoosePage(page);
156193

157-
await chooseTemplatePage.navigateToChooseTemplatePage(
158-
nhsAppRadioSelectedSessionData.id
159-
);
160-
161-
// expect to assert radio selected
162-
});
163-
164-
test('should not display "Go Back" link on page', async ({ page }) => {
165-
const chooseTemplatePage = new TemplateMgmtChoosePage(page);
166-
167-
await chooseTemplatePage.navigateToChooseTemplatePage(emptySessionData.id);
194+
await chooseTemplatePage.loadPage('invalid-sessionId');
168195

169-
await expect(chooseTemplatePage.goBackLink).toBeHidden();
196+
await expect(page).toHaveURL(`${baseURL}/templates/invalid-session`);
170197
});
171198
});

‎tests/test-team/template-mgmt-component-tests/template-mgmt-common.steps.ts‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -65,31 +65,44 @@ export function assertGoBackLink({
6565
});
6666
}
6767

68+
export function assertGoBackLinkNotPresent({ page, id }: CommonStepsProps) {
69+
return test.step('should not display "Go Back" link on page', async () => {
70+
await page.loadPage(id);
71+
72+
await expect(page.goBackLink).toBeHidden();
73+
});
74+
}
75+
6876
export function assertFooterLinks({ page, id }: CommonStepsProps) {
69-
return test.step('when page loads, then "Footer links" should be visible', async () => {
77+
return test.step('when page loads, then Page Footer should have the correct links', async () => {
7078
await page.loadPage(id);
7179

7280
const promises = [
7381
// Accessibility link
74-
await page.page
75-
.locator('[data-testid="accessibility-statement-link"]')
76-
.isVisible(),
82+
expect(
83+
page.page.getByRole('link', { name: 'Accessibility statement' })
84+
).toHaveAttribute('href', '/accessibility'),
7785

7886
// Contact us link
79-
await page.page.locator('[data-testid="contact-use-link"]').isVisible(),
87+
expect(
88+
page.page.getByRole('link', { name: 'Contact us' })
89+
).toHaveAttribute('href', '#'),
8090

8191
// Cookies link
82-
await page.page.locator('[data-testid="cookies-link"]').isVisible(),
92+
expect(page.page.getByRole('link', { name: 'Cookies' })).toHaveAttribute(
93+
'href',
94+
'#'
95+
),
8396

8497
// Privacy policy link
85-
await page.page
86-
.locator('[data-testid="privacy-policy-link"]')
87-
.isVisible(),
98+
expect(
99+
page.page.getByRole('link', { name: 'Privacy policy' })
100+
).toHaveAttribute('href', '#'),
88101

89102
// Terms and conditions link
90-
await page.page
91-
.locator('[data-testid="terms-and-conditions-link"]')
92-
.isVisible(),
103+
expect(
104+
page.page.getByRole('link', { name: 'Terms and conditions' })
105+
).toHaveAttribute('href', '#'),
93106
];
94107

95108
await Promise.all(promises);

0 commit comments

Comments
 (0)