From e799abb920ee97070ee43c1d50137300e1a4759e Mon Sep 17 00:00:00 2001 From: doug-wade Date: Thu, 10 Aug 2023 07:13:51 +0000 Subject: [PATCH] deploy: 402476d7989f3e809ef915d0a5321422d4189fee --- pages/new-website-guide/index.html | 94 ++++++++++++++++++++---- pages/writing-tests-guide/index.html | 104 +++++++++++++++++++++++++++ service-worker.js | 2 +- service-worker.js.map | 2 +- 4 files changed, 188 insertions(+), 14 deletions(-) create mode 100644 pages/writing-tests-guide/index.html diff --git a/pages/new-website-guide/index.html b/pages/new-website-guide/index.html index c79d5b3d..04e888a3 100644 --- a/pages/new-website-guide/index.html +++ b/pages/new-website-guide/index.html @@ -1,19 +1,89 @@ -

Creating a new website

-

First, run the scaffolding

-
$ npx @tybalt/cli scaffold eleventy --name my-website-name
+
+        
+        
+        
+        
+        
+
+        Creating a new website
+        
+        
+        
+        
+        
+        
+        
+        
+        
+    
+    
+        

+            
+            

+                
+                
Creating a new website

+
First, you'll need to decide what kind of website you want to use. Tybalt works well both in CSR (client-side rendered) and SSG (static site generated) application, and we provide scaffolding for either, using fastify and eleventy respectively. If you want to serve your website from a static hosting solution, like netlify or s3, you'll want to use the eleventy scaffold; if you want to host a running process on a server, use the fastify scaffold.

+
Once you've decided, run the scaffolding for the appropriate scaffold

+
npx @tybalt/cli scaffold eleventy --name my-website-name
+
+# OR
+
+npx @tybalt/cli scaffold fastify --name my-website-name
 

-
The save the cli locally

-
$ npm i -D @tybalt/cli
+
Luckily, both scaffolds are supported the same by the cli. Save it locally

+
npm i -D @tybalt/cli
 

 
And edit your package.json to set up a few basic tasks

 
{
-  "scripts": {
-    "build": "tybalt build",
-    "lint": "tybalt lint",
-    "test": "tybalt test",
-    "serve": "tybalt serve",
-    "prepare": "npm run lint && npm run build && npm run test"
-  }
+    "scripts": {
+        "build": "tybalt build",
+        "lint": "tybalt lint",
+        "test": "tybalt test",
+        "start": "tybalt serve",
+        "watch": "tybalt watch",
+        "prepare": "npm run lint && npm run build && npm run test"
+    }
 }
 

+
To see your example site, run npm run serve and navigate to

+
You can now run the following commands

+
npm test
+

+
This will run the unit tests, which are found in files with the extension .test.ts. For more details, see the "writing unit tests" guide.

+
npm start
+

+
This will start a local development server, and serve your application on port 3000. Generally, you want to run npm run watch while you have a server running with npm start so that you always get the latest version of your statics.

+
npm run build
+

+
This compiles your statics to make them ready to serve.

+
npm run lint
+

+
This will perform static analysis, which is checking your code for bugs.

+
npm run watch
+

+
This will start a watcher, which detects changes to your files and calls npm run build automatically.

+
This will also set up a prepare script, which describes the steps necessary to get a package ready for use.

+

+            

+            
+        

+        
+        
+        
+        
+        
+    
+
 
\ No newline at end of file
diff --git a/pages/writing-tests-guide/index.html b/pages/writing-tests-guide/index.html
new file mode 100644
index 00000000..8eb5520f
--- /dev/null
+++ b/pages/writing-tests-guide/index.html
@@ -0,0 +1,104 @@
+
+        
+        
+        
+        
+        
+
+        Writing tests
+        
+        
+        
+        
+        
+        
+        
+        
+        
+    
+    
+        

+            
+            

+                
+                
Writing tests

+
Tybalt comes with a unit testing framework built on top of jest. Jest, along with jsdom, give us the ability to simulate realistic browser environments without a browser, and give us tools for making assertions.

+
To write a test for a new component, first add a new file with a describe block

+
import { describe } from '@jest/globals';
+
+describe('my component', () => {
+    // TODO
+});
+

+
Then add tests!

+
To add a test to an existing file, add a new test block containing one or more expect statements

+
import { describe, expect, test } from '@jest/globals';
+
+describe('my component', () => {
+    test('true is not false', () => {
+      expect(true).not.toBe(false);
+    })
+});
+

+
To render a Tybalt component into a real dom node, use mount

+
import { describe, expect, test } from '@jest/globals';
+import { mount } from '@tybalt/test-utils';
+import { MyComponent } from '../src/my-component';
+
+describe('my component', () => {
+    test('my component has aria-label', () => {
+        const mockAriaLabel = 'mock aria-label value';
+
+        const wrapper = await mount(MyComponent, {
+            attributes,
+        });
+
+        expect(wrapper.getAttribute('aria-label')).toBeTruthy();
+    });
+});
+

+
In this example, we can start to see that the wrapper that is returned from mount is a dom node, so we can use the dom methods to access things we need to access to make assertions about our components. The wrapper is super powered, and also has some extra methods, like emitted() and shadowHtml(), which give a history of every event emitted by this component and access to a web component's shadow root, respectively.

+
For example, you can get access to the shadow root to make assertions about the state of the dom inside it and check the history of emitted events, even though those methods aren't usually on a web component

+
import { describe, expect, test } from '@jest/globals';
+import { mount } from '@tybalt/test-utils';
+import { MyComponent } from '../src/my-component';
+
+describe('my component', () => {
+    test('my component has aria-label', () => {
+        const slot = '<h1 slot="banner"></h1>';
+        const wrapper = await mount(MyComponent, {
+            slot,
+        });
+        wrapper.click();
+
+        expect(wrapper.shadowHtml()).toContain('<button');
+        expect(wrapper.emitted()).toHaveLength(1);
+    });
+});
+

+
You can find out more about the mount function and its associated wrapper in the @tybalt/test-utils docs.

+
There is also a flushPromises method. This is used for resolving all promises that are currently in the event loop. If you need to wait for a mocked api call to resolve, for instance, call flushPromises.

+

+            

+            
+        

+        
+        
+        
+        
+        
+    
+
+
\ No newline at end of file
diff --git a/service-worker.js b/service-worker.js
index b58befea..805e1059 100644
--- a/service-worker.js
+++ b/service-worker.js
@@ -1,2 +1,2 @@
-if(!self.define){let e,i={};const s=(s,n)=>(s=new URL(s+".js",n).href,i[s]||new Promise((i=>{if("document"in self){const e=document.createElement("script");e.src=s,e.onload=i,document.head.appendChild(e)}else e=s,importScripts(s),i()})).then((()=>{let e=i[s];if(!e)throw new Error(`Module ${s} didn’t register its module`);return e})));self.define=(n,c)=>{const t=e||("document"in self?document.currentScript.src:"")||location.href;if(i[t])return;let f={};const r=e=>s(e,t),a={module:{uri:t},exports:f,require:r};i[t]=Promise.all(n.map((e=>a[e]||r(e)))).then((e=>(c(...e),f)))}}define(["./workbox-13d8ee68"],(function(e){"use strict";e.setCacheNameDetails({prefix:"eleventy-plugin-pwa-v2"}),self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"css/base.css",revision:"2d42e9116679489cc8950582a981ff1f"},{url:"css/index.css",revision:"879260f0a1a89d6ea15da2089f024d68"},{url:"css/page.css",revision:"bd88ef01173d9f335892db78ffbafea8"},{url:"img/favico.png",revision:"c470398c2a6b403059bff6a83bf01bd6"},{url:"index.html",revision:"0f996a9cb2170588b1f5a75e03a59fcf"},{url:"pages/cli/index.html",revision:"fea751cdce636399817803640dca2e35"},{url:"pages/core/index.html",revision:"0411a31a1d22a068abf3d3c755b5e52f"},{url:"pages/eleventy-plugin/index.html",revision:"77188c67f1c9277901bac34bf5c9bf0e"},{url:"pages/esbuild-plugin/index.html",revision:"c68b2093b390e769bf45eaa36ab01bb0"},{url:"pages/eslint-plugin/index.html",revision:"1363168b813f9e6388b8d6bc473e6065"},{url:"pages/new-website-guide/index.html",revision:"c72fbd5c5c358035607830519c591025"},{url:"pages/parser/index.html",revision:"e3e060f7af28792aeac6651bae62e4f2"},{url:"pages/test-utils/index.html",revision:"64a9f3a8ac8b3b408cd57e3c639f66a8"},{url:"pages/validator/index.html",revision:"831ccb5432efa182f563f43a816fda52"},{url:"tybalt-out.js",revision:"55a5cbe48d23eecc349dc053d12e04bc"}],{}),e.registerRoute(/^.*\.(html|jpg|png|gif|webp|ico|svg|woff2|woff|eot|ttf|otf|ttc|json)$/,new e.StaleWhileRevalidate,"GET"),e.registerRoute(/^https?:\/\/fonts\.googleapis\.com\/css/,new e.StaleWhileRevalidate,"GET")}));
+if(!self.define){let e,i={};const s=(s,n)=>(s=new URL(s+".js",n).href,i[s]||new Promise((i=>{if("document"in self){const e=document.createElement("script");e.src=s,e.onload=i,document.head.appendChild(e)}else e=s,importScripts(s),i()})).then((()=>{let e=i[s];if(!e)throw new Error(`Module ${s} didn’t register its module`);return e})));self.define=(n,f)=>{const t=e||("document"in self?document.currentScript.src:"")||location.href;if(i[t])return;let a={};const r=e=>s(e,t),c={module:{uri:t},exports:a,require:r};i[t]=Promise.all(n.map((e=>c[e]||r(e)))).then((e=>(f(...e),a)))}}define(["./workbox-13d8ee68"],(function(e){"use strict";e.setCacheNameDetails({prefix:"eleventy-plugin-pwa-v2"}),self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"css/base.css",revision:"2d42e9116679489cc8950582a981ff1f"},{url:"css/index.css",revision:"879260f0a1a89d6ea15da2089f024d68"},{url:"css/page.css",revision:"bd88ef01173d9f335892db78ffbafea8"},{url:"img/favico.png",revision:"c470398c2a6b403059bff6a83bf01bd6"},{url:"index.html",revision:"0f996a9cb2170588b1f5a75e03a59fcf"},{url:"pages/cli/index.html",revision:"fea751cdce636399817803640dca2e35"},{url:"pages/core/index.html",revision:"0411a31a1d22a068abf3d3c755b5e52f"},{url:"pages/eleventy-plugin/index.html",revision:"77188c67f1c9277901bac34bf5c9bf0e"},{url:"pages/esbuild-plugin/index.html",revision:"c68b2093b390e769bf45eaa36ab01bb0"},{url:"pages/eslint-plugin/index.html",revision:"1363168b813f9e6388b8d6bc473e6065"},{url:"pages/new-website-guide/index.html",revision:"87b738c21e8f80362781f08a31400ad7"},{url:"pages/parser/index.html",revision:"e3e060f7af28792aeac6651bae62e4f2"},{url:"pages/test-utils/index.html",revision:"64a9f3a8ac8b3b408cd57e3c639f66a8"},{url:"pages/validator/index.html",revision:"831ccb5432efa182f563f43a816fda52"},{url:"pages/writing-tests-guide/index.html",revision:"a1665ff0d572cffa226c31a542b6e03f"},{url:"tybalt-out.js",revision:"55a5cbe48d23eecc349dc053d12e04bc"}],{}),e.registerRoute(/^.*\.(html|jpg|png|gif|webp|ico|svg|woff2|woff|eot|ttf|otf|ttc|json)$/,new e.StaleWhileRevalidate,"GET"),e.registerRoute(/^https?:\/\/fonts\.googleapis\.com\/css/,new e.StaleWhileRevalidate,"GET")}));
 //# sourceMappingURL=service-worker.js.map
diff --git a/service-worker.js.map b/service-worker.js.map
index bd28fda0..65eca66f 100644
--- a/service-worker.js.map
+++ b/service-worker.js.map
@@ -1 +1 @@
-{"version":3,"file":"service-worker.js","sources":["../../../../../../../tmp/8a45452e5a011093138e93e9034cb39d/service-worker.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/tybalt/tybalt/node_modules/workbox-routing/registerRoute.mjs';\nimport {StaleWhileRevalidate as workbox_strategies_StaleWhileRevalidate} from '/home/runner/work/tybalt/tybalt/node_modules/workbox-strategies/StaleWhileRevalidate.mjs';\nimport {setCacheNameDetails as workbox_core_setCacheNameDetails} from '/home/runner/work/tybalt/tybalt/node_modules/workbox-core/setCacheNameDetails.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/tybalt/tybalt/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/tybalt/tybalt/node_modules/workbox-precaching/precacheAndRoute.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\nworkbox_core_setCacheNameDetails({prefix: \"eleventy-plugin-pwa-v2\"});\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"css/base.css\",\n    \"revision\": \"2d42e9116679489cc8950582a981ff1f\"\n  },\n  {\n    \"url\": \"css/index.css\",\n    \"revision\": \"879260f0a1a89d6ea15da2089f024d68\"\n  },\n  {\n    \"url\": \"css/page.css\",\n    \"revision\": \"bd88ef01173d9f335892db78ffbafea8\"\n  },\n  {\n    \"url\": \"img/favico.png\",\n    \"revision\": \"c470398c2a6b403059bff6a83bf01bd6\"\n  },\n  {\n    \"url\": \"index.html\",\n    \"revision\": \"0f996a9cb2170588b1f5a75e03a59fcf\"\n  },\n  {\n    \"url\": \"pages/cli/index.html\",\n    \"revision\": \"fea751cdce636399817803640dca2e35\"\n  },\n  {\n    \"url\": \"pages/core/index.html\",\n    \"revision\": \"0411a31a1d22a068abf3d3c755b5e52f\"\n  },\n  {\n    \"url\": \"pages/eleventy-plugin/index.html\",\n    \"revision\": \"77188c67f1c9277901bac34bf5c9bf0e\"\n  },\n  {\n    \"url\": \"pages/esbuild-plugin/index.html\",\n    \"revision\": \"c68b2093b390e769bf45eaa36ab01bb0\"\n  },\n  {\n    \"url\": \"pages/eslint-plugin/index.html\",\n    \"revision\": \"1363168b813f9e6388b8d6bc473e6065\"\n  },\n  {\n    \"url\": \"pages/new-website-guide/index.html\",\n    \"revision\": \"c72fbd5c5c358035607830519c591025\"\n  },\n  {\n    \"url\": \"pages/parser/index.html\",\n    \"revision\": \"e3e060f7af28792aeac6651bae62e4f2\"\n  },\n  {\n    \"url\": \"pages/test-utils/index.html\",\n    \"revision\": \"64a9f3a8ac8b3b408cd57e3c639f66a8\"\n  },\n  {\n    \"url\": \"pages/validator/index.html\",\n    \"revision\": \"831ccb5432efa182f563f43a816fda52\"\n  },\n  {\n    \"url\": \"tybalt-out.js\",\n    \"revision\": \"55a5cbe48d23eecc349dc053d12e04bc\"\n  }\n], {});\n\n\n\n\nworkbox_routing_registerRoute(/^.*\\.(html|jpg|png|gif|webp|ico|svg|woff2|woff|eot|ttf|otf|ttc|json)$/, new workbox_strategies_StaleWhileRevalidate(), 'GET');\nworkbox_routing_registerRoute(/^https?:\\/\\/fonts\\.googleapis\\.com\\/css/, new workbox_strategies_StaleWhileRevalidate(), 'GET');\n\n\n\n\n"],"names":["workbox_core_setCacheNameDetails","prefix","self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_strategies_StaleWhileRevalidate"],"mappings":"0nBAoBAA,EAAAA,oBAAiC,CAACC,OAAQ,2BAG1CC,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,eACPC,SAAY,oCAEd,CACED,IAAO,gBACPC,SAAY,oCAEd,CACED,IAAO,eACPC,SAAY,oCAEd,CACED,IAAO,iBACPC,SAAY,oCAEd,CACED,IAAO,aACPC,SAAY,oCAEd,CACED,IAAO,uBACPC,SAAY,oCAEd,CACED,IAAO,wBACPC,SAAY,oCAEd,CACED,IAAO,mCACPC,SAAY,oCAEd,CACED,IAAO,kCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,qCACPC,SAAY,oCAEd,CACED,IAAO,0BACPC,SAAY,oCAEd,CACED,IAAO,8BACPC,SAAY,oCAEd,CACED,IAAO,6BACPC,SAAY,oCAEd,CACED,IAAO,gBACPC,SAAY,qCAEb,CAAE,GAKwBC,EAAAC,cAAC,wEAAyE,IAAIC,uBAA2C,OACzHF,EAAAC,cAAC,0CAA2C,IAAIC,uBAA2C"}
\ No newline at end of file
+{"version":3,"file":"service-worker.js","sources":["../../../../../../../tmp/62205b807d9d0462559c9990cf918a9e/service-worker.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/tybalt/tybalt/node_modules/workbox-routing/registerRoute.mjs';\nimport {StaleWhileRevalidate as workbox_strategies_StaleWhileRevalidate} from '/home/runner/work/tybalt/tybalt/node_modules/workbox-strategies/StaleWhileRevalidate.mjs';\nimport {setCacheNameDetails as workbox_core_setCacheNameDetails} from '/home/runner/work/tybalt/tybalt/node_modules/workbox-core/setCacheNameDetails.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/tybalt/tybalt/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/tybalt/tybalt/node_modules/workbox-precaching/precacheAndRoute.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\nworkbox_core_setCacheNameDetails({prefix: \"eleventy-plugin-pwa-v2\"});\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"css/base.css\",\n    \"revision\": \"2d42e9116679489cc8950582a981ff1f\"\n  },\n  {\n    \"url\": \"css/index.css\",\n    \"revision\": \"879260f0a1a89d6ea15da2089f024d68\"\n  },\n  {\n    \"url\": \"css/page.css\",\n    \"revision\": \"bd88ef01173d9f335892db78ffbafea8\"\n  },\n  {\n    \"url\": \"img/favico.png\",\n    \"revision\": \"c470398c2a6b403059bff6a83bf01bd6\"\n  },\n  {\n    \"url\": \"index.html\",\n    \"revision\": \"0f996a9cb2170588b1f5a75e03a59fcf\"\n  },\n  {\n    \"url\": \"pages/cli/index.html\",\n    \"revision\": \"fea751cdce636399817803640dca2e35\"\n  },\n  {\n    \"url\": \"pages/core/index.html\",\n    \"revision\": \"0411a31a1d22a068abf3d3c755b5e52f\"\n  },\n  {\n    \"url\": \"pages/eleventy-plugin/index.html\",\n    \"revision\": \"77188c67f1c9277901bac34bf5c9bf0e\"\n  },\n  {\n    \"url\": \"pages/esbuild-plugin/index.html\",\n    \"revision\": \"c68b2093b390e769bf45eaa36ab01bb0\"\n  },\n  {\n    \"url\": \"pages/eslint-plugin/index.html\",\n    \"revision\": \"1363168b813f9e6388b8d6bc473e6065\"\n  },\n  {\n    \"url\": \"pages/new-website-guide/index.html\",\n    \"revision\": \"87b738c21e8f80362781f08a31400ad7\"\n  },\n  {\n    \"url\": \"pages/parser/index.html\",\n    \"revision\": \"e3e060f7af28792aeac6651bae62e4f2\"\n  },\n  {\n    \"url\": \"pages/test-utils/index.html\",\n    \"revision\": \"64a9f3a8ac8b3b408cd57e3c639f66a8\"\n  },\n  {\n    \"url\": \"pages/validator/index.html\",\n    \"revision\": \"831ccb5432efa182f563f43a816fda52\"\n  },\n  {\n    \"url\": \"pages/writing-tests-guide/index.html\",\n    \"revision\": \"a1665ff0d572cffa226c31a542b6e03f\"\n  },\n  {\n    \"url\": \"tybalt-out.js\",\n    \"revision\": \"55a5cbe48d23eecc349dc053d12e04bc\"\n  }\n], {});\n\n\n\n\nworkbox_routing_registerRoute(/^.*\\.(html|jpg|png|gif|webp|ico|svg|woff2|woff|eot|ttf|otf|ttc|json)$/, new workbox_strategies_StaleWhileRevalidate(), 'GET');\nworkbox_routing_registerRoute(/^https?:\\/\\/fonts\\.googleapis\\.com\\/css/, new workbox_strategies_StaleWhileRevalidate(), 'GET');\n\n\n\n\n"],"names":["workbox_core_setCacheNameDetails","prefix","self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_strategies_StaleWhileRevalidate"],"mappings":"0nBAoBAA,EAAAA,oBAAiC,CAACC,OAAQ,2BAG1CC,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,eACPC,SAAY,oCAEd,CACED,IAAO,gBACPC,SAAY,oCAEd,CACED,IAAO,eACPC,SAAY,oCAEd,CACED,IAAO,iBACPC,SAAY,oCAEd,CACED,IAAO,aACPC,SAAY,oCAEd,CACED,IAAO,uBACPC,SAAY,oCAEd,CACED,IAAO,wBACPC,SAAY,oCAEd,CACED,IAAO,mCACPC,SAAY,oCAEd,CACED,IAAO,kCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,qCACPC,SAAY,oCAEd,CACED,IAAO,0BACPC,SAAY,oCAEd,CACED,IAAO,8BACPC,SAAY,oCAEd,CACED,IAAO,6BACPC,SAAY,oCAEd,CACED,IAAO,uCACPC,SAAY,oCAEd,CACED,IAAO,gBACPC,SAAY,qCAEb,CAAE,GAKwBC,EAAAC,cAAC,wEAAyE,IAAIC,uBAA2C,OACzHF,EAAAC,cAAC,0CAA2C,IAAIC,uBAA2C"}
\ No newline at end of file