From d7d4a92c2817fe10d043eb43f24bb5a55b2a07b0 Mon Sep 17 00:00:00 2001
From: Maxim Mordasov <maxim.mordasov@grafana.com>
Date: Thu, 11 Jul 2024 14:50:18 +0300
Subject: [PATCH] Enable schedule view e2e test (#4424)

# What this PR does

Enable schedule view e2e test

## Which issue(s) this PR closes

## Checklist

- [x] Unit, integration, and e2e (if applicable) tests updated
- [x] Documentation added (or `pr:no public docs` PR label added if not
required)
- [ ] Added the relevant release notes label (see labels prefixed w/
`release:`). These labels dictate how your PR will
    show up in the autogenerated release notes.

---------

Co-authored-by: Joey Orlando <joey.orlando@grafana.com>
Co-authored-by: Dominik Broj <dominik.broj@grafana.com>
---
 .../e2e-tests/schedules/scheduleView.test.ts  | 31 ++++++++-----
 .../TimelineMarks/TimelineMarks.tsx           |  3 +-
 .../src/pages/schedule/Schedule.tsx           | 44 ++++++++++---------
 3 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts b/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
index 0f27f47a..a76025b6 100644
--- a/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
+++ b/grafana-plugin/e2e-tests/schedules/scheduleView.test.ts
@@ -1,31 +1,42 @@
+import semver from 'semver';
+
 import { scheduleViewToDaysInOneRow } from 'models/schedule/schedule.helpers';
 import { ScheduleView } from 'models/schedule/schedule.types';
 import { HTML_ID } from 'utils/DOM';
 
-import { expect, test } from '../fixtures';
+import { expect, Page, test } from '../fixtures';
 import { generateRandomValue } from '../utils/forms';
 import { createOnCallSchedule } from '../utils/schedule';
 
-test.skip('schedule view (week/2 weeks/month) toggler works', async ({ adminRolePage }) => {
+const getNumberOfWeekdaysInFinalSchedule = async (page: Page) =>
+  await page.locator(`#${HTML_ID.SCHEDULE_FINAL}`).getByTestId('schedule-weekday').count();
+const getScheduleViewRadioButtonLocator = (page: Page, view: ScheduleView) =>
+  page
+    .getByTestId('schedule-view-picker')
+    [semver.lt(process.env.CURRENT_GRAFANA_VERSION, '10.2.0') ? 'getByText' : 'getByLabel'](view, { exact: true });
+
+test('schedule view (week/2 weeks/month) toggler works', async ({ adminRolePage }) => {
   const { page, userName } = adminRolePage;
 
   const onCallScheduleName = generateRandomValue();
   await createOnCallSchedule(page, onCallScheduleName, userName);
 
   // ScheduleView.OneWeek is selected by default
-  expect(await page.getByLabel(ScheduleView.OneWeek, { exact: true }).isChecked()).toBe(true);
+  expect(await getScheduleViewRadioButtonLocator(page, ScheduleView.OneWeek).isChecked()).toBe(true);
 
-  expect(await page.locator(`#${HTML_ID.SCHEDULE_FINAL} .TEST_weekday`).count()).toStrictEqual(
+  expect(await getNumberOfWeekdaysInFinalSchedule(page)).toStrictEqual(
     scheduleViewToDaysInOneRow[ScheduleView.OneWeek]
   );
 
-  await page.getByLabel(ScheduleView.TwoWeeks, { exact: true }).click();
-  expect(await page.getByLabel(ScheduleView.TwoWeeks, { exact: true }).isChecked()).toBe(true);
-  expect(await page.locator(`#${HTML_ID.SCHEDULE_FINAL} .TEST_weekday`).count()).toStrictEqual(
+  await getScheduleViewRadioButtonLocator(page, ScheduleView.TwoWeeks).click();
+  await page.waitForTimeout(1000);
+  expect(await getScheduleViewRadioButtonLocator(page, ScheduleView.TwoWeeks).isChecked()).toBe(true);
+  expect(await getNumberOfWeekdaysInFinalSchedule(page)).toStrictEqual(
     scheduleViewToDaysInOneRow[ScheduleView.TwoWeeks]
   );
 
-  await page.getByLabel(ScheduleView.OneMonth, { exact: true }).click();
-  expect(await page.getByLabel(ScheduleView.OneMonth, { exact: true }).isChecked()).toBe(true);
-  expect(await page.locator(`#${HTML_ID.SCHEDULE_FINAL} .TEST_weekday`).count()).toBeGreaterThanOrEqual(28);
+  await getScheduleViewRadioButtonLocator(page, ScheduleView.OneMonth).click();
+  await page.waitForTimeout(1000);
+  expect(await getScheduleViewRadioButtonLocator(page, ScheduleView.OneMonth).isChecked()).toBe(true);
+  expect(await getNumberOfWeekdaysInFinalSchedule(page)).toBeGreaterThanOrEqual(28);
 });
diff --git a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
index 9685b667..c14c3cc4 100644
--- a/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
+++ b/grafana-plugin/src/containers/TimelineMarks/TimelineMarks.tsx
@@ -84,7 +84,8 @@ export const TimelineMarks: FC<TimelineMarksProps> = observer((props) => {
         return (
           <div
             key={i}
-            className={cx('weekday', 'TEST_weekday', { 'weekday--weekEnd': isWeekend })}
+            data-testid="schedule-weekday"
+            className={cx('weekday', { 'weekday--weekEnd': isWeekend })}
             style={{ width: `${100 / days}%` }}
           >
             <div className={cx('weekday-title')}>
diff --git a/grafana-plugin/src/pages/schedule/Schedule.tsx b/grafana-plugin/src/pages/schedule/Schedule.tsx
index 6264504e..997cbb30 100644
--- a/grafana-plugin/src/pages/schedule/Schedule.tsx
+++ b/grafana-plugin/src/pages/schedule/Schedule.tsx
@@ -356,28 +356,30 @@ class _SchedulePage extends React.Component<SchedulePageProps, SchedulePageState
                           </div>
                         </HorizontalGroup>
                         <HorizontalGroup>
-                          <RadioButtonGroup
-                            options={[
-                              { label: ScheduleView.OneWeek, value: ScheduleView.OneWeek },
-                              { label: ScheduleView.TwoWeeks, value: ScheduleView.TwoWeeks },
-                              { label: ScheduleView.OneMonth, value: ScheduleView.OneMonth },
-                            ]}
-                            value={scheduleView}
-                            onChange={(value) => {
-                              scheduleStore.setScheduleView(value);
-                              if (value === ScheduleView.OneMonth) {
-                                timezoneStore.setCalendarStartDate(
-                                  getCalendarStartDate(
-                                    timezoneStore.calendarStartDate.endOf('isoWeek').startOf('month'),
-                                    value,
-                                    timezoneStore.selectedTimezoneOffset
-                                  )
-                                );
-                              }
+                          <div data-testid="schedule-view-picker">
+                            <RadioButtonGroup
+                              options={[
+                                { label: ScheduleView.OneWeek, value: ScheduleView.OneWeek },
+                                { label: ScheduleView.TwoWeeks, value: ScheduleView.TwoWeeks },
+                                { label: ScheduleView.OneMonth, value: ScheduleView.OneMonth },
+                              ]}
+                              value={scheduleView}
+                              onChange={(value) => {
+                                scheduleStore.setScheduleView(value);
+                                if (value === ScheduleView.OneMonth) {
+                                  timezoneStore.setCalendarStartDate(
+                                    getCalendarStartDate(
+                                      timezoneStore.calendarStartDate.endOf('isoWeek').startOf('month'),
+                                      value,
+                                      timezoneStore.selectedTimezoneOffset
+                                    )
+                                  );
+                                }
 
-                              scheduleStore.refreshEvents(scheduleId);
-                            }}
-                          />
+                                scheduleStore.refreshEvents(scheduleId);
+                              }}
+                            />
+                          </div>
                           <ScheduleFilters
                             value={filters}
                             onChange={(value) => this.setState({ filters: value })}