Update e2e tests (#81)

* base tests added * inline-field revert * removed incorrect case * add sorting * add base test for filter functionality * add edit case * update e2e * expand test added * update e2e flow * simple helpers added * selectors first step * locator selectors updated * Add variables to dashboard * Fix tests * Add dependency workflow * Update e2e tests * Fix e2e script * Fix using grafana selectors for dependency version * Fix e2e for main grafana * Fix the same artifact name for dependency workflow --------- Co-authored-by: Mikhail Volkov <[email protected]> Co-authored-by: asimonok <[email protected]>
VolkovLabs · Sep 30, 2024 · 1a33e34 · 1a33e34
1 parent fc5ca4b
commit 1a33e34
Show file tree

Hide file tree

Showing 18 changed files with 1,116 additions and 45 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -9,7 +9,7 @@ on:
       - main
 
 jobs:
-  tests:
+  dev:
     runs-on: ubuntu-latest
 
     steps:
@@ -18,8 +18,8 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: "20"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm install
@@ -42,3 +42,37 @@ jobs:
           name: playwright-report
           path: playwright-report/
           retention-days: 30
+
+  dependency:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Start Grafana
+        run: docker compose --profile dependency up -d
+
+      - name: Run e2e tests
+        run: npm run test:e2e:docker
+
+      - name: Stop Grafana
+        run: docker compose down
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report-dependency
+          path: playwright-report/
+          retention-days: 30
diff --git a/.gitignore b/.gitignore
@@ -28,7 +28,9 @@ e2e-results/
 .idea
 .DS_Store
 
-# Cypress
-cypress/report.json
-cypress/videos/
-cypress/screenshots/actual
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,9 @@
 
 ### Features / Enhancements
 
-- Update aggregated cell to support Standard Options (#79)
+- Updated aggregated cell to support Standard Options (#79)
+- Added nested objects cell type (#80)
+- Updated e2e tests (#81)
 
 ## 1.3.0 (2024-09-20)
 

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -6,7 +6,7 @@ services:
     environment:
       - GF_DEFAULT_APP_MODE=development
       - GF_DASHBOARDS_DEFAULT_HOME_DASHBOARD_PATH=/etc/grafana/provisioning/dashboards/panels.json
-      - GF_INSTALL_PLUGINS=marcusolsson-static-datasource
+      - GF_INSTALL_PLUGINS=marcusolsson-static-datasource,volkovlabs-variable-panel
     volumes:
       - ./dist:/var/lib/grafana/plugins/volkovlabs-table-panel
       - ./provisioning:/etc/grafana/provisioning
@@ -20,13 +20,26 @@ services:
     environment:
       - GF_DEFAULT_APP_MODE=development
       - GF_USERS_DEFAULT_THEME=light
-      - GF_INSTALL_PLUGINS=marcusolsson-static-datasource
+      - GF_INSTALL_PLUGINS=marcusolsson-static-datasource,volkovlabs-variable-panel
     volumes:
       - ./dist:/var/lib/grafana/plugins/volkovlabs-table-panel
       - ./provisioning:/etc/grafana/provisioning
     profiles:
       - main
 
+  grafana-dep:
+    image: grafana/grafana:10.3.0
+    ports:
+      - 3000:3000/tcp
+    environment:
+      - GF_DEFAULT_APP_MODE=development
+      - GF_INSTALL_PLUGINS=marcusolsson-static-datasource,volkovlabs-variable-panel
+    volumes:
+      - ./dist:/var/lib/grafana/plugins/volkovlabs-table-panel
+      - ./provisioning:/etc/grafana/provisioning
+    profiles:
+      - dependency
+
   test:
     build:
       context: .
@@ -52,3 +65,4 @@ services:
     profiles:
       - dev
       - main
+      - dependency
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@grafana/eslint-config": "^7.0.0",
-    "@grafana/plugin-e2e": "^1.7.1",
+    "@grafana/plugin-e2e": "^1.8.2",
     "@grafana/tsconfig": "^2.0.0",
     "@swc/core": "^1.7.23",
     "@swc/helpers": "^0.5.13",
@@ -74,6 +74,7 @@
     "lint:fix": "eslint --fix --ignore-path ./.eslintignore --ext .js,.jsx,.ts,.tsx .",
     "sign": "npx --yes @grafana/sign-plugin@latest",
     "start": "docker compose pull grafana && docker compose --profile dev up",
+    "start:dep": "docker compose pull grafana-dep && docker compose --profile dependency up",
     "start:main": "docker compose pull grafana-main && docker compose --profile main up",
     "stop": "docker compose down",
     "test": "jest --watch --onlyChanged",

diff --git a/provisioning/dashboards/devices.json b/provisioning/dashboards/devices.json
@@ -18,6 +18,7 @@
   "editable": true,
   "fiscalYearStartMonth": 0,
   "graphTooltip": 0,
+  "id": 2,
   "links": [],
   "panels": [
     {
@@ -140,7 +141,7 @@
                 "editorMode": "code",
                 "format": "table",
                 "rawQuery": true,
-                "rawSql": "select * from comments WHERE id IN (${payload.ids:sqlstring});",
+                "rawSql": "select * from comments WHERE id IN (${payload.ids:csv});",
                 "refId": "A",
                 "sql": {
                   "columns": [
@@ -214,7 +215,7 @@
                 "editorMode": "code",
                 "format": "table",
                 "rawQuery": true,
-                "rawSql": "select id, title from comments WHERE id IN (${payload.ids:sqlstring});",
+                "rawSql": "select id, title from comments WHERE id IN (${payload.ids:csv});",
                 "refId": "A",
                 "sql": {
                   "columns": [
@@ -834,7 +835,7 @@
           "export": false
         }
       },
-      "pluginVersion": "1.3.0",
+      "pluginVersion": "1.4.0",
       "targets": [
         {
           "datasource": {
@@ -996,7 +997,8 @@
       "type": "volkovlabs-table-panel"
     }
   ],
-  "schemaVersion": 39,
+  "preload": false,
+  "schemaVersion": 40,
   "tags": [],
   "templating": {
     "list": []
@@ -1009,6 +1011,6 @@
   "timezone": "browser",
   "title": "Devices",
   "uid": "edxke3hyi04cgc",
-  "version": 21,
+  "version": 1,
   "weekStart": ""
 }
diff --git a/provisioning/dashboards/query-based.json b/provisioning/dashboards/query-based.json
@@ -18,9 +18,75 @@
   "editable": true,
   "fiscalYearStartMonth": 0,
   "graphTooltip": 0,
-  "id": 4,
   "links": [],
   "panels": [
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "P1D2C73DC01F2359B"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "custom": {
+            "thresholdsStyle": {
+              "mode": "color",
+              "thresholds": []
+            }
+          },
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": null
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 2,
+        "w": 15,
+        "x": 0,
+        "y": 0
+      },
+      "id": 3,
+      "options": {
+        "alwaysVisibleFilter": false,
+        "autoScroll": false,
+        "collapsedByDefault": false,
+        "customValue": false,
+        "displayMode": "button",
+        "emptyValue": false,
+        "favorites": {
+          "enabled": false,
+          "storage": "browser"
+        },
+        "filter": false,
+        "groupSelection": false,
+        "header": true,
+        "padding": 10,
+        "persistent": false,
+        "saveSelectedGroup": false,
+        "saveSelectedGroupKey": "",
+        "showGroupTotal": false,
+        "showLabel": false,
+        "showName": false,
+        "showResetButton": false,
+        "showTotal": false,
+        "statusSort": false,
+        "sticky": false,
+        "tabsInOrder": true,
+        "variable": "status"
+      },
+      "pluginVersion": "3.4.0",
+      "type": "volkovlabs-variable-panel"
+    },
     {
       "datasource": {
         "type": "marcusolsson-static-datasource",
@@ -65,7 +131,7 @@
         "h": 9,
         "w": 15,
         "x": 0,
-        "y": 0
+        "y": 2
       },
       "id": 1,
       "options": {
@@ -273,7 +339,7 @@
           "export": false
         }
       },
-      "pluginVersion": "1.3.0",
+      "pluginVersion": "1.4.0",
       "targets": [
         {
           "datasource": {
@@ -352,7 +418,7 @@
         "h": 8,
         "w": 15,
         "x": 0,
-        "y": 9
+        "y": 11
       },
       "id": 2,
       "options": {
@@ -472,7 +538,7 @@
           "export": false
         }
       },
-      "pluginVersion": "1.3.0",
+      "pluginVersion": "1.4.0",
       "targets": [
         {
           "datasource": {
@@ -556,7 +622,7 @@
       },
       {
         "current": {
-          "selected": true,
+          "selected": false,
           "text": ["All"],
           "value": ["$__all"]
         },

diff --git a/src/__mocks__/@grafana/ui.tsx b/src/__mocks__/@grafana/ui.tsx
@@ -27,6 +27,7 @@ const SelectMock = ({
   isLoading,
   onOpenMenu,
   onCloseMenu,
+  inputId,
   isSearchable,
   ...restProps
 }: any) => (

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -348,7 +348,7 @@ export const Table = <TData,>({
       >
         <thead className={styles.header} ref={tableHeaderRef} style={{ top: topOffset }}>
           {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id} className={styles.headerRow}>
+            <tr key={headerGroup.id} className={styles.headerRow} {...TEST_IDS.table.headerRow.apply(headerGroup.id)}>
               {headerGroup.headers.map((header) => (
                 <th
                   key={header.id}

diff --git a/src/components/editors/FieldPicker/FieldPicker.tsx b/src/components/editors/FieldPicker/FieldPicker.tsx
@@ -110,6 +110,7 @@ export const FieldPicker: React.FC<Props> = ({
 
   return (
     <Select
+      inputId="config-new-column"
       options={availableFieldOptions}
       value={selectValue}
       onChange={(event) => {

diff --git a/src/components/editors/TablesEditor/TablesEditor.tsx b/src/components/editors/TablesEditor/TablesEditor.tsx
@@ -185,6 +185,7 @@ export const TablesEditor: React.FC<Props> = ({ context: { options, data }, onCh
                         {...provided.draggableProps}
                         style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
                         className={styles.item}
+                        {...testIds.item.apply(item.name)}
                       >
                         <Collapse
                           key={item.name}