Fix/fiddle

.github/workflows/test.yml

@@ -24,4 +24,12 @@ jobs:
       run: npx playwright install --with-deps
 
     - name: Run tests
-      run: make test
+      run: make test
+
+    - name: Upload test results
+      if: failure()
+      uses: actions/upload-artifact@v4
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 7

CLAUDE.md

@@ -20,6 +20,10 @@ For comprehensive project information including build commands, architecture det
 - Tests run in headless Chrome for consistent results across environments
 - Focus on testing the public API (`Flotr.draw()`) rather than internal implementation
 
+**File Creation Guidelines:**
+- CRITICAL: Always create files with Unix line endings (LF), never Windows (CRLF)
+- This prevents "required file not found" errors when executing scripts
+
 **Architecture Constraints:**
 - New chart types must use the `Flotr.addType(name, implementation)` pattern
 - New plugins must use the `Flotr.addPlugin(name, implementation)` pattern  

Makefile

@@ -20,8 +20,11 @@ libraries: $(SMOOSH)
 ie: $(SMOOSH)
 	$(SMOOSH) make/ie.json
 
-flotr2: libraries ie $(SMOOSH)
+build: libraries ie $(SMOOSH)
 	$(SMOOSH) make/flotr2.json
+	$(SMOOSH) make/examples.json
+
+flotr2: build
 	cat build/lib.js build/flotr2.js > flotr2.js
 	cat build/lib.min.js > flotr2.min.js
 	cat build/flotr2.min.js >> flotr2.min.js
@@ -34,8 +37,7 @@ flotr2-basic: libraries ie $(SMOOSH)
 	cat build/lib.min.js > flotr2-basic.min.js
 	cat build/flotr2-basic.min.js >> flotr2-basic.min.js
 
-flotr-examples: $(SMOOSH)
-	$(SMOOSH) make/examples.json
+flotr2-examples: build
 	cp build/examples.min.js flotr2.examples.min.js
 	cp build/examples-types.js flotr2.examples.types.js
 

examples/examples.css

@@ -4,6 +4,11 @@ body {
   margin: 0px;
 }
 
+.CodeMirror {
+  font-family: 'Courier New', monospace !important;
+  font-size: 12px;
+}
+
 /* Example */
 
 .flotr-example {

examples/js/Editor.js

@@ -7,7 +7,6 @@
 
     T_CONTROLS =
       '<div class="controls">' +
-        '<button class="fiddle btn large primary">Fiddle</button>' +
         '<button class="run btn large primary">Run</button>' +
       '</div>',
     T_EDITOR = '<div class="editor"></div>',
@@ -139,9 +138,6 @@
       execute();
     }
 
-    controls.delegate('.fiddle', 'click', function () {
-      fiddle();
-    });
 
     // Error handling:
     window.onerror = function (message, url, line) {
@@ -217,47 +213,6 @@
       errors.html(html);
     }
 
-    function fiddle () {
-      var
-        url = 'http://jsfiddle.net/api/post/jquery/1.7/',
-        form = $('<form method="post" action="' + url + '" target="_blank"></form>'),
-        input;
-
-      // Resources
-      resources = [
-        'https://raw.github.com/HumbleSoftware/Flotr2/main/flotr2.min.js',
-        'https://raw.github.com/HumbleSoftware/Flotr2/main/examples/examples.css'
-      ];
-      input = $('<input type="hidden" name="resources">')
-        .attr('value', resources.join(','));
-      form.append(input);
-
-      // HTML
-      input = $('<input type="hidden" name="html">')
-        .attr('value', '<div id="'+renderId+'"></div>');
-      form.append(input);
-
-      // CSS
-      input = $('<input type="hidden" name="normalize_css" value="no">')
-      form.append(input);
-      input = $('<input type="hidden" name="css">')
-        .attr('value',
-          '#'+renderId+' {\n  width: 340px;\n  height: 220px;' +
-          '\n  margin: 24px auto;\n}'
-        );
-      form.append(input);
-
-      // JS
-      input = $('<input type="hidden" name="js">')
-        .attr('value', '$(function () {\n' + example + '\n});');
-
-      form.append(input);
-
-      // Submit
-      form.append(input);
-      $(document.body).append(form);
-      form.submit();
-    }
 
     COUNT++;
 

examples/js/Examples.js

@@ -69,7 +69,7 @@ Examples.prototype = {
         "basic-axis",
         "basic-bars",
         "basic-bars-horizontal",
-        "basic-bar-stacked",
+        "basic-bars-stacked",
         "basic-stacked-horizontal",
         "basic-pie",
         "basic-radar",

package.json

@@ -18,9 +18,10 @@
     "lib": "lib"
   },
   "scripts": {
-    "test": "playwright test",
-    "test:headed": "playwright test --headed",
-    "test:debug": "playwright test --debug"
+    "build": "make build",
+    "test": "npm run build && playwright test",
+    "test:headed": "npm run build && playwright test --headed",
+    "test:debug": "npm run build && playwright test --debug"
   },
   "devDependencies": {
     "@playwright/test": "^1.40.0",

scripts/release.sh

@@ -32,6 +32,9 @@ echo "Updating CHANGELOG.md..."
 mv CHANGELOG_NEW.md CHANGELOG.md
 
 echo ""
+echo "Running tests..."
+make test
+
 echo "Building assets..."
 make flotr2
 

tests/examples.spec.js

@@ -0,0 +1,44 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Built Examples Tests', () => {
+
+  test('examples page loads without errors', async ({ page }) => {
+    // Listen for console errors
+    const errors = [];
+    page.on('console', msg => {
+      if (msg.type() === 'error') {
+        errors.push(msg.text());
+      }
+    });
+
+    await page.goto('/examples/dev.html');
+
+    // Wait for page to load
+    await page.waitForLoadState('networkidle');
+
+    // Check for console errors
+    expect(errors).toEqual([]);
+
+    // Check that Flotr is defined
+    const flotrDefined = await page.evaluate(() => typeof window.Flotr !== 'undefined');
+    expect(flotrDefined).toBe(true);
+
+    // Take snapshot
+    await expect(page).toHaveScreenshot('examples-page-loads.png');
+  });
+
+  test('can load and render a basic example', async ({ page }) => {
+    await page.goto('/examples/dev.html');
+    await page.waitForLoadState('networkidle');
+
+    // Wait for examples to load and click first thumbnail
+    await page.waitForSelector('.flotr-examples-thumb');
+    await page.click('.flotr-examples-thumb:first-child');
+
+    // Wait for example to load
+    await page.waitForSelector('.flotr-example canvas');
+
+    // Take snapshot of rendered example
+    await expect(page).toHaveScreenshot('basic-example-rendered.png');
+  });
+});

tests/test-page.html

@@ -9,7 +9,8 @@
 </head>
 <body>
     <div id="chart"></div>
-    <script src="../flotr2.js?3"></script>
+    <script src="../build/lib.js"></script>
+    <script src="../build/flotr2.js"></script>
     <script>
         /*
       const data = [[0, 0], [1, 4], [2, 8], [3, 6], [4, 10], [5, 7]];

tests/visual-regression.spec.html

@@ -12,7 +12,8 @@
 
     <!-- Load Flotr2 and dependencies -->
     <script src="../examples/lib/randomseed.js"></script>
-    <script src="../flotr2.js"></script>
+    <script src="../build/lib.js"></script>
+    <script src="../build/flotr2.js"></script>
 
     <!-- Load example system -->
     <script src="../examples/js/ExampleList.js"></script>
@@ -44,4 +45,4 @@
     <script src="../examples/js/examples/negative-values.js"></script>
     <script src="../examples/js/examples/profile-bars.js"></script>
 </body>
-</html>
+</html>