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>
This commit is contained in:
Maxim Mordasov 2024-07-11 14:50:18 +03:00 committed by GitHub
parent 7da58c8eaa
commit d7d4a92c28
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 46 additions and 32 deletions

View file

@ -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);
});

View file

@ -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')}>

View file

@ -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 })}