[tests-only] add e2e test for progress bars (#132)

* add e2e test for progress bars

Signed-off-by: nabim777 <[email protected]>

* lint fix

Signed-off-by: nabim777 <[email protected]>

* review addressed

Signed-off-by: nabim777 <[email protected]>

* review addresses

Signed-off-by: nabim777 <[email protected]>

---------

Signed-off-by: nabim777 <[email protected]>

Author: nabim777

.drone.star

@@ -20,6 +20,7 @@ APPS = [
 E2E_COVERED_APPS = [
     "draw-io",
     "unzip",
+    "progress-bars",
 ]
 
 OCIS_URL = "https://ocis:9200"
@@ -343,6 +344,7 @@ def ocisService():
                 "mkdir -p /apps",
                 "mv packages/web-app-draw-io/dist /apps/draw-io",
                 "mv packages/web-app-unzip/dist /apps/unzip",
+                "mv packages/web-app-progress-bars/dist /apps/progress-bars",
             ],
             "volumes": [
                 {

packages/web-app-progress-bars/tests/e2e/progressBar.spec.ts

@@ -0,0 +1,23 @@
+import { test, Page, expect } from '@playwright/test'
+import { AccountPage } from '../../../../support/pages/accountPage'
+import { loginAsUser, logout } from '../../../../support/helpers/authHelper'
+
+let adminPage: Page
+
+test.beforeEach(async ({ browser }) => {
+  const admin = await loginAsUser(browser, 'admin', 'admin')
+  adminPage = admin.page
+})
+
+test.afterEach(async () => {
+  await logout(adminPage)
+})
+
+test('select NyanCat progressBarOption on the account page', async () => {
+  const accountPage = new AccountPage(adminPage)
+  await accountPage.goToAccountPage()
+  await accountPage.selectNyanCatProgressBarExtension()
+
+  const progressBarCurrent = await accountPage.progressBarCurrent.textContent()
+  expect(progressBarCurrent).toEqual('Nyan Cat progress bar')
+})

packages/web-app-progress-bars/vite.config.ts

@@ -11,5 +11,8 @@ export default defineConfig({
         entryFileNames: 'progress-bars.js'
       }
     }
+  },
+  test: {
+    exclude: ['**/e2e/**']
   }
 })

playwright.config.ts

@@ -63,6 +63,21 @@ export default defineConfig({
       testDir: './packages/web-app-unzip/tests/e2e',
       use: { ...devices['Desktop Safari'], browserName: 'webkit', ignoreHTTPSErrors: true },
     },
+    {
+      name: 'progress-bars-chromium',
+      testDir: './packages/web-app-progress-bars/tests/e2e',
+      use: { ...devices['Desktop Chrome'], browserName: 'chromium', ignoreHTTPSErrors: true },
+    },
+    {
+      name: 'progress-bars-firefox',
+      testDir: './packages/web-app-progress-bars/tests/e2e',
+      use: { ...devices['Desktop Firefox'], browserName: 'firefox', ignoreHTTPSErrors: true },
+    },
+    {
+      name: 'progress-bars-webkit',
+      testDir: './packages/web-app-progress-bars/tests/e2e',
+      use: { ...devices['Desktop Safari'], browserName: 'webkit', ignoreHTTPSErrors: true },
+    },
 
     /* Test against mobile viewports. */
     // {

support/pages/accountPage.ts

@@ -0,0 +1,30 @@
+import { Locator, Page } from '@playwright/test'
+
+export class AccountPage {
+    readonly page: Page
+    readonly accountMenuBtn: Locator
+    readonly accountManageBtn: Locator
+    readonly progressBarSelector: Locator
+    readonly progressBarCurrent: Locator
+    readonly nyanCatProgressBarOption: Locator
+
+    constructor(page: Page) {
+        this.page = page
+        this.accountMenuBtn = this.page.locator('.oc-topbar-avatar')
+        this.accountManageBtn = this.page.locator('#oc-topbar-account-manage')
+
+        this.progressBarSelector = this.page.locator('.extension-preference .vs__search')
+        this.progressBarCurrent = this.page.locator('.extension-preference .vs__selected span')
+        this.nyanCatProgressBarOption = this.page.getByText('Nyan Cat progress bar')
+    }
+
+    async goToAccountPage() {
+        await this.accountMenuBtn.click()
+        await this.accountManageBtn.click()
+    }
+
+    async selectNyanCatProgressBarExtension(){
+        await this.progressBarSelector.click()
+        await this.nyanCatProgressBarOption.click()
+    }
+}