[#52585] CI with screenshots

.ci.yml

@@ -0,0 +1,26 @@
+image: node:20
+
+before_script:
+  - yarn
+
+stages:
+  - build
+  - ui-tests
+
+build:
+  stage: build
+  script:   
+    - yarn build
+
+ui-tests:
+  stage: ui-tests
+  script:
+    - apt-get -qqy update > /dev/null 2> /dev/null
+    - apt-get -qqy install --no-install-recommends chromium > /dev/null 2> /dev/null
+    - npm run dev&
+    - node bin/server.js&
+    - npm run ui-test
+  artifacts:
+    when: always
+    paths:
+      - ui-tests/*.png

.gitignore

@@ -1,3 +1,4 @@
 dist
 node_modules
 .env
+ui-tests/*.png

package.json

@@ -9,7 +9,8 @@
     "preview": "vite preview",
     "host": "vite --host",
     "server": "cd bin && npm install && node server.js",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "ui-test": "vitest --dir ui-tests"
   },
   "dependencies": {
     "@codemirror/commands": "^6.2.4",
@@ -36,6 +37,8 @@
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-styled-components": "^2.1.4",
     "eslint": "latest",
+    "selenium-webdriver": "^4.16.0",
+    "vitest": "^1.0.4",
     "vite": "^3.2.3",
     "vite-plugin-babel-macros": "^1.0.6"
   },

ui-tests/ui-tests.test.js

@@ -0,0 +1,82 @@
+import { describe, it } from 'vitest';
+import { Builder, until, By, Key } from 'selenium-webdriver';
+import chrome from 'selenium-webdriver/chrome';
+import fs from "fs";
+
+const ADDR = 'http://localhost:5173';
+
+const saveScreenshot = name => ss => {
+    fs.writeFile("ui-tests/" + name + ".png", ss, 'base64', console.error)
+}
+
+const mkDriver = () => new Builder()
+    .forBrowser('chrome')
+    .setChromeOptions(new chrome.Options()
+        .headless()
+        .addArguments([
+            "--no-sandbox",
+            "--disable-dev-shm-usage"
+        ])
+        .windowSize({ width: 1200, height: 1000 }))
+    .build();
+
+const openMyst = (driver) => driver.get(ADDR)
+    .then(() => driver.wait(until.titleContains('MyST'), 1000))
+
+
+describe('UI Screenshots', () => {
+    it('Check "Both" view', async () => {
+        const driver = await mkDriver();
+        try {
+            await openMyst(driver)
+            await driver.takeScreenshot().then(saveScreenshot("both"))
+        } finally {
+            await driver.quit();
+        }
+    })
+
+    it('Check "Source" view', async () => {
+        const driver = await mkDriver();
+        try {
+            await openMyst(driver);
+            const elem = await driver.findElement(By.name("Source"))
+            await elem.click()
+            await driver.takeScreenshot().then(saveScreenshot("source"))
+        } finally {
+            await driver.quit();
+        }
+    })
+
+    it('Check "Preview" view', async () => {
+        const driver = await mkDriver();
+        try {
+            await openMyst(driver);
+            const elem = await driver.findElement(By.name("Preview"))
+            await elem.click()
+            await driver.takeScreenshot().then(saveScreenshot("preview"))
+        } finally {
+            await driver.quit();
+        }
+    })
+
+    it('Check "Diff" view', async () => {
+        const driver = await mkDriver();
+        try {
+            await openMyst(driver);
+
+            // Make some changes
+            const lines = await driver.findElements(By.className("cm-line"));
+            await lines[0].sendKeys('\n# Some Section\n\nSome text some text some text some text some text');
+            for (let i = 23; i < 30; i++) {
+                await lines[i].clear();
+                await lines[i].sendKeys(Key.BACK_SPACE);
+            }
+
+            const elem = await driver.findElement(By.name("Diff"))
+            await elem.click()
+            await driver.takeScreenshot().then(saveScreenshot("diff"))
+        } finally {
+            await driver.quit();
+        }
+    })
+})