[UI] Set playwright for e2e tests (#628)

Author: mykalmax

Dockerfile.app

@@ -1,7 +1,12 @@
-FROM node:19-alpine
+FROM node:16
+FROM mcr.microsoft.com/playwright:focal
 
 WORKDIR /app
 
+ENV PATH /app/node_modules/.bin:$PATH
+
+RUN apt-get update && apt-get -y install libnss3 libatk-bridge2.0-0 libdrm-dev libxkbcommon-dev libgbm-dev libasound-dev libatspi2.0-0 libxshmfence-dev
+
 COPY web/client/package*.json .
 
 RUN npm install -g npm@latest && \

web/client/.eslintrc.js

@@ -36,7 +36,13 @@ module.exports = {
       },
     ],
   },
-  ignorePatterns: ['src/api/client.ts'],
+  ignorePatterns: [
+    'src/api/client.ts',
+    'test-results',
+    'playwright',
+    'playwright-report',
+    'dist',
+  ],
   settings: {
     react: {
       version: '18.2',

web/client/.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/
+dist
+tsconfig.tsbuildinfo

web/client/.prettierignore

@@ -1,2 +1,9 @@
 **/*.py
-.prettierignore
+.prettierignore
+.gitignore
+node_modules/
+/test-results/
+/playwright-report/
+/playwright/.cache/
+dist
+tsconfig.tsbuildinfo

web/client/package-lock.json

@@ -9,6 +9,7 @@
     "lint:fix": "eslint --fix .",
     "format": "npm run prettier && npm run lint:fix",
     "test": "vitest",
+    "test:e2e": "playwright test",
     "generate:api": "orval --config ./orval.config.ts"
   },
   "dependencies": {
@@ -37,6 +38,7 @@
     "zustand": "^4.3.6"
   },
   "devDependencies": {
+    "@playwright/test": "^1.32.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",

web/client/package.json

@@ -0,0 +1,59 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+const URL = 'http://127.0.0.1:8005'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: process.env.CI != null,
+  /* Retry on CI only */
+  retries: process.env.CI != null ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI != null ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: URL,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run build && npm run preview',
+    url: URL,
+    reuseExistingServer: process.env.CI == null,
+  },
+})

web/client/playwright.config.ts

@@ -28,9 +28,9 @@ function LogoSqlMesh({
       style={style}
       className={className}
       viewBox="0 0 240 72"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
+      <title>SQLMesh logo</title>
       <path
         d="M60 41V33.2222C60 20.9492 49.2548 11 36 11C22.7452 11 12 20.9492 12 33.2222V41"
         stroke={strokeDarker}

web/client/src/library/components/logo/SqlMesh.tsx

@@ -11,6 +11,7 @@ function LogoTobiko({ style, className }: PropsLogoTobiko): JSX.Element {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
+      <title>Tobiko Data logo</title>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

web/client/src/library/components/logo/Tobiko.tsx

@@ -0,0 +1,20 @@
+export default function Footer(): JSX.Element {
+  return (
+    <footer className="px-2 py-1 text-xs flex justify-between">
+      <small className="text-xs">
+        © {new Date().getFullYear()}
+        &nbsp;
+        <a
+          href="https://tobikodata.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline"
+          title="Tobiko Data website"
+        >
+          Tobiko&nbsp;Data,&nbsp;Inc.
+        </a>
+        &nbsp; All rights reserved.
+      </small>
+    </footer>
+  )
+}