Add first Playwright test for the Account Console (#20809)

js/apps/account-ui/.gitignore

@@ -0,0 +1,4 @@
+/test-results/
+/playwright-report/
+/playwright/.cache/
+.auth/

js/apps/account-ui/package.json

@@ -24,6 +24,7 @@
     "ui-shared": "workspace:*"
   },
   "devDependencies": {
+    "@playwright/test": "^1.35.1",
     "@types/lodash-es": "^4.17.7",
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",

js/apps/account-ui/playwright.config.ts

@@ -0,0 +1,86 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./test",
+  /* 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:8080/",
+
+    /* 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: "setup", testMatch: /.*\.setup\.ts/ },
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+        storageState: ".auth/user.json",
+      },
+      dependencies: ["setup"],
+    },
+
+    {
+      name: "firefox",
+      use: {
+        ...devices["Desktop Firefox"],
+        storageState: ".auth/user.json",
+      },
+      dependencies: ["setup"],
+    },
+
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ..devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

js/apps/account-ui/src/personal-info/FormField.tsx

@@ -47,6 +47,7 @@ export const FormField = ({ attribute }: FormFieldProps) => {
           control={control}
           render={({ field }) => (
             <Select
+              data-testid={attribute.name}
               toggleId={attribute.name}
               onToggle={toggle}
               onSelect={(_, value) => {
@@ -79,6 +80,7 @@ export const FormField = ({ attribute }: FormFieldProps) => {
         />
       ) : (
         <KeycloakTextInput
+          data-testid={attribute.name}
           id={attribute.name}
           isDisabled={attribute.readOnly}
           {...register(fieldName(attribute.name), {

js/apps/account-ui/src/personal-info/PersonalInfo.tsx

@@ -83,10 +83,20 @@ const PersonalInfo = () => {
           ))}
         </FormProvider>
         <ActionGroup>
-          <Button type="submit" id="save-btn" variant="primary">
+          <Button
+            data-testid="save"
+            type="submit"
+            id="save-btn"
+            variant="primary"
+          >
             {t("doSave")}
           </Button>
-          <Button id="cancel-btn" variant="link" onClick={() => reset()}>
+          <Button
+            data-testid="cancel"
+            id="cancel-btn"
+            variant="link"
+            onClick={() => reset()}
+          >
             {t("doCancel")}
           </Button>
         </ActionGroup>

js/apps/account-ui/src/root/PageNav.tsx

@@ -148,6 +148,7 @@ const NavLink = ({
 
   return (
     <NavItem
+      data-testid={to}
       to={href}
       isActive={isActive}
       onClick={(event) =>

js/apps/account-ui/test/auth.setup.ts

@@ -0,0 +1,15 @@
+import { test as setup } from "@playwright/test";
+
+const authFile = ".auth/user.json";
+
+setup("authenticate", async ({ page }) => {
+  await page.goto("/");
+  await page.getByRole("link", { name: "Personal info" }).click();
+  const userName = page.getByLabel("Username or email");
+  await userName.fill("admin");
+  await page.getByLabel("Password").fill("admin");
+  await page.getByRole("button", { name: "Sign In" }).click();
+  await page.waitForURL("/#/personal-info");
+
+  await page.context().storageState({ path: authFile });
+});

js/apps/account-ui/test/personal-info.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Personal info page", () => {
+  test("Setting last and first name", async ({ page }) => {
+    await page.goto("/");
+    await page.getByTestId("personal-info").click();
+    await page.getByTestId("firstName").fill("Erik");
+    await page.getByTestId("lastName").fill("de Wit");
+    await page.getByTestId("save").click();
+
+    const alerts = page.getByTestId("alerts");
+    await expect(alerts).toHaveText("Your account has been updated.");
+  });
+});

js/libs/ui-shared/src/alerts/Alerts.tsx

@@ -59,7 +59,7 @@ export const AlertProvider = ({ children }: PropsWithChildren) => {
 
   return (
     <AlertContext.Provider value={{ addAlert, addError }}>
-      <AlertGroup isToast>
+      <AlertGroup isToast data-testid="alerts">
         {alerts.map(({ id, variant, message, description }) => (
           <Alert
             key={id}

js/pnpm-lock.yaml

@@ -114,6 +114,9 @@ importers:
         specifier: workspace:*
         version: link:../../libs/ui-shared
     devDependencies:
+      '@playwright/test':
+        specifier: ^1.35.1
+        version: 1.35.1
       '@types/lodash-es':
         specifier: ^4.17.7
         version: 4.17.7
@@ -1180,6 +1183,17 @@ packages:
       tslib: 2.5.3
     dev: true
 
+  /@playwright/test@1.35.1:
+    resolution: {integrity: sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      '@types/node': 20.3.1
+      playwright-core: 1.35.1
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /@reactflow/background@11.2.3(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-hFoxKt7ZkQclM7CXg7p3EHb+ngUslqFq122Gsrj55N5rFeEdtIkWHuoi+WS0dLRVfX+acuUs6hZl8JuC/JtQ7g==}
     peerDependencies:
@@ -5378,6 +5392,12 @@ packages:
       pathe: 1.1.1
     dev: true
 
+  /playwright-core@1.35.1:
+    resolution: {integrity: sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dev: true
+
   /popper.js@1.16.1:
     resolution: {integrity: sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==}
     deprecated: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1