Merge pull request #23 from mruoss/playwright

add first test and run on CI

.env

@@ -0,0 +1,4 @@
+LIVEBOOK_TOKEN_ENABLED=0
+ERL_AFLAGS = "-kernel shell_history enabled"
+KUBECONFIG = "~/.kube/config"
+KUBECONTEXT = "kind-kino-k8s"

.github/workflows/playwright.yml

@@ -0,0 +1,58 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+env:
+  KUBECONFIG: /home/runner/.kube/config
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: .tool-versions
+
+      - name: Setup elixir
+        id: beam
+        uses: erlef/setup-beam@v1
+        with:
+          version-file: .tool-versions
+          version-type: strict
+          install-rebar: true
+          install-hex: true
+
+      - name: install livebook
+        run: mix escript.install --force hex livebook
+
+      - uses: engineerd/[email protected]
+        id: kind
+        with:
+          version: v0.20.0
+          name: kino-k8s
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run livebook
+        env:
+          LIVEBOOK_TOKEN_ENABLED: 0
+        run: livebook server &
+
+      - name: Run Playwright tests
+        env:
+          KUBECONTEXT: ''
+        run: KUBECONFIG="${KUBECONFIG}" npx playwright test
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -29,3 +29,6 @@ kino_k8s-*.tar
 *node_modules/*
 
 *.livemd_files
+/test-results/
+/playwright-report/
+/blob-report/

.rtx.toml

@@ -1,6 +1 @@
-[env]
-ERL_AFLAGS = "-kernel shell_history enabled"
-
-[tools]
-erlang = "26.1.2"
-elixir = "1.15.7"
+env_file = '.env'

.tool-versions

@@ -0,0 +1,4 @@
+node 18.18.1
+kind 0.20.0
+erlang 26.1.2
+elixir 1.15.7

.vscode/settings.json

@@ -3,5 +3,9 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.organizeImports": true
+  },
+  "playwright.env": {
+    "KUBECONTEXT": "kind-kino-k8s",
+    "KUBECONFIG": "~/.kube/config"
   }
 }

CHANGELOG.md

@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 <!-- ### Added | Changed | Deprecated | Removed | Fixed | Security -->
 
+### Added
+
+- Integration tests using Playwright
+
 <!--------------------- Don't add new entries after this line --------------------->
 
 ## [1.1.0] - 2023-11-03

assets/apply_cell/main.tsx

@@ -8,7 +8,7 @@ export const init = async (
   ctx: KinoContext,
   attrs: ApplyCellAttrs,
 ): Promise<void> => {
-  await loadReact(ctx, attrs)
+  await loadReact(ctx)
 
   ctx.root.innerHTML = 'loading...'
 

assets/connection_cell/main.tsx

@@ -8,7 +8,7 @@ export const init = async (
   ctx: KinoContext,
   attrs: ConnectionCellAttrs,
 ): Promise<void> => {
-  await loadReact(ctx, attrs)
+  await loadReact(ctx)
 
   ctx.root.innerHTML = 'loading...'
 

assets/get_cell/main.tsx

@@ -8,7 +8,7 @@ export const init = async (
   ctx: KinoContext,
   attrs: ListCellAttrs,
 ): Promise<void> => {
-  await loadReact(ctx, attrs)
+  await loadReact(ctx)
 
   ctx.root.innerHTML = 'loading...'
 

assets/shared/form/input.tsx

@@ -4,13 +4,15 @@ type InputProps = {
   name: string
   label: string
   defaultValue: string
+  testId?: string
   onChange: (value: string) => void
   orientation?: 'horiz' | 'vert'
 }
 const Input: React.FC<InputProps> = ({
   name,
   label,
   defaultValue,
+  testId,
   onChange,
   orientation = 'vert',
 }) => {
@@ -34,6 +36,7 @@ const Input: React.FC<InputProps> = ({
       </label>
       <input
         type="text"
+        data-testid={testId ?? name}
         value={defaultValue}
         name={name}
         onChange={(e) => onChange(e.target.value)}

assets/terminal_cell/main.tsx

@@ -8,7 +8,7 @@ export const init = async (
   ctx: KinoContext,
   attrs: TerminalCellAttrs,
 ): Promise<void> => {
-  await loadReact(ctx, attrs)
+  await loadReact(ctx)
 
   ctx.root.innerHTML = 'loading...'
 

e2e/kino_k8s/connection_cell.spec.ts

@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://localhost:8080/new')
+
+  await page.getByText('Notebook dependencies and setup').click()
+  await page
+    .locator('#cell-editor-setup-primary')
+    .getByRole('textbox')
+    .fill(`Mix.install([{:kino_k8s, path: "${process.cwd()}"}])`)
+
+  await page.getByRole('button', { name: 'Reconnect and setup' }).click()
+
+  await expect(page.locator('#outputs-setup-2')).toHaveText(/:ok/, {
+    timeout: 300000,
+  })
+
+  const smart = page
+    .locator('section')
+    .first()
+    .getByRole('button', { name: '+ Smart' })
+    .first()
+  await smart.click()
+  await page.getByRole('menuitem', { name: 'K8s - Cluster Connection' }).click()
+})
+
+test.describe('File', () => {
+  test('loads from local file', async ({ page }) => {
+    const cell = page.locator('[data-smart-cell-js-view-ref]').first()
+    const iframe = page.frameLocator('iframe').first()
+    await iframe.getByTestId('source').fill(process.env.KUBECONFIG!)
+    await iframe.getByTestId('context').fill(process.env.KUBECONTEXT!)
+    await cell.locator('button[data-el-queue-cell-evaluation-button]').click()
+
+    const result = page.frameLocator('iframe').nth(1).locator('body')
+    await expect(result).toHaveText(/%K8s.Conn/)
+    await expect(result).toHaveText(/K8s.Conn.Auth.Certificate/)
+  })
+})