[tests-only] test: add design system docs tests

.drone.star

@@ -362,7 +362,7 @@ def stagePipelines(ctx):
     unit_test_pipelines = unitTests(ctx)
     e2e_pipelines = e2eTests(ctx)
     acceptance_pipelines = acceptance(ctx)
-    return unit_test_pipelines + pipelinesDependsOn(e2e_pipelines + acceptance_pipelines, unit_test_pipelines)
+    return unit_test_pipelines + buildAndTestDesignSystem(ctx) + pipelinesDependsOn(e2e_pipelines + acceptance_pipelines, unit_test_pipelines)
 
 def afterPipelines(ctx):
     return build(ctx) + pipelinesDependsOn(notify(), build(ctx))
@@ -1022,7 +1022,7 @@ def installPlaywright():
             "PLAYWRIGHT_BROWSERS_PATH": ".playwright",
         },
         "commands": [
-            "pnpm playwright install chromium",
+            "pnpm exec playwright install --with-deps",
         ],
     }]
 
@@ -2231,3 +2231,53 @@ def appProviderService(name):
             ],
         },
     ]
+
+def buildDesignSystemDocs():
+    return [{
+        "name": "build-design-system-docs",
+        "image": OC_CI_NODEJS,
+        "commands": [
+            "pnpm --filter @ownclouders/design-system build:docs",
+        ],
+    }]
+
+def runDesignSystemDocsE2eTests():
+    return [{
+        "name": "run-design-system-docs-e2e-tests",
+        "image": OC_CI_NODEJS,
+        "environment": {
+            "PLAYWRIGHT_BROWSERS_PATH": ".playwright",
+        },
+        "commands": [
+            "pnpm --filter @ownclouders/design-system test:e2e",
+        ],
+    }]
+
+def buildAndTestDesignSystem(ctx):
+    design_system_trigger = {
+        "ref": [
+            "refs/heads/master",
+            "refs/heads/stable-*",
+            "refs/tags/**",
+            "refs/pull/**",
+        ],
+    }
+
+    steps = restoreBuildArtifactCache(ctx, "pnpm", ".pnpm-store") + \
+            restoreBuildArtifactCache(ctx, "playwright", ".playwright") + \
+            installPnpm() + \
+            installPlaywright() + \
+            buildDesignSystemDocs() + \
+            runDesignSystemDocsE2eTests()
+
+    return [{
+        "kind": "pipeline",
+        "type": "docker",
+        "name": "design-system-build-and-test",
+        "workspace": {
+            "base": dir["base"],
+            "path": config["app"],
+        },
+        "steps": steps,
+        "trigger": design_system_trigger,
+    }]

.gitignore

@@ -30,6 +30,7 @@ tests/e2e/cucumber/report/cucumber_report.json
 tests/e2e/cucumber/reportGenerator/cucumber_report.json
 tests/ocis
 tests/testing-app
+playwright-report
 
 /webpack.json
 /webpack-build-log.json

packages/design-system/docs/components/Preview.js

@@ -176,6 +176,7 @@ export default (previewComponent) => {
 
           elem.classList.add('vueds-html')
           elem.classList.add('vueds-hidden')
+          elem.setAttribute('data-testid', 'codemirror-html')
 
           CodeTabs.init()
         }, 300)

packages/design-system/docs/utils/tabs.js

@@ -17,7 +17,7 @@ export default {
     const tabs = document.createElement('div')
     tabs.className = 'vueds-tabs'
     tabs.innerHTML =
-      "<button class='vueds-tab vue vueds-tab--active'>VUE</button><button class='vueds-tab html'>HTML</button>"
+      "<button class='vueds-tab vue vueds-tab--active'>VUE</button><button data-testid='preview-tab-html' class='vueds-tab html'>HTML</button>"
     return tabs
   },
   init() {

packages/design-system/package.json

@@ -29,7 +29,8 @@
     "styleguide:build": "vue-styleguidist build --config ./config/docs.config.js",
     "tokens": "node build/build-tokens.js",
     "tokens:w": "onchange -i \"./src/tokens/**/*.json\" -- npm run tokens",
-    "test": "jest --config ./jest.conf.js --coverage"
+    "test": "jest --config ./jest.conf.js --coverage",
+    "test:e2e": "playwright test --config ./tests/e2e/playwright.config.ts"
   },
   "browserslist": [
     "> 1%",

packages/design-system/src/components/_DocsComponentsList/_DocsComponentsList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="component-status">
+  <div data-testid="components-list" class="component-status">
     <ul class="status-list">
       <li>
         <oc-icon name="checkbox-circle" variation="success" />
@@ -36,7 +36,12 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(component, index) in components" :key="index" class="component">
+        <tr
+          v-for="(component, index) in components"
+          :key="index"
+          class="component"
+          data-testid="component-list-row"
+        >
           <td v-if="component.name">
             <a :href="`/#/oC%20Components/${component.name}`">
               <code class="name">{{ component.name }}</code>

packages/design-system/tests/e2e/playwright.config.ts

@@ -0,0 +1,52 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './',
+  testMatch: /.*\.spec\.ts/,
+  fullyParallel: true,
+  forbidOnly: process.env.CI === 'true',
+  retries: process.env.CI === 'true' ? 2 : 0,
+  workers: process.env.CI === 'true' ? 1 : undefined,
+  reporter: 'html',
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+
+    // Running these browsers currently produces an error in drone CI due to missing deps (even when they are installed first)
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] }
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] }
+    // }
+
+    // The mobile view of docs is currently pretty junky and causes various false negatives on mobile tests
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] }
+    // },
+
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] }
+    // }
+  ],
+
+  webServer: {
+    command: 'NODE_ENV=production pnpm start',
+    url: 'http://127.0.0.1:6060',
+    reuseExistingServer: process.env.CI !== 'true',
+    // Timeout is intentionally pretty high here due to the server boot taking a long time
+    timeout: 5 * 60 * 1000
+  },
+
+  use: {
+    baseURL: 'http://127.0.0.1:6060'
+  }
+})

packages/design-system/tests/e2e/specs/component-example.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+const SELECTORS = Object.freeze({
+  previewWrapper: '[data-testid="preview-wrapper"]',
+  codemirrorHtml: '[data-testid="codemirror-html"]',
+  // We're using class here instead of data attribute because we cannot adjust the default preview component
+  // The class is coming from the specified theme
+  codemirrorVue: '.cm-s-night',
+  tabHtml: '[data-testid="preview-tab-html"]'
+})
+
+test('Components preview is displayed', async ({ page, baseURL }) => {
+  await page.goto((baseURL || '') + '/#/' + encodeURIComponent('oC Components') + '/OcButton')
+
+  await expect(page.locator(SELECTORS.previewWrapper)).toBeVisible()
+  await expect(page.locator(SELECTORS.codemirrorVue)).toBeVisible()
+
+  await page.locator(SELECTORS.tabHtml).click()
+
+  await expect(page.locator(SELECTORS.codemirrorHtml)).toBeVisible()
+})

packages/design-system/tests/e2e/specs/components-list.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+const SELECTORS = Object.freeze({
+  listWrapper: '[data-testid="components-list"]',
+  listRow: '[data-testid="component-list-row"]'
+})
+
+test('Components list is loaded', async ({ page, baseURL }) => {
+  await page.goto(baseURL || '')
+
+  await expect(page.locator(SELECTORS.listWrapper)).toBeVisible()
+  expect((await page.$$(SELECTORS.listRow)).length).toBeGreaterThan(10)
+})

tests/unit/config/jest.config.ts

@@ -67,6 +67,9 @@ export default {
     '!<rootDir>/**/node_modules/**'
   ],
   testMatch: ['**/*.spec.{js,ts}'],
-  testPathIgnorePatterns: ['<rootDir>/.pnpm-store/*'],
+  testPathIgnorePatterns: [
+    '<rootDir>/.pnpm-store/*',
+    '<rootDir>/packages/design-system/tests/e2e/*'
+  ],
   clearMocks: true
 } satisfies Config