Update settings E2E tests for settings page UI overhaul

Author: rwood-moz

test/e2e/const/constants.ts

@@ -43,8 +43,8 @@ export const APPT_THEME_SETTING_DARK = 'Dark';
 export const APPT_TIMEZONE_SETTING_PRIMARY = Intl.DateTimeFormat().resolvedOptions().timeZone;
 console.log(`using local timezone: ${APPT_TIMEZONE_SETTING_PRIMARY}`)
 export const APPT_TIMEZONE_SETTING_HALIFAX = 'America/Halifax'; // settings test changes to this tz temporarily
-export const APPT_START_OF_WEEK_SUN = 'S';
-export const APPT_START_OF_WEEK_MON = 'M';
+export const APPT_START_OF_WEEK_SUN = 'SUN';
+export const APPT_START_OF_WEEK_MON = 'MON';
 export const APPT_START_OF_WEEK_DASHBOARD_SUN = 'Sun';
 export const APPT_START_OF_WEEK_DASHBOARD_MON = 'Mon';
 

test/e2e/pages/settings-page.ts

@@ -8,6 +8,7 @@ import {
   TIMEOUT_5_SECONDS,
   TIMEOUT_30_SECONDS,
   APPT_LANGUAGE_SETTING_EN,
+  APPT_START_OF_WEEK_MON,
   } from '../const/constants';
 
 
@@ -31,9 +32,9 @@ export class SettingsPage {
   readonly bookingPageURLInput: Locator;
   readonly copyLinkBtn: Locator;
   readonly copyLinkToolTipText: Locator;
-  readonly cancelServiceBtn: Locator;
-  readonly cancelServiceConfirmCancelBtn: Locator;
-  readonly bookingPageSettingsBtn: Locator;
+  readonly deleteDataBtn: Locator;
+  readonly deleteDataConfirmCancelBtn: Locator;
+  readonly manageBookingLink: Locator;
   readonly downloadDataBtn: Locator;
   readonly connectedAppsHdr: Locator;
   readonly addCaldavBtn: Locator;
@@ -42,7 +43,7 @@ export class SettingsPage {
   readonly addCaldavPasswordInput: Locator;
   readonly addCaldavCloseModalBtn: Locator;
   readonly addGoogleBtn: Locator;
-  readonly defaultCalendarConnectedCbox: Locator;
+  readonly defaultCalendarBadge: Locator;
   readonly saveBtnEN: Locator;
   readonly savedSuccessfullyTextEN: Locator;
   readonly savedSuccessfullyTextDE: Locator;
@@ -57,10 +58,10 @@ export class SettingsPage {
     // main settings view
     this.settingsHeaderEN = this.page.getByRole('main').getByText('Settings', { exact: true });
     this.settingsHeaderDE = this.page.getByRole('heading', { name: 'Einstellungen' }).first();
-    this.saveBtnEN = this.page.getByRole('button', { name: 'Save' });
+    this.saveBtnEN = this.page.getByRole('button', { name: 'Save' }).nth(1); // save button at bottom, not in notice bar
     this.savedSuccessfullyTextEN = this.page.getByText('Settings saved successfully', { exact: true });
     this.savedSuccessfullyTextDE = this.page.getByText('Einstellungen erfolgreich gespeichert', { exact: true });
-    this.saveBtnDE = this.page.getByRole('button', { name: 'Speichern' });
+    this.saveBtnDE = this.page.getByRole('button', { name: 'Speichern' }).nth(1);
     this.revertBtn = this.page.getByRole('button', { name: 'Revert changes' });
 
     // account settings section
@@ -70,9 +71,9 @@ export class SettingsPage {
     this.bookingPageURLInput = this.page.locator('#booking-page-url');
     this.copyLinkBtn = this.page.locator('#copy-booking-page-url-button');
     this.copyLinkToolTipText = this.page.locator('#tooltip-body');
-    this.cancelServiceBtn = this.page.getByRole('button', { name: 'Cancel Service' });
-    this.cancelServiceConfirmCancelBtn = this.page.getByRole('button', { name: 'Cancel', exact: true });
-    this.bookingPageSettingsBtn = this.page.getByRole('button', { name: 'Booking Page Settings' });
+    this.deleteDataBtn = this.page.getByRole('button', { name: 'Delete all Appointment data' });
+    this.deleteDataConfirmCancelBtn = this.page.getByRole('button', { name: 'Cancel', exact: true });
+    this.manageBookingLink = this.page.getByText('Manage booking link');
     this.downloadDataBtn = this.page.getByTestId('settings-account-download-data-btn');
 
     // preferences section
@@ -82,8 +83,8 @@ export class SettingsPage {
     this.preferencesHeaderEN = this.page.getByRole('heading', { name: 'Preferences' })
     this.preferencesHeaderDE = this.page.locator('#preferences').getByRole('heading', { name: 'Einstellungen' });
     this.defaultTimeZoneSelect = this.page.getByTestId('settings-preferences-default-time-zone-select');
-    this.startOfWeekMondayBtn = this.page.getByRole('button', { name: 'M', exact: true });
-    this.startOfWeekSundayBtn = this.page.getByRole('button', { name: 'S', exact: true });
+    this.startOfWeekMondayBtn = this.page.getByRole('button', { name: 'Mon', exact: true });
+    this.startOfWeekSundayBtn = this.page.getByRole('button', { name: 'Sun', exact: true });
 
     // connected apps section
     this.connectedAppsBtn = this.page.getByTestId('settings-connectedApplications-settings-btn');
@@ -94,7 +95,7 @@ export class SettingsPage {
     this.addCaldavPasswordInput = this.page.getByLabel('Password');
     this.addCaldavCloseModalBtn = this.page.getByRole('img', { name: 'Close' });
     this.addGoogleBtn = this.page.getByRole('button', { name: 'Add Google Calendar' });
-    this.defaultCalendarConnectedCbox = this.page.locator('div').filter({ hasText: /^Default*/ }).getByTestId('checkbox-input');
+    this.defaultCalendarBadge = this.page.getByTestId('badge');
     this.googleSignInHdr = this.page.getByText('Sign in with Google');
   }
 
@@ -208,7 +209,7 @@ export class SettingsPage {
   async changeStartOfWeekSetting(startOfWeek: string) {
     await this.scrollIntoView(this.startOfWeekMondayBtn);
     await this.page.waitForTimeout(TIMEOUT_1_SECOND);
-    if (startOfWeek == 'M') {
+    if (startOfWeek == APPT_START_OF_WEEK_MON) {
       await this.startOfWeekMondayBtn.click({ timeout: TIMEOUT_30_SECONDS });
     } else {
       await this.startOfWeekSundayBtn.click({ timeout: TIMEOUT_30_SECONDS });

test/e2e/pages/tb-accts-page.ts

@@ -8,9 +8,9 @@ export class TBAcctsPage {
   readonly emailInput: Locator;
   readonly passwordInput: Locator;
   readonly signInButton: Locator;
-  readonly loginEmailInput: Locator;
+  readonly localDevEmailInput: Locator;
   readonly localDevpasswordInput: Locator;
-  readonly loginDialogContinueBtn: Locator;
+  readonly localDevLoginContinueBtn: Locator;
 
   constructor(page: Page) {
     this.page = page;
@@ -19,9 +19,10 @@ export class TBAcctsPage {
     this.emailInput = this.page.getByTestId('username-input');
     this.passwordInput = this.page.getByTestId('password-input');
     this.signInButton = this.page.getByTestId('submit-btn');
-    this.loginEmailInput = this.page.getByLabel('Email');
-    this.localDevpasswordInput = this.page.getByLabel('Password');
-    this.loginDialogContinueBtn = this.page.getByTitle('Continue');
+    
+    this.localDevEmailInput = this.page.getByTestId('login-email-input');
+    this.localDevpasswordInput = this.page.getByTestId('login-password-input');
+    this.localDevLoginContinueBtn = this.page.getByTestId('login-continue-btn');
   }
 
   /**
@@ -48,17 +49,17 @@ export class TBAcctsPage {
   }
 
   /**
-   * Sign in when running Appointment on the local dev stack; doesn't redirect to TB Accounts login; just local sign-in
+   * Sign in when running Appointment on the local dev stack and not using TB Accounts OIDC; just local password
    */
   async localApptSignIn() {
-    await expect(this.loginEmailInput).toBeVisible({ timeout: TIMEOUT_30_SECONDS });
-    await expect(this.loginDialogContinueBtn).toBeVisible();
+    await expect(this.localDevEmailInput).toBeVisible({ timeout: TIMEOUT_30_SECONDS });
+    await expect(this.localDevLoginContinueBtn).toBeVisible();
     expect(TB_ACCTS_EMAIL, 'getting TB_ACCTS_EMAIL env var').toBeTruthy();
-    await this.loginEmailInput.fill(TB_ACCTS_EMAIL);
+    await this.localDevEmailInput.fill(TB_ACCTS_EMAIL);
     await this.page.waitForTimeout(TIMEOUT_1_SECOND);
     await this.localDevpasswordInput.fill(TB_ACCTS_PWORD);
     await this.page.waitForTimeout(TIMEOUT_1_SECOND);
-    await this.loginDialogContinueBtn.click();
+    await this.localDevLoginContinueBtn.click();
     await this.page.waitForTimeout(TIMEOUT_10_SECONDS);
   }
 }

test/e2e/tests/desktop/settings-account.spec.ts

@@ -56,17 +56,17 @@ test.describe('account settings on desktop browser', {
     await expect(settingsPage.downloadDataBtn).toBeVisible();
     await expect(settingsPage.downloadDataBtn).toBeEnabled();
 
-    // cancel service button brings up confirmation dialog (just cancel out)
-    await settingsPage.cancelServiceBtn.scrollIntoViewIfNeeded();
-    await settingsPage.cancelServiceBtn.click();
+    // delete all data button brings up confirmation dialog (just cancel out)
+    await settingsPage.deleteDataBtn.scrollIntoViewIfNeeded();
+    await settingsPage.deleteDataBtn.click();
     await page.waitForTimeout(TIMEOUT_1_SECOND);
-    await settingsPage.cancelServiceConfirmCancelBtn.scrollIntoViewIfNeeded();
-    await settingsPage.cancelServiceConfirmCancelBtn.click({ timeout: TIMEOUT_30_SECONDS });
+    await settingsPage.deleteDataConfirmCancelBtn.scrollIntoViewIfNeeded();
+    await settingsPage.deleteDataConfirmCancelBtn.click({ timeout: TIMEOUT_30_SECONDS });
     await page.waitForTimeout(TIMEOUT_1_SECOND);
 
-    // clicking 'booking page settings' button brings up availability page
-    await settingsPage.bookingPageSettingsBtn.scrollIntoViewIfNeeded();
-    await settingsPage.bookingPageSettingsBtn.click();
+    // clicking 'manage booking' link brings up availability page
+    await settingsPage.manageBookingLink.scrollIntoViewIfNeeded();
+    await settingsPage.manageBookingLink.click();
     await page.waitForURL('**/availability');
     await expect(availabilityPage.setAvailabilityText).toBeVisible();
   });

test/e2e/tests/desktop/settings-connected-apps.spec.ts

@@ -30,9 +30,9 @@ test.describe('connected applications settings on desktop browser', {
     await expect(settingsPage.connectedAppsHdr).toBeVisible({ timeout: TIMEOUT_30_SECONDS });
     await settingsPage.connectedAppsHdr.scrollIntoViewIfNeeded();
 
-    // verify default calendar checkbox is on (test expects google cal already connected)
-    await settingsPage.defaultCalendarConnectedCbox.scrollIntoViewIfNeeded();
-    expect(await settingsPage.defaultCalendarConnectedCbox.isChecked()).toBeTruthy();
+    // one of the calendars is marked with the default badge; if there is more than one badge found this will fail
+    await expect(settingsPage.defaultCalendarBadge).toBeVisible();
+    await settingsPage.defaultCalendarBadge.scrollIntoViewIfNeeded();
 
     // verify that clicking the 'add caldav' button brings up the caldav connection dialog; just close it
     await settingsPage.addCaldavBtn.scrollIntoViewIfNeeded();
@@ -46,9 +46,7 @@ test.describe('connected applications settings on desktop browser', {
 
     // verify clicking the 'add google calendar' button brings up the google sign-in url
     await settingsPage.addGoogleBtn.click();
-    await page.waitForTimeout(TIMEOUT_3_SECONDS);
-    // will go to moz sso auth or google auth depending on local/env setup
-    expect(page.url().includes('auth.mozilla') || page.url().includes('accounts.google')).toBeTruthy();
+    await expect(settingsPage.googleSignInHdr).toBeVisible({ timeout: TIMEOUT_30_SECONDS });
     await settingsPage.gotoConnectedAppSettings();
   });
 });

test/e2e/tests/mobile/settings-account.spec.ts

@@ -68,17 +68,17 @@ test.describe('account settings on mobile browser', {
     await settingsPage.scrollIntoView(settingsPage.downloadDataBtn);
     await expect(settingsPage.downloadDataBtn).toBeVisible();
 
-    // cancel service button brings up confirmation dialog (just cancel out)
-    await settingsPage.scrollIntoView(settingsPage.cancelServiceBtn);
-    await settingsPage.cancelServiceBtn.click();
+    // delete all data button brings up confirmation dialog (just cancel out)
+    await settingsPage.scrollIntoView(settingsPage.deleteDataBtn);
+    await settingsPage.deleteDataBtn.click();
     await page.waitForTimeout(TIMEOUT_1_SECOND);
-    await settingsPage.scrollIntoView(settingsPage.cancelServiceConfirmCancelBtn);
-    await settingsPage.cancelServiceConfirmCancelBtn.click({ timeout: TIMEOUT_30_SECONDS });
+    await settingsPage.scrollIntoView(settingsPage.deleteDataConfirmCancelBtn);
+    await settingsPage.deleteDataConfirmCancelBtn.click({ timeout: TIMEOUT_30_SECONDS });
     await page.waitForTimeout(TIMEOUT_1_SECOND);
 
-    // clicking 'booking page settings' button brings up availability section
-    await settingsPage.scrollIntoView(settingsPage.bookingPageSettingsBtn);
-    await settingsPage.bookingPageSettingsBtn.click();
+    // clicking 'manage booking' link brings up availability page
+    await settingsPage.scrollIntoView(settingsPage.manageBookingLink);
+    await settingsPage.manageBookingLink.click();
     await expect(availabilityPage.setAvailabilityText).toBeVisible();
   });
 

test/e2e/tests/mobile/settings-connected-apps.spec.ts

@@ -40,9 +40,9 @@ test.describe('settings - connected applications on mobile browser', {
     await expect(settingsPage.connectedAppsHdr).toBeVisible({ timeout: TIMEOUT_30_SECONDS });
     await settingsPage.scrollIntoView(settingsPage.connectedAppsHdr);
 
-    // verify default calendar checkbox is on (test expects google cal already connected)
-    await settingsPage.scrollIntoView(settingsPage.defaultCalendarConnectedCbox);
-    expect(await settingsPage.defaultCalendarConnectedCbox.isChecked()).toBeTruthy();
+    // one of the calendars is marked with the default badge; if there is more than one badge found this will fail
+    await expect(settingsPage.defaultCalendarBadge).toBeVisible();
+    await settingsPage.scrollIntoView(settingsPage.defaultCalendarBadge);
 
     // verify that clicking the 'add caldav' button brings up the caldav connection dialog; just close it
     await settingsPage.scrollIntoView(settingsPage.addCaldavBtn);
@@ -60,15 +60,7 @@ test.describe('settings - connected applications on mobile browser', {
 
     // verify clicking the 'add google calendar' button brings up the google sign-in url
     await settingsPage.addGoogleBtn.click();
-    await page.waitForTimeout(TIMEOUT_3_SECONDS);
-
-    // on ios the URL stays as the settings URL but displays connect to google page
-    if (settingsPage.testPlatform.includes('ios')) {
-      expect(settingsPage.googleSignInHdr).toBeVisible({ timeout: TIMEOUT_30_SECONDS });
-    } else {
-      expect(page.url().includes('auth.mozilla') || page.url().includes('accounts.google')).toBeTruthy();
-    }
-    await settingsPage.gotoConnectedAppSettings();
+    await expect(settingsPage.googleSignInHdr).toBeVisible({ timeout: TIMEOUT_30_SECONDS });
   });
 
   test.afterAll(async ({ browser }, testInfo) => {

test/e2e/utils/utils.ts

@@ -36,14 +36,14 @@ export const navigateToAppointmentAndSignIn = async (page: Page, testProjectName
   await page.goto(`${APPT_URL}`);
   await page.waitForTimeout(TIMEOUT_5_SECONDS);
 
-  // if we are already signed in then we can skip this
-  if (await tbAcctsSignInPage.signInHeaderText.isVisible() && await tbAcctsSignInPage.signInButton.isEnabled()) {
-      if (APPT_TARGET_ENV == 'prod' || APPT_TARGET_ENV == 'stage') {
-          await tbAcctsSignInPage.signIn(testProjectName);
-      } else {
-          // local dev env doesn't use tb accts; just signs into appt using username and pword
-          await tbAcctsSignInPage.localApptSignIn();
-      }
+  // local dev can use 'password' only or oidc; check if local stack and using password only
+  if (APPT_TARGET_ENV == 'dev' && await tbAcctsSignInPage.localDevEmailInput.isVisible()) {
+    await tbAcctsSignInPage.localApptSignIn();
+  } else {
+    // using oidc/keyloak in any env; if we are already signed in then we can skip this
+    if (await tbAcctsSignInPage.signInHeaderText.isVisible() && await tbAcctsSignInPage.signInButton.isEnabled()) {
+      await tbAcctsSignInPage.signIn(testProjectName);
+    }
   }
 
   // now that we're signed into the appointment dashboard give it time to load