07 unit testing revision

07-unit-testing/README.md

@@ -2,7 +2,7 @@
 
 # Step By Step Guide
 
-- This example will take a starting point _00-scratch-typescript_
+- This example will take a starting point _00-boiler-typescript_
 
 - Let's install the packages.
 
@@ -12,7 +12,7 @@ npm install
 
 - Let's create a plain vanilla function (no markup):
 
-_./greet.business.ts_
+_./src/greet.business.ts_
 
 ```ts
 export const greetSomebody = (dude: string): string => {
@@ -22,7 +22,7 @@ export const greetSomebody = (dude: string): string => {
 
 - And let's create a simple component
 
-_./greet.svelte_
+_./src/greet.svelte_
 
 ```ts
 <h1>Hello Human !</h1>
@@ -43,13 +43,13 @@ npm install -D vitest
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
-+    "test": "npx vitest"
++   "test": "vitest"
   },
 ```
 
 - Let's add a simple test to our greet business function.
 
-_./greet.business.spec.ts_
+_./src/greet.business.spec.ts_
 
 ```ts
 import { greetSomebody } from "./greet.business";
@@ -72,19 +72,19 @@ npm install -D @types/jest
   _describe_ and _it_, let's ask vitest to use globals, let's update our
   vite config:
 
-_./vite.config.js_
+_./vite.config.ts_
 
 ```diff
-import { defineConfig } from 'vite'
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [svelte()],
-+ test: {
-+   globals: true,
-+ }
-})
+  import { defineConfig } from 'vite'
+  import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+  // https://vitejs.dev/config/
+  export default defineConfig({
+    plugins: [svelte()],
++   test: {
++     globals: true,
++   }
+  })
 ```
 
 We get TypeScript errors on the vite.config why? because test
@@ -93,27 +93,27 @@ from the original one and extend it:
 
 > [More info](https://stackoverflow.com/questions/72146352/vitest-defineconfig-test-does-not-exist-in-type-userconfigexport)
 
-_./vite.config.js_
+_./vite.config.ts_
 
 ```diff
-import { defineConfig } from "vite";
-import { svelte } from "@sveltejs/vite-plugin-svelte";
+  import { defineConfig } from "vite";
+  import { svelte } from "@sveltejs/vite-plugin-svelte";
 + import type { UserConfig as VitestUserConfigInterface } from 'vitest/config';
 
 
 + const vitestConfig: VitestUserConfigInterface = {
-+  test: {
-+    globals: true
-+  }
-+};
++   test: {
++     globals: true
++   }
++ };
 
-// https://vitejs.dev/config/
-export default defineConfig({
+  // https://vitejs.dev/config/
+  export default defineConfig({
   plugins: [svelte()],
--  test: {
--    globals: true,
--  }
-+  test: vitestConfig.test
+-   test: {
+-     globals: true,
+-   }
++   test: vitestConfig.test
 });
 ```
 
@@ -139,8 +139,9 @@ _./package.json_
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
+-   "test": "npx vitest"
     "test": "npx vitest",
-+   "coverage": "npx vitest run --coverage"
++   "coverage": "vitest run --coverage"
   },
 ```
 
@@ -197,19 +198,18 @@ npm install -D @testing-library/jest-dom jsdom
 _./vite.config.ts_
 
 ```diff
-const vitestConfig: VitestUserConfigInterface = {
-  test: {
-    globals: true,
-+    environment: "jsdom",
-  },
-
-};
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [svelte()],
-  test: vitestConfig.test,
-});
+  const vitestConfig: VitestUserConfigInterface = {
+    test: {
+      globals: true,
++     environment: "jsdom",
+    },
+  };
+
+  // https://vitejs.dev/config/
+  export default defineConfig({
+    plugins: [svelte()],
+    test: vitestConfig.test,
+  });
 ```
 
 - Let's run the tests again
@@ -218,7 +218,7 @@ export default defineConfig({
 npm run test
 ```
 
-- Hurra ! We got a new error! :-@: _Error: Invalid Chai property: toBeInTheDocument_
+- Hurray! We got a new error! :-@: _Error: Invalid Chai property: toBeInTheDocument_
 
 We are using Jest matchers not chai, we need to add some extra config
 to get this working.
@@ -234,22 +234,22 @@ import "@testing-library/jest-dom";
 And let's indicate in our vite config that we are going to use this
 setup file:
 
-_./vite.config.js_
+_./vite.config.ts_
 
 ```diff
-const vitestConfig: VitestUserConfigInterface = {
-  test: {
-    globals: true,
-    environment: "jsdom",
-+    setupFiles: ["src/setuptest.ts"],
-  },
-};
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [svelte()],
-  test: vitestConfig.test,
-});
+  const vitestConfig: VitestUserConfigInterface = {
+    test: {
+      globals: true,
+      environment: "jsdom",
++     setupFiles: ["src/setuptest.ts"],
+    },
+  };
+
+  // https://vitejs.dev/config/
+  export default defineConfig({
+    plugins: [svelte()],
+    test: vitestConfig.test,
+  });
 ```
 
 And now we got it working (you can try changing the _hello human !_ literal
@@ -279,12 +279,11 @@ import Greet from "./greet.svelte";
 
 describe("greet component", () => {
   it("should render", () => {
--    render(Greet);
-+    render(Greet, {name: 'John'});
-
--    const heading = screen.getByText("Hello Human !");
-+    const heading = screen.getByText("Hello John !");
+-   render(Greet);
++   render(Greet, { name: "John" });
 
+-   const heading = screen.getByText("Hello Human !");
++   const heading = screen.getByText("Hello John !");
 
     expect(heading).toBeInTheDocument();
   });

07-unit-testing/package.json

@@ -20,7 +20,7 @@
     "@vitest/coverage-c8": "^0.22.1",
     "jsdom": "^20.0.0",
     "prettier-plugin-svelte": "^2.7.0",
-    "svelte": "^3.49.0",
+    "svelte": "^3.50.1",
     "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.0",