Unit tests

.babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": [
+        ["@babel/preset-env", {"targets": {"node": "current"}}],
+        '@babel/preset-typescript',
+    ],
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-typescript',
+  ],
+};

jest-setup.ts

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@testing-library/jest-dom/extend-expect',
+  ],
+};

package.json

@@ -9,7 +9,9 @@
         "dev": "rollup -c -w",
         "start": "sirv public",
         "validate": "svelte-check",
-        "release": "dotenv release-it"
+        "release": "dotenv release-it",
+        "test": "jest src",
+        "test:watch": "npm run test -- --watch"
     },
     "release-it": {
         "hooks": {
@@ -31,16 +33,21 @@
     "author": "Malte Bonart",
     "license": "MIT",
     "devDependencies": {
+        "@babel/preset-typescript": "^7.16.7",
         "@fortawesome/free-regular-svg-icons": "^5.15.3",
         "@rollup/plugin-commonjs": "^19.0.0",
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^11.0.0",
         "@rollup/plugin-typescript": "^6.0.0",
+        "@testing-library/jest-dom": "^5.16.1",
+        "@testing-library/svelte": "^3.0.3",
         "@tsconfig/svelte": "^1.0.10",
         "@types/marked": "^2.0.3",
         "acorn": "^8.2.4",
+        "babel-jest": "^27.4.6",
         "css-tree": "^1.1.3",
         "dotenv-cli": "^4.0.0",
+        "jest": "^27.4.7",
         "postcss": "^8.3.5",
         "release-it": "^14.6.1",
         "rollup": "^2.39.0",
@@ -53,15 +60,18 @@
         "sirv-cli": "^1.0.0",
         "svelte": "^3.43.2",
         "svelte-check": "^1.0.0",
+        "svelte-jester": "^2.1.5",
         "svelte-preprocess": "^4.0.0",
         "tslib": "^2.0.0",
         "typescript": "^3.9.3"
     },
     "repository": "https://github.com/bonartm/quizdown-js",
     "main": "public/build/quizdown.js",
     "dependencies": {
+        "@babel/preset-env": "^7.16.8",
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
+        "@types/jest": "^27.4.0",
         "auto-bind": "^4.0.0",
         "dompurify": "^2.2.6",
         "highlight.js": "^10.7.0",
@@ -70,5 +80,18 @@
         "strip-indent": "^3.0.0",
         "svelte-i18n": "^3.3.9",
         "yaml": "2.0.0-5"
+    },
+    "jest": {
+        "transform": {
+            "^.+\\.js$": "babel-jest",
+            "^.+\\.svelte$": "svelte-jester"
+        },
+        "moduleFileExtensions": [
+            "js",
+            "svelte"
+        ],
+        "setupFilesAfterEnv": [
+            "./jest-setup.ts"
+        ]
     }
 }

src/components/Button.spec.js

@@ -0,0 +1,32 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import '@testing-library/jest-dom'
+
+import {render, fireEvent} from '@testing-library/svelte'
+
+import Button from "./Button.svelte";
+describe("Button component", () => {
+    window.alert = jest.fn();
+    window.alert.mockClear();
+
+    test("should confirm there is a button in the Button component ", () => {
+        const { container } = render(Button);
+        expect(container).toContainHTML("<button");
+        expect(container).toContainHTML("</button>");
+    });
+
+    test('show alert when the button gets clicked', async () => {
+        const { getByTestId, findByRole } = render(Button, {title: 'testButton'});
+        const button = getByTestId('testButton');
+
+        // Using await when firing events is unique to the svelte testing library because
+        // we have to wait for the next `tick` so that Svelte flushes all pending state changes.
+        await fireEvent.click(button)
+
+        const alertBox = findByRole('alert');
+
+        expect(alertBox).toBeInTheDocument;
+    });
+});

src/components/Button.svelte

@@ -4,7 +4,7 @@
     export let title = '';
 </script>
 
-<button title="{title}" disabled="{disabled}" on:click="{buttonAction}">
+<button data-testid="testButton" title="{title}" disabled="{disabled}" on:click="{buttonAction}">
     <slot />
 </button>
 

tsconfig.json

@@ -6,6 +6,13 @@
         "types": ["marked", "svelte"]
     },
 
-    "include": ["src/**/*"],
-    "exclude": ["node_modules/*", "__sapper__/*", "public/*", "docs/*"]
+    "include": [
+        "src/**/*",
+        "./jest-setup.module.ts"
+    ],
+    "exclude": [
+        "node_modules/*",
+        "__sapper__/*",
+        "public/*", "docs/*"
+    ]
 }