From 06d89e1929594507c503fca2e3413085480a31d1 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 22 Sep 2023 13:03:21 +0100
Subject: [PATCH] Chore: add some basic validation tests for our eslint rules
 (#75284)

* add some basic validation tests for our eslint rules

* add 1 more valid case
---
 packages/grafana-eslint-rules/package.json    |  6 +-
 .../tests/no-aria-label-e2e-selectors.test.js | 47 ++++++++++++++++
 .../tests/no-border-radius-literal.test.js    | 56 +++++++++++++++++++
 yarn.lock                                     |  2 +
 4 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 packages/grafana-eslint-rules/tests/no-aria-label-e2e-selectors.test.js
 create mode 100644 packages/grafana-eslint-rules/tests/no-border-radius-literal.test.js

diff --git a/packages/grafana-eslint-rules/package.json b/packages/grafana-eslint-rules/package.json
index d4a645f4df5..2ccf7d25655 100644
--- a/packages/grafana-eslint-rules/package.json
+++ b/packages/grafana-eslint-rules/package.json
@@ -10,9 +10,13 @@
     "url": "http://github.com/grafana/grafana.git",
     "directory": "packages/grafana-eslint-rules"
   },
+  "dependencies": {
+    "@typescript-eslint/utils": "^5.46.1"
+  },
   "devDependencies": {
     "@typescript-eslint/types": "^5.46.1",
-    "@typescript-eslint/utils": "^5.46.1"
+    "eslint": "8.44.0",
+    "tslib": "2.6.0"
   },
   "private": true
 }
diff --git a/packages/grafana-eslint-rules/tests/no-aria-label-e2e-selectors.test.js b/packages/grafana-eslint-rules/tests/no-aria-label-e2e-selectors.test.js
new file mode 100644
index 00000000000..5fdd4c86390
--- /dev/null
+++ b/packages/grafana-eslint-rules/tests/no-aria-label-e2e-selectors.test.js
@@ -0,0 +1,47 @@
+import { RuleTester } from 'eslint';
+
+import noAriaLabelE2ESelector from '../rules/no-aria-label-e2e-selectors.cjs';
+
+RuleTester.setDefaultConfig({
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+const ruleTester = new RuleTester();
+
+ruleTester.run('eslint no-aria-label-e2e-selector', noAriaLabelE2ESelector, {
+  valid: [
+    {
+      code: `<div aria-label="foo" />`,
+    },
+    {
+      code: `<div aria-label={"foo"} />`,
+    },
+    {
+      code: `
+import { someOtherImport } from './some-other-location';
+
+<div aria-label={someOtherImport} />
+      `,
+    },
+  ],
+  invalid: [
+    {
+      code: `
+import { selectors } from '@grafana/e2e-selectors';
+
+<div aria-label={selectors.pages.AddDashboard.addNewPanel} />
+      `,
+      errors: [
+        {
+          message: 'Use data-testid for E2E selectors instead of aria-label',
+        },
+      ],
+    },
+  ],
+});
diff --git a/packages/grafana-eslint-rules/tests/no-border-radius-literal.test.js b/packages/grafana-eslint-rules/tests/no-border-radius-literal.test.js
new file mode 100644
index 00000000000..33699113983
--- /dev/null
+++ b/packages/grafana-eslint-rules/tests/no-border-radius-literal.test.js
@@ -0,0 +1,56 @@
+import { RuleTester } from 'eslint';
+
+import noBorderRadiusLiteral from '../rules/no-border-radius-literal.cjs';
+
+RuleTester.setDefaultConfig({
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+const ruleTester = new RuleTester();
+
+ruleTester.run('eslint no-border-radius-literal', noBorderRadiusLiteral, {
+  valid: [
+    {
+      code: `css({ borderRadius: theme.shape.radius.default })`,
+    },
+    {
+      code: `css({ borderRadius: theme.shape.radius.circle })`,
+    },
+    {
+      code: `css({ borderRadius: theme.shape.radius.pill })`,
+    },
+  ],
+
+  invalid: [
+    {
+      code: `css({ borderRadius: '2px' })`,
+      errors: [
+        {
+          message: 'Prefer using theme.shape.radius tokens instead of literal values.',
+        },
+      ],
+    },
+    {
+      code: `css({ lineHeight: 1 }, { borderRadius: '2px' })`,
+      errors: [
+        {
+          message: 'Prefer using theme.shape.radius tokens instead of literal values.',
+        },
+      ],
+    },
+    {
+      code: `css([{ lineHeight: 1 }, { borderRadius: '2px' }])`,
+      errors: [
+        {
+          message: 'Prefer using theme.shape.radius tokens instead of literal values.',
+        },
+      ],
+    },
+  ],
+});
diff --git a/yarn.lock b/yarn.lock
index d241064628c..b8e42ca8696 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3819,6 +3819,8 @@ __metadata:
   dependencies:
     "@typescript-eslint/types": ^5.46.1
     "@typescript-eslint/utils": ^5.46.1
+    eslint: 8.44.0
+    tslib: 2.6.0
   languageName: unknown
   linkType: soft