Skip to content

CCM-16489: Add letter authoring e2e tests #930

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
andykay-nhs wants to merge 10 commits into
base: main
Choose a base branch
from
Open

CCM-16489: Add letter authoring e2e tests #930

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
89e2235
Rename legacy letter e2e tests, add new standard letter happy path e2…
andykay-nhs Apr 29, 2026
94a6529
Parameterise e2e test for different letter types
andykay-nhs Apr 30, 2026
d082c23
Complete happy path letter tests
andykay-nhs Apr 30, 2026
7513a86
Add validation failed test
andykay-nhs Apr 30, 2026
e471aad
Add edit template test steps
andykay-nhs May 1, 2026
aa1ec8e
Add large print and arabic letters
andykay-nhs May 1, 2026
cdf1f4d
Update iframe src assertion, use match object, use getUrl, update tim…
andykay-nhs May 5, 2026
f59c722
Add compareSrc error msg, remove page reload on pending upload
andykay-nhs May 5, 2026
99f60b3
Rename compareSrc, update template name, return updated render src va…
andykay-nhs May 5, 2026
d7ce671
Check short and long initial render urls match
andykay-nhs May 5, 2026
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
Binary file added tests/test-team/fixtures/letters/docx/large-print.docx
View file
Open in desktop
Binary file not shown.
Binary file added tests/test-team/fixtures/letters/docx/other-language-rtl-arabic.docx
View file
Open in desktop
Binary file not shown.
3 changes: 3 additions & 0 deletions tests/test-team/fixtures/letters/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const getFile = (directory: string, filename: string) => {

return {
filepath,
filename,
open: () => {
const opened = files.get(filepath);

Expand Down Expand Up @@ -73,5 +74,7 @@ export const docxFixtures = {
randomBytes: getFile('docx', 'random-bytes.docx'),
randomBytesZipped: getFile('docx', 'random-bytes-zipped.docx'),
standard: getFile('docx', 'standard-english-template.docx'),
arabic: getFile('docx', 'other-language-rtl-arabic.docx'),
largePrint: getFile('docx', 'large-print.docx'),
unexpectedAddressLines: getFile('docx', 'unexpected-address-lines.docx'),
};
4 changes: 4 additions & 0 deletions tests/test-team/pages/letter/template-mgmt-choose-printing-and-postage-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ import { TemplateMgmtBasePage } from '../template-mgmt-base-page';
export class TemplateMgmtChoosePrintingAndPostagePage extends TemplateMgmtBasePage {
static readonly pathTemplate = '/choose-printing-and-postage/:templateId';

public static readonly urlRegexp = new RegExp(
/\/templates\/choose-printing-and-postage\/[\dA-Fa-f-]+/
);

variantsTable: Locator;

submitButton: Locator;
Expand Down
4 changes: 4 additions & 0 deletions tests/test-team/pages/letter/template-mgmt-edit-template-campaign-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ import { TemplateMgmtBasePage } from '../template-mgmt-base-page';
export class TemplateMgmtEditTemplateCampaignPage extends TemplateMgmtBasePage {
static readonly pathTemplate = '/edit-template-campaign/:templateId';

public static readonly urlRegexp = new RegExp(
/\/templates\/edit-template-campaign\/([\dA-Fa-f-]+)(?:\?lockNumber=(\d))?$/
);

campaignSelect: Locator;

submitButton: Locator;
Expand Down
4 changes: 4 additions & 0 deletions tests/test-team/pages/letter/template-mgmt-edit-template-name-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ import { TemplateMgmtBasePage } from '../template-mgmt-base-page';
export class TemplateMgmtEditTemplateNamePage extends TemplateMgmtBasePage {
static readonly pathTemplate = '/edit-template-name/:templateId';

public static readonly urlRegexp = new RegExp(
/\/templates\/edit-template-name\/([\dA-Fa-f-]+)(?:\?lockNumber=(\d))?$/
);

nameInput: Locator;

submitButton: Locator;
Expand Down
4 changes: 4 additions & 0 deletions tests/test-team/pages/letter/template-mgmt-get-ready-to-approve-letter-template-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ export class TemplateMgmtGetReadyToApproveLetterTemplatePage extends TemplateMgm
static readonly pathTemplate =
'/get-ready-to-approve-letter-template/:templateId';

public static readonly urlRegexp = new RegExp(
/\/templates\/get-ready-to-approve-letter-template\/[\dA-Fa-f-]+/
);

public readonly continueButton: Locator;
public readonly backButton: Locator;

Expand Down
4 changes: 4 additions & 0 deletions tests/test-team/pages/letter/template-mgmt-preview-approved-letter-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ export class TemplateMgmtPreviewApprovedLetterPage extends TemplateMgmtPreviewSu
static readonly pathTemplate =
'/preview-approved-letter-template/:templateId';

public static readonly urlRegexp = new RegExp(
/\/templates\/preview-approved-letter-template\/([\dA-Fa-f-]+)$/
);

public getTab(name: string) {
const panel = this.page.getByRole('tabpanel', { name });
const tab = this.page.getByRole('tab', { name });
Expand Down
5 changes: 4 additions & 1 deletion tests/test-team/pages/letter/template-mgmt-preview-letter-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export class TemplateMgmtPreviewLetterPage extends TemplateMgmtPreviewBasePage {
static readonly pathTemplate = '/preview-letter-template/:templateId';

public static readonly urlRegexp = new RegExp(
/\/templates\/preview-letter-template\/([\dA-Fa-f-]+)(?:\?from=edit)?$/
/\/templates\/preview-letter-template\/([\dA-Fa-f-]+)(?:\?from=(edit|upload))?$/
);

public readonly continueButton: Locator;
Expand All @@ -23,6 +23,7 @@ export class TemplateMgmtPreviewLetterPage extends TemplateMgmtPreviewBasePage {
public readonly statusAction: Locator;
public readonly campaignAction: Locator;
public readonly printingAndPostage: Locator;
public readonly printingAndPostageAction: Locator;

public readonly tabbedRenderSection: Locator;

Expand Down Expand Up @@ -55,6 +56,7 @@ export class TemplateMgmtPreviewLetterPage extends TemplateMgmtPreviewBasePage {
this.statusAction = page.getByTestId('status-action');
this.campaignAction = page.getByTestId('campaign-action');
this.printingAndPostage = page.locator('[id="printing-and-postage"]');
this.printingAndPostageAction = page.getByTestId('printing-postage-action');

this.tabbedRenderSection = page.locator('section').filter({
has: page.getByRole('heading', { name: 'Letter preview' }),
Expand Down Expand Up @@ -111,6 +113,7 @@ export class TemplateMgmtPreviewLetterPage extends TemplateMgmtPreviewBasePage {
getInlineError: (fieldId: string): Locator =>
panel.locator(`[data-testid="error-${fieldId}"]`),
getRecipientOptions: (): Locator => recipientSelect.locator('option'),
getIframeSrc: () => previewIframe.getAttribute('src'),

async clickTab() {
await tab.click();
Expand Down
10 changes: 9 additions & 1 deletion tests/test-team/pages/letter/template-mgmt-review-and-approve-letter-template-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,23 @@ export class TemplateMgmtReviewAndApproveLetterTemplatePage extends TemplateMgmt
'/review-and-approve-letter-template/:templateId';

public static readonly urlRegexp = new RegExp(
/\/templates\/review-and-approve-letter-template\/([\dA-Fa-f-]+)$/
/\/templates\/review-and-approve-letter-template\/([\dA-Fa-f-]+)(?:\?lockNumber=(\d))?$/
);

readonly approveButton: Locator;
readonly shortRenderIFrame: Locator;
readonly longRenderIFrame: Locator;

constructor(page: Page) {
super(page);

this.approveButton = page.getByRole('button', { name: 'Approve' });
this.shortRenderIFrame = page.locator(
'iframe[title="Letter preview - short examples"]'
);
this.longRenderIFrame = page.locator(
'iframe[title="Letter preview - long examples"]'
);
}

async clickApproveButton() {
Expand Down
18 changes: 16 additions & 2 deletions tests/test-team/pages/letter/template-mgmt-upload-bsl-letter-template-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { Locator, Page } from '@playwright/test';
import { TemplateMgmtBasePage } from '../template-mgmt-base-page';
import { TemplateMgmtUploadLetterBasePage } from './template-mgmt-upload-letter-base-page';

export class TemplateMgmtUploadBSLLetterTemplatePage extends TemplateMgmtBasePage {
export class TemplateMgmtUploadBSLLetterTemplatePage extends TemplateMgmtUploadLetterBasePage {
static readonly pathTemplate =
'/upload-british-sign-language-letter-template';

Expand Down Expand Up @@ -30,4 +30,18 @@ export class TemplateMgmtUploadBSLLetterTemplatePage extends TemplateMgmtBasePag
name: 'Upload letter template file',
});
}

async fillForm(input: {
name: string;
campaignId: string;
filePath: string;
language?: string;
}) {
await this.nameInput.fill(input.name);

await this.campaignIdInput.selectOption(input.campaignId);

await this.fileInput.click();
await this.fileInput.setInputFiles(input.filePath);
}
}
18 changes: 16 additions & 2 deletions tests/test-team/pages/letter/template-mgmt-upload-large-print-letter-template-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { Locator, Page } from '@playwright/test';
import { TemplateMgmtBasePage } from '../template-mgmt-base-page';
import { TemplateMgmtUploadLetterBasePage } from './template-mgmt-upload-letter-base-page';

export class TemplateMgmtUploadLargePrintLetterTemplatePage extends TemplateMgmtBasePage {
export class TemplateMgmtUploadLargePrintLetterTemplatePage extends TemplateMgmtUploadLetterBasePage {
static readonly pathTemplate = '/upload-large-print-letter-template';

nameInput: Locator;
Expand Down Expand Up @@ -29,4 +29,18 @@ export class TemplateMgmtUploadLargePrintLetterTemplatePage extends TemplateMgmt
name: 'Upload letter template file',
});
}

async fillForm(input: {
name: string;
campaignId: string;
filePath: string;
language?: string;
}) {
await this.nameInput.fill(input.name);

await this.campaignIdInput.selectOption(input.campaignId);

await this.fileInput.click();
await this.fileInput.setInputFiles(input.filePath);
}
}
21 changes: 21 additions & 0 deletions tests/test-team/pages/letter/template-mgmt-upload-letter-base-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Locator, Page } from '@playwright/test';
import { TemplateMgmtBasePage } from 'pages/template-mgmt-base-page';

export abstract class TemplateMgmtUploadLetterBasePage extends TemplateMgmtBasePage {
submitButton: Locator;

constructor(page: Page) {
super(page);

this.submitButton = page.getByRole('button', {
name: 'Upload letter template file',
});
}

abstract fillForm(input: {
name: string;
campaignId: string;
filePath: string;
language?: string;
}): Promise<void>;
}
24 changes: 22 additions & 2 deletions tests/test-team/pages/letter/template-mgmt-upload-other-language-letter-template-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { Locator, Page } from '@playwright/test';
import { TemplateMgmtBasePage } from '../template-mgmt-base-page';
import { TemplateMgmtUploadLetterBasePage } from './template-mgmt-upload-letter-base-page';

export class TemplateMgmtUploadOtherLanguageLetterTemplatePage extends TemplateMgmtBasePage {
export class TemplateMgmtUploadOtherLanguageLetterTemplatePage extends TemplateMgmtUploadLetterBasePage {
static readonly pathTemplate = '/upload-other-language-letter-template';

nameInput: Locator;
Expand Down Expand Up @@ -33,4 +33,24 @@ export class TemplateMgmtUploadOtherLanguageLetterTemplatePage extends TemplateM
name: 'Upload letter template file',
});
}

async fillForm(input: {
name: string;
campaignId: string;
filePath: string;
language?: string;
}) {
await this.nameInput.fill(input.name);

await this.campaignIdInput.selectOption(input.campaignId);

await this.fileInput.click();
await this.fileInput.setInputFiles(input.filePath);

if (!input.language) {
return;
}

await this.languageInput.selectOption(input.language);
Copy link
Copy Markdown
Contributor

@chris-elliott-nhsd chris-elliott-nhsd May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could this whole implementation go in TemplateMgmtUploadLetterBasePage? only difference is that the other ones don't have the language check, but this version handles the language being absent just fine

Copy link
Copy Markdown
Contributor Author

@andykay-nhs andykay-nhs May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think so, I will try and dedupe it

Copy link
Copy Markdown
Contributor Author

@andykay-nhs andykay-nhs May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah wait, now I remember why i hesitated to do this. It would mean moving all of the references to the elements up into the base page class. When you do that you pretty much remove the need for template-mgmt-upload-standard-english-letter-template-page.ts, template-mgmt-upload-large-print-letter-template-page.ts and template-mgmt-upload-bsl-letter-template-page.ts which would then mean going and changing all those references and then the PR becomes a lot bigger. Happy to go through and do this but felt like light touch was simpler despite some duplication of code

Copy link
Copy Markdown
Contributor

@chris-elliott-nhsd chris-elliott-nhsd May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i don't think you'd need to change all the references in the tests, if you move everything shared up into the base class then won't the individual pages inherit them?

i'm not sure there's any reason to have a shared base class if you're not going to put all the shared attributes in it. the individual pages still have different URLs so you'd still have the individual classes.

not a big deal so happy to approve regardless but i don't see how moving all the shared attributes up would have any effect outside of these page classes

}
}
18 changes: 16 additions & 2 deletions tests/test-team/pages/letter/template-mgmt-upload-standard-english-letter-template-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { Locator, Page } from '@playwright/test';
import { TemplateMgmtBasePage } from '../template-mgmt-base-page';
import { TemplateMgmtUploadLetterBasePage } from './template-mgmt-upload-letter-base-page';

export class TemplateMgmtUploadStandardEnglishLetterTemplatePage extends TemplateMgmtBasePage {
export class TemplateMgmtUploadStandardEnglishLetterTemplatePage extends TemplateMgmtUploadLetterBasePage {
static readonly pathTemplate = '/upload-standard-english-letter-template';

nameInput: Locator;
Expand Down Expand Up @@ -29,4 +29,18 @@ export class TemplateMgmtUploadStandardEnglishLetterTemplatePage extends Templat
name: 'Upload letter template file',
});
}

async fillForm(input: {
name: string;
campaignId: string;
filePath: string;
language?: string;
}) {
await this.nameInput.fill(input.name);

await this.campaignIdInput.selectOption(input.campaignId);

await this.fileInput.click();
await this.fileInput.setInputFiles(input.filePath);
}
}
Loading
Loading