feat(client): update profile ui (#66889)

e2e/experience.spec.ts

@@ -17,16 +17,12 @@ test.describe('Add Experience Item', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/developmentuser');
 
-    await page.getByRole('button', { name: 'Edit my profile' }).click();
+    // The 'Add experience' icon button is on the profile page directly.
+    // Click it to open the experience modal.
+    await page.getByRole('button', { name: 'Add experience' }).click();
 
-    await expect(async () => {
-      const addExperienceItemButton = page.getByRole('button', {
-        name: 'Add experience'
-      });
-      await addExperienceItemButton.click();
-
-      await expect(addExperienceItemButton).toBeDisabled({ timeout: 1 });
-    }).toPass();
+    // Wait for the experience form to be visible inside the modal.
+    await expect(page.getByLabel('Company')).toBeVisible();
   });
 
   test('The company has validation', async ({ page }) => {
@@ -101,20 +97,15 @@ test.describe('Add Experience Item', () => {
     await page.locator('input[name="experience-location"]').fill('Remote');
     await page.getByLabel('Description').fill('Worked on various projects');
 
-    await page.getByRole('button', { name: 'Remove Experience' }).click();
-
-    await page.getByRole('button', { name: 'Close' }).click();
+    await page.getByRole('button', { name: 'Remove experience' }).click();
 
+    // Modal closes automatically after removal
     await expect(page.getByRole('alert').first()).toContainText(
       /We have updated your experience/
     );
   });
 
   test('It should be possible to add an experience item', async ({ page }) => {
-    await expect(
-      page.getByRole('button', { name: 'Add experience' })
-    ).toBeDisabled();
-
     await page.getByLabel('Company').fill('freeCodeCamp');
     await page.getByLabel('Job Title').fill('Software Engineer');
     await page.getByLabel('Start Date').fill('01/2020');
@@ -124,7 +115,8 @@ test.describe('Add Experience Item', () => {
     await page.getByLabel('Description').fill('Worked on various projects');
 
     await page.getByRole('button', { name: 'Save experience' }).click();
-    await page.getByRole('button', { name: 'Close' }).click();
+
+    // Modal closes automatically after a successful save
     await expect(page.getByRole('alert').first()).toContainText(
       /We have updated your experience/
     );

e2e/portfolio.spec.ts

@@ -16,17 +16,14 @@ test.describe('Add Portfolio Item', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/certifieduser');
 
-    await page.getByRole('button', { name: 'Edit my profile' }).click();
+    // The 'Add portfolio project' icon button is on the profile page directly.
+    // Click it to open the portfolio modal.
+    await page.getByRole('button', { name: 'Add portfolio project' }).click();
 
-    // Will check if the portfolio button is hydrated correctly with different intervals.
-    await expect(async () => {
-      const addPortfolioItemButton = page.getByRole('button', {
-        name: 'Add a new portfolio Item'
-      });
-      await addPortfolioItemButton.click();
-
-      await expect(addPortfolioItemButton).toBeDisabled({ timeout: 1 });
-    }).toPass();
+    // Wait for the portfolio form to be visible inside the modal.
+    await expect(
+      page.getByLabel(translations.settings.labels.title)
+    ).toBeVisible();
   });
 
   test('The title has validation', async ({ page }) => {
@@ -115,7 +112,10 @@ test.describe('Add Portfolio Item', () => {
       .getByRole('button', { name: 'Remove this portfolio item' })
       .click();
 
-    await expect(page.getByTestId('portfolio-items')).toBeHidden();
+    // Modal closes automatically after removal
+    await expect(page.getByRole('alert').first()).toContainText(
+      /We have updated your portfolio/
+    );
   });
 
   test('The save button should be disabled when the form is pristine', async ({
@@ -127,10 +127,6 @@ test.describe('Add Portfolio Item', () => {
   });
 
   test('It should be possible to add a portfolio item', async ({ page }) => {
-    await expect(
-      page.getByRole('button', { name: 'Add a new portfolio Item' })
-    ).toBeDisabled();
-
     await page
       .getByLabel(translations.settings.labels.title)
       .fill('My portfolio');
@@ -154,38 +150,8 @@ test.describe('Add Portfolio Item', () => {
     await page
       .getByRole('button', { name: 'Save this portfolio item' })
       .click();
-    await page.getByRole('button', { name: 'Close' }).click();
-    await expect(page.getByRole('alert').first()).toContainText(
-      /We have updated your portfolio/
-    );
-  });
 
-  test('The edit modal should stay open after saving a portfolio item', async ({
-    page
-  }) => {
-    await page
-      .getByLabel(translations.settings.labels.title)
-      .first()
-      .fill('My portfolio');
-    await page
-      .getByLabel(translations.settings.labels.url)
-      .first()
-      .fill('https://my-portfolio.com');
-
-    // Wait for form validation to complete
-    await expect(
-      page.getByRole('button', { name: 'Save this portfolio item' }).first()
-    ).toBeEnabled();
-
-    await page
-      .getByRole('button', { name: 'Save this portfolio item' })
-      .first()
-      .click();
-
-    // Modal should still be open and portfolio form should be visible
-    await expect(page.getByTestId('portfolio-items').first()).toBeVisible();
-
-    await page.getByRole('button', { name: 'Close' }).click();
+    // Modal closes automatically after a successful save
     await expect(page.getByRole('alert').first()).toContainText(
       /We have updated your portfolio/
     );

e2e/profile.spec.ts

@@ -166,11 +166,15 @@ test.describe('Profile component', () => {
       }
     });
 
-    test('should not show portfolio when empty', async ({ page }) => {
-      // @certifieduser doesn't have portfolio information
+    test('should show portfolio section with add button when empty', async ({
+      page
+    }) => {
+      // @certifieduser doesn't have portfolio information, but session users
+      // always see the section so they can add projects
+      await expect(page.getByText(translations.profile.projects)).toBeVisible();
       await expect(
-        page.getByText(translations.profile.projects)
-      ).not.toBeVisible();
+        page.getByRole('button', { name: translations.aria['add-portfolio'] })
+      ).toBeVisible();
     });
 
     test('displays the timeline correctly', async ({ page }) => {