feat(client): add job experience widget to profile (#63503)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

e2e/completed-project-preview.spec.ts

@@ -16,6 +16,7 @@ const unlockedProfile = {
   showName: true,
   showPoints: true,
   showPortfolio: true,
+  showExperience: true,
   showTimeLine: true
 };
 

e2e/experience.spec.ts

@@ -0,0 +1,138 @@
+import { execSync } from 'child_process';
+import { test, expect } from '@playwright/test';
+
+test.use({ storageState: 'playwright/.auth/development-user.json' });
+
+test.beforeAll(() => {
+  execSync('node ../tools/scripts/seed/seed-demo-user');
+});
+
+test.afterAll(() => {
+  execSync('node ../tools/scripts/seed/seed-demo-user --certified-user');
+});
+
+test.describe('Add Experience Item', () => {
+  test.skip(({ browserName }) => browserName === 'webkit', 'flaky on Safari');
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/developmentuser');
+
+    if (!process.env.CI) {
+      await page
+        .getByRole('button', { name: 'Preview custom 404 page' })
+        .click();
+    }
+
+    await page.getByRole('button', { name: 'Edit my profile' }).click();
+
+    await expect(async () => {
+      const addExperienceItemButton = page.getByRole('button', {
+        name: 'Add experience'
+      });
+      await addExperienceItemButton.click();
+
+      await expect(addExperienceItemButton).toBeDisabled({ timeout: 1 });
+    }).toPass();
+  });
+
+  test('The company has validation', async ({ page }) => {
+    await page.getByLabel('Company').fill('A');
+    await expect(page.getByText('Company name is too short')).toBeVisible();
+
+    await page
+      .getByLabel('Company')
+      .fill(
+        'This is the longest company name you will ever see in your entire life, you will never see such a long company name again. This is the longest company name in existen'
+      );
+    await expect(page.getByText('Company name is too long')).toBeVisible();
+    await page.getByLabel('Company').fill('freeCodeCamp');
+    await expect(page.getByText('Company name is too short')).toBeHidden();
+    await expect(page.getByText('Company name is too long')).toBeHidden();
+  });
+
+  test('The position has validation', async ({ page }) => {
+    await page.getByLabel('Job Title').fill('A');
+    await expect(page.getByText('Title is too short')).toBeVisible();
+
+    await page
+      .getByLabel('Job Title')
+      .fill(
+        'This is the longest position you will ever see in your entire life, you will never see such a long position again. This is the longest position in existen'
+      );
+    await expect(page.getByText('Title is too long')).toBeVisible();
+    await page.getByLabel('Job Title').fill('Software Engineer');
+    await expect(page.getByText('Title is too short')).toBeHidden();
+    await expect(page.getByText('Title is too long')).toBeHidden();
+  });
+
+  test('The start date has validation', async ({ page }) => {
+    await page.getByLabel('Start Date').fill('13/2023');
+    await expect(page.getByText('Please enter a valid date.')).toBeVisible();
+
+    await page.getByLabel('Start Date').fill('01/2023');
+    await expect(page.getByText('Please enter a valid date.')).toBeHidden();
+  });
+
+  test('The end date has validation', async ({ page }) => {
+    await page.getByLabel('End Date', { exact: false }).fill('13/2023');
+    await expect(page.getByText('Please enter a valid date.')).toBeVisible();
+
+    await page.getByLabel('End Date', { exact: false }).fill('01/2023');
+    await expect(page.getByText('Please enter a valid date.')).toBeHidden();
+  });
+
+  test('The description has validation', async ({ page }) => {
+    await page.getByLabel('Description').fill('A'.repeat(1001));
+    await expect(
+      page.getByText(
+        'There is a maximum limit of 500 characters, you have 0 left'
+      )
+    ).toBeVisible();
+    await page.getByLabel('Description').fill('Worked on various projects');
+    await expect(
+      page.getByText(
+        'There is a maximum limit of 500 characters, you have 0 left'
+      )
+    ).toBeHidden();
+  });
+
+  test('It should be possible to delete an experience item', async ({
+    page
+  }) => {
+    await page.getByLabel('Company').fill('freeCodeCamp');
+    await page.getByLabel('Job Title').fill('Software Engineer');
+    await page.getByLabel('Start Date').fill('01/2020');
+    await page.getByLabel('End Date', { exact: false }).fill('01/2021');
+    // Use locator to avoid conflict with About section's Location field
+    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 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');
+    await page.getByLabel('End Date', { exact: false }).fill('01/2021');
+    // Use locator to avoid conflict with About section's Location field
+    await page.locator('input[name="experience-location"]').fill('Remote');
+    await page.getByLabel('Description').fill('Worked on various projects');
+
+    await page.getByRole('button', { name: 'Save experience' }).click();
+    await page.getByRole('button', { name: 'Close' }).click();
+    await expect(page.getByRole('alert').first()).toContainText(
+      /We have updated your experience/
+    );
+  });
+});

e2e/settings.spec.ts

@@ -157,12 +157,20 @@ test.describe('Settings - Certified User', () => {
         .locator('p')
         .filter({ hasText: translations.settings.labels['my-portfolio'] })
     ).toBeVisible();
+    await expect(
+      page
+        .getByRole('group', {
+          name: translations.settings.labels['my-experience']
+        })
+        .locator('p')
+        .filter({ hasText: translations.settings.labels['my-experience'] })
+    ).toBeVisible();
     await expect(
       page.getByText(settingsObject.private, { exact: true })
-    ).toHaveCount(10);
+    ).toHaveCount(11);
     await expect(
       page.getByText(settingsObject.public, { exact: true })
-    ).toHaveCount(10);
+    ).toHaveCount(11);
     const saveButton = page.getByRole('button', {
       name: translations.settings.headings.privacy
     });