Fixing chartjs test and rollup process

Author: weaverryan

rollup.config.js

@@ -4,6 +4,39 @@ import glob from 'glob';
 import path from 'path';
 import pkgUp from 'pkg-up';
 
+/**
+ * Guarantees that any files imported from a peer dependency are treated as an external.
+ *
+ * For example, if we import `chart.js/auto`, that would not normally
+ * match the "chart.js" we pass to the "externals" config. This plugin
+ * catches that case and adds it as an external.
+ *
+ * Inspired by https://github.com/oat-sa/rollup-plugin-wildcard-external
+ */
+const wildcardExternalsPlugin = (peerDependencies) => ({
+    name: 'wildcard-externals',
+    resolveId(source, importer) {
+        if (importer) {
+            let matchesExternal = false;
+            peerDependencies.forEach((peerDependency) => {
+                if (source.includes(`/${peerDependency}/`)) {
+                    matchesExternal = true;
+                }
+            });
+
+            if (matchesExternal) {
+                return {
+                    id: source,
+                    external: true,
+                    moduleSideEffects: true
+                };
+            }
+        }
+
+        return null; // other ids should be handled as usually
+    }
+});
+
 const files = glob.sync("src/**/assets/src/*controller.ts");
 const packages = files.map((file) => {
     const absolutePath = path.join(__dirname, file);
@@ -23,6 +56,7 @@ const packages = files.map((file) => {
         plugins: [
             resolve(),
             typescript(),
+            wildcardExternalsPlugin(peerDependencies)
         ],
     };
 });

src/Chartjs/Resources/assets/package.json

@@ -21,6 +21,7 @@
         "@hotwired/stimulus": "^3.0.0",
         "@types/chart.js": "^2.9.34",
         "chart.js": "^3.4.1",
-        "jest-canvas-mock": "^2.3.0"
+        "jest-canvas-mock": "^2.3.0",
+        "resize-observer-polyfill": "^1.5.1"
     }
 }

src/Chartjs/Resources/assets/test/controller.test.ts

@@ -32,17 +32,20 @@ const startStimulus = () => {
     const application = Application.start();
     application.register('check', CheckController);
     application.register('chartjs', ChartjsController);
+
+    return application;
 };
 
 describe('ChartjsController', () => {
-    let container;
+    let application;
 
     afterEach(() => {
         clearDOM();
+        application.stop();
     });
 
     it('connect without options', async () => {
-        container = mountDOM(`
+        const container = mountDOM(`
             <canvas
                 data-testid="canvas"
                 data-controller="check chartjs"
@@ -53,18 +56,19 @@ describe('ChartjsController', () => {
         expect(getByTestId(container, 'canvas')).not.toHaveClass('pre-connected');
         expect(getByTestId(container, 'canvas')).not.toHaveClass('connected');
 
-        startStimulus();
+        application = startStimulus();
+
         await waitFor(() => {
             expect(getByTestId(container, 'canvas')).toHaveClass('pre-connected');
             expect(getByTestId(container, 'canvas')).toHaveClass('connected');
         });
 
         const chart = getByTestId(container, 'canvas').chart;
-        expect(chart.options.showLines).toBe(true);
+        expect(chart.options.showLines).toBeUndefined();
     });
 
     it('connect with options', async () => {
-        container = mountDOM(`
+        const container = mountDOM(`
             <canvas
                 data-testid="canvas"
                 data-controller="check chartjs"
@@ -75,7 +79,7 @@ describe('ChartjsController', () => {
         expect(getByTestId(container, 'canvas')).not.toHaveClass('pre-connected');
         expect(getByTestId(container, 'canvas')).not.toHaveClass('connected');
 
-        startStimulus();
+        application = startStimulus();
         await waitFor(() => {
             expect(getByTestId(container, 'canvas')).toHaveClass('pre-connected');
             expect(getByTestId(container, 'canvas')).toHaveClass('connected');

src/Chartjs/Resources/assets/test/setup.js

@@ -10,3 +10,5 @@
 'use strict';
 
 import 'jest-canvas-mock';
+// eslint-disable-next-line
+global.ResizeObserver = require('resize-observer-polyfill');