[#62793] end-to-end tests

antmicro · Jul 30, 2024 · b17b84c · b17b84c
1 parent 87b3d42
commit b17b84c
Show file tree

Hide file tree

Showing 11 changed files with 441 additions and 13 deletions.
diff --git a/.ci.yml b/.ci.yml
@@ -10,17 +10,35 @@ stages:
 build:
   stage: build
   script:   
-    - npm run lint
+    - yarn run lint
     - yarn build
+  artifacts:
+    paths:
+      - dist
+
+functional-tests:
+  stage: ui-tests
+  dependencies: [build]
+  script:
+    - ./tests/test-server.sh
+    - yarn
+    - npx playwright install-deps &> /dev/null
+    - npx playwright install
+    - yarn test
+  artifacts:
+    when: always
+    paths:
+      - test-results/.last-run.json
+      - playwright-report/index.html
 
 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&
+    - yarn run dev&
     - node bin/server.js&
-    - npm run ui-test
+    - yarn run ui-test
   artifacts:
     when: always
     paths:

diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,6 @@
 dist
 node_modules
 .env
-ui-tests/*.png
+ui-tests/*.png
+test-results
+playwright-report
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "server": "cd bin && npm install && node server.js",
     "lint": "prettier --check src --print-width 150",
     "format": "prettier --write src --print-width 150",
-    "ui-test": "vitest --dir ui-tests"
+    "ui-test": "vitest --dir ui-tests",
+    "test": "PW_TEST_HTML_REPORT_OPEN=never playwright test -c tests/playwright.config.js --reporter html"
   },
   "dependencies": {
     "@codemirror/commands": "^6.2.4",
@@ -36,10 +37,12 @@
     "yjs": "^13.5.44"
   },
   "devDependencies": {
+    "@playwright/test": "^1.45.1",
     "@preact/preset-vite": "^2.4.0",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-styled-components": "^2.1.4",
     "eslint": "latest",
+    "playwright": "^1.45.1",
     "prettier": "^3.2.5",
     "selenium-webdriver": "^4.16.0",
     "vite": "^3.2.3",

diff --git a/src/components/CodeMirror.js b/src/components/CodeMirror.js
@@ -232,6 +232,7 @@ const CodeMirror = ({ text, id, name, mode, collaboration, spellcheckOpts, highl
       parent: editorMountpoint.current,
     });
     editorRef.current = view;
+    window.myst_editor.main_editor = view;
 
     ycomments?.registerCodeMirror(view);
     provider?.watchCollabolators(setUsers);

diff --git a/src/components/Comment.js b/src/components/Comment.js
@@ -144,7 +144,7 @@ const YComment = ({ ycomments, commentId, collaboration }) => {
     top=${ycomments.display().offset(commentId)}
     fade=${ycomments.draggedComment == commentId}
   >
-    <div style="position:relative">
+    <div class="comment-wrapper" style="position:relative">
       ${ycomments.commentWithPopup == commentId &&
       html`
         <${YCommentPopup}

diff --git a/src/components/ResolvedComment.js b/src/components/ResolvedComment.js
@@ -254,7 +254,7 @@ const ResolvedComment = ({ c, authors, ycomments, content }) => {
         <${LineNumber}>${c.lineNumber}<//>
         ${c.resolvedLine}
       <//>
-      <${CommentContainer} color=${authors.get(1).color}>
+      <${CommentContainer} className="resolved-comment" color=${authors.get(1).color}>
         <${CommentTopbar}>
           <${FlexRow}>
             <${Avatar} login=${authors.get(1).name} color=${authors.get(1).color} avatarUrl=${authors.get(1).avatar} />

diff --git a/src/index.html b/src/index.html
@@ -112,9 +112,16 @@
 
       const usercolors = ["#30bced", "#60c771", "#e6aa3a", "#cbb63e", "#ee6352", "#9ac2c9", "#8acb88", "#14b2c4"];
 
-      const room = "0";
-      const username = Math.floor(Math.random() * 1000).toString();
+      const urlParams = new URLSearchParams(window.location.search);
+      const room = urlParams.get("room") || "0";
+      const username = urlParams.get("username") || Math.floor(Math.random() * 1000).toString();
       const color = usercolors[Math.floor(Math.random() * usercolors.length)];
+      let exampleCustomRoles = [
+        {
+          target: "say",
+          transform: async (content) => username + " says: '" + content + "'",
+        },
+      ];
 
       let exampleTransforms = [
         {
@@ -160,6 +167,10 @@
           </a>`;
           },
         },
+        {
+          target: /\|date\|/g,
+          transform: (match) => new Promise((r) => r(new Date().toLocaleString("en-GB", { timeZone: "UTC" }))),
+        },
       ];
       render(
         html`
@@ -170,14 +181,15 @@
             id="textarea_id"
             transforms=${exampleTransforms}
             collaboration=${{
-              enabled: import.meta.env.VITE_COLLAB == "ON",
-              commentsEnabled: import.meta.env.VITE_COLLAB == "ON",
-              resolvingCommentsEnabled: import.meta.env.VITE_COLLAB == "ON",
-              wsUrl: import.meta.env.VITE_WS_URL,
+              enabled: import.meta.env.VITE_COLLAB == "ON" || urlParams.get("collab"),
+              commentsEnabled: import.meta.env.VITE_COLLAB == "ON" || urlParams.get("collab"),
+              wsUrl: import.meta.env.VITE_WS_URL || urlParams.get("collab_server"),
+              resolvingCommentsEnabled: import.meta.env.VITE_COLLAB == "ON" || urlParams.get("collab"),
               username,
               room,
               color,
             }}
+            customRoles=${exampleCustomRoles}
             includeButtons=${defaultButtons.concat([
               {
                 text: "Custom button",