Merge pull request #109 from umbraco/feature/upgrader-e2e

Feature/upgrader e2e

src/Umbraco.Web.UI.Client/e2e/upgrader.spec.ts

@@ -0,0 +1,62 @@
+import { rest } from 'msw';
+
+import umbracoPath from '../src/core/helpers/umbraco-path';
+import { ProblemDetails, StatusResponse } from '../src/core/models';
+import { expect, test } from '../test';
+
+test.describe('upgrader tests', () => {
+	test.beforeEach(async ({ page, worker }) => {
+		await worker.use(
+			// Override the server status to be "must-install"
+			rest.get(umbracoPath('/server/status'), (_req, res, ctx) => {
+				return res(
+					// Respond with a 200 status code
+					ctx.status(200),
+					ctx.json<StatusResponse>({
+						serverStatus: 'must-upgrade',
+					})
+				);
+			})
+		);
+
+		await page.goto('/upgrade');
+	});
+
+	test('upgrader is shown', async ({ page }) => {
+		await page.waitForSelector('[data-test="upgrader"]');
+		await expect(page).toHaveURL('/upgrade');
+		await expect(page.locator('h1')).toHaveText('Upgrading Umbraco', { useInnerText: true });
+	});
+
+	test('upgrader has a "View Report" button', async ({ page }) => {
+		await expect(page.locator('[data-test="view-report-button"]')).toBeVisible();
+	});
+
+	test('upgrader completes successfully', async ({ page }) => {
+		await page.click('[data-test="continue-button"]');
+		await page.waitForSelector('umb-backoffice', { timeout: 30000 });
+	});
+
+	test('upgrader fails and shows error', async ({ page, worker }) => {
+		await worker.use(
+			// Override the server status to be "must-install"
+			rest.post(umbracoPath('/upgrade/authorize'), (_req, res, ctx) => {
+				return res(
+					// Respond with a 200 status code
+					ctx.status(400),
+					ctx.json<ProblemDetails>({
+						status: 400,
+						type: 'error',
+						detail: 'Something went wrong',
+					})
+				);
+			})
+		);
+
+		await page.click('[data-test="continue-button"]');
+
+		await expect(page.locator('[data-test="error-message"]')).toHaveText('Something went wrong', {
+			useInnerText: true,
+		});
+	});
+});

src/Umbraco.Web.UI.Client/src/upgrader/upgrader-view.element.ts

@@ -55,6 +55,7 @@ export class UmbUpgraderView extends LitElement {
 						? html`
 								<p>
 									<uui-button
+										data-test="view-report-button"
 										look="secondary"
 										href="${this.settings.reportUrl}"
 										target="_blank"
@@ -69,6 +70,7 @@ export class UmbUpgraderView extends LitElement {
 				<form id="authorizeUpgradeForm" @submit=${this._handleSubmit}>
 					<p>
 						<uui-button
+							data-test="continue-button"
 							id="authorizeUpgrade"
 							type="submit"
 							look="primary"
@@ -84,7 +86,9 @@ export class UmbUpgraderView extends LitElement {
 	}
 
 	private _renderError() {
-		return html` ${this.errorMessage ? html`<p class="error">${this.errorMessage}</p>` : ''} `;
+		return html`
+			${this.errorMessage ? html`<p class="error" data-test="error-message">${this.errorMessage}</p>` : ''}
+		`;
 	}
 
 	render() {

src/Umbraco.Web.UI.Client/src/upgrader/upgrader.element.ts

@@ -5,7 +5,8 @@ import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 
 import { getUpgradeSettings, PostUpgradeAuthorize } from '../core/api/fetcher';
-import { UmbracoUpgrader } from '../core/models';
+
+import type { UmbracoUpgrader } from '../core/models';
 
 /**
  * @element umb-upgrader
@@ -30,7 +31,7 @@ export class UmbUpgrader extends LitElement {
 	}
 
 	render() {
-		return html`<umb-installer-layout>
+		return html`<umb-installer-layout data-test="upgrader">
 			<umb-upgrader-view
 				.fetching=${this.fetching}
 				.upgrading=${this.upgrading}
@@ -49,7 +50,7 @@ export class UmbUpgrader extends LitElement {
 			this.upgradeSettings = data;
 		} catch (e) {
 			if (e instanceof getUpgradeSettings.Error) {
-				this.errorMessage = e.message;
+				this.errorMessage = e.data.detail;
 			}
 		}
 

src/Umbraco.Web.UI.Client/test.ts

@@ -4,10 +4,18 @@ import { createWorkerFixture } from 'playwright-msw';
 import { handlers } from './src/mocks/e2e-handlers';
 
 import type { MockServiceWorker } from 'playwright-msw';
+
 const test = base.extend<{
 	worker: MockServiceWorker;
 }>({
 	worker: createWorkerFixture(...handlers),
+	page: async ({ page }, use) => {
+		// Set is-authenticated in sessionStorage to true
+		await page.addInitScript(`window.sessionStorage.setItem('is-authenticated', 'true');`);
+
+		// Use signed-in page in all tests
+		await use(page);
+	},
 });
 
 export { test, expect };