E2E: Rewrite mysql tests to playwright (#83424)

* E2E: Rewrite mysql tests to playwright * Fix lint * Add more selectors and address comments * Scope locators when locating text * Don't run it 20 times * Update new-datasource-variable to assert mysql
2026-08-26 21:37:31 -05:00 · 2024-03-19 23:07:48 +01:00
parent 351425ab3d
commit a4fe7f39ea
13 changed files with 212 additions and 206 deletions
@@ -0,0 +1,72 @@
+export const normalTableName = 'normalTable';
+export const tableNameWithSpecialCharacter = 'table-name';
+export const tablesResponse = {
+  results: {
+    tables: {
+      status: 200,
+      frames: [
+        {
+          schema: {
+            refId: 'tables',
+            meta: {
+              executedQueryString:
+                "SELECT table_name FROM information_schema.tables WHERE table_schema = 'DataMaker' ORDER BY table_name",
+            },
+            fields: [{ name: 'TABLE_NAME', type: 'string', typeInfo: { frame: 'string', nullable: true } }],
+          },
+          data: { values: [[normalTableName, tableNameWithSpecialCharacter]] },
+        },
+      ],
+    },
+  },
+};
+
+export const fieldsResponse = {
+  results: {
+    fields: {
+      status: 200,
+      frames: [
+        {
+          schema: {
+            refId: 'fields',
+            meta: {
+              executedQueryString:
+                "SELECT column_name, data_type FROM information_schema.columns WHERE table_schema = 'DataMaker' AND table_name = 'RandomIntsWithTimes' ORDER BY column_name",
+            },
+            fields: [
+              { name: 'COLUMN_NAME', type: 'string', typeInfo: { frame: 'string', nullable: true } },
+              { name: 'DATA_TYPE', type: 'string', typeInfo: { frame: 'string', nullable: true } },
+            ],
+          },
+          data: {
+            values: [
+              ['createdAt', 'id', 'time', 'updatedAt', 'bigint'],
+              ['datetime', 'int', 'datetime', 'datetime', 'int'],
+            ],
+          },
+        },
+      ],
+    },
+  },
+};
+
+export const datasetResponse = {
+  results: {
+    datasets: {
+      status: 200,
+      frames: [
+        {
+          schema: {
+            refId: 'datasets',
+            meta: {
+              executedQueryString:
+                "SELECT DISTINCT TABLE_SCHEMA from information_schema.TABLES where TABLE_TYPE != 'SYSTEM VIEW' ORDER BY TABLE_SCHEMA",
+            },
+            fields: [{ name: 'TABLE_SCHEMA', type: 'string', typeInfo: { frame: 'string', nullable: true } }],
+          },
+          data: { values: [['DataMaker', 'mysql', 'performance_schema', 'sys']] },
+        },
+      ],
+    },
+  },
+};
@@ -0,0 +1,90 @@
+import { selectors } from '@grafana/e2e-selectors';
+import { expect, test } from '@grafana/plugin-e2e';
+
+import {
+  tablesResponse,
+  fieldsResponse,
+  datasetResponse,
+  normalTableName,
+  tableNameWithSpecialCharacter,
+} from './mocks/mysql.mocks';
+
+test.beforeEach(async ({ context, selectors, explorePage }) => {
+  await explorePage.datasource.set('gdev-mysql');
+  await context.route(selectors.apis.DataSource.queryPattern, async (route, request) => {
+    switch (request.postDataJSON().queries[0].refId) {
+      case 'tables':
+        return route.fulfill({ json: tablesResponse, status: 200 });
+      case 'fields':
+        return route.fulfill({ json: fieldsResponse, status: 200 });
+      case 'datasets':
+        return route.fulfill({ json: datasetResponse, status: 200 });
+      default:
+        return route.continue();
+    }
+  });
+});
+
+test('code editor autocomplete should handle table name escaping/quoting', async ({ explorePage, selectors, page }) => {
+  await page.getByLabel('Code').check();
+
+  const editor = explorePage.getByTestIdOrAriaLabel(selectors.components.CodeEditor.container).getByRole('textbox');
+  await editor.fill('S');
+  await page.getByLabel('SELECT <column> FROM <table>').locator('a').click();
+  await expect(page.getByLabel(tableNameWithSpecialCharacter)).toBeVisible();
+  await page.keyboard.press('Enter');
+
+  await expect(editor).toHaveValue(`SELECT  FROM grafana.\`${tableNameWithSpecialCharacter}\``);
+
+  for (let i = 0; i < tableNameWithSpecialCharacter.length + 2; i++) {
+    await page.keyboard.press('Backspace');
+  }
+
+  await page.keyboard.press('Control+I');
+  await expect(page.getByLabel(tableNameWithSpecialCharacter)).toBeVisible();
+});
+
+test('visual query builder should handle time filter macro', async ({ explorePage, page }) => {
+  await explorePage.getByTestIdOrAriaLabel(selectors.components.SQLQueryEditor.headerTableSelector).click();
+  await page.getByText(normalTableName, { exact: true }).click();
+
+  // Open column selector
+  await explorePage.getByTestIdOrAriaLabel(selectors.components.SQLQueryEditor.selectColumn).click();
+  const select = page.getByLabel('Select options menu');
+  await select.locator(page.getByText('createdAt')).click();
+
+  // Toggle where row
+  await page.getByLabel('Filter').click();
+
+  // Click add filter button
+  await page.getByRole('button', { name: 'Add filter' }).click();
+  await page.getByRole('button', { name: 'Add filter' }).click(); // For some reason we need to click twice
+
+  // Open field selector
+  await explorePage.getByTestIdOrAriaLabel(selectors.components.SQLQueryEditor.filterField).click();
+  await select.locator(page.getByText('createdAt')).click();
+
+  // Open operator selector
+  await explorePage.getByTestIdOrAriaLabel(selectors.components.SQLQueryEditor.filterOperator).click();
+  await select.locator(page.getByText('Macros')).click();
+
+  // Open macros value selector
+  await explorePage.getByTestIdOrAriaLabel('Macros value selector').click();
+  await select.locator(page.getByText('timeFilter', { exact: true })).click();
+
+  // Validate that the timeFilter macro was added
+  await expect(
+    explorePage.getByTestIdOrAriaLabel(selectors.components.CodeEditor.container).getByRole('textbox')
+  ).toHaveValue(`SELECT\n  createdAt\nFROM\n  DataMaker.normalTable\nWHERE\n  $__timeFilter(createdAt)\nLIMIT\n  50`);
+
+  // Validate that the timeFilter macro was removed when changed to equals operator
+  await explorePage.getByTestIdOrAriaLabel(selectors.components.SQLQueryEditor.filterOperator).click();
+  await select.locator(page.getByText('==')).click();
+
+  await explorePage.getByTestIdOrAriaLabel(selectors.components.DateTimePicker.input).click();
+  await explorePage.getByTestIdOrAriaLabel(selectors.components.DateTimePicker.input).blur();
+
+  await expect(
+    explorePage.getByTestIdOrAriaLabel(selectors.components.CodeEditor.container).getByRole('textbox')
+  ).not.toHaveValue(`SELECT\n  createdAt\nFROM\n  DataMaker.normalTable\nWHERE\n  createdAt = NULL\nLIMIT\n  50`);
+});