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

@@ -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
 }

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',
+        },
+      ],
+    },
+  ],
+});

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.',
+        },
+      ],
+    },
+  ],
+});

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