add first test to run locally

.env

@@ -0,0 +1,2 @@
+LIVEBOOK_TOKEN_ENABLED=0
+ERL_AFLAGS = "-kernel shell_history enabled"

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

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

.rtx.toml

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

.vscode/settings.json

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

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,36 @@
+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/)
+
+  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/)
+  })
+})