@grafana/create-plugin 7.12.1 → 7.12.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [7.12.2](https://github.com/grafana/plugin-tools/compare/@grafana/create-plugin@7.12.1...@grafana/create-plugin@7.12.2) (2026-10-09)
+
+
+### Bug Fixes
+
+* **jest:** fill in unimplemented interfaces with jest-canvas-mock and intersection-observer ([#2933](https://github.com/grafana/plugin-tools/issues/2933)) ([a111afe](https://github.com/grafana/plugin-tools/commit/a111afe941b7cd3c4b3bc87c30a0c40853c65383))
+
 ## [7.12.1](https://github.com/grafana/plugin-tools/compare/@grafana/create-plugin@7.12.0...@grafana/create-plugin@7.12.1) (2026-10-06)
 
 

package/dist/codemods/migrations/migrations.js

@@ -84,6 +84,18 @@ var defaultMigrations = [
     version: "7.11.1",
     description: "Update @grafana/eslint-config to v10: drop the removed ./flat.js subpath import and swap @stylistic/eslint-plugin-ts for @stylistic/eslint-plugin.",
     scriptPath: import.meta.resolve("./scripts/014-eslint-config-v10.js")
+  },
+  {
+    name: "015-jest-canvas-mock",
+    version: "7.12.2",
+    description: "Fix @grafana/ui Combobox crashing in Jest: replace the scaffolded no-op HTMLCanvasElement.getContext stub with jest-canvas-mock, which returns a spec-shaped CanvasRenderingContext2D (and TextMetrics) so measureText() no longer throws.",
+    scriptPath: import.meta.resolve("./scripts/015-jest-canvas-mock.js")
+  },
+  {
+    name: "016-jest-intersection-observer",
+    version: "7.12.2",
+    description: "Fix @grafana/ui Combobox dropdown crashing in Jest: add an IntersectionObserver polyfill stub so ScrollIndicators (mounted when the dropdown opens) no longer throws ReferenceError in jsdom.",
+    scriptPath: import.meta.resolve("./scripts/016-jest-intersection-observer.js")
   }
   // Do not use LEGACY_UPDATE_CUTOFF_VERSION for new migrations. It is only used above to force migrations to run
   // for those written before the switch to updates as migrations.

package/dist/codemods/migrations/scripts/015-jest-canvas-mock.js

@@ -0,0 +1,35 @@
+import { addDependenciesToPackageJson } from '../../utils.js';
+
+const JEST_SETUP_PATH = ".config/jest-setup.js";
+const BROKEN_CANVAS_STUB_PATTERN = /^HTMLCanvasElement\.prototype\.getContext\s*=\s*\(\)\s*=>\s*\{\};\s*\n?/m;
+const CANVAS_MOCK_IMPORT = "import 'jest-canvas-mock';";
+const JEST_CANVAS_MOCK_VERSION = "^2.5.2";
+function migrate(context) {
+  if (!context.doesFileExist(JEST_SETUP_PATH)) {
+    return context;
+  }
+  const original = context.getFile(JEST_SETUP_PATH) ?? "";
+  let updated = original;
+  if (BROKEN_CANVAS_STUB_PATTERN.test(updated)) {
+    updated = updated.replace(BROKEN_CANVAS_STUB_PATTERN, "");
+  }
+  if (!updated.includes(CANVAS_MOCK_IMPORT)) {
+    updated = addCanvasMockImport(updated);
+  }
+  if (updated !== original) {
+    context.updateFile(JEST_SETUP_PATH, updated);
+  }
+  addDependenciesToPackageJson(context, {}, { "jest-canvas-mock": JEST_CANVAS_MOCK_VERSION });
+  return context;
+}
+function addCanvasMockImport(content) {
+  const anchor = "import '@testing-library/jest-dom';";
+  if (content.includes(anchor)) {
+    return content.replace(anchor, `${anchor}
+${CANVAS_MOCK_IMPORT}`);
+  }
+  return `${CANVAS_MOCK_IMPORT}
+${content}`;
+}
+
+export { migrate as default };

package/dist/codemods/migrations/scripts/016-jest-intersection-observer.js

@@ -0,0 +1,28 @@
+import { addDependenciesToPackageJson } from '../../utils.js';
+
+const JEST_SETUP_PATH = ".config/jest-setup.js";
+const INTERSECTION_OBSERVER_IMPORT = "import 'intersection-observer';";
+const INTERSECTION_OBSERVER_VERSION = "^0.12.2";
+function migrate(context) {
+  if (!context.doesFileExist(JEST_SETUP_PATH)) {
+    return context;
+  }
+  const original = context.getFile(JEST_SETUP_PATH) ?? "";
+  if (!original.includes(INTERSECTION_OBSERVER_IMPORT)) {
+    const updated = addIntersectionObserverImport(original);
+    context.updateFile(JEST_SETUP_PATH, updated);
+  }
+  addDependenciesToPackageJson(context, {}, { "intersection-observer": INTERSECTION_OBSERVER_VERSION });
+  return context;
+}
+function addIntersectionObserverImport(content) {
+  const anchor = "import 'jest-canvas-mock';";
+  if (content.includes(anchor)) {
+    return content.replace(anchor, `${anchor}
+${INTERSECTION_OBSERVER_IMPORT}`);
+  }
+  return `${INTERSECTION_OBSERVER_IMPORT}
+${content}`;
+}
+
+export { migrate as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "7.12.1",
+  "version": "7.12.2",
   "repository": {
     "type": "git",
     "directory": "packages/create-plugin",

package/src/codemods/migrations/migrations.ts

@@ -99,6 +99,20 @@ export default [
       'Update @grafana/eslint-config to v10: drop the removed ./flat.js subpath import and swap @stylistic/eslint-plugin-ts for @stylistic/eslint-plugin.',
     scriptPath: import.meta.resolve('./scripts/014-eslint-config-v10.js'),
   },
+  {
+    name: '015-jest-canvas-mock',
+    version: '7.12.2',
+    description:
+      'Fix @grafana/ui Combobox crashing in Jest: replace the scaffolded no-op HTMLCanvasElement.getContext stub with jest-canvas-mock, which returns a spec-shaped CanvasRenderingContext2D (and TextMetrics) so measureText() no longer throws.',
+    scriptPath: import.meta.resolve('./scripts/015-jest-canvas-mock.js'),
+  },
+  {
+    name: '016-jest-intersection-observer',
+    version: '7.12.2',
+    description:
+      'Fix @grafana/ui Combobox dropdown crashing in Jest: add an IntersectionObserver polyfill stub so ScrollIndicators (mounted when the dropdown opens) no longer throws ReferenceError in jsdom.',
+    scriptPath: import.meta.resolve('./scripts/016-jest-intersection-observer.js'),
+  },
   // Do not use LEGACY_UPDATE_CUTOFF_VERSION for new migrations. It is only used above to force migrations to run
   // for those written before the switch to updates as migrations.
   //

package/src/codemods/migrations/scripts/015-jest-canvas-mock.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import migrate from './015-jest-canvas-mock.js';
+import { Context } from '../../context.js';
+
+const JEST_SETUP_PATH = '.config/jest-setup.js';
+
+const SCAFFOLD_JEST_SETUP = `/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY \`@grafana/create-plugin\`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ */
+
+import '@testing-library/jest-dom';
+
+Object.defineProperty(global, 'matchMedia', { writable: true, value: () => ({}) });
+
+HTMLCanvasElement.prototype.getContext = () => {};
+`;
+
+function setupContext(setup = SCAFFOLD_JEST_SETUP, extraDevDeps: Record<string, string> = {}) {
+  const context = new Context('/virtual');
+  context.addFile(JEST_SETUP_PATH, setup);
+  context.addFile('package.json', JSON.stringify({ devDependencies: { jest: '^29.7.0', ...extraDevDeps } }));
+  return context;
+}
+
+describe('015-jest-canvas-mock', () => {
+  it('should replace the broken canvas stub, add the jest-canvas-mock import and devDependency, and preserve surrounding content', () => {
+    const result = migrate(setupContext());
+    const updated = result.getFile(JEST_SETUP_PATH) || '';
+    const packageJson = JSON.parse(result.getFile('package.json') || '{}');
+
+    expect(updated).not.toMatch(/HTMLCanvasElement\.prototype\.getContext\s*=\s*\(\)\s*=>\s*\{\}/);
+    expect(updated).toContain("import 'jest-canvas-mock';");
+    expect(updated).toContain('DO NOT EDIT THIS FILE DIRECTLY');
+    expect(updated).toContain('matchMedia');
+    expect(packageJson.devDependencies['jest-canvas-mock']).toBe('^2.5.2');
+  });
+
+  it('should not modify anything when the jest-setup file does not exist', () => {
+    const context = new Context('/virtual');
+
+    const result = migrate(context);
+
+    expect(result.hasChanges()).toBe(false);
+  });
+
+  it('should be idempotent', async () => {
+    await expect(migrate).toBeIdempotent(setupContext());
+  });
+});

package/src/codemods/migrations/scripts/015-jest-canvas-mock.ts

@@ -0,0 +1,40 @@
+import type { Context } from '../../context.js';
+import { addDependenciesToPackageJson } from '../../utils.js';
+
+const JEST_SETUP_PATH = '.config/jest-setup.js';
+const BROKEN_CANVAS_STUB_PATTERN = /^HTMLCanvasElement\.prototype\.getContext\s*=\s*\(\)\s*=>\s*\{\};\s*\n?/m;
+const CANVAS_MOCK_IMPORT = "import 'jest-canvas-mock';";
+const JEST_CANVAS_MOCK_VERSION = '^2.5.2';
+
+export default function migrate(context: Context) {
+  if (!context.doesFileExist(JEST_SETUP_PATH)) {
+    return context;
+  }
+
+  const original = context.getFile(JEST_SETUP_PATH) ?? '';
+  let updated = original;
+
+  if (BROKEN_CANVAS_STUB_PATTERN.test(updated)) {
+    updated = updated.replace(BROKEN_CANVAS_STUB_PATTERN, '');
+  }
+
+  if (!updated.includes(CANVAS_MOCK_IMPORT)) {
+    updated = addCanvasMockImport(updated);
+  }
+
+  if (updated !== original) {
+    context.updateFile(JEST_SETUP_PATH, updated);
+  }
+
+  addDependenciesToPackageJson(context, {}, { 'jest-canvas-mock': JEST_CANVAS_MOCK_VERSION });
+
+  return context;
+}
+
+function addCanvasMockImport(content: string) {
+  const anchor = "import '@testing-library/jest-dom';";
+  if (content.includes(anchor)) {
+    return content.replace(anchor, `${anchor}\n${CANVAS_MOCK_IMPORT}`);
+  }
+  return `${CANVAS_MOCK_IMPORT}\n${content}`;
+}

package/src/codemods/migrations/scripts/016-jest-intersection-observer.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import migrate from './016-jest-intersection-observer.js';
+import { Context } from '../../context.js';
+
+const JEST_SETUP_PATH = '.config/jest-setup.js';
+
+const SCAFFOLD_JEST_SETUP = `/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY \`@grafana/create-plugin\`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ */
+
+import '@testing-library/jest-dom';
+import 'jest-canvas-mock';
+
+Object.defineProperty(global, 'matchMedia', { writable: true, value: () => ({}) });
+`;
+
+function setupContext(setup = SCAFFOLD_JEST_SETUP, extraDevDeps: Record<string, string> = {}) {
+  const context = new Context('/virtual');
+  context.addFile(JEST_SETUP_PATH, setup);
+  context.addFile('package.json', JSON.stringify({ devDependencies: { jest: '^29.7.0', ...extraDevDeps } }));
+  return context;
+}
+
+describe('016-jest-intersection-observer', () => {
+  it('should add the intersection-observer import and devDependency, and preserve surrounding content', () => {
+    const result = migrate(setupContext());
+    const updated = result.getFile(JEST_SETUP_PATH) || '';
+    const packageJson = JSON.parse(result.getFile('package.json') || '{}');
+
+    expect(updated).toContain("import 'intersection-observer';");
+    expect(updated).toContain('DO NOT EDIT THIS FILE DIRECTLY');
+    expect(updated).toContain('matchMedia');
+    expect(updated).toContain("import 'jest-canvas-mock';");
+    expect(packageJson.devDependencies['intersection-observer']).toBe('^0.12.2');
+  });
+
+  it('should not modify anything when the jest-setup file does not exist', () => {
+    const context = new Context('/virtual');
+
+    const result = migrate(context);
+
+    expect(result.hasChanges()).toBe(false);
+  });
+
+  it('should be idempotent', async () => {
+    await expect(migrate).toBeIdempotent(setupContext());
+  });
+});

package/src/codemods/migrations/scripts/016-jest-intersection-observer.ts

@@ -0,0 +1,31 @@
+import type { Context } from '../../context.js';
+import { addDependenciesToPackageJson } from '../../utils.js';
+
+const JEST_SETUP_PATH = '.config/jest-setup.js';
+const INTERSECTION_OBSERVER_IMPORT = "import 'intersection-observer';";
+const INTERSECTION_OBSERVER_VERSION = '^0.12.2';
+
+export default function migrate(context: Context) {
+  if (!context.doesFileExist(JEST_SETUP_PATH)) {
+    return context;
+  }
+
+  const original = context.getFile(JEST_SETUP_PATH) ?? '';
+
+  if (!original.includes(INTERSECTION_OBSERVER_IMPORT)) {
+    const updated = addIntersectionObserverImport(original);
+    context.updateFile(JEST_SETUP_PATH, updated);
+  }
+
+  addDependenciesToPackageJson(context, {}, { 'intersection-observer': INTERSECTION_OBSERVER_VERSION });
+
+  return context;
+}
+
+function addIntersectionObserverImport(content: string) {
+  const anchor = "import 'jest-canvas-mock';";
+  if (content.includes(anchor)) {
+    return content.replace(anchor, `${anchor}\n${INTERSECTION_OBSERVER_IMPORT}`);
+  }
+  return `${INTERSECTION_OBSERVER_IMPORT}\n${content}`;
+}

package/templates/common/.config/jest-setup.js

@@ -6,6 +6,8 @@
  */
 
 import '@testing-library/jest-dom';
+import 'jest-canvas-mock';
+import 'intersection-observer';
 import { TextEncoder, TextDecoder } from 'util';
 import { MessageChannel, MessagePort } from 'worker_threads';
 
@@ -26,5 +28,3 @@ Object.defineProperty(global, 'matchMedia', {
     dispatchEvent: jest.fn(),
   }),
 });
-
-HTMLCanvasElement.prototype.getContext = () => {};

package/templates/common/_package.json

@@ -48,7 +48,9 @@
     "glob": "^11.1.0",
     "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^5.0.0",
+    "intersection-observer": "^0.12.2",
     "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.6.0",
     "replace-in-file-webpack-plugin": "^1.0.0",{{#if useExperimentalRspack}}