Setup End-to-end tests

[mdouet421]

Setup end-to-end tests on the application with Playwright so that we can save time when developing a new feature without having to test all behaviours by hand, and be sure that we don't introduce a regression.

[Nikola-BS]

Feature goal
Setup end-to-end tests on the application with Playwright so that we can save time when developing a new feature without having to test all behaviours by hand, and be sure that we don't introduce a regression.

Considered Solution

• Install Playwright with pnpm create playwright
• That will create "e2e" or "tests" folder and we want create :
  • setup folder :
    • auth.setup.ts
  • pages folder :
    • pageDashboard.ts
    • pageCommutes.ts
    • pageRequests.ts
    • pageProfile.ts
  • app.spec.ts with tests :
    • App access
    • Navigate to Dashboard
    • Navigate to My commutes
    • Navigate to Requests
    • Navigate to Account
  • login.spec.ts with tests :
    • Login
    • Log out
  • profile.spec.ts with tests :
    • Correct Slack Member Id
    • Incorrect Slack Member Id
    • Change color mode
    • Update user profile
  • location.spec.ts with tests :
    • Add location
    • Update location
    • Remove location
  • template.spec.ts with tests :
    • Add commute template
    • Edit commute template
    • Remove template
  • commute.spec.ts with tests :
    • Add commute from scratch (Round trip)
    • Add commute from scratch (One-way)
    • Add commute with template
    • Edit commute
    • Modal appears (with correct content) when we create for a day when we already have a trip planned
    • Can't edit stop when passenger have book
    • Can't create a commute if the date is in the past (check the message error)
    • Can't create a commute if the first stop time is before the outward time (check the message error)
    • Can't create a commute if the the inward time is before the outward time (check the message error)
    • Cancel commute
  • book.spec.ts with tests :
    • Book a round trip on commute
    • Book a return trip on commute
    • Book a one-way trip on commute
    • Modal appears (with correct content) when we book a commute for a day when we already have a trip planned
    • Cancel book
  • request.spec.ts with tests :
    • Check if we have request
    • Accept request
    • Refuse request
    • Auto-accept automatically accepts
    • Auto-accepted and then canceled requires manual validation
  • utils folder
    • user.ts
      • Add a getRandomEmail
      • ?
    • ?
• Update Read
  • Add section End-to-end tests with Playright commands

Checklist

• Install Playwright
• setup folder :
  • auth.setup.ts
• pages folder :
  • pageDashboard.ts
  • pageCommutes.ts
  • pageRequests.ts
  • pageProfile.ts
• app.spec.ts :
  • App access
  • Navigate to Dashboard
  • Navigate to My commutes
  • Navigate to Requests
  • Navigate to Account
• login.spec.ts :
  • Login
  • Log out
• profile.spec.ts :
  • Correct Slack Member Id
  • Incorrect Slack Member Id
  • Change color mode
  • Update user profile
• location.spec.ts :
  • Add location
  • Update location
  • Remove location
• template.spec.ts :
  • Add commute template
  • Edit commute template
  • Remove template
• commute.spec.ts :
  • Add commute from scratch (Round trip)
  • Add commute from scratch (One-way)
  • Add commute with template
  • Edit commute
  • Modal appears (with correct content) when we create for a day when we already have a trip planned
  • Can't edit stop when passenger have book
  • Can't create a commute if the date is in the past (check the message error)
  • Can't create a commute if the first stop time is before the outward time (check the message error)
  • Can't create a commute if the the inward time is before the outward time (check the message error)
  • Cancel commute
• book.spec.ts :
  • Book a round trip on commute
  • Book a return trip on commute
  • Book a one-way trip on commute
  • Modal appears (with correct content) when we book a commute for a day when we already have a trip planned
  • Cancel book
• request.spec.ts :
  • Check if we have request
  • Accept request
  • Refuse request
  • Auto-accept automatically accepts
  • Auto-accepted and then canceled requires manual validation
• utils folder
  • user.ts
    • Add a getRandomEmail
• Update Read
  • Add section End-to-end tests with Playright commands

[ntatoud]

Feedback about the tests structure:

For the authentication part, look at what is done on start-ui to avoid having to login for every test suite.

You are going to have a lot of recurring navigation / actions accros tests. I suggest you build a PageObjectModel representation of the app. It will take time at first but will ensure consistency and make writting the following tests easier.

The test file holds the what => Which action am I doing and what am I testing ?
The PageObject holds the how => How do I do these actions for my app specifically ?

1 Page => 1 Object with possible actions / interaction abstracted as function.

Partial example of PageObject for Dashboard Page:

const pageDashboard = {
  selectCommute: (params: SelectCommuteParams) => {
  // playwright instructrions to select a commute 
  },
  createCommuteForDay: (day: string, params: CreateCommuteParams) => {
  // playwright instructrions to create a commute 
  }
}

As for the content, I am not familiar enough to say if there are missing scenarios.

[mdouet421]

Some tests scenarios are missing :

1. Check if modal appears when we create a commute whose date has already passed
2. Check if modal appears and if the content is correct when we create / book a commute for a day when we already have a trip planned
3. Check if first booking of a passenger on a commute with auto-accept feature is automatically accepted
4. Check if booking of a passenger on a commute where he had been auto-accepted and then canceled requires manual validation

[Nikola-BS]

How to do

⚠️ I'm not sure for login part because we use Google or Slack

setup/auth.setup.ts

setup('authenticate as user', async ({ page }) => {
  await page.to('/login');
  await page.login({ email: USER_EMAIL });

  await page.waitForURL('/dashboard');
  await expect(page.getByTestId('layout-app')).toBeVisible();
});

utils/constant.ts :

const AUTH_FILE_BASE = 'e2e/.auth';

export const USER_FILE = `${AUTH_FILE_BASE}/user.json`;
export const USER_EMAIL = 'user@user.com';

login.spec.ts

test.describe('Login flow', () => {
  test('Login as user', async ({ page }) => {
    await page.to('/login');
    await page.login({ email: USER_EMAIL });
    await page.waitForURL('/dashboard');
    await expect(page.getByTestId('layout-app')).toBeVisible();
  });

 test('Log out', async ({ page }) => {
    await page.to('/login');
    await page.login({ email: USER_EMAIL });
    await page.waitForURL('/dashboard');
    await expect(page.getByTestId('layout-app')).toBeVisible();
    await expect(page.getByText("Account")).toBeVisible();
    await expect(page.getByText("Account")).click();
    await expect(page.getByText("Log out")).toBeVisible();
    await expect(page.getByText("Log out")).click();
    await page.to('/login');
  });
});

profile.spec.ts

 test('Update user profile', async ({ page }) => {
    await page.to('/login');
    await page.login({ email: USER_EMAIL });
    await page.waitForURL('/dashboard');
    await expect(page.getByTestId('layout-app')).toBeVisible();
    await expect(page.getByText("Profile")).toBeVisible();
    await expect(page.getByText("Profile")).click();
    await page.waitForURL('/account/profile');
    await expect(page.getByTestId("slackInput")).toBeVisible();
    await page.getByRole('slackInput').fill('NewSlackMemberID');
    await expect(page.getByText("Save")).click();
    await page.waitForURL('/account');
  });
});