Guanxinwang0118/tc 171 end to end tests for electron

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "nrwl.angular-console",
     "esbenp.prettier-vscode",
     "firsttris.vscode-jest-runner",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "ms-playwright.playwright"
   ]
 }

apps/ng-frontend/.eslintrc.json

@@ -1,5 +1,9 @@
 {
-  "extends": ["../../.eslintrc.json"],
+  "extends": [
+    "plugin:playwright/recommended",
+    "plugin:playwright/recommended",
+    "../../.eslintrc.json"
+  ],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
@@ -31,6 +35,14 @@
       "files": ["*.html"],
       "extends": ["plugin:@nx/angular-template"],
       "rules": {}
+    },
+    {
+      "files": ["e2e/**/*.{ts,js,tsx,jsx}"],
+      "rules": {}
+    },
+    {
+      "files": ["e2e/**/*.{ts,js,tsx,jsx}"],
+      "rules": {}
     }
   ]
 }

apps/ng-frontend/e2e/app.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(
+    page.getByRole('heading', { name: 'Installation' })
+  ).toBeVisible();
+});

apps/ng-frontend/jest.config.ts → apps/ng-frontend/jest.config.cjs

@@ -1,5 +1,5 @@
 /* eslint-disable */
-export default {
+module.exports = {
   displayName: 'ng-frontend',
   preset: '../../jest.preset.cjs',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
@@ -20,4 +20,5 @@ export default {
     'jest-preset-angular/build/serializers/ng-snapshot',
     'jest-preset-angular/build/serializers/html-comment',
   ],
+  testPathIgnorePatterns: ['/node_modules/', '/e2e/'],
 };

apps/ng-frontend/playwright.config.cjs

@@ -0,0 +1,65 @@
+const { defineConfig, devices } = require('@playwright/test');
+const { nxE2EPreset } = require('@nx/playwright/preset');
+const { workspaceRoot } = require('@nx/devkit');
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+module.exports = defineConfig({
+  ...nxE2EPreset(__dirname, { testDir: './e2e' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm run dev-front',
+    url: 'http://locahost:4200',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+  },
+  reporter: [['html', { outputFolder: 'dist/.playwright/apps/ng-frontend' }]],
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+    // Uncomment for mobile browsers support
+    /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+    // Uncomment for branded browsers
+    /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+  ],
+});

apps/ng-frontend/project.json

@@ -139,7 +139,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "apps/ng-frontend/jest.config.ts",
+        "jestConfig": "apps/ng-frontend/jest.config.cjs",
         "passWithNoTests": true
       },
       "configurations": {

apps/ng-frontend/tsconfig.spec.json

@@ -8,7 +8,7 @@
   },
   "files": ["src/test-setup.ts"],
   "include": [
-    "jest.config.ts",
+    "jest.config.cjs",
     "src/**/*.test.ts",
     "src/**/*.spec.ts",
     "src/**/*.d.ts"

jest.config.ts

@@ -2,4 +2,5 @@ import { getJestProjects } from '@nx/jest';
 
 export default {
   projects: [...getJestProjects(), 'libs/data-access/jest.config.ts'],
+  testPathIgnorePatterns: ['/node_modules/', '/e2e/'],
 };

main-process/e2e/app.spec.cjs

@@ -0,0 +1,42 @@
+import { test, expect } from '@playwright/test';
+const { _electron: electron } = require('playwright');
+
+/**
+ * @typedef {import('playwright').ElectronApplication} ElectronApplication
+ * @typedef {import('playwright').Page} Page
+ */
+
+test('should work', async () => {
+  // Launch Electron app.
+  test.setTimeout(120000);
+  /** @type {ElectronApplication} */
+  const electronApp = await electron.launch({
+    args: ['main.cjs'],
+    env: {
+      ...process.env,
+      NODE_ENV: 'dev',
+    },
+  });
+
+  // Evaluation expression in the Electron context.
+  // Wait for the first window
+  /** @type {Page} */
+  const firstWindow = await electronApp.firstWindow();
+  console.log('First window title:', await firstWindow.title());
+  // console.log('Electron app: ', electronApp);
+
+  // Wait for the second window (main window)
+  const mainWindow = await electronApp.waitForEvent('window', {
+    timeout: 120000, // 60 seconds timeout for waiting for the main window
+    predicate: async (page) => {
+      const title = await page.title();
+      return title !== 'Loading'; // Assuming the loading window has a title 'Loading'
+    },
+  });
+
+  console.log('Main window title:', await mainWindow.title());
+
+  // Take a screenshot to verify the window is visible
+  await mainWindow.screenshot({ path: 'electron-window.png' });
+  await electronApp.close();
+});

nx.json

@@ -1,8 +1,5 @@
 {
   "$schema": "./node_modules/nx/schemas/nx-schema.json",
-  "affected": {
-    "defaultBase": "master"
-  },
   "targetDefaults": {
     "build": {
       "dependsOn": ["^build"],
@@ -84,6 +81,13 @@
         "previewTargetName": "preview",
         "serveStaticTargetName": "serve-static"
       }
+    },
+    {
+      "plugin": "@nx/playwright/plugin",
+      "options": {
+        "targetName": "e2e",
+        "ciTargetName": "e2e-ci"
+      }
     }
   ]
 }