fix timezone e2e test (#3796)

# What this PR does

## Which issue(s) this PR fixes

## Checklist

- [x] Unit, integration, and e2e (if applicable) tests updated
- [x] Documentation added (or `pr:no public docs` PR label added if not
required)
- [x] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

Tiltfile

@@ -70,12 +70,13 @@ local_resource(
 
 cmd_button(
     name="E2E Tests - headless run",
-    argv=["sh", "-c", "yarn --cwd ./grafana-plugin test:e2e $STOP_ON_FIRST_FAILURE"],
+    argv=["sh", "-c", "yarn --cwd ./grafana-plugin test:e2e $STOP_ON_FIRST_FAILURE $TESTS_FILTER"],
     text="Restart headless run",
     resource="e2e-tests",
     icon_name="replay",
     inputs=[
-        text_input("BROWSERS", "Browsers (e.g. \"chromium,firefox,webkit\")", "chromium", "chromium,firefox,webkit"), 
+        text_input("BROWSERS", "Browsers (e.g. \"chromium,firefox,webkit\")", "chromium", "chromium,firefox,webkit"),
+        text_input("TESTS_FILTER", "Test filter (e.g. \"timezones.test quality.test\")", "", "Test file names to run"), 
         bool_input("REPORTER", "Use HTML reporter", True, 'html', 'line'),
         bool_input("STOP_ON_FIRST_FAILURE", "Stop on first failure", True, "-x", ""),
     ]

grafana-plugin/e2e-tests/schedules/timezones.test.ts

@@ -5,20 +5,23 @@ import utc from 'dayjs/plugin/utc';
 
 import { test } from '../fixtures';
 import { clickButton, generateRandomValue } from '../utils/forms';
+import { setTimezoneInProfile } from '../utils/grafanaProfile';
 import { createOnCallSchedule } from '../utils/schedule';
 
 dayjs.extend(utc);
 dayjs.extend(isoWeek);
 
 test.use({ timezoneId: 'Europe/Moscow' }); // GMT+3 the whole year
-const currentUtcTime = dayjs().utc().format('HH:mm');
+const currentUtcTimeHour = dayjs().utc().format('HH');
 const currentUtcDate = dayjs().utc().format('DD MMM');
-const currentMoscowTime = dayjs().utcOffset(180).format('HH:mm');
+const currentMoscowTimeHour = dayjs().utcOffset(180).format('HH');
 const currentMoscowDate = dayjs().utcOffset(180).format('DD MMM');
 
-test('default dates in override creation modal are correct', async ({ adminRolePage }) => {
+test('dates in schedule are correct according to selected current timezone', async ({ adminRolePage }) => {
   const { page, userName } = adminRolePage;
 
+  await setTimezoneInProfile(page, 'Europe/Moscow');
+
   const onCallScheduleName = generateRandomValue();
   await createOnCallSchedule(page, onCallScheduleName, userName);
 
@@ -30,20 +33,28 @@ test('default dates in override creation modal are correct', async ({ adminRoleP
   await page.getByText('GMT', { exact: true }).click();
 
   // Selected timezone and local time is correctly displayed
-  await expect(page.getByText(`Current timezone: GMT, local time: ${currentUtcTime}`)).toBeVisible();
+  await expect(page.getByText(`Current timezone: GMT, local time: ${currentUtcTimeHour}`)).toBeVisible();
 
   // // User avatar tooltip shows correct time and timezones
   await page.getByTestId('user-avatar-in-schedule').hover();
   await expect(page.getByTestId('schedule-user-details_your-current-time')).toHaveText(/GMT\+3/);
-  await expect(page.getByTestId('schedule-user-details_your-current-time')).toHaveText(new RegExp(currentMoscowTime));
+  await expect(page.getByTestId('schedule-user-details_your-current-time')).toHaveText(
+    new RegExp(currentMoscowTimeHour)
+  );
   await expect(page.getByTestId('schedule-user-details_user-local-time')).toHaveText(/GMT\+3/);
-  await expect(page.getByTestId('schedule-user-details_user-local-time')).toHaveText(new RegExp(currentMoscowTime));
+  await expect(page.getByTestId('schedule-user-details_user-local-time')).toHaveText(new RegExp(currentMoscowTimeHour));
 
   // Schedule slot shows correct times and timezones
   await page.getByTestId('schedule-slot').first().hover();
   await page.waitForTimeout(500);
-  await expect(page.getByText(`User's local time${currentMoscowDate}, ${currentMoscowTime}(GMT+3)`)).toBeVisible();
-  await expect(page.getByText(`Current timezone${currentUtcDate}, ${currentUtcTime}(GMT)`)).toBeVisible();
+  await expect(page.getByTestId('schedule-slot-user-local-time')).toHaveText(
+    new RegExp(`${currentMoscowDate}, ${currentMoscowTimeHour}`)
+  );
+  await expect(page.getByTestId('schedule-slot-user-local-time')).toHaveText(/\(GMT\+3\)/);
+  await expect(page.getByTestId('schedule-slot-current-timezone')).toHaveText(
+    new RegExp(`${currentUtcDate}, ${currentUtcTimeHour}`)
+  );
+  await expect(page.getByTestId('schedule-slot-current-timezone')).toHaveText(/\(GMT\)/);
 
   const firstDayOfTheWeek = dayjs().utc().startOf('isoWeek');
 

grafana-plugin/e2e-tests/utils/grafanaProfile.ts

@@ -0,0 +1,11 @@
+import { Page } from '@playwright/test';
+
+import { goToGrafanaPage } from './navigation';
+
+export const setTimezoneInProfile = async (page: Page, timezone: string) => {
+  await goToGrafanaPage(page, '/profile');
+  await page.getByLabel('Time zone picker').click();
+  await page.getByLabel('Select options menu').getByText(timezone).click();
+  await page.getByTestId('data-testid-shared-prefs-save').click();
+  await page.waitForLoadState('networkidle');
+};

grafana-plugin/src/containers/ScheduleSlot/ScheduleSlot.tsx

@@ -409,13 +409,13 @@ const ScheduleSlotDetails = observer((props: ScheduleSlotDetailsProps) => {
           <div className={cx('details-icon')}>
             <Icon className={cx('icon')} name="clock-nine" />
           </div>
-          <Text type="primary" className={cx('second-column')}>
+          <Text type="primary" className={cx('second-column')} data-testid="schedule-slot-user-local-time">
             User's local time
             <br />
             {currentMoment.tz(user?.timezone).format('DD MMM, HH:mm')}
             <br />({getTzOffsetString(currentMoment.tz(user?.timezone))})
           </Text>
-          <Text type="secondary">
+          <Text type="secondary" data-testid="schedule-slot-current-timezone">
             Current timezone
             <br />
             {currentDateInSelectedTimezone.format('DD MMM, HH:mm')}