add e2e test for schedules (#3683)

# What this PR does
- add e2e test for schedules page

## Which issue(s) this PR fixes
https://github.com/grafana/oncall-private/issues/2455

## 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)

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

@@ -0,0 +1,34 @@
+import { expect, test } from '../fixtures';
+import { generateRandomValue } from '../utils/forms';
+import { goToOnCallPage } from '../utils/navigation';
+import { createOnCallSchedule } from '../utils/schedule';
+
+test('schedule calendar and list of schedules is correctly displayed', async ({ adminRolePage }) => {
+  const { page, userName } = adminRolePage;
+
+  const onCallScheduleName = generateRandomValue();
+  await createOnCallSchedule(page, onCallScheduleName, userName);
+
+  await goToOnCallPage(page, 'schedules');
+
+  // schedule slots are present in calendar
+  const nbOfSlotsInCalendar = await page.getByTestId('schedule-slot').count();
+  await expect(nbOfSlotsInCalendar).toBeGreaterThan(0);
+
+  // filter table to show only created schedule
+  await page
+    .locator('div')
+    .filter({ hasText: /^Search or filter results\.\.\.$/ })
+    .nth(1)
+    .click();
+  await page.keyboard.insertText(onCallScheduleName);
+  await page.keyboard.press('Enter');
+  await page.waitForTimeout(2000);
+
+  // schedules table displays details created schedule
+  const schedulesTable = page.getByTestId('schedules-table');
+  await expect(schedulesTable.getByRole('cell', { name: onCallScheduleName })).toBeVisible();
+  await expect(schedulesTable.getByRole('cell', { name: 'Web' })).toBeVisible();
+  await expect(schedulesTable.getByRole('cell', { name: userName })).toBeVisible();
+  await expect(schedulesTable.getByRole('cell', { name: 'No team' })).toBeVisible();
+});

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

@@ -10,5 +10,6 @@ export const goToGrafanaPage = async (page: Page, url = '') => _goToPage(page, u
 
 export const goToOnCallPage = async (page: Page, onCallPage: OnCallPage) => {
   await _goToPage(page, `/a/grafana-oncall-app/${onCallPage}`);
+  await page.waitForLoadState('networkidle');
   await page.waitForTimeout(1000);
 };

grafana-plugin/src/pages/insights/Insights.tsx

@@ -73,8 +73,8 @@ const Insights = observer(() => {
         setDatasource(`${text}`);
       });
     return () => {
-      stackListener?.unsubscribe();
-      dataSourceListener?.unsubscribe();
+      stackListener?.unsubscribe?.();
+      dataSourceListener?.unsubscribe?.();
     };
   }, []);
 

grafana-plugin/src/pages/schedules/Schedules.tsx

@@ -100,25 +100,26 @@ class SchedulesPage extends React.Component<SchedulesPageProps, SchedulesPageSta
               onChange={this.handleSchedulesFiltersChange}
             />
           </div>
-
-          <Table
-            columns={this.getTableColumns()}
-            data={results}
-            loading={!results}
-            pagination={{
-              page,
-              total: results ? Math.ceil((count || 0) / page_size) : 0,
-              onChange: this.handlePageChange,
-            }}
-            rowKey="id"
-            expandable={{
-              expandedRowKeys: expandedRowKeys,
-              onExpand: this.handleExpandRow,
-              expandedRowRender: this.renderSchedule,
-              expandRowByClick: true,
-            }}
-            emptyText={results === undefined ? 'Loading...' : this.renderNotFound()}
-          />
+          <div data-testid="schedules-table">
+            <Table
+              columns={this.getTableColumns()}
+              data={results}
+              loading={!results}
+              pagination={{
+                page,
+                total: results ? Math.ceil((count || 0) / page_size) : 0,
+                onChange: this.handlePageChange,
+              }}
+              rowKey="id"
+              expandable={{
+                expandedRowKeys: expandedRowKeys,
+                onExpand: this.handleExpandRow,
+                expandedRowRender: this.renderSchedule,
+                expandRowByClick: true,
+              }}
+              emptyText={results === undefined ? 'Loading...' : this.renderNotFound()}
+            />
+          </div>
         </div>
 
         {showNewScheduleSelector && (