test: improvements of tests

.eslintrc.json

@@ -30,6 +30,7 @@
     "no-tabs": 0,
     "no-mixed-spaces-and-tabs": 0,
     "no-param-reassign": ["error", { "props": false }],
+    "no-underscore-dangle": 0,
     "max-len": 1,
     "import/extensions": 0,
     "import/no-extraneous-dependencies": 0,
@@ -39,7 +40,7 @@
     "react/jsx-filename-extension": [
       2,
       {
-        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+        "extensions": [".js", ".jsx", ".ts", ".tsx", ".mjs", ".mts"]
       }
     ],
     "react/prop-types": 0,

tests/fixtures.mts

@@ -0,0 +1,80 @@
+import * as base from '@playwright/test';
+import { _electron as electron } from 'playwright';
+import { join } from 'path';
+import { main } from '../package.json';
+import TestUtil from './testUtil.mjs';
+
+let appElectron;
+let page;
+
+const __cwd = process.cwd();
+const __isCiProcess = process.env.CI === 'true';
+const __testPath = join(__cwd, 'tests');
+const __testResultPath = join(__testPath, 'results');
+const __testScreenshotPath = join(__testResultPath, 'screenshots');
+
+export const beforeAll = async () => {
+  // Open Electron app from build directory
+  appElectron = await electron.launch({
+    args: [
+      main,
+      ...(__isCiProcess ? ['--no-sandbox'] : []),
+      '--enable-logging',
+      '--ignore-certificate-errors',
+      '--ignore-ssl-errors',
+      '--ignore-blocklist',
+      '--ignore-gpu-blocklist',
+    ],
+    locale: 'en-US',
+    colorScheme: 'light',
+    env: {
+      ...process.env,
+      NODE_ENV: 'production',
+    },
+  });
+  page = await appElectron.firstWindow();
+
+  await page.waitForEvent('load');
+
+  page.on('console', console.log);
+  page.on('pageerror', console.log);
+
+  const evaluateResult = await appElectron.evaluate(async ({ app, BrowserWindow }) => {
+    const currentWindow = BrowserWindow.getFocusedWindow();
+
+    // Fix window position for testing
+    currentWindow.setPosition(50, 50);
+    currentWindow.setSize(1080, 560);
+
+    return {
+      packaged: app.isPackaged,
+      dataPath: app.getPath('userData'),
+    };
+  });
+
+  await base.expect(evaluateResult.packaged, 'app is not packaged').toBe(false);
+};
+
+export const afterAll = async () => {
+  await appElectron.close();
+};
+
+export const test = base.test.extend({
+  // eslint-disable-next-line no-empty-pattern
+  page: async ({}, use) => {
+    await use(page);
+  },
+  // eslint-disable-next-line no-shadow
+  util: async ({ page }, use, testInfo) => {
+    await use(new TestUtil(page, testInfo, __testScreenshotPath));
+  },
+});
+
+export const { expect } = base;
+
+export default {
+  test,
+  expect,
+  beforeAll,
+  afterAll,
+};

tests/specs/app.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect, beforeAll, afterAll } from '../fixtures.mts';
+
+test.beforeAll(beforeAll);
+test.afterAll(afterAll);
+
+test('Document element check', async ({ page, util }) => {
+  try {
+    await expect(
+      page.getByTestId('main-logo').first(),
+      'Confirm main logo is visible',
+    ).toBeVisible();
+    await expect(
+      page.getByTestId('btn-change-theme').first(),
+      'Confirm change theme is visible',
+    ).toBeVisible();
+
+    await util.captureScreenshot(page, 'result');
+  } catch (error) {
+    throw await util.onTestError(error);
+  }
+});
+
+test('Counter button click check', async ({ page, util }) => {
+  try {
+    await page.getByTestId('btn-counter').click({ clickCount: 10, delay: 50 });
+
+    const counterValueElement = await page
+      .getByTestId('counter-value')
+      .getByRole('status')
+      .innerHTML();
+
+    expect(counterValueElement, 'Confirm counter value is same').toBe('10');
+  } catch (error) {
+    throw await util.onTestError(error);
+  }
+});

tests/testUtil.mts

@@ -0,0 +1,40 @@
+import { Page } from 'playwright';
+import { TestInfo } from 'playwright/test';
+
+export default class TestUtil {
+  _page: Page;
+
+  _testInfo: TestInfo;
+
+  _testScreenshotPath: string;
+
+  constructor(page, testInfo, testScreenshotPath) {
+    this._page = page;
+    this._testInfo = testInfo;
+    this._testScreenshotPath = testScreenshotPath;
+  }
+
+  async captureScreenshot(pageInstance, screenshotName) {
+    if (!pageInstance) {
+      return;
+    }
+
+    try {
+      const screenshotPath = `${this._testScreenshotPath}/${screenshotName || `unknown_${Date.now()}`}.png`;
+
+      await pageInstance.screenshot({ path: screenshotPath });
+    } catch (error) {
+      // Do nothing
+    }
+  }
+
+  async onTestError(error) {
+    const titleLists = [...this._testInfo.titlePath];
+    titleLists.shift();
+    const title = titleLists.join('-');
+
+    await this.captureScreenshot(this._page, `${title}_${Date.now()}`);
+
+    return new Error(error);
+  }
+}

tsconfig.node.json

@@ -6,7 +6,15 @@
     "moduleResolution": "node",
     "composite": true,
     "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true
   },
-  "include": ["package.json", "src/main", "vite.config.ts"]
+  "include": [
+    "package.json",
+    "src/main",
+    "vite.config.ts",
+    "tests/**/*.ts",
+    "tests/**/*.mts",
+    "tests/**/*.spec.ts"]
 }

vite.config.ts

@@ -69,7 +69,7 @@ export default defineConfig(({ mode }) => {
 
   return {
     resolve: {
-      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss'],
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.mts', '.json', '.scss'],
       alias: {
         '@': resolve(dirname(fileURLToPath(import.meta.url)), 'src'),
       },