{"html_url": "https://github.com/simonw/datasette/issues/1165#issuecomment-753033121", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1165", "id": 753033121, "node_id": "MDEyOklzc3VlQ29tbWVudDc1MzAzMzEyMQ==", "user": {"value": 154364, "label": "dracos"}, "created_at": "2020-12-31T19:33:47Z", "updated_at": "2020-12-31T19:33:47Z", "author_association": "NONE", "body": "Sorry to go on about it, but it's my only example ;) And thought it might be of interest/use. Here is FixMyStreet's Cypress workflow https://github.com/mysociety/fixmystreet/blob/master/.github/workflows/cypress.yml with the master script that sets up server etc at https://github.com/mysociety/fixmystreet/blob/master/bin/browser-tests (that has features such as working inside/outside Vagrant, and can do JS code coverage) and then the tests are at https://github.com/mysociety/fixmystreet/tree/master/.cypress/cypress/integration", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 776635426, "label": "Mechanism for executing JavaScript unit tests"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1165#issuecomment-752846267", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1165", "id": 752846267, "node_id": "MDEyOklzc3VlQ29tbWVudDc1Mjg0NjI2Nw==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-12-31T05:10:41Z", "updated_at": "2020-12-31T05:13:14Z", "author_association": "OWNER", "body": "https://github.com/PostHog/posthog/tree/master/cypress/integration has some useful examples, linked from this article: https://posthog.com/blog/cypress-end-to-end-tests\r\n\r\nAlso useful: their workflow https://github.com/PostHog/posthog/blob/master/.github/workflows/e2e.yml", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 776635426, "label": "Mechanism for executing JavaScript unit tests"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1165#issuecomment-752839433", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1165", "id": 752839433, "node_id": "MDEyOklzc3VlQ29tbWVudDc1MjgzOTQzMw==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-12-31T04:29:40Z", "updated_at": "2020-12-31T04:29:40Z", "author_association": "OWNER", "body": "Important to absorb the slightly bizarre assertion syntax from Chai - docs here https://www.chaijs.com/api/bdd/", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 776635426, "label": "Mechanism for executing JavaScript unit tests"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1165#issuecomment-752828851", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1165", "id": 752828851, "node_id": "MDEyOklzc3VlQ29tbWVudDc1MjgyODg1MQ==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-12-31T03:19:38Z", "updated_at": "2020-12-31T03:19:38Z", "author_association": "OWNER", "body": "I got Cypress working! I added the `datasette.plugins` code to the table template and ran a test called `plugins.spec.js` using the following:\r\n```javascript\r\ncontext('datasette.plugins API', () => {\r\n    beforeEach(() => {\r\n      cy.visit('/fixtures/compound_three_primary_keys')\r\n    });\r\n    it('should exist', () => {\r\n        let datasette;\r\n        cy.window().then(win => {\r\n            datasette = win.datasette;\r\n        }).then(() => {\r\n            expect(datasette).to.exist;\r\n            expect(datasette.plugins).to.exist;\r\n        });\r\n    });\r\n    it('should register and execute plugins', () => {\r\n        let datasette;\r\n        cy.window().then(win => {\r\n            datasette = win.datasette;\r\n        }).then(() => {\r\n            expect(datasette.plugins.call('numbers')).to.deep.equal([]);\r\n            // Register a plugin\r\n            datasette.plugins.register(\"numbers\", (a, b) => a + b, ['a', 'b']);\r\n            var result = datasette.plugins.call(\"numbers\", {a: 1, b: 2});\r\n            expect(result).to.deep.equal([3]);\r\n            // Second plugin\r\n            datasette.plugins.register(\"numbers\", (a, b) => a * b, ['a', 'b']);\r\n            var result2 = datasette.plugins.call(\"numbers\", {a: 1, b: 2});\r\n            expect(result2).to.deep.equal([3, 2]);\r\n        });\r\n    });\r\n});\r\n```", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 776635426, "label": "Mechanism for executing JavaScript unit tests"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1165#issuecomment-752780000", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1165", "id": 752780000, "node_id": "MDEyOklzc3VlQ29tbWVudDc1Mjc4MDAwMA==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-12-30T22:41:25Z", "updated_at": "2020-12-30T22:41:25Z", "author_association": "OWNER", "body": "Jest works with Puppeteer: https://jestjs.io/docs/en/puppeteer", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 776635426, "label": "Mechanism for executing JavaScript unit tests"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1165#issuecomment-752779820", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1165", "id": 752779820, "node_id": "MDEyOklzc3VlQ29tbWVudDc1Mjc3OTgyMA==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-12-30T22:40:28Z", "updated_at": "2020-12-30T22:40:28Z", "author_association": "OWNER", "body": "I don't know if Jest on the command-line is the right tool for this. It works for the `plugins.js` script but I'm increasingly going to want to start adding tests for browser JavaScript features - like the https://github.com/simonw/datasette/blob/0.53/datasette/static/table.js script - which will need to run in a browser.\r\n\r\nSo maybe I should just find a browser testing solution and figure out how to run that under CI in GitHub Actions. Maybe https://www.cypress.io/ ?", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 776635426, "label": "Mechanism for executing JavaScript unit tests"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1165#issuecomment-752779490", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1165", "id": 752779490, "node_id": "MDEyOklzc3VlQ29tbWVudDc1Mjc3OTQ5MA==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-12-30T22:38:43Z", "updated_at": "2020-12-30T22:38:43Z", "author_association": "OWNER", "body": "Turned that into a TIL: https://til.simonwillison.net/javascript/jest-without-package-json", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 776635426, "label": "Mechanism for executing JavaScript unit tests"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1165#issuecomment-752777744", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1165", "id": 752777744, "node_id": "MDEyOklzc3VlQ29tbWVudDc1Mjc3Nzc0NA==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-12-30T22:30:24Z", "updated_at": "2020-12-30T22:30:24Z", "author_association": "OWNER", "body": "https://www.valentinog.com/blog/jest/ was useful.\r\n\r\nI created a `static/__tests__` folder and added this file as `plugins.spec.js`:\r\n\r\n```javascript\r\nconst datasette = require(\"../plugins.js\");\r\n\r\ndescribe(\"Datasette Plugins\", () => {\r\n  test(\"it should have datasette.plugins\", () => {\r\n    expect(!!datasette.plugins).toEqual(true);\r\n  });\r\n  test(\"registering a plugin should work\", () => {\r\n    datasette.plugins.register(\"numbers\", (a, b) => a + b, [\"a\", \"b\"]);\r\n    var result = datasette.plugins.call(\"numbers\", { a: 1, b: 2 });\r\n    expect(result).toEqual([3]);\r\n    datasette.plugins.register(\"numbers\", (a, b) => a * b, [\"a\", \"b\"]);\r\n    var result2 = datasette.plugins.call(\"numbers\", { a: 1, b: 2 });\r\n    expect(result2).toEqual([3, 2]);\r\n  });\r\n});\r\n```\r\n\r\nIn `static/plugins.js` I put this:\r\n```javascript\r\nvar datasette = datasette || {};\r\ndatasette.plugins = (() => {\r\n    var registry = {};\r\n    return {\r\n        register: (hook, fn, parameters) => {\r\n            if (!registry[hook]) {\r\n                registry[hook] = [];\r\n            }\r\n            registry[hook].push([fn, parameters]);\r\n        },\r\n        call: (hook, args) => {\r\n            args = args || {};\r\n            var results = [];\r\n            (registry[hook] || []).forEach(([fn, parameters]) => {\r\n                /* Call with the correct arguments */\r\n                var result = fn.apply(fn, parameters.map(parameter => args[parameter]));\r\n                if (result !== undefined) {\r\n                    results.push(result);\r\n                }\r\n            });\r\n            return results;\r\n        }\r\n    };\r\n})();\r\n\r\nmodule.exports = datasette;\r\n```\r\nNote the `module.exports` line at the end.\r\n\r\nThen inside `static/` I ran the following command:\r\n\r\n```\r\n% npx jest -c '{}'\r\n PASS  __tests__/plugins.spec.js\r\n  Datasette Plugins\r\n    \u2713 it should have datasette.plugins (3 ms)\r\n    \u2713 registering a plugin should work (1 ms)\r\n\r\nTest Suites: 1 passed, 1 total\r\nTests:       2 passed, 2 total\r\nSnapshots:   0 total\r\nTime:        1.163 s\r\nRan all test suites.\r\n```\r\nThe `-c {}` was necessary because I didn't have a Jest configuration or a `package.json`.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 776635426, "label": "Mechanism for executing JavaScript unit tests"}, "performed_via_github_app": null}
{"html_url": "https://github.com/simonw/datasette/issues/1165#issuecomment-752757910", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1165", "id": 752757910, "node_id": "MDEyOklzc3VlQ29tbWVudDc1Mjc1NzkxMA==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-12-30T21:04:18Z", "updated_at": "2020-12-30T21:04:18Z", "author_association": "OWNER", "body": "https://jestjs.io/ looks worth trying here.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 776635426, "label": "Mechanism for executing JavaScript unit tests"}, "performed_via_github_app": null}