2a:null 2b:["$","title",null,{"children":"Javascript Testing Resources | NDP | Observable"}] 30:T4b1,html` `31:T19cd,ol = `

Test launchers are used to launch your tests in the browser or Node.js with user config. (Karma, Jasmine, Jest, TestCafe, Cypress, webdriverio)
Testing structure providers help you arrange your tests in a readable and scalable way. (Mocha, Jasmine, Jest, Cucumber, TestCafe, Cypress)
Assertion functions are used to check if a test returns what you expect it to return and if its’t it throws a clear exception. (Chai, Jasmine, Jest, Unexpected, TestCafe, Cypress)
Generate and display test progress and summary. (Mocha, Jasmine, Jest, Karma, TestCafe, Cypress)
Mocks, spies, and stubs to simulate tests scenarios, isolate the tested part of the software from other parts, and attach to processes to see they work as expected. (Sinon, Jasmine, enzyme, Jest, testdouble)
Generate and compare snapshots to make sure changes to data structures from previous test runs are intended by the user’s code changes. (Jest, Ava)
Generate code coverage reports of how much of your code is covered by tests. (Istanbul, Jest, Blanket)
Browser Controllers simulate user actions for Functional Tests. (Nightwatch, Nightmare, Phantom, Puppeteer, TestCafe, Cypress)
Visual Regression Tools are used to compare your site to its previous versions visually by using image comparison techniques.
(Applitools, Percy, Wraith, WebdriverCSS)

` 32:[] 2e:{"id":"3a6f42b8ef185f57","slug":"javascript-testing-resources","title":"Javascript Testing Resources","thumbnail":"b8d39f20b8061609ec64c6fc62f0aeee7ad96eda2147073fa34f3fe63f452459","access_level":"public","create_time":"$D2021-04-01T20:49:13.167Z","update_time":"$D2021-04-05T21:05:42.228Z","view_time":null,"first_public_time":"$D2021-04-05T19:54:06.683Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f58f6aafaf140a3a","login":"ndp","name":"NDP","avatar_url":"https://avatars-next.observableusercontent.com/4c7dc5fd8409bd097671eaebb99af5e6663faf664d04297ecda19cb33f7baabd","tier":"starter_2024"},"version":619,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2eecc93c23905517","login":"ndp","name":"NDP","avatar_url":"https://avatars-next.observableusercontent.com/4c7dc5fd8409bd097671eaebb99af5e6663faf664d04297ecda19cb33f7baabd","tier":null}],"members":[{"type":"individual","id":"2eecc93c23905517","login":"ndp","name":"NDP","avatar_url":"https://avatars-next.observableusercontent.com/4c7dc5fd8409bd097671eaebb99af5e6663faf664d04297ecda19cb33f7baabd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Javascript Testing Resources","cells":[{"id":0,"value":"md`# Javascript Testing Resources\n\n\na visualization of [this excellent reference by Vitali Zaidman](https://medium.com/welldone-software/an-overview-of-javascript-testing-7ce7298b9870). Upon stumbling on this medium post, I was curious to do more with the data. FWIW, I'd started a similar post a few years back, but wasn't able to bring the coherence that Mr. Zaidman has. \n\nThis page is a small riff on his work. So far, I figured out how to build HTML tables in d3.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"md`# Test Tools Types\n\nFirst off, a summary of the test tool types in a scannable table. This is not the greatest\nvisualization, but for getting the lay-of-the-land, it can be useful:`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"{ \n const tbl = d3.select(html`

`);\n \n tbl.append('thead')\n .selectAll('td')\n .data(() => ['Name', ...features])\n .join('th')\n .text(d => d)\n \n const tbody = tbl\n .append('tbody')\n .selectAll('tr')\n .data(tools)\n .join('tr')\n\n const cells = tbody\n .selectAll('td')\n .data((a) => {\n return [a, ...features.map(f => toolFeatures[a].has(f) ? '✔' : '‧')]\n })\n .join('td')\n .html((d,i) => i == 0 \n ? `${d}`\n : d)\n \n return tbl.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":441,"value":"md`\n## Source data\n\n\\`ol\\` is the raw HTML copied from the website, and then we parse it into a \\`raw\\` structure. That is then broken into simpler hash tables that are easay to deal with.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"olParsed = new window.DOMParser().parseFromString(ol, 'text/html')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"raw = d3.map(olParsed.getElementsByTagName('LI'),\n li => (\n {\n feature: li.getElementsByTagName('STRONG')[0].innerHTML ,\n tools: d3.map(li.getElementsByTagName('A'), a => ({\n name: a.innerHTML,\n link: a.href\n }))\n }\n ))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"features = d3.reduce(raw,(a,t) => {\n if (!a.includes(t.feature)) a.push(t.feature)\n return a\n}, [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"tools = [...d3.reduce(raw, (a,f) => {\n f.tools.forEach(t => {\n a.add(t.name)\n })\n return a\n},new Set())].sort((a,b) => a.toUpperCase() < b.toUpperCase() ? -1 : 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"toolLinks = {\n return d3.reduce(raw, (a,f) => {\n f.tools.forEach(t => {\n a[t.name] = t.link\n })\n return a\n},{})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":298,"value":"toolFeatures = {\n return d3.reduce(raw, (a,f) => {\n f.tools.forEach(t => {\n a[t.name] = a[t.name] || new Set()\n a[t.name].add(f.feature) \n })\n return a\n},{})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"