Add vitest (#50)

* yarn add vitest + @testing-library/svelte, create vite.config.ts

* write some first basic tests

* run vitest in CI on push + PR to main

* add test status readme badge

.github/workflows/test.yml

@@ -0,0 +1,28 @@
+name: Tests
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out repo
+        uses: actions/checkout@v2
+
+      - name: Set up node v17
+        uses: actions/setup-node@v2
+        with:
+          node-version: 17
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run tests
+        run: yarn test

package.json

@@ -15,16 +15,22 @@
     "preview": "svelte-kit preview",
     "package": "svelte-kit package",
     "serve": "yarn build && yarn preview",
-    "check": "svelte-check --ignore package"
+    "check": "svelte-check --ignore package",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^1.0.0-next.28",
-    "@sveltejs/kit": "^1.0.0-next.278",
-    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@sveltejs/kit": "^1.0.0-next.287",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.38",
+    "@testing-library/svelte": "^3.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.12.0",
+    "@vitest/ui": "^0.5.7",
     "eslint": "^8.9.0",
-    "eslint-plugin-svelte3": "^3.4.0",
+    "eslint-plugin-svelte3": "^3.4.1",
     "hastscript": "^7.0.2",
+    "jsdom": "^19.0.0",
     "mdsvex": "^0.10.5",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.6.0",
@@ -33,12 +39,13 @@
     "svelte": "^3.46.4",
     "svelte-check": "^2.4.5",
     "svelte-github-corner": "^0.1.0",
-    "svelte-preprocess": "^4.10.3",
+    "svelte-preprocess": "^4.10.4",
     "svelte-toc": "^0.2.6",
     "svelte2tsx": "^0.5.5",
     "tslib": "^2.3.1",
     "typescript": "^4.5.5",
-    "vite": "^2.8.4"
+    "vite": "^2.8.4",
+    "vitest": "^0.5.7"
   },
   "keywords": [
     "svelte",

readme.md

@@ -5,6 +5,7 @@
 
 <h4 align="center">
 
+[![Tests](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/a45b62c3-ea45-4cfd-9912-77ec4fc8d7e8/deploy-status)](https://app.netlify.com/sites/svelte-multiselect/deploys)
 [![NPM version](https://img.shields.io/npm/v/svelte-multiselect?color=blue&logo=NPM)](https://npmjs.com/package/svelte-multiselect)
 [![pre-commit.ci status](https://results.pre-commit.ci/badge/github/janosh/svelte-multiselect/main.svg)](https://results.pre-commit.ci/latest/github/janosh/svelte-multiselect/main)

tests/multiselect.test.ts

@@ -0,0 +1,60 @@
+import { fireEvent, render } from '@testing-library/svelte'
+import { expect, test } from 'vitest'
+import MultiSelect from '../src/lib'
+
+const options = [`Banana`, `Watermelon`, `Apple`, `Dates`, `Mango`]
+const placeholder = `Select fruits`
+
+test(`can focus input, enter text, toggle hidden options and select an option`, async () => {
+  const { getByPlaceholderText, getByText, container } = render(MultiSelect, {
+    options,
+    placeholder,
+  })
+
+  let ul_ops = container.querySelector(`ul.options`)
+
+  expect(ul_ops?.classList.contains(`hidden`)).to.equal(true)
+
+  const input = getByPlaceholderText(`Select fruits`)
+  await fireEvent.focus(input)
+  await fireEvent.input(input, { target: { value: `Apple` } })
+
+  // use :last-child here cause for some reason there are two ul.options after toggling showOptions
+  // even though {#key showOptions} is supposed to destroy old DOM nodes
+  ul_ops = container.querySelector(`ul.options:last-child`)
+  expect(ul_ops?.classList.contains(`hidden`)).to.equal(false)
+
+  const apple_op = getByText(`Apple`, {
+    selector: `ul:last-child.options > li`,
+  })
+
+  await fireEvent.mouseDown(apple_op)
+
+  const apple_sel = getByText(`Apple`, { selector: `ul.selected > li` })
+  expect(apple_sel.textContent?.trim()).toBe(`Apple`)
+})
+
+test(`default export from index.ts is same as component file`, async () => {
+  const { default: comp } = await import(`../src/lib/MultiSelect.svelte`)
+  expect(comp).toBe(MultiSelect)
+})
+
+// TODO: requires component interaction before classes appear in DOM
+// [`liSelectedClass`, `div.multiselect > ul.selected > li`],
+// [`liActiveOptionClass`, `div.multiselect > ul.options > li.active`],
+for (const [className, selector] of [
+  [`outerDivClass`, `div.multiselect`],
+  [`ulSelectedClass`, `div.multiselect > ul.selected`],
+  [`ulOptionsClass`, `div.multiselect > ul.options`],
+  [`liOptionClass`, `div.multiselect > ul.options > li`],
+]) {
+  test(`${className} attaches to correct DOM node`, async () => {
+    const { container } = render(MultiSelect, {
+      options,
+      [className]: `test-${className}`,
+    })
+
+    const dom_node = container.querySelector(`${selector}.test-${className}`)
+    expect(dom_node).toBeTruthy()
+  })
+}

vite.config.ts

@@ -0,0 +1,8 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  plugins: [svelte({ hot: !process.env.VITEST })],
+  test: {
+    environment: `jsdom`,
+  },
+}