Add E2E tests for settings (#897)

* Add E2E tests for settings

* Post-review improvements

Author: rwood-moz

frontend/src/components/CalendarManagement.vue

@@ -36,6 +36,7 @@ const filteredCalendars = computed(() => props.calendars.filter((calendar: Calen
         :disabled="loading"
         @click="emit('sync')"
         :title="t('label.sync')"
+        data-testid="calendar-settings-sync-calendars-button"
       >
         <span class="mr-2 inline-block">
           {{ t('label.syncCalendars') }}

frontend/src/components/SettingsCalendar.vue

@@ -429,6 +429,7 @@ onMounted(async () => {
           v-model="calendarInput.data.title"
           type="text"
           class="w-full max-w-sm rounded-md"
+          data-testid="settings-calendar-title-input"
         />
       </label>
       <label v-if="isCalDav || editMode" class="flex items-center pl-4">
@@ -439,7 +440,7 @@ onMounted(async () => {
               {{ color }}
             </option>
           </select>
-          <input v-else type="text" v-model="calendarInput.data.color" class="w-full rounded-md" />
+          <input v-else type="text" data-testid="settings-calendar-color-input" v-model="calendarInput.data.color" class="w-full rounded-md" />
           <div class="size-8 shrink-0 rounded-full" :style="{ backgroundColor: calendarInput.data.color }"></div>
         </div>
       </label>

frontend/src/components/SettingsConnections.vue

@@ -135,13 +135,15 @@ const editProfile = async () => {
           v-if="!connection[0]"
           :label="t('label.connect')"
           class="btn-connect"
+          :data-testid="'connected-accounts-settings-' + t(provider) + '-connect-btn'"
           @click="() => connectAccount(providers[provider])"
           :title="t('label.connect')"
         />
         <caution-button
           v-if="connection[0]"
           :label="t('label.disconnect')"
           class="btn-disconnect"
+          :data-testid="'connected-accounts-settings-' + t(provider) + '-disconnect-btn'"
           @click="() => displayModal(providers[provider], connection[0].type_id)"
           :title="t('label.disconnect')"
         />

test/e2e/README.md

@@ -29,6 +29,7 @@ The tests expect that the default Appointment application settings haven't been
 - The user scheduling availability hasn't been changed from the default settings;
 - In the dashboard the default calendar view is the current month view; this is important so that the tests can find an available booking slot, etc.
 - In `Booking Settings`, the `Booking Confirmation` option is enabled, so that requested appointments generate HOLD appointments that need to be confirmed
+- The timezone is set to the default of `America/Toronto`
 
 ## Running the E2E tests against your local dev environment
 

test/e2e/const/constants.ts

@@ -6,8 +6,14 @@ export const APPT_URL = String(process.env.APPT_URL);
 export const APPT_MY_SHARE_LINK = String(process.env.APPT_MY_SHARE_LINK);
 export const APPT_SHORT_SHARE_LINK_PREFIX = String(process.env.APPT_SHORT_SHARE_LINK_PREFIX);
 export const APPT_LONG_SHARE_LINK_PREFIX = String(process.env.APPT_LONG_SHARE_LINK_PREFIX);
-export const APPT_PENDING_BOOKINGS_PAGE = `${process.env.APPT_URL}bookings/pending`;
-export const APPT_BOOKED_BOOKINGS_PAGE = `${process.env.APPT_URL}bookings/booked`;
+export const APPT_PENDING_BOOKINGS_PAGE = String(`${process.env.APPT_URL}bookings/pending`);
+export const APPT_BOOKED_BOOKINGS_PAGE = String(`${process.env.APPT_URL}bookings/booked`);
+export const APPT_MAIN_SETTINGS_PAGE = String(`${process.env.APPT_URL}settings`);
+export const APPT_GENERAL_SETTINGS_PAGE = String(`${process.env.APPT_URL}settings/general`);
+export const APPT_CALENDAR_SETTINGS_PAGE = String(`${process.env.APPT_URL}settings/calendar`);
+export const APPT_ACCOUNT_SETTINGS_PAGE = String(`${process.env.APPT_URL}settings/account`);
+export const APPT_CONNECTED_SETTINGS_PAGE = String(`${process.env.APPT_URL}settings/connectedAccounts`);
+export const APPT_DASHBOARD_MONTH_PAGE = String(`${process.env.APPT_URL}dashboard#month`);
 
 // page titles
 export const APPT_PAGE_TITLE = 'Thunderbird Appointment';
@@ -27,3 +33,28 @@ export const APPT_BOOKEE_EMAIL = String(process.env.APPT_BOOKEE_EMAIL);
 // playwright test tags
 export const PLAYWRIGHT_TAG_PROD_SANITY = '@prod-sanity';
 export const PLAYWRIGHT_TAG_E2E_SUITE = '@e2e-suite';
+
+// general settings options
+export const APPT_LANGUAGE_SETTING_EN = 'EN — English';
+export const APPT_LANGUAGE_SETTING_DE = 'DE — German';
+export const APPT_THEME_SETTING_LIGHT = 'Light';
+export const APPT_THEME_SETTING_DARK = 'Dark';
+export const APPT_TIMEZONE_SETTING_TORONTO = 'America/Toronto';
+export const APPT_TIMEZONE_SETTING_HALIFAX = 'America/Halifax';
+
+// local browser store values
+export const APPT_BROWSER_STORE_LANGUAGE_EN = 'en';
+export const APPT_BROWSER_STORE_LANGUAGE_DE = 'de';
+export const APPT_BROWSER_STORE_THEME_LIGHT = 'light';
+export const APPT_BROWSER_STORE_THEME_DARK = 'dark';
+export const APPT_BROWSER_STORE_12HR_TIME = 12;
+export const APPT_BROWSER_STORE_24HR_TIME = 24;
+
+// html class attribute value when dark mode is enabled
+export const APPT_HTML_DARK_MODE_CLASS = 'dark';
+
+// timeouts
+export const TIMEOUT_2_SECONDS = 2_000;
+export const TIMEOUT_3_SECONDS = 3_000;
+export const TIMEOUT_30_SECONDS = 30_000;
+export const TIMEOUT_60_SECONDS = 60_000;