From 68344c522c49ddfd81c49a56435a45f7ced2409d Mon Sep 17 00:00:00 2001
From: Raphael Kabo <raphael.kabo@theguardian.com>
Date: Thu, 8 Feb 2024 10:21:02 +0000
Subject: [PATCH] testing: E2E for setting username field

---
 client/components/mma/identity/idapi/user.ts        |  7 +++++--
 .../mma/identity/publicProfile/PublicProfile.tsx    |  4 +++-
 cypress/lib/signInOkta.ts                           |  1 +
 cypress/support/commands.ts                         |  3 +++
 cypress/tests/e2e/e2e.cy.ts                         | 13 +++++++++++--
 5 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/client/components/mma/identity/idapi/user.ts b/client/components/mma/identity/idapi/user.ts
index dbbe1177a..87adcf751 100644
--- a/client/components/mma/identity/idapi/user.ts
+++ b/client/components/mma/identity/idapi/user.ts
@@ -198,8 +198,11 @@ export const read = async (): Promise<User> => {
 
 export const setUsername = async (user: Partial<User>): Promise<User> => {
 	const url = '/idapi/user/username';
-	const body = toUserApiRequest(user);
-	console.log('sending', body);
+	const body = {
+		publicFields: {
+			username: user.username,
+		},
+	};
 	try {
 		const response: UserAPIResponse = await fetchWithDefaultParameters(
 			url,
diff --git a/client/components/mma/identity/publicProfile/PublicProfile.tsx b/client/components/mma/identity/publicProfile/PublicProfile.tsx
index 51f330467..64c0869b5 100644
--- a/client/components/mma/identity/publicProfile/PublicProfile.tsx
+++ b/client/components/mma/identity/publicProfile/PublicProfile.tsx
@@ -60,7 +60,9 @@ export const PublicProfile = (_: { path?: string }) => {
 	const usernameDisplay = (u: User) => (
 		<>
 			<WithStandardTopMargin>
-				<PageSection title="Username">{u.username}</PageSection>
+				<PageSection title="Username">
+					<span data-cy="username-display">{u.username}</span>
+				</PageSection>
 			</WithStandardTopMargin>
 			<WithStandardTopMargin>
 				<Lines n={1} />
diff --git a/cypress/lib/signInOkta.ts b/cypress/lib/signInOkta.ts
index 163dd9579..c45227857 100644
--- a/cypress/lib/signInOkta.ts
+++ b/cypress/lib/signInOkta.ts
@@ -16,6 +16,7 @@ export const signInOkta = () => {
 	cy.visit('/');
 	cy.createTestUser({
 		isUserEmailValidated: true,
+		doNotSetUsername: true,
 	})?.then(({ emailAddress, finalPassword }) => {
 		cy.get('input[name=email]').type(emailAddress);
 		cy.get('input[name=password]').type(finalPassword);
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 45ed4da17..a613adc21 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -97,6 +97,7 @@ type IDAPITestUserOptions = {
 	password?: string;
 	deleteAfterMinute?: boolean;
 	isGuestUser?: boolean;
+	doNotSetUsername?: boolean;
 };
 type IDAPITestUserResponse = [
 	{
@@ -128,6 +129,7 @@ export const createTestUser = ({
 	isUserEmailValidated = false,
 	deleteAfterMinute = true,
 	isGuestUser = false,
+	doNotSetUsername = false,
 }: IDAPITestUserOptions) => {
 	// Generate a random email address if none is provided.
 	const finalEmail = primaryEmailAddress || randomMailosaurEmail();
@@ -150,6 +152,7 @@ export const createTestUser = ({
 					password: finalPassword,
 					deleteAfterMinute,
 					isGuestUser,
+					doNotSetUsername,
 				} as IDAPITestUserOptions,
 			})
 			.then((res) => {
diff --git a/cypress/tests/e2e/e2e.cy.ts b/cypress/tests/e2e/e2e.cy.ts
index a35ea4a01..89b0df6d6 100644
--- a/cypress/tests/e2e/e2e.cy.ts
+++ b/cypress/tests/e2e/e2e.cy.ts
@@ -16,9 +16,18 @@ describe('E2E with Okta', () => {
 	});
 
 	context('profile tab', () => {
-		it('should contain a username', () => {
+		it('should allow the user to set a username', () => {
+			const randomUsername = `testuser${Math.floor(
+				Math.random() * 100000,
+			)}`;
 			cy.visit('/public-settings');
-			cy.findByText('Username');
+			cy.get('input[name="username"]').type(randomUsername);
+			cy.findByText('Save changes').click();
+			cy.visit('/public-settings');
+			cy.get('span[data-cy="username-display"]').should(
+				'contain',
+				randomUsername,
+			);
 		});
 	});