add tests configs to all the apps

examples/app-with-rbac/package.json

@@ -6,6 +6,7 @@
     "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
     "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
     "test": "jest --watch --onlyChanged",
+    "e2e": "playwright test",
     "test:ci": "jest --passWithNoTests --maxWorkers 4",
     "typecheck": "tsc --noEmit",
     "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
@@ -18,7 +19,10 @@
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@grafana/eslint-config": "^7.0.0",
+    "@grafana/plugin-e2e": "1.3.1",
+    "@grafana/plugin-meta-extractor": "^0.0.2",
     "@grafana/tsconfig": "1.3.0-rc1",
+    "@playwright/test": "^1.41.2",
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.26",
@@ -49,8 +53,7 @@
     "typescript": "4.8.4",
     "webpack": "^5.86.0",
     "webpack-cli": "^5.1.4",
-    "webpack-livereload-plugin": "^3.0.2",
-    "@grafana/plugin-meta-extractor": "^0.0.2"
+    "webpack-livereload-plugin": "^3.0.2"
   },
   "engines": {
     "node": ">=20"

examples/app-with-rbac/playwright.config.ts

@@ -0,0 +1,67 @@
+import { dirname } from 'path';
+import { defineConfig, devices } from '@playwright/test';
+
+const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:3000',
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'auth',
+      testDir: pluginE2eAuth,
+      testMatch: [/.*\.js/],
+    },
+    {
+      name: 'run-tests',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'playwright/.auth/admin.json',
+      },
+      dependencies: ['auth'],
+    },
+    // {
+    //   name: 'createAdminUserAndAuthenticate',
+    //   testDir: pluginE2eAuth,
+    //   testMatch: [/.*\.js/],
+    // },
+    // {
+    //   name: 'run-tests-for-admin',
+    //   testDir: './tests',
+    //   use: {
+    //     ...devices['Desktop Chrome'],
+    //     // @grafana/plugin-e2e writes the auth state to this file,
+    //     // the path should not be modified
+    //     storageState: 'playwright/.auth/admin.json',
+    //   },
+    //   dependencies: ['createAdminUserAndAuthenticate'],
+    // },
+  ],
+});

examples/app-with-rbac/tests/appAuthentication.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from './fixtures';
+import { ROUTES } from '../src/constants';
+
+test.describe('navigating app', () => {
+  test('Page patents should be visible for admin', async ({ gotoPage, page }) => {
+    // wait for page to successfully render
+    await gotoPage('/hello');
+    await expect(page).toHaveURL(/.*patents/);
+    await expect(page.getByText('Welcome')).toBeVisible();
+  });
+  test('Page research docs should be visible for admin', async ({ gotoPage, page }) => {
+    // wait for page to successfully render
+    await gotoPage(`/${ROUTES.ResearchDocs}`);
+    await expect(page).toHaveURL(/.*research/);
+    await expect(page.getByText('Welcome')).toBeVisible();
+  });
+});

examples/app-with-rbac/tests/fixtures.ts

@@ -0,0 +1,26 @@
+import { AppConfigPage, AppPage, test as base } from '@grafana/plugin-e2e';
+import pluginJson from '../src/plugin.json';
+
+type AppTestFixture = {
+  appConfigPage: AppConfigPage;
+  gotoPage: (path?: string) => Promise<AppPage>;
+};
+
+export const test = base.extend<AppTestFixture>({
+  appConfigPage: async ({ gotoAppConfigPage }, use) => {
+    const configPage = await gotoAppConfigPage({
+      pluginId: pluginJson.id,
+    });
+    await use(configPage);
+  },
+  gotoPage: async ({ gotoAppPage }, use) => {
+    await use((path) =>
+      gotoAppPage({
+        path,
+        pluginId: pluginJson.id,
+      })
+    );
+  },
+});
+
+export { expect } from '@grafana/plugin-e2e';