E2E: Added command and page to interact with app pages

packages/plugin-e2e/src/api.ts

@@ -13,6 +13,7 @@ import {
   DashboardPageArgs,
   DashboardEditViewArgs,
   GotoAppConfigPageArgs,
+  GotoAppPageArgs,
 } from './types';
 import {
   PanelEditPage,
@@ -22,6 +23,7 @@ import {
   VariableEditPage,
   AnnotationEditPage,
   AppConfigPage,
+  AppPage,
 } from './models';
 import { grafanaE2ESelectorEngine } from './selectorEngine';
 import { ExplorePage } from './models/pages/ExplorePage';
@@ -267,6 +269,11 @@ export type PluginFixture = {
    * Fixture command that navigates to the AppConfigPage for a given plugin.
    */
   gotoAppConfigPage: (args: GotoAppConfigPageArgs) => Promise<AppConfigPage>;
+
+  /**
+   * Fixture command that navigates to an AppPage for a given plugin.
+   */
+  gotoAppPage: (args: GotoAppPageArgs) => Promise<AppPage>;
 };
 
 // extend Playwright with Grafana plugin specific fixtures

packages/plugin-e2e/src/fixtures/commands/gotoAppPage.ts

@@ -0,0 +1,19 @@
+import { TestFixture } from '@playwright/test';
+import { PluginFixture, PluginOptions } from '../../api';
+import { PlaywrightCombinedArgs } from '../types';
+import { AppPage, GotoAppPageArgs } from '../..';
+
+type GotoAppPageFixture = TestFixture<
+  (args: GotoAppPageArgs) => Promise<AppPage>,
+  PluginFixture & PluginOptions & PlaywrightCombinedArgs
+>;
+
+export const gotoAppPage: GotoAppPageFixture = async ({ page, selectors, grafanaVersion, request }, use, testInfo) => {
+  await use(async ({ pluginId, path }) => {
+    const appPage = new AppPage({ page, selectors, grafanaVersion, request, testInfo }, { pluginId });
+    await appPage.goto({ path });
+    return appPage;
+  });
+};
+
+export default gotoAppPage;

packages/plugin-e2e/src/fixtures/index.ts

@@ -19,6 +19,7 @@ import gotoVariableEditPage from './commands/gotoVariableEditPage';
 import gotoAnnotationEditPage from './commands/gotoAnnotationEditPage';
 import gotoDataSourceConfigPage from './commands/gotoDataSourceConfigPage';
 import gotoAppConfigPage from './commands/gotoAppConfigPage';
+import gotoAppPage from './commands/gotoAppPage';
 
 const fixtures = {
   selectors,
@@ -42,6 +43,7 @@ const fixtures = {
   gotoAnnotationEditPage,
   gotoDataSourceConfigPage,
   gotoAppConfigPage,
+  gotoAppPage,
 };
 
 export default fixtures;

packages/plugin-e2e/src/models/index.ts

@@ -12,3 +12,4 @@ export { Panel } from './components/Panel';
 export { TimeRange } from './components/TimeRange';
 export { AppConfigPage } from './pages/AppConfigPage';
 export { PluginConfigPage } from './pages/PluginConfigPage';
+export { AppPage } from './pages/AppPage';

packages/plugin-e2e/src/models/pages/AppConfigPage.ts

@@ -1,9 +1,9 @@
 import { Response as PlaywrightResponse } from '@playwright/test';
-import { PluginConfigPageArgs, PluginTestCtx } from '../../types';
+import { PluginPageArgs, PluginTestCtx } from '../../types';
 import { PluginConfigPage } from './PluginConfigPage';
 
 export class AppConfigPage extends PluginConfigPage {
-  constructor(readonly ctx: PluginTestCtx, readonly args: PluginConfigPageArgs) {
+  constructor(readonly ctx: PluginTestCtx, readonly args: PluginPageArgs) {
     super(ctx, args);
   }
 

packages/plugin-e2e/src/models/pages/AppPage.ts

@@ -0,0 +1,19 @@
+import * as nodePath from 'path';
+import { AppPageNavigateOptions, PluginPageArgs, PluginTestCtx } from '../../types';
+import { GrafanaPage } from '..';
+
+export class AppPage extends GrafanaPage {
+  constructor(readonly ctx: PluginTestCtx, readonly args: PluginPageArgs) {
+    super(ctx);
+  }
+
+  /**
+   * Will append the `/a/${pluginId}` before the provided path and then
+   * navigate to the page.
+   */
+  goto(options?: AppPageNavigateOptions): Promise<void> {
+    const path = options?.path ?? '';
+    const url = nodePath.join('/a/', this.args.pluginId, path);
+    return super.navigate(url, options);
+  }
+}

packages/plugin-e2e/src/models/pages/PluginConfigPage.ts

@@ -1,9 +1,9 @@
 import { Response as PlaywrightResponse } from '@playwright/test';
-import { PluginConfigPageArgs, NavigateOptions, PluginTestCtx } from '../../types';
+import { PluginPageArgs, NavigateOptions, PluginTestCtx } from '../../types';
 import { GrafanaPage } from './GrafanaPage';
 
 export class PluginConfigPage extends GrafanaPage {
-  constructor(readonly ctx: PluginTestCtx, readonly args: PluginConfigPageArgs) {
+  constructor(readonly ctx: PluginTestCtx, readonly args: PluginPageArgs) {
     super(ctx);
   }
 

packages/plugin-e2e/src/types.ts

@@ -194,6 +194,10 @@ export type NavigateOptions = {
   queryParams?: URLSearchParams;
 };
 
+export type AppPageNavigateOptions = NavigateOptions & {
+  path?: string;
+};
+
 export type GetByTestIdOrAriaLabelOptions = {
   /**
    *Optional root locator to search within. If no locator is provided, the page will be used
@@ -304,8 +308,12 @@ export interface ContainTextOptions {
   useInnerText?: boolean;
 }
 
-export type PluginConfigPageArgs = {
+export type PluginPageArgs = {
   pluginId: string;
 };
 
-export type GotoAppConfigPageArgs = PluginConfigPageArgs;
+export type GotoAppConfigPageArgs = PluginPageArgs;
+
+export type GotoAppPageArgs = PluginPageArgs & {
+  path?: string;
+};

packages/plugin-e2e/tests/as-admin-user/app/app-page/app-page.spec.ts

@@ -0,0 +1,25 @@
+import { AppPage, expect, test } from '../../../../src';
+
+test('should navigate to app root page when calling goto without any path', async ({
+  grafanaVersion,
+  selectors,
+  page,
+  request,
+}, testInfo) => {
+  const appPage = new AppPage({ grafanaVersion, selectors, page, request, testInfo }, { pluginId: 'redis-app' });
+  await appPage.goto();
+
+  await expect(page).toHaveURL(/.*\/a\/redis-app$/);
+});
+
+test('should navigate to app sub page when calling goto with path', async ({
+  grafanaVersion,
+  selectors,
+  page,
+  request,
+}, testInfo) => {
+  const appPage = new AppPage({ grafanaVersion, selectors, page, request, testInfo }, { pluginId: 'redis-app' });
+  await appPage.goto({ path: '/create' });
+
+  await expect(page).toHaveURL(/.*\/a\/redis-app\/create$/);
+});

packages/plugin-e2e/tests/as-admin-user/app/app-page/goto-app-page.spec.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '../../../../src';
+
+test('should navigate to app root page when calling goto without any path', async ({ gotoAppPage, page }) => {
+  await gotoAppPage({ pluginId: 'redis-app' });
+  await expect(page).toHaveURL(/.*\/a\/redis-app$/);
+});
+
+test('should navigate to app sub page when calling goto with path', async ({ gotoAppPage, page }) => {
+  await gotoAppPage({ pluginId: 'redis-app', path: '/create' });
+  await expect(page).toHaveURL(/.*\/a\/redis-app\/create$/);
+});