add vitest unit tests

package.json

@@ -15,39 +15,41 @@
     "preview": "vite preview",
     "serve": "yarn build && yarn preview",
     "check": "svelte-check",
-    "test": "playwright test"
+    "test": "vitest --run tests/unit/*.ts && playwright test tests/*.ts"
   },
   "devDependencies": {
     "@iconify/svelte": "^3.0.0",
-    "@playwright/test": "^1.25.1",
-    "@sveltejs/adapter-static": "^1.0.0-next.41",
-    "@sveltejs/kit": "^1.0.0-next.469",
+    "@playwright/test": "^1.26.1",
+    "@sveltejs/adapter-static": "^1.0.0-next.43",
+    "@sveltejs/kit": "^1.0.0-next.507",
     "@types/d3-array": "^3.0.3",
     "@types/d3-interpolate-path": "^2.0.0",
     "@types/d3-scale": "^4.0.2",
     "@types/d3-shape": "^3.1.0",
-    "@typescript-eslint/eslint-plugin": "^5.36.1",
-    "@typescript-eslint/parser": "^5.36.1",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
     "d3-array": "^3.2.0",
     "d3-interpolate-path": "^2.3.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.1.0",
-    "eslint": "^8.23.0",
+    "eslint": "^8.24.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.0.2",
+    "jsdom": "^20.0.0",
     "mdsvex": "^0.10.6",
     "prettier": "^2.7.1",
-    "prettier-plugin-svelte": "^2.7.0",
+    "prettier-plugin-svelte": "^2.7.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
-    "svelte": "^3.50.0",
-    "svelte-check": "^2.9.0",
+    "svelte": "^3.50.1",
+    "svelte-check": "^2.9.1",
     "svelte-github-corner": "^0.1.0",
-    "svelte-multiselect": "^6.0.0",
+    "svelte-multiselect": "^6.1.0",
     "svelte-preprocess": "^4.10.7",
-    "svelte2tsx": "^0.5.16",
-    "typescript": "^4.8.2",
-    "vite": "^3.1.0-beta.2"
+    "svelte2tsx": "^0.5.19",
+    "typescript": "^4.8.4",
+    "vite": "^3.1.4",
+    "vitest": "^0.23.4"
   },
   "keywords": [
     "svelte",

src/lib/ElementTile.svelte

@@ -21,6 +21,8 @@
   class:active
   style:background-color={bg_color}
   {style}
+  on:mouseenter
+  on:mouseleave
 >
   {#if show_number}
     <span class="atomic-number">

src/lib/PeriodicTable.svelte

@@ -36,8 +36,6 @@
       href={element.name.toLowerCase()}
       data-sveltekit-noscroll
       style="grid-column: {element.column}; grid-row: {element.row};"
-      on:mouseenter={set_active_element(element)}
-      on:mouseleave={set_active_element(null)}
       class:last-active={$last_element === element}
     >
       <ElementTile
@@ -48,6 +46,8 @@
         {value}
         {bg_color}
         {active}
+        on:mouseenter={set_active_element(element)}
+        on:mouseleave={set_active_element(null)}
       />
     </a>
   {/each}

src/routes/[slug]/+page.svelte

@@ -47,6 +47,7 @@
     'Boiling Point': `mdi:gas-cylinder`,
     'Covalent Radius': `mdi:atom`,
     'Electron Affinity': `mdi:electron-framework`,
+    'Electron Valency': `mdi:atom-variant`,
     'First Ionization Energy': `simple-line-icons:energy`,
     'Ionization Energies': `mdi:flash`,
     'Melting Point': `mdi:water-outline`,

tests/bohr-atoms.test.ts

@@ -9,6 +9,15 @@ test.describe(`Bohr Atoms page`, () => {
     expect(element_tiles).toHaveLength(element_data.length)
   })
 
+  test(`SVG elements have expected height`, async ({ page }) => {
+    await page.goto(`/bohr-atoms`, { waitUntil: `networkidle` })
+
+    const first_svg = await page.$(`ol > li > svg`)
+    const { height } = (await first_svg?.boundingBox()) ?? {}
+
+    expect(height).toBe(300)
+  })
+
   test(`can toggle orbiting electron animation`, async ({ page }) => {
     await page.goto(`/bohr-atoms`, { waitUntil: `networkidle` })
 

tests/unit/periodic-table.test.ts

@@ -0,0 +1,56 @@
+import PeriodicTable from '$lib/PeriodicTable.svelte'
+import { beforeEach, describe, expect, test } from 'vitest'
+
+beforeEach(() => {
+  document.body.innerHTML = ``
+})
+
+async function sleep(ms = 1) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+describe(`PeriodicTable`, () => {
+  test(`renders element tiles`, async () => {
+    new PeriodicTable({ target: document.body })
+
+    const element_tiles = document.querySelectorAll(`.element-tile`)
+    expect(element_tiles.length).toBe(118)
+  })
+
+  test(`has no text content when symbols, names and numbers are disabled`, async () => {
+    new PeriodicTable({
+      target: document.body,
+      props: {
+        show_symbols: false,
+        show_names: false,
+        show_numbers: false,
+        // style: `width: 500px; height: 100px;`,
+      },
+    })
+
+    const ptable = document.querySelector(`.periodic-table`)
+
+    expect(ptable?.textContent?.trim()).toBe(``)
+
+    // make sure empty tiles are still rendered
+    const symbol_tiles = document.querySelectorAll(`.element-tile`)
+    expect(symbol_tiles.length).toBe(118)
+  })
+
+  test(`hovered element tile has border`, async () => {
+    new PeriodicTable({ target: document.body })
+
+    const element_tile = document.querySelector(`.element-tile`)
+    if (!element_tile) {
+      throw new Error(`No element tile found`)
+    }
+
+    element_tile?.dispatchEvent(new MouseEvent(`mouseenter`))
+    await sleep()
+    expect([...element_tile.classList]).toContain(`active`)
+
+    element_tile?.dispatchEvent(new MouseEvent(`mouseleave`))
+    await sleep()
+    expect([...element_tile.classList]).not.toContain(`active`)
+  })
+})

vite.config.ts

@@ -1,7 +1,8 @@
 import { sveltekit } from '@sveltejs/kit/vite'
 import type { UserConfig } from 'vite'
+import type { UserConfig as VitestConfig } from 'vitest'
 
-const vite_config: UserConfig = {
+const vite_config: UserConfig & { test: VitestConfig } = {
   plugins: [sveltekit()],
 
   server: {
@@ -14,5 +15,9 @@ const vite_config: UserConfig = {
   preview: {
     port: 3000,
   },
+
+  test: {
+    environment: `jsdom`,
+  },
 }
 export default vite_config