Merge pull request #156 from azmeuk/better-tests

Unit tests

jest.config.js

@@ -5,4 +5,5 @@ module.exports = {
     "^.+\\.js$": "babel-jest",
   },
   moduleFileExtensions: ["js", "svelte", "ts"],
+  testEnvironment: "jsdom",
 }

package.json

@@ -7,15 +7,17 @@
   "main": "dist/index.js",
   "devDependencies": {
     "@babel/core": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-env": "^7.16.11",
     "@rollup/plugin-commonjs": "^12.0.0",
     "@rollup/plugin-node-resolve": "^8.0.0",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/svelte": "^3.0.3",
-    "@tsconfig/svelte": "^2.0.1",
-    "@types/jest": "^26.0.24",
+    "@tsconfig/svelte": "^3.0.0",
+    "@types/jest": "^27.4.1",
     "babel-jest": "^27.0.6",
     "bulma": "^0.9.3",
-    "jest": "^26.0.0",
+    "jest": "^27.0.0",
+    "jest-dom": "^4.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.1",
@@ -25,10 +27,10 @@
     "rollup-plugin-terser": "^5.1.2",
     "sirv-cli": "^0.4.4",
     "svelte": "^3.24.0",
-    "svelte-highlight": "^3.0.0",
-    "svelte-jester": "^1.7.0",
+    "svelte-highlight": "^6.0.1",
+    "svelte-jester": "^2.3.2",
     "svelte-preprocess": "^4.7.4",
-    "ts-jest": "^26.5.6",
+    "ts-jest": "^27.1.4",
     "typescript": "^4.3.5"
   },
   "scripts": {

src/App.svelte

@@ -1,5 +1,5 @@
 <script>
-  import solarized from "svelte-highlight/src/styles/solarized-light"
+  import solarized from "svelte-highlight/styles/solarized-light"
 
   import { onMount } from "svelte"
 

src/async.test.ts

@@ -0,0 +1,25 @@
+import { render, fireEvent, screen } from "@testing-library/svelte"
+import SimpleAutocomplete from "./SimpleAutocomplete.svelte"
+import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
+
+async function colors(keyword, nb_items_max) {
+    return ["White", "Red", "Yellow", "Green", "Blue", "Black", "Mät bläck", "<i>Jét Black</i>"]
+}
+
+test("at first, menu is empty", async () => {
+  const { component, container } = render(SimpleAutocomplete, {searchFunction: colors})
+
+  expect(await screen.queryByText('White')).not.toBeInTheDocument()
+  expect(await screen.queryByText('Red')).not.toBeInTheDocument()
+})
+
+test("even with the input is focused, the menu is empty", async () => {
+  const { component, container } = render(SimpleAutocomplete, {searchFunction: colors})
+  const queryInput = container.querySelector("input[type='text']");
+
+  await fireEvent.focus(queryInput)
+
+  expect(await screen.queryByText('White')).not.toBeInTheDocument()
+  expect(await screen.queryByText('Red')).not.toBeInTheDocument()
+})

src/demo/ActivityIndicatorExample.svelte

@@ -1,7 +1,7 @@
 <script>
   import Highlight from "svelte-highlight"
   import AutoComplete from "../SimpleAutocomplete.svelte"
-  import xml from "svelte-highlight/src/languages/xml"
+  import xml from "svelte-highlight/languages/xml"
 
   async function searchCountry(keyword) {
     const url =

src/demo/AdvancedExample.svelte

@@ -1,7 +1,7 @@
 <script>
   import AutoComplete from "../SimpleAutocomplete.svelte"
   import Highlight from "svelte-highlight"
-  import xml from "svelte-highlight/src/languages/xml"
+  import xml from "svelte-highlight/languages/xml"
 
   const colorList = [
     { id: 1, name: "White", code: "#FFFFFF" },

src/demo/AsyncExample.svelte

@@ -1,7 +1,7 @@
 <script>
   import AutoComplete from "../SimpleAutocomplete.svelte"
   import Highlight from "svelte-highlight"
-  import xml from "svelte-highlight/src/languages/xml"
+  import xml from "svelte-highlight/languages/xml"
 
   async function searchCountry(keyword) {
     const url =

src/demo/AsyncGeneratorExample.svelte

@@ -1,7 +1,7 @@
 <script>
   import AutoComplete from "../SimpleAutocomplete.svelte"
   import Highlight from "svelte-highlight"
-  import xml from "svelte-highlight/src/languages/xml"
+  import xml from "svelte-highlight/languages/xml"
 
   let selectedCountry
 

src/demo/AsyncPreloadedExample.svelte

@@ -1,7 +1,7 @@
 <script>
   import AutoComplete from "../SimpleAutocomplete.svelte"
   import Highlight from "svelte-highlight"
-  import xml from "svelte-highlight/src/languages/xml"
+  import xml from "svelte-highlight/languages/xml"
 
   async function searchCountry(keyword) {
     const url =

src/demo/CreatableExample.svelte

@@ -1,7 +1,7 @@
 <script>
   import AutoComplete from "../SimpleAutocomplete.svelte"
   import Highlight from "svelte-highlight"
-  import xml from "svelte-highlight/src/languages/xml"
+  import xml from "svelte-highlight/languages/xml"
 
   const colors = ["White", "Red", "Yellow", "Green", "Blue", "Black"]
   let selectedColor

src/demo/CustomFunctionsExample.svelte

@@ -1,7 +1,7 @@
 <script>
   import AutoComplete from "../SimpleAutocomplete.svelte"
   import Highlight from "svelte-highlight"
-  import xml from "svelte-highlight/src/languages/xml"
+  import xml from "svelte-highlight/languages/xml"
   const colors = [
     { id: 1, name: "White", code: "#FFFFFF", nice: false, order: 4 },
     { id: 2, name: "Red", code: "#FF0000", nice: true, order: 3 },

src/demo/CustomizationExample.svelte

@@ -1,7 +1,7 @@
 <script>
   import AutoComplete from "../SimpleAutocomplete.svelte"
   import Highlight from "svelte-highlight"
-  import xml from "svelte-highlight/src/languages/xml"
+  import xml from "svelte-highlight/languages/xml"
 
   const colorList = [
     { id: 1, name: "White", code: "#FFFFFF" },

src/demo/LockedExample.svelte

@@ -1,7 +1,7 @@
 <script>
   import AutoComplete from "../SimpleAutocomplete.svelte"
   import Highlight from "svelte-highlight"
-  import xml from "svelte-highlight/src/languages/xml"
+  import xml from "svelte-highlight/languages/xml"
 
   let selectedColor
   const colors = ["White", "Red", "Yellow", "Green", "Blue", "Black"]

src/demo/MatchingStrategyExample.svelte

@@ -1,7 +1,7 @@
 <script>
   import AutoComplete from "../SimpleAutocomplete.svelte"
   import Highlight from "svelte-highlight"
-  import xml from "svelte-highlight/src/languages/xml"
+  import xml from "svelte-highlight/languages/xml"
 
   const animals = [
     "White Rabbit",

src/demo/MultipleExample.svelte

@@ -1,7 +1,7 @@
 <script>
   import AutoComplete from "../SimpleAutocomplete.svelte"
   import Highlight from "svelte-highlight"
-  import xml from "svelte-highlight/src/languages/xml"
+  import xml from "svelte-highlight/languages/xml"
 
   const colorList = [
     { id: 1, name: "White", code: "#FFFFFF" },

src/demo/RequiredExample.svelte

@@ -1,7 +1,7 @@
 <script>
   import AutoComplete from "../SimpleAutocomplete.svelte"
   import Highlight from "svelte-highlight"
-  import xml from "svelte-highlight/src/languages/xml"
+  import xml from "svelte-highlight/languages/xml"
 
   let selectedColor
   const colors = [

src/demo/SimpleExample.svelte

@@ -1,7 +1,7 @@
 <script>
   import AutoComplete from "../SimpleAutocomplete.svelte"
   import Highlight from "svelte-highlight"
-  import xml from "svelte-highlight/src/languages/xml"
+  import xml from "svelte-highlight/languages/xml"
 
   let selectedColor
   let colors = ["White", "Red", "Yellow", "Green", "Blue", "Black", "Mät bläck", "<i>Jét Black</i>"]

src/sync.test.ts

@@ -0,0 +1,59 @@
+import { render, fireEvent, screen } from "@testing-library/svelte"
+import SimpleAutocomplete from "./SimpleAutocomplete.svelte"
+import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
+
+const colors = ["White", "Red", "Yellow", "Green", "Blue", "Black", "Mät bläck", "<i>Jét Black</i>"]
+
+test("items are generated but hidden", async () => {
+  const { component, container } = render(SimpleAutocomplete, {items: colors})
+
+  expect(await screen.queryByText('White')).toBeInTheDocument()
+  expect(await screen.queryByText('White')).not.toBeVisible()
+  expect(await screen.queryByText('Red')).toBeInTheDocument()
+  expect(await screen.queryByText('Red')).not.toBeVisible()
+})
+
+test("on focus, menu is shown with all the elements", async () => {
+  const { component, container } = render(SimpleAutocomplete, {items: colors})
+  const queryInput = container.querySelector("input[type='text']");
+
+  await fireEvent.focus(queryInput)
+
+  expect(await screen.queryByText('White')).toBeInTheDocument()
+  expect(await screen.queryByText('White')).toBeVisible()
+  expect(await screen.queryByText('Red')).toBeInTheDocument()
+  expect(await screen.queryByText('Red')).toBeVisible()
+})
+
+test("when something is queried, only the matching items are shown", async () => {
+  const { component, container } = render(SimpleAutocomplete, {items: colors})
+  const queryInput = container.querySelector("input[type='text']");
+
+  await fireEvent.input(queryInput, { target: { value: "white" } })
+
+  expect(await screen.queryByText('White')).toBeInTheDocument()
+  expect(await screen.queryByText('White')).toBeVisible()
+  expect(await screen.queryByText('Red')).not.toBeInTheDocument()
+})
+
+test("when nothing matches the query, no item is show", async () => {
+  const { component, container } = render(SimpleAutocomplete, {items: colors})
+  const queryInput = container.querySelector("input[type='text']");
+
+  await fireEvent.input(queryInput, { target: { value: "not-a-color" } })
+
+  expect(await screen.queryByText('White')).not.toBeInTheDocument()
+  expect(await screen.queryByText('Red')).not.toBeInTheDocument()
+})
+
+test("when something is queried, the query is highlighted", async () => {
+  const { component, container } = render(SimpleAutocomplete, {items: colors})
+  const queryInput = container.querySelector("input[type='text']");
+  const list = container.querySelector("autocomplete-list");
+
+  await fireEvent.input(queryInput, { target: { value: "whi" } })
+
+  const white_item = (await screen.queryByText('Whi')).closest(".autocomplete-list-item")
+  expect(white_item).toContainHTML('<b>Whi</b>te')
+})

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
-    "types": ["node", "svelte", "jest"]
+    "types": ["node", "svelte", "jest", "@types/testing-library__jest-dom"]
   }
 }