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:
parent
7da58c8eaa
commit
d7d4a92c28
3 changed files with 46 additions and 32 deletions
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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')}>
|
||||
|
|
|
|||
|
|
@ -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 })}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue