First UI test

.github/workflows/pull_request.yml

@@ -56,3 +56,15 @@ jobs:
         run: npm ci
       - name: Execute API tests
         run: npm run test:api
+  ui-tests:
+    needs: [api-tests]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright (Chomium only)
+        run: npx playwright install --with-deps chromium  
+      - name: Execute UI tests
+        run: npm run test:ui      

package.json

@@ -10,7 +10,8 @@
     "format:fix": "npm run format:check -- --write",
     "lint": "eslint . --ext .ts,.tsx",
     "test:unit": "jest",
-    "test:api": "npx playwright test --project=api"
+    "test:api": "npx playwright test --project=api",
+    "test:ui": "npx playwright test --project=ui"
   },
   "dependencies": {
     "@heroui/link": "2.2.12",

playwright.config.ts

@@ -39,6 +39,12 @@ export default defineConfig({
       testMatch: /.*\.test\.ts/,
       use: { baseURL: 'http://localhost:3000', ...devices['Desktop Chrome'] },
     },
+    {
+      name: 'ui',
+      testDir: './tests/ui',
+      testMatch: /.*\.test\.ts/,
+      use: { baseURL: 'http://localhost:3000', ...devices['Desktop Chrome'] },
+    },
   ],
   /* Run your local dev server before starting the tests */
   webServer: {

tests/ui/components/base.component.ts

@@ -0,0 +1,3 @@
+import { PageHolder } from '../pages/page.holder';
+
+export class BaseComponent extends PageHolder {}

tests/ui/components/sidebar.ts

@@ -0,0 +1,9 @@
+import { BaseComponent } from './base.component';
+
+export class SideBar extends BaseComponent {
+  private results = this.page.getByTitle('Results');
+
+  async openResult() {
+    await this.results.click();
+  }
+}

tests/ui/e2e.test.ts

@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test';
+import { test } from './fixture/base';
+
+test('Verify generate report', async ({ app }) => {
+  await app.result.navigateTo();
+  await app.result.openResult();
+  await app.result.verifyPageElements();
+  await app.result.uploadResult();
+});
+// test('Verify generate report', async ({ app }) => {
+//   await page.getByRole('link', { name: '83' }).click();
+//   await page.getByRole('button', { name: 'Upload Results' }).click();
+//   await page.getByRole('button', { name: 'Show suggestions' }).nth(1).click();
+//   await page.getByRole('option', { name: 'Smoke' }).click();
+//   await page.locator('div').filter({ hasText: /^Add$/ }).click();
+//   await page.getByRole('textbox', { name: 'Enter tag (e.g., \'key:value\'' }).click();
+//   await page.getByRole('textbox', { name: 'Enter tag (e.g., \'key:value\'' }).fill('snoke-test');
+//   await page.getByRole('button', { name: 'Choose file (.zip, .json)' }).click();
+//   await page.getByRole('button', { name: 'Choose file (.zip, .json)' }).click();
+//   await page.getByRole('button', { name: 'Choose file (.zip, .json)' }).setInputFiles('correct_blob.zip');
+//   await page.getByRole('button', { name: 'Upload' }).click();
+//   await page.getByText('Results uploaded successfully').click();
+//   await page.getByText('Results uploaded successfully').click();
+//   await expect(page.getByText('Results uploaded successfully')).toBeVisible();
+//   await expect(page.getByText('b7bc4c5c-4c3d-4f8c-a0e9-')).toBeVisible();
+//   await expect(page.locator('[id="react-aria6900401893-:rc3:"]').getByText('Smoke')).toBeVisible();
+// });

tests/ui/fixture/base.ts

@@ -0,0 +1,16 @@
+import { test as base, expect } from '@playwright/test';
+import { Application } from '../pages/app.manager';
+
+export const test = base.extend<{
+  app: Application;
+}>({
+  app: async ({ browser, page }, use) => {
+    test.info().annotations.push({
+      type: 'Browser',
+      description: `${browser.browserType().name()} ${browser.version()}`,
+    });
+
+    const app = new Application(page);
+    await use(app);
+  },
+});

tests/ui/pages/app.manager.ts

@@ -0,0 +1,12 @@
+import { Page as page } from '@playwright/test';
+import { BasePage } from './base.page';
+import { ResultPage } from './results';
+
+export class Application extends BasePage {
+  public result: ResultPage;
+
+  constructor(page: page) {
+    super(page);
+    this.result = new ResultPage(this.page);
+  }
+}

tests/ui/pages/base.page.ts

@@ -0,0 +1,3 @@
+import { PageHolder } from './page.holder';
+
+export class BasePage extends PageHolder {}

tests/ui/pages/page.holder.ts

@@ -0,0 +1,9 @@
+import { Page as page } from '@playwright/test';
+
+export class PageHolder {
+  protected page: page;
+
+  constructor(page: page) {
+    this.page = page;
+  }
+}

tests/ui/pages/results.ts

@@ -0,0 +1,43 @@
+import { BasePage } from './base.page';
+import path from 'node:path';
+import { SideBar } from '../components/sidebar';
+
+export class ResultPage extends BasePage {
+  private sidebar = new SideBar(this.page);
+  private header = this.page.getByTitle('Results');
+  private uploadResButton = this.page.getByRole('button', { name: 'Upload Results' });
+  private uploadPopup = this.page.getByRole('dialog');
+  private title = this.page.getByTitle('Upload Results');
+  private fileInput = this.page.getByLabel('Result File');
+  private project = this.page.getByRole('combobox', { name: 'Project (optional)' });
+  private tag = this.page.getByRole('textbox', { name: "Enter tag (e.g., 'key:value'" });
+  private addButton = this.page.getByRole('button', { name: 'Add' });
+  private uploadButton = this.page.getByRole('button', { name: 'Upload' });
+  private successMessage = this.page.getByText('Results uploaded successfully');
+
+  async navigateTo() {
+    await this.page.goto('');
+  }
+
+  async openResult() {
+    await this.sidebar.openResult();
+  }
+
+  async verifyPageElements() {
+    await this.header.isVisible();
+  }
+
+  async uploadResult() {
+    await this.uploadResButton.click();
+    await this.uploadPopup.isVisible();
+    await this.title.isVisible();
+    const filePath = path.resolve(process.cwd(), 'tests/testdata/correct_blob.zip');
+    await this.fileInput.setInputFiles(filePath);
+    await this.project.fill('e2e');
+    await this.page.keyboard.press('Enter');
+    await this.tag.fill('project:e2e');
+    await this.addButton.click();
+    await this.uploadButton.click();
+    await this.successMessage.isVisible();
+  }
+}