From 825fed01c0f799ae41065b53298fc2b48c1d2fa9 Mon Sep 17 00:00:00 2001
From: Data5tream <6423657+Data5tream@users.noreply.github.com>
Date: Mon, 18 Mar 2024 19:15:44 +0100
Subject: [PATCH 01/12] Add unit tests for helpers

Add npm script for jest with coverage for easier testing and add some documentation to helpers.ts
---
 package.json                    |   3 +-
 src/slim-select/helpers.test.ts | 160 ++++++++++++++++++++++++++++++++
 src/slim-select/helpers.ts      |  54 ++++++++---
 3 files changed, 201 insertions(+), 16 deletions(-)
 create mode 100644 src/slim-select/helpers.test.ts

diff --git a/package.json b/package.json
index c823dfcd..0a1c1158 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,8 @@
     "build:library:js": "cd src/slim-select && rollup --config ./rollup.config.mjs && cd ../../",
     "build:library:css": "cd src/slim-select && sass ./slimselect.scss ../../dist/slimselect.css --style=compressed && cd ../../",
     "build:frameworks": "npm run build --workspaces",
-    "test": "jest"
+    "test": "jest",
+    "test:coverage": "jest --coverage"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
diff --git a/src/slim-select/helpers.test.ts b/src/slim-select/helpers.test.ts
new file mode 100644
index 00000000..fc0f4211
--- /dev/null
+++ b/src/slim-select/helpers.test.ts
@@ -0,0 +1,160 @@
+/**
+ * @jest-environment jsdom
+ */
+
+'use strict'
+import { describe, expect, test } from '@jest/globals'
+import { hasClassInTree, debounce, isEqual, kebabCase } from './helpers'
+
+describe('helpers module', () => {
+  describe('hasClassInTree', () => {
+    test('single element does not have class', () => {
+      const element = document.createElement('div')
+      element.className = 'invalid-class'
+
+      expect(hasClassInTree(element, 'test-class')).toBeNull()
+    })
+
+    test('single element has class', () => {
+      const element = document.createElement('div')
+      element.className = 'test-class'
+
+      expect(hasClassInTree(element, 'test-class')).toBe(element)
+
+      element.classList.add('class-2', 'class-3')
+      expect(hasClassInTree(element, 'test-class')).toBe(element)
+    })
+
+    test('single element has class as data id', () => {
+      const element = document.createElement('div')
+      element.dataset.id = 'test-class'
+
+      expect(hasClassInTree(element, 'test-class')).toBe(element)
+
+      element.classList.add('class-2', 'class-3')
+      expect(hasClassInTree(element, 'test-class')).toBe(element)
+    })
+
+    test('parent element does not have class', () => {
+      const element = document.createElement('div')
+      element.className = 'invalid-class'
+      const child = document.createElement('div')
+      element.appendChild(child)
+
+      expect(hasClassInTree(child, 'test-class')).toBeNull()
+    })
+
+    test('parent element has class', () => {
+      const element = document.createElement('div')
+      element.className = 'test-class'
+      const child = document.createElement('div')
+      element.appendChild(child)
+
+      expect(hasClassInTree(child, 'test-class')).toBe(element)
+
+      element.classList.add('class-2', 'class-3')
+      expect(hasClassInTree(child, 'test-class')).toBe(element)
+    })
+
+    test('parent element has class as data id', () => {
+      const element = document.createElement('div')
+      element.dataset.id = 'test-class'
+
+      const child = document.createElement('div')
+      element.appendChild(child)
+
+      expect(hasClassInTree(child, 'test-class')).toBe(element)
+
+      element.classList.add('class-2', 'class-3')
+      expect(hasClassInTree(child, 'test-class')).toBe(element)
+    })
+  })
+
+  describe('debounce', () => {
+    test('debounce calls function after default timeout', async () => {
+      const callback = jest.fn()
+      const debounced_function = debounce(callback)
+      debounced_function()
+
+      await new Promise(r => setTimeout(r, 100))
+
+      expect(callback).toHaveBeenCalled()
+      expect(callback).toHaveBeenCalledTimes(1)
+    })
+
+    test('debounce calls function after higher timeout', async () => {
+      const callback = jest.fn()
+      const debounced_function = debounce(callback, 100)
+      debounced_function()
+
+      await new Promise(r => setTimeout(r, 50))
+      expect(callback).not.toHaveBeenCalled()
+
+      await new Promise(r => setTimeout(r, 50))
+      expect(callback).toHaveBeenCalled()
+      expect(callback).toHaveBeenCalledTimes(1)
+    })
+
+    test('debounce calls function after lower timeout', async () => {
+      const callback = jest.fn()
+      const debounced_function = debounce(callback, 10)
+      debounced_function()
+
+      await new Promise(r => setTimeout(r, 5))
+      expect(callback).not.toHaveBeenCalled()
+
+      await new Promise(r => setTimeout(r, 5))
+      expect(callback).toHaveBeenCalled()
+      expect(callback).toHaveBeenCalledTimes(1)
+    })
+
+    test('debounce respects inmediate setting', () => {
+      const callback = jest.fn()
+      const debounced_function = debounce(callback, 1000, true)
+      debounced_function()
+
+      expect(callback).toHaveBeenCalled()
+      expect(callback).toHaveBeenCalledTimes(1)
+    })
+
+    test('debounce respects order of calls', async () => {
+      const callback = jest.fn(() => {
+      })
+      const debounced_function: (a: number) => void = debounce(callback)
+      debounced_function(0)
+      debounced_function(1)
+
+      await new Promise(r => setTimeout(r, 50))
+      expect(callback).toHaveBeenCalledTimes(1)
+      expect(callback.mock.calls[0]).toStrictEqual([1])
+    })
+  })
+
+  describe('isEqual', () => {
+    test('different objects are not equal', () => {
+      expect(isEqual({ a: 1 }, { b: 1 })).toBe(false)
+    })
+
+    test('equal objects are equal', () => {
+      expect(isEqual({ a: 1 }, { a: 1 })).toBe(true)
+    })
+
+    test('more complex objects are equal', () => {
+      expect(isEqual({ a: 1, b: { c: 'asdf' } }, { a: 1, b: { c: 'asdf' } })).toBe(true)
+    })
+  })
+
+  describe('kebabCase', () => {
+    test('kebab-case string', () => {
+      expect(kebabCase('kebab-case')).toBe('kebab-case')
+    })
+
+    test('camelCase string', () => {
+      expect(kebabCase('camelCase')).toBe('camel-case')
+    })
+
+    test('string with initial uppercase', () => {
+      expect(kebabCase('UpperCase')).toBe('upper-case')
+    })
+  })
+})
diff --git a/src/slim-select/helpers.ts b/src/slim-select/helpers.ts
index c6c1d40d..8c0742b5 100644
--- a/src/slim-select/helpers.ts
+++ b/src/slim-select/helpers.ts
@@ -1,9 +1,21 @@
-// Generate an 8 character random string
+/**
+ * Generate an 8 character random string
+ *
+ * @returns a random 8 character string
+ */
 export function generateID(): string {
   return Math.random().toString(36).substring(2, 10)
 }
 
-export function hasClassInTree(element: HTMLElement, className: string) {
+/**
+ * Check if a className exists on an element or any parent of the element
+ *
+ * @param element - the element to check
+ * @param className - the class name we are looking for
+ *
+ * @returns the element that has the class or `null` if the class was not found
+ */
+export function hasClassInTree(element: HTMLElement, className: string): HTMLElement | null {
   function hasClass(e: HTMLElement, c: string) {
     // If the element has the class return element
     if (c && e && e.classList && e.classList.contains(c)) {
@@ -31,10 +43,16 @@ export function hasClassInTree(element: HTMLElement, className: string) {
   return hasClass(element, className) || parentByClass(element, className)
 }
 
-// debounce will call the last requested function after the wait time
+/**
+ * Executes the last function call after the wait time (or instantaneous if `immediate` is `true`)
+ *
+ * @param func - function that should be called after the wait time
+ * @param [wait=50] - wait time in ms
+ * @param [immediate=false] - if true, execute the function immediately instead of waiting
+ */
 export function debounce<T extends (...args: any[]) => void>(func: T, wait = 50, immediate = false): () => void {
   let timeout: any
-  return function (this: any, ...args: any[]): void {
+  return function(this: any, ...args: any[]): void {
     const context = self
     const later = () => {
       timeout = null
@@ -51,20 +69,26 @@ export function debounce<T extends (...args: any[]) => void>(func: T, wait = 50,
   }
 }
 
-// reverseDebounce will call the function on the first call and then debounce
-function reverseDebounce<T extends (...args: any[]) => void>(func: T, timeout: number): T {
-  let timer: NodeJS.Timeout | null = null
-  return function (...args: any[]): void {
-    if (!timer) func(...args)
-    timer = setTimeout(() => (timer = null), timeout)
-  } as T
-}
-
-export function isEqual(a: any, b: any) {
+/**
+ * Compares two objects by comparing their JSON representations
+ *
+ * @param a - first object
+ * @param b - second object
+ *
+ * @returns `true` if `a` and `b` JSON representations are equal, `false` otherwise
+ */
+export function isEqual(a: any, b: any): boolean {
   return JSON.stringify(a) === JSON.stringify(b)
 }
 
-export function kebabCase(str: string) {
+/**
+ * Converts an input string into kebabCase
+ *
+ * @param str - input string
+ *
+ * @returns the input string in kebabCase
+ */
+export function kebabCase(str: string): string {
   const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase())
   return str[0] === str[0].toUpperCase() ? result.substring(1) : result
 }

From 275a835a04e2daa12100cdee0a15a6c217314553 Mon Sep 17 00:00:00 2001
From: Data5tream <6423657+Data5tream@users.noreply.github.com>
Date: Tue, 19 Mar 2024 17:24:08 +0100
Subject: [PATCH 02/12] Add unit tests for CssClasses and Settings

---
 src/slim-select/css_classes.test.ts |  71 ++++++++++
 src/slim-select/css_classes.ts      | 192 ++++++++++++++--------------
 src/slim-select/settings.test.ts    |  84 ++++++++++++
 3 files changed, 251 insertions(+), 96 deletions(-)
 create mode 100644 src/slim-select/css_classes.test.ts
 create mode 100644 src/slim-select/settings.test.ts

diff --git a/src/slim-select/css_classes.test.ts b/src/slim-select/css_classes.test.ts
new file mode 100644
index 00000000..3128aaf7
--- /dev/null
+++ b/src/slim-select/css_classes.test.ts
@@ -0,0 +1,71 @@
+'use strict'
+import { describe, expect, test } from '@jest/globals'
+import CssClasses from './css_classes'
+
+const defaultClasses: { [key: string]: string } = {
+  main: 'ss-main',
+  placeholder: 'ss-placeholder',
+  values: 'ss-values',
+  single: 'ss-single',
+  max: 'ss-max',
+  value: 'ss-value',
+  valueText: 'ss-value-text',
+  valueDelete: 'ss-value-delete',
+  valueOut: 'ss-value-out',
+  deselect: 'ss-deselect',
+  deselectPath: 'M10,10 L90,90 M10,90 L90,10',
+  arrow: 'ss-arrow',
+  arrowClose: 'M10,30 L50,70 L90,30',
+  arrowOpen: 'M10,70 L50,30 L90,70',
+  content: 'ss-content',
+  openAbove: 'ss-open-above',
+  openBelow: 'ss-open-below',
+  search: 'ss-search',
+  searchHighlighter: 'ss-search-highlight',
+  searching: 'ss-searching',
+  addable: 'ss-addable',
+  addablePath: 'M50,10 L50,90 M10,50 L90,50',
+  list: 'ss-list',
+  optgroup: 'ss-optgroup',
+  optgroupLabel: 'ss-optgroup-label',
+  optgroupLabelText: 'ss-optgroup-label-text',
+  optgroupActions: 'ss-optgroup-actions',
+  optgroupSelectAll: 'ss-selectall',
+  optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50',
+  optgroupSelectAllCheck: 'M30,45 L50,70 L90,10',
+  optgroupClosable: 'ss-closable',
+  option: 'ss-option',
+  optionDelete: 'M10,10 L90,90 M10,90 L90,10',
+  highlighted: 'ss-highlighted',
+  open: 'ss-open',
+  close: 'ss-close',
+  selected: 'ss-selected',
+  error: 'ss-error',
+  disabled: 'ss-disabled',
+  hide: 'ss-hide',
+}
+
+describe('CssClasses module', () => {
+  test('empty constructor returns default classes', () => {
+    // We test the traditional classes here. Since old versions of slim-select didn't allow CSS class overrides, users
+    // may have written their CSS to match those classes, which means we should never change them in the library.
+
+    // Convert to unknown and then to custom object to prevent TS from throwing errors
+    const classes = new CssClasses() as unknown as { [key: string]: string }
+    Object.keys(defaultClasses).forEach((key) => {
+      expect(classes[key]).toBe(defaultClasses[key])
+    })
+  })
+
+  test('classes can be overwritten via the constructor', () => {
+    const classesWithOverride = JSON.parse(JSON.stringify(defaultClasses))
+    classesWithOverride['main'] = 'new-main'
+    classesWithOverride['open'] = 'new-open'
+
+    // Convert to unknown and then to custom object to prevent TS from throwing errors
+    const classes = new CssClasses({ main: 'new-main', open: 'new-open' }) as unknown as { [key: string]: string }
+    Object.keys(classesWithOverride).forEach((key) => {
+      expect(classes[key]).toBe(classesWithOverride[key])
+    })
+  })
+})
diff --git a/src/slim-select/css_classes.ts b/src/slim-select/css_classes.ts
index 7d329656..82c2f50f 100644
--- a/src/slim-select/css_classes.ts
+++ b/src/slim-select/css_classes.ts
@@ -1,111 +1,111 @@
 export type CssClassesPartial = Partial<CssClasses>
 
 export default class CssClasses {
-    public main: string
-    // Placeholder
-    public placeholder: string
+  public main: string
+  // Placeholder
+  public placeholder: string
 
-    // Values
-    public values: string
-    public single: string
-    public max: string
-    public value: string
-    public valueText: string
-    public valueDelete: string
-    public valueOut: string
+  // Values
+  public values: string
+  public single: string
+  public max: string
+  public value: string
+  public valueText: string
+  public valueDelete: string
+  public valueOut: string
 
-    // Deselect
-    public deselect: string
-    public deselectPath: string // Not a class but whatever
+  // Deselect
+  public deselect: string
+  public deselectPath: string // Not a class but whatever
 
-    // Arrow
-    public arrow: string
-    public arrowClose: string // Not a class but whatever
-    public arrowOpen: string // Not a class but whatever
+  // Arrow
+  public arrow: string
+  public arrowClose: string // Not a class but whatever
+  public arrowOpen: string // Not a class but whatever
 
-    // Content
-    public content: string
-    public openAbove: string
-    public openBelow: string
+  // Content
+  public content: string
+  public openAbove: string
+  public openBelow: string
 
-    // Search
-    public search: string
-    public searchHighlighter: string
-    public searching: string
-    public addable: string
-    public addablePath: string // Not a class but whatever
+  // Search
+  public search: string
+  public searchHighlighter: string
+  public searching: string
+  public addable: string
+  public addablePath: string // Not a class but whatever
 
-    // List optgroups/options
-    public list: string
+  // List optgroups/options
+  public list: string
 
-    // Optgroup
-    public optgroup: string
-    public optgroupLabel: string
-    public optgroupLabelText: string
-    public optgroupActions: string
-    public optgroupSelectAll: string // optgroup select all
-    public optgroupSelectAllBox: string // Not a class but whatever
-    public optgroupSelectAllCheck: string // Not a class but whatever
-    public optgroupClosable: string
+  // Optgroup
+  public optgroup: string
+  public optgroupLabel: string
+  public optgroupLabelText: string
+  public optgroupActions: string
+  public optgroupSelectAll: string // optgroup select all
+  public optgroupSelectAllBox: string // Not a class but whatever
+  public optgroupSelectAllCheck: string // Not a class but whatever
+  public optgroupClosable: string
 
-    // Option
-    public option: string
-    public optionDelete: string // Not a class but whatever
-    public highlighted: string
+  // Option
+  public option: string
+  public optionDelete: string // Not a class but whatever
+  public highlighted: string
 
-    // Misc
-    public open: string
-    public close: string
-    public selected: string
-    public error: string
-    public disabled: string
-    public hide: string
-    
-    constructor(classes?: CssClassesPartial) {
-        if (!classes) {
-            classes = {}
-        }
-        
-        this.main = classes.main || 'ss-main'
-        this.placeholder = classes.placeholder || 'ss-placeholder'
-        this.values = classes.values || 'ss-values'
-        this.single = classes.single || 'ss-single'
-        this.max = classes.max || 'ss-max'
-        this.value = classes.value || 'ss-value'
-        this.valueText = classes.valueText || 'ss-value-text'
-        this.valueDelete = classes.valueDelete || 'ss-value-delete'
-        this.valueOut = classes.valueOut || 'ss-value-out'
+  // Misc
+  public open: string
+  public close: string
+  public selected: string
+  public error: string
+  public disabled: string
+  public hide: string
 
-        this.deselect = classes.deselect || 'ss-deselect'
-        this.deselectPath = classes.deselectPath || 'M10,10 L90,90 M10,90 L90,10'
-        this.arrow = classes.arrow || 'ss-arrow'
-        this.arrowClose = classes.arrowClose || 'M10,30 L50,70 L90,30'
-        this.arrowOpen = classes.arrowOpen || 'M10,70 L50,30 L90,70'
-        this.content = classes.content || 'ss-content'
-        this.openAbove = classes.openAbove || 'ss-open-above'
-        this.openBelow = classes.openBelow || 'ss-open-below'
-        this.search = classes.search ||  'ss-search'
-        this.searchHighlighter = classes.searchHighlighter || 'ss-search-highlight'
-        this.searching = classes.searching || 'ss-searching'
-        this.addable = classes.addable || 'ss-addable'
-        this.addablePath = classes.addablePath || 'M50,10 L50,90 M10,50 L90,50'
-        this.list = classes.list || 'ss-list'
-        this.optgroup = classes.optgroup || 'ss-optgroup'
-        this.optgroupLabel = classes.optgroupLabel || 'ss-optgroup-label'
-        this.optgroupLabelText = classes.optgroupLabelText || 'ss-optgroup-label-text'
-        this.optgroupActions = classes.optgroupActions || 'ss-optgroup-actions'
-        this.optgroupSelectAll = classes.optgroupSelectAll || 'ss-selectall'
-        this.optgroupSelectAllBox = classes.optgroupSelectAllBox || 'M60,10 L10,10 L10,90 L90,90 L90,50'
-        this.optgroupSelectAllCheck = classes.optgroupSelectAllCheck || 'M30,45 L50,70 L90,10'
-        this.optgroupClosable = classes.optgroupClosable || 'ss-closable'
-        this.option = classes.option || 'ss-option'
-        this.optionDelete = classes.optionDelete || 'M10,10 L90,90 M10,90 L90,10'
-        this.highlighted = classes.highlighted || 'ss-highlighted'
-        this.open = classes.open || 'ss-open'
-        this.close = classes.close || 'ss-close'
-        this.selected = classes.selected || 'ss-selected'
-        this.error = classes.error || 'ss-error'
-        this.disabled = classes.disabled || 'ss-disabled'
-        this.hide = classes.hide || 'ss-hide'
+  constructor(classes?: CssClassesPartial) {
+    if (!classes) {
+      classes = {}
     }
+
+    this.main = classes.main || 'ss-main'
+    this.placeholder = classes.placeholder || 'ss-placeholder'
+    this.values = classes.values || 'ss-values'
+    this.single = classes.single || 'ss-single'
+    this.max = classes.max || 'ss-max'
+    this.value = classes.value || 'ss-value'
+    this.valueText = classes.valueText || 'ss-value-text'
+    this.valueDelete = classes.valueDelete || 'ss-value-delete'
+    this.valueOut = classes.valueOut || 'ss-value-out'
+
+    this.deselect = classes.deselect || 'ss-deselect'
+    this.deselectPath = classes.deselectPath || 'M10,10 L90,90 M10,90 L90,10'
+    this.arrow = classes.arrow || 'ss-arrow'
+    this.arrowClose = classes.arrowClose || 'M10,30 L50,70 L90,30'
+    this.arrowOpen = classes.arrowOpen || 'M10,70 L50,30 L90,70'
+    this.content = classes.content || 'ss-content'
+    this.openAbove = classes.openAbove || 'ss-open-above'
+    this.openBelow = classes.openBelow || 'ss-open-below'
+    this.search = classes.search || 'ss-search'
+    this.searchHighlighter = classes.searchHighlighter || 'ss-search-highlight'
+    this.searching = classes.searching || 'ss-searching'
+    this.addable = classes.addable || 'ss-addable'
+    this.addablePath = classes.addablePath || 'M50,10 L50,90 M10,50 L90,50'
+    this.list = classes.list || 'ss-list'
+    this.optgroup = classes.optgroup || 'ss-optgroup'
+    this.optgroupLabel = classes.optgroupLabel || 'ss-optgroup-label'
+    this.optgroupLabelText = classes.optgroupLabelText || 'ss-optgroup-label-text'
+    this.optgroupActions = classes.optgroupActions || 'ss-optgroup-actions'
+    this.optgroupSelectAll = classes.optgroupSelectAll || 'ss-selectall'
+    this.optgroupSelectAllBox = classes.optgroupSelectAllBox || 'M60,10 L10,10 L10,90 L90,90 L90,50'
+    this.optgroupSelectAllCheck = classes.optgroupSelectAllCheck || 'M30,45 L50,70 L90,10'
+    this.optgroupClosable = classes.optgroupClosable || 'ss-closable'
+    this.option = classes.option || 'ss-option'
+    this.optionDelete = classes.optionDelete || 'M10,10 L90,90 M10,90 L90,10'
+    this.highlighted = classes.highlighted || 'ss-highlighted'
+    this.open = classes.open || 'ss-open'
+    this.close = classes.close || 'ss-close'
+    this.selected = classes.selected || 'ss-selected'
+    this.error = classes.error || 'ss-error'
+    this.disabled = classes.disabled || 'ss-disabled'
+    this.hide = classes.hide || 'ss-hide'
+  }
 }
diff --git a/src/slim-select/settings.test.ts b/src/slim-select/settings.test.ts
new file mode 100644
index 00000000..f98ac208
--- /dev/null
+++ b/src/slim-select/settings.test.ts
@@ -0,0 +1,84 @@
+'use strict'
+import { describe, expect, test } from '@jest/globals'
+import Settings from './settings'
+
+const defaultSettings: { [key: string]: any } = {
+  id: 'ss-qucyuytu',
+  style: '',
+  class: [],
+  isMultiple: false,
+  isOpen: false,
+  isFullOpen: false,
+  intervalMove: null,
+  disabled: false,
+  alwaysOpen: false,
+  showSearch: true,
+  focusSearch: true,
+  ariaLabel: 'Combobox',
+  searchPlaceholder: 'Search',
+  searchText: 'No Results',
+  searchingText: 'Searching...',
+  searchHighlight: false,
+  closeOnSelect: true,
+  contentLocation: HTMLBodyElement,
+  contentPosition: 'absolute',
+  openPosition: 'auto',
+  placeholderText: 'Select Value',
+  allowDeselect: false,
+  hideSelected: false,
+  keepOrder: false,
+  showOptionTooltips: false,
+  minSelected: 0,
+  maxSelected: 1000,
+  timeoutDelay: 200,
+  maxValuesShown: 20,
+  maxValuesMessage: '{number} selected',
+}
+
+describe('Settings module', () => {
+  test('empty constructor returns default settings', () => {
+    // Convert to unknown and then to custom object to prevent TS from throwing errors
+    const settings = new Settings() as unknown as { [key: string]: string }
+    Object.keys(defaultSettings).forEach((key) => {
+      if (key === 'id') {
+        expect(settings[key].substring(0, 3)).toBe('ss-')
+      } else if (key === 'contentLocation') {
+        expect(settings[key]).toBeInstanceOf(defaultSettings[key])
+      } else {
+        expect(settings[key]).toStrictEqual(defaultSettings[key])
+      }
+    })
+  })
+
+  test('settings can be overwritten via the constructor', () => {
+    const customSettings = {
+      disabled: true,
+      alwaysOpen: true,
+      showSearch: false,
+      focusSearch: true,
+      searchHighlight: true,
+      closeOnSelect: false,
+      placeholderText: 'new placeholder',
+      hideSelected: true,
+      keepOrder: true,
+      showOptionTooltips: true,
+    }
+
+    const settingsWithOverride = {
+      ...defaultSettings,
+      ...customSettings,
+    } as unknown as { [key: string]: any }
+
+    // Convert to unknown and then to custom object to prevent TS from throwing errors
+    const settings = new Settings(customSettings) as unknown as { [key: string]: any }
+    Object.keys(settingsWithOverride).forEach((key) => {
+      if (key === 'id') {
+        expect(settings[key].substring(0, 3)).toBe('ss-')
+      } else if (key === 'contentLocation') {
+        expect(settings[key]).toBeInstanceOf(defaultSettings[key])
+      } else {
+        expect(settings[key]).toStrictEqual(settingsWithOverride[key])
+      }
+    })
+  })
+})

From 978950e17797f3f34eceed611720dd529cb2c6df Mon Sep 17 00:00:00 2001
From: Data5tream <6423657+Data5tream@users.noreply.github.com>
Date: Wed, 20 Mar 2024 07:08:02 +0100
Subject: [PATCH 03/12] Fix bug in validateDataArray and add unit tests

Add and improve unit tests for the Store class
---
 src/slim-select/store.test.ts | 1201 ++++++++++++++++++++++++++-------
 src/slim-select/store.ts      |   34 +-
 2 files changed, 974 insertions(+), 261 deletions(-)

diff --git a/src/slim-select/store.test.ts b/src/slim-select/store.test.ts
index 0fcdb436..13a9b830 100644
--- a/src/slim-select/store.test.ts
+++ b/src/slim-select/store.test.ts
@@ -1,242 +1,973 @@
 'use strict'
 
 import { describe, expect, test } from '@jest/globals'
-import Store, { Optgroup, Option } from './store'
+import Store, { DataArray, DataObjectPartial, Optgroup, Option } from './store'
 
 describe('store module', () => {
-  test('constructor', () => {
-    let store = new Store('single', [])
-    expect(store).toBeInstanceOf(Store)
-  })
-
-  test('set data', () => {
-    let store = new Store('single', [
-      {
-        text: 'test',
-      },
-    ])
-
-    let data = store.getData()
-
-    // Make sure data has one item and that it has the correct text
-    expect(data.length).toBe(1)
-    expect((data[0] as Option).text).toBe('test')
-
-    // Make sure the data has all the default fields
-    expect((data[0] as Option).id).toBeDefined()
-    expect((data[0] as Option).value).toBeDefined()
-    expect((data[0] as Option).text).toBeDefined()
-    expect((data[0] as Option).html).toBeDefined()
-    expect((data[0] as Option).selected).toBeDefined()
-    expect((data[0] as Option).display).toBeDefined()
-    expect((data[0] as Option).disabled).toBeDefined()
-    expect((data[0] as Option).placeholder).toBeDefined()
-    expect((data[0] as Option).class).toBeDefined()
-    expect((data[0] as Option).style).toBeDefined()
-    expect((data[0] as Option).data).toBeDefined()
-    expect((data[0] as Option).mandatory).toBeDefined()
-  })
-
-  test('set data with optgroup', () => {
-    let store = new Store('single', [
-      {
-        label: 'test',
-        options: [
-          {
-            text: 'test',
-          },
-        ],
-      },
-    ])
-
-    let data = store.getData()
-
-    // Make sure data has one item and that it has the correct text
-    expect(data.length).toBe(1)
-    expect((data[0] as Optgroup).label).toBe('test')
-    expect((data[0] as Optgroup).options?.length).toBe(1)
-    expect((data[0] as Optgroup).options?.[0].text).toBe('test')
-  })
-
-  test('set data with optgroup and option', () => {
-    let store = new Store('single', [
-      {
-        label: 'test',
-        options: [
-          {
-            text: 'test',
-          },
-        ],
-      },
-      {
-        text: 'test',
-      },
-    ])
-
-    let data = store.getData()
-
-    // Make sure data has one item and that it has the correct text
-    expect(data.length).toBe(2)
-    expect((data[0] as Optgroup).label).toBe('test')
-    expect((data[0] as Optgroup).options?.length).toBe(1)
-    expect((data[0] as Optgroup).options?.[0].text).toBe('test')
-    expect((data[1] as Option).text).toBe('test')
-  })
-
-  test('set data and set selected by ID', () => {
-    let store = new Store('single', [
-      {
-        id: '8675309',
-        text: 'test',
-      },
-    ])
-    store.setSelectedBy('id', ['8675309'])
-
-    let data = store.getData()
-
-    // Make sure data has one item and that it has the correct text
-    expect(data.length).toBe(1)
-    expect((data[0] as Option).text).toBe('test')
-    expect((data[0] as Option).selected).toBe(true)
-  })
-
-  test('set data and set selected by value', () => {
-    let store = new Store('single', [
-      {
-        text: 'test',
-        value: 'hello',
-      },
-    ])
-    store.setSelectedBy('value', ['hello'])
-
-    let data = store.getData()
-
-    // Make sure data has one item and that it has the correct text
-    expect(data.length).toBe(1)
-    expect((data[0] as Option).text).toBe('test')
-    expect((data[0] as Option).selected).toBe(true)
-  })
-
-  test('set data and set selected to empty string', () => {
-    let store = new Store('single', [
-      {
-        text: 'all',
-        value: '',
-      },
-      {
-        text: 'Value 1',
-        value: '1',
-        selected: true,
-      },
-    ])
-    store.setSelectedBy('value', [''])
-
-    let data = store.getData()
-
-    // Make sure data has one item and that it has the correct text
-    expect(data.length).toBe(2)
-    expect((data[0] as Option).text).toBe('all')
-    expect((data[0] as Option).selected).toBe(true)
-  })
-
-  test('set data and set selected by value multiple for single element', () => {
-    let store = new Store('single', [
-      {
-        text: 'test1',
-      },
-      {
-        text: 'test2',
-      },
-    ])
-    store.setSelectedBy('value', ['test1', 'test2'])
-
-    let data = store.getData()
-
-    // Make sure data has one item and that it has the correct text
-    expect(data.length).toBe(2)
-    expect((data[0] as Option).text).toBe('test1')
-    expect((data[0] as Option).selected).toBe(true)
-    expect((data[1] as Option).text).toBe('test2')
-    expect((data[1] as Option).selected).toBe(false)
-  })
-
-  test('set data and search', () => {
-    let store = new Store('single', [
-      {
-        text: 'test1',
-      },
-      {
-        text: 'test2',
-        value: 'test2',
-      },
-      {
-        text: 'test3',
-      },
-    ])
-
-    let data = store.getData()
-
-    const searchFilter = (opt: Option, search: string): boolean => {
-      return opt.text.toLowerCase().indexOf(search.toLowerCase()) !== -1
-    }
-
-    // With searchFilter search against current store data set
-    let search = store.search('test2', searchFilter)
-    expect(search.length).toBe(1)
-    expect((search[0] as Option).value).toBe('test2')
-  })
-
-  test('set data with non selected on single select', () => {
-    let store = new Store('single', [
-      {
-        text: 'test1',
-      },
-      {
-        text: 'test2',
-        value: 'test2',
-      },
-      {
-        text: 'test3',
-      },
-    ])
-
-    let data = store.getData()
-
-    // Make sure data has one item and that it has the correct text
-    expect(data.length).toBe(3)
-    expect((data[0] as Option).text).toBe('test1')
-    expect((data[0] as Option).selected).toBe(true)
-    expect((data[1] as Option).text).toBe('test2')
-    expect((data[1] as Option).selected).toBe(false)
-    expect((data[2] as Option).text).toBe('test3')
-    expect((data[2] as Option).selected).toBe(false)
-  })
-
-  test('set data with multiple selected on single select', () => {
-    let store = new Store('single', [
-      {
-        text: 'test1',
-      },
-      {
-        text: 'test2',
-        value: 'test2',
-        selected: true,
-      },
-      {
-        text: 'test3',
-        selected: true,
-      },
-    ])
-
-    let data = store.getData()
-
-    // Make sure data has one item and that it has the correct text
-    expect(data.length).toBe(3)
-    expect((data[0] as Option).text).toBe('test1')
-    expect((data[0] as Option).selected).toBe(false)
-    expect((data[1] as Option).text).toBe('test2')
-    expect((data[1] as Option).selected).toBe(true)
-    expect((data[2] as Option).text).toBe('test3')
-    expect((data[2] as Option).selected).toBe(false)
+  describe('constructor', () => {
+    test('constructor without data', () => {
+      let store = new Store('single', [])
+      expect(store).toBeInstanceOf(Store)
+    })
+
+    test('constructor with single option', () => {
+      const store = new Store('single', [
+        {
+          text: 'test',
+        },
+      ])
+
+      const data = store.getData()
+
+      // Make sure data has one item and that it has the correct text
+      expect(data).toHaveLength(1)
+      expect(data[0]).toBeInstanceOf(Option)
+
+      const option = data[0] as Option
+
+      expect(option.text).toBe('test')
+      expect(option.id).toBeDefined()
+      expect(option.value).toBeDefined()
+      expect(option.text).toBeDefined()
+      expect(option.html).toBeDefined()
+      expect(option.selected).toBeDefined()
+      expect(option.display).toBeDefined()
+      expect(option.disabled).toBeDefined()
+      expect(option.placeholder).toBeDefined()
+      expect(option.class).toBeDefined()
+      expect(option.style).toBeDefined()
+      expect(option.data).toBeDefined()
+      expect(option.mandatory).toBeDefined()
+    })
+
+    test('constructor with optgroup', () => {
+      const store = new Store('single', [
+        {
+          label: 'opt group',
+          options: [
+            {
+              text: 'test',
+            },
+          ],
+        },
+      ])
+
+      const data = store.getData()
+
+      expect(data).toHaveLength(1)
+
+      expect(data[0]).toBeInstanceOf(Optgroup)
+      const optGroup = data[0] as Optgroup
+
+      expect(optGroup.label).toBe('opt group')
+      expect(optGroup.options).toHaveLength(1)
+      expect(optGroup.options?.[0].text).toBe('test')
+    })
+
+    test('constructor with optgroup and option', () => {
+      const store = new Store('single', [
+        {
+          label: 'opt group',
+          options: [
+            {
+              text: 'opt group option',
+            },
+          ],
+        },
+        {
+          text: 'option',
+        },
+      ])
+
+      const data = store.getData()
+
+      expect(data).toHaveLength(2)
+
+      expect(data[0]).toBeInstanceOf(Optgroup)
+      const optGroup = data[0] as Optgroup
+
+      expect(optGroup.label).toBe('opt group')
+      expect(optGroup.options).toHaveLength(1)
+      expect(optGroup.options?.[0].text).toBe('opt group option')
+
+      expect(data[1]).toBeInstanceOf(Option)
+      expect((data[1] as Option).text).toBe('option')
+    })
+
+    test('constructor with multiple selected on single select only registers first selected', () => {
+      const store = new Store('single', [
+        {
+          text: 'test1',
+        },
+        {
+          text: 'test2',
+          value: 'test2',
+          selected: true,
+        },
+        {
+          text: 'test3',
+          selected: true,
+        },
+      ])
+
+      // cast to an option array here, so we don't need casts in the comparisons
+      const data = store.getData() as Array<Option>
+
+      expect(data).toHaveLength(3)
+      expect(data[0].text).toBe('test1')
+      expect(data[0].selected).toBe(false)
+      expect(data[1].text).toBe('test2')
+      expect(data[1].selected).toBe(true)
+      expect(data[2].text).toBe('test3')
+      expect(data[2].selected).toBe(false)
+    })
+
+    test('constructor without a selected element on single select selects first option', () => {
+      const store = new Store('single', [
+        {
+          text: 'test1',
+        },
+        {
+          text: 'test2',
+          value: 'test2',
+        },
+        {
+          text: 'test3',
+        },
+      ])
+
+      // cast to an option array here, so we don't need casts in the comparisons
+      const data = store.getData() as Array<Option>
+
+      expect(data).toHaveLength(3)
+      expect(data[0].text).toBe('test1')
+      expect(data[0].selected).toBe(true)
+      expect(data[1].text).toBe('test2')
+      expect(data[1].selected).toBe(false)
+      expect(data[2].text).toBe('test3')
+      expect(data[2].selected).toBe(false)
+    })
+
+    test('constructor with multiple selected on multiple select registers all selected', () => {
+      const store = new Store('multiple', [
+        {
+          text: 'test1',
+        },
+        {
+          text: 'test2',
+          value: 'test2',
+          selected: true,
+        },
+        {
+          text: 'test3',
+          selected: true,
+        },
+      ])
+
+      // cast to an option array here, so we don't need casts in the comparisons
+      const data = store.getData() as Array<Option>
+
+      expect(data).toHaveLength(3)
+      expect(data[0].text).toBe('test1')
+      expect(data[0].selected).toBe(false)
+      expect(data[1].text).toBe('test2')
+      expect(data[1].selected).toBe(true)
+      expect(data[2].text).toBe('test3')
+      expect(data[2].selected).toBe(true)
+    })
+
+    test('constructor without a selected element on multiple select does not select anything', () => {
+      const store = new Store('multiple', [
+        {
+          text: 'test1',
+        },
+        {
+          text: 'test2',
+          value: 'test2',
+        },
+        {
+          text: 'test3',
+        },
+      ])
+
+      // cast to an option array here, so we don't need casts in the comparisons
+      const data = store.getData() as Array<Option>
+
+      expect(data).toHaveLength(3)
+      data.forEach((option) => {
+        expect(option.selected).toBe(false)
+      })
+    })
+  })
+
+  describe('validateDataArray', () => {
+    let store: Store
+
+    beforeAll(() => {
+      store = new Store('single', [])
+    })
+
+    test('invalid data returns error', () => {
+      const invalidData = { test: true }
+
+      const res = store.validateDataArray(invalidData as unknown as DataArray)
+      expect(res).toBeInstanceOf(Error)
+      expect(res?.message).toBe('Data must be an array')
+    })
+
+    test('single invalid data entry returns error', () => {
+      const invalidData = [{ name: 'this is invalid' }]
+
+      const res = store.validateDataArray(invalidData as unknown as DataArray)
+      expect(res).toBeInstanceOf(Error)
+      expect(res?.message).toBe('Data object must be a valid optgroup or option')
+    })
+
+    test('invalid data and valid option returns error', () => {
+      const invalidData = [
+        {
+          name: 'invalid data',
+        },
+        {
+          text: 'valid option',
+        },
+      ]
+
+      const res = store.validateDataArray(invalidData as unknown as DataArray)
+      expect(res).toBeInstanceOf(Error)
+      expect(res?.message).toBe('Data object must be a valid optgroup or option')
+    })
+
+    test('valid option and invalid data returns error', () => {
+      const invalidData = [
+        {
+          text: 'valid',
+        },
+        {
+          name: 'this is invalid',
+        },
+      ]
+
+      const res = store.validateDataArray(invalidData as unknown as DataArray)
+      expect(res).toBeInstanceOf(Error)
+      expect(res?.message).toBe('Data object must be a valid optgroup or option')
+    })
+
+    test('valid opt group with invalid data returns error', () => {
+      const invalidData = [
+        {
+          label: 'valid',
+          options: [
+            {
+              invalid: 'asdf',
+            },
+          ],
+        },
+      ]
+
+      const res = store.validateDataArray(invalidData as unknown as DataArray)
+      expect(res).toBeInstanceOf(Error)
+      expect(res?.message).toBe('Option must have a text')
+    })
+
+    test('single valid option validates', () => {
+      const validData = [
+        {
+          text: 'valid option',
+        },
+      ]
+
+      const res = store.validateDataArray(validData)
+      expect(res).toBeNull()
+    })
+
+    test('multiple valid options validates', () => {
+      const validData = [
+        {
+          text: 'valid option 1',
+        },
+        {
+          text: 'valid option 2',
+        },
+      ]
+
+      const res = store.validateDataArray(validData)
+      expect(res).toBeNull()
+    })
+
+    test('single valid opt group validates', () => {
+      const validData = [
+        {
+          label: 'valid opt group',
+        },
+      ]
+
+      const res = store.validateDataArray(validData)
+      expect(res).toBeNull()
+    })
+
+    test('valid opt group with options validates', () => {
+      const validData = [
+        {
+          label: 'valid opt group',
+          options: [
+            {
+              text: 'option 1',
+            },
+            {
+              text: 'option 2',
+            },
+          ],
+        },
+      ]
+
+      const res = store.validateDataArray(validData)
+      expect(res).toBeNull()
+    })
+    test('valid opt group with options and separate options validates', () => {
+      const validData = [
+        {
+          label: 'valid opt group',
+          options: [
+            {
+              text: 'option 1',
+            },
+            {
+              text: 'option 2',
+            },
+          ],
+        },
+        {
+          text: 'main option 1',
+        },
+        {
+          text: 'main option 2',
+        },
+      ]
+
+      const res = store.validateDataArray(validData)
+      expect(res).toBeNull()
+    })
+  })
+
+  describe('validateOption', () => {
+    let store: Store
+
+    beforeAll(() => {
+      store = new Store('single', [])
+    })
+
+    test('empty option returns error', () => {
+      const res = store.validateOption({} as Option)
+      expect(res).toBeInstanceOf(Error)
+      expect(res?.message).toBe('Option must have a text')
+    })
+
+    test('invalid data returns error', () => {
+      const res = store.validateOption({ label: 'text' } as unknown as Option)
+      expect(res).toBeInstanceOf(Error)
+      expect(res?.message).toBe('Option must have a text')
+    })
+
+    test('valid data returns null', () => {
+      const res = store.validateOption({ text: 'text' })
+      expect(res).toBeNull()
+    })
+  })
+
+  describe('partialToFullData', () => {
+    let store: Store
+
+    beforeAll(() => {
+      store = new Store('single', [])
+    })
+
+    test('empty partial returns empty data array', () => {
+      const res = store.partialToFullData([])
+      expect(res).toBeInstanceOf(Array)
+      expect(res).toHaveLength(0)
+    })
+
+    test("invalid data get's ignored", () => {
+      const res = store.partialToFullData([
+        { error: 'this is invalid' } as unknown as DataObjectPartial,
+        { text: 'valid' },
+      ])
+      expect(res).toBeInstanceOf(Array)
+      expect(res).toHaveLength(1)
+
+      expect(res[0]).toBeInstanceOf(Option)
+
+      const option = res[0] as Option
+      expect(option.text).toBe('valid')
+    })
+
+    test('valid data gets filled correctly', () => {
+      const res = store.partialToFullData([
+        {
+          label: 'opt group',
+          options: [{ text: 'opt 1' }, { text: 'opt 2' }],
+        },
+        {
+          text: 'opt 3',
+        },
+      ])
+
+      expect(res).toHaveLength(2)
+      expect(res[0]).toBeInstanceOf(Optgroup)
+
+      const optGroup = res[0] as Optgroup
+      expect(optGroup.label).toBe('opt group')
+      expect(optGroup.options).toHaveLength(2)
+      expect(optGroup.options[0]).toBeInstanceOf(Option)
+      expect(optGroup.options[0].text).toBe('opt 1')
+      expect(optGroup.options[1]).toBeInstanceOf(Option)
+      expect(optGroup.options[1].text).toBe('opt 2')
+    })
+  })
+
+  describe('setData', () => {
+    let store: Store
+
+    beforeEach(() => {
+      store = new Store('single', [
+        {
+          text: 'initial option',
+        },
+        {
+          text: 'initial selected option',
+          selected: true,
+        },
+      ])
+    })
+
+    test('invalid data does override existing data', () => {
+      store.setData([{ invalid: true } as unknown as Option])
+
+      const data = store.getData()
+      expect(data).toHaveLength(0)
+    })
+
+    test('valid data overrides existing data', () => {
+      store.setData([
+        {
+          text: 'opt 1',
+        },
+        {
+          text: 'opt 2',
+        },
+        {
+          text: 'opt 3',
+        },
+      ])
+
+      const data = store.getData() as Array<Option>
+      expect(data).toHaveLength(3)
+      expect(data[0].text).toBe('opt 1')
+      expect(data[1].text).toBe('opt 2')
+      expect(data[2].text).toBe('opt 3')
+    })
+
+    test('valid data on single select automatically selects first option', () => {
+      store.setData([
+        {
+          text: 'opt 1',
+        },
+        {
+          text: 'opt 2',
+        },
+      ])
+
+      const data = store.getData() as Array<Option>
+      expect(data).toHaveLength(2)
+      expect(data[0].selected).toBe(true)
+    })
+
+    test('valid data on single select selects correct option', () => {
+      store.setData([
+        {
+          text: 'opt 1',
+        },
+        {
+          text: 'opt 2',
+          selected: true,
+        },
+      ])
+
+      const data = store.getData() as Array<Option>
+      expect(data).toHaveLength(2)
+      expect(data[1].text).toBe('opt 2')
+      expect(data[1].selected).toBe(true)
+    })
+  })
+
+  describe('getData', () => {
+    test('getData gets all options', () => {
+      const data = [
+        {
+          label: 'group test',
+          options: [
+            {
+              text: 'sub opt 1',
+            },
+            {
+              text: 'sub opt 2',
+            },
+          ],
+        },
+        {
+          text: 'test1',
+        },
+        {
+          text: 'test2',
+          value: 'test2',
+        },
+        {
+          text: 'test3',
+        },
+      ]
+
+      const flatData = [
+        {
+          text: 'sub opt 1',
+        },
+        {
+          text: 'sub opt 2',
+        },
+        {
+          text: 'test1',
+        },
+        {
+          text: 'test2',
+          value: 'test2',
+        },
+        {
+          text: 'test3',
+        },
+      ]
+
+      const store = new Store('single', data)
+
+      const storedData = store.getData()
+      storedData.forEach((dataObject, index) => {
+        if ('label' in dataObject) {
+          expect(dataObject.label).toBe(data[index].label)
+          dataObject.options.forEach((subOpt, subIndex) => {
+            expect(subOpt.text).toBe(data[index].options![subIndex].text)
+            expect(subOpt.value).toBe(data[index].options![subIndex].text)
+          })
+        } else {
+          expect(dataObject.text).toBe(data[index].text)
+          expect(dataObject.value).toBe(data[index].text)
+        }
+      })
+
+      // test flat array directly
+      const storedDataOptions = store.getDataOptions()
+      storedDataOptions.forEach((option, index) => {
+        expect(option.text).toBe(flatData[index].text)
+        expect(option.value).toBe(flatData[index].text)
+      })
+    })
+  })
+
+  describe('getDataOptions', () => {
+    test('options only store returns same structure', () => {
+      const store = new Store('single', [
+        {
+          text: 'opt 0',
+        },
+        {
+          text: 'opt 1',
+        },
+      ])
+
+      const data = store.getDataOptions()
+      expect(data).toHaveLength(2)
+      data.forEach((option, index) => {
+        expect(option).toBeInstanceOf(Option)
+        expect(option.text).toBe(`opt ${index}`)
+      })
+    })
+
+    test('option group gets flattened', () => {
+      const store = new Store('single', [
+        {
+          label: 'opt group',
+          options: [
+            {
+              text: 'opt 0',
+            },
+            {
+              text: 'opt 1',
+            },
+          ],
+        },
+        {
+          text: 'opt 2',
+        },
+        {
+          text: 'opt 3',
+        },
+      ])
+
+      const data = store.getDataOptions()
+      expect(data).toHaveLength(4)
+      data.forEach((option, index) => {
+        expect(option).toBeInstanceOf(Option)
+        expect(option.text).toBe(`opt ${index}`)
+      })
+    })
+  })
+
+  describe('addOption', () => {
+    test('append option', () => {
+      const store = new Store('single', [
+        {
+          text: 'test1',
+        },
+      ])
+
+      store.addOption({ text: 'test2' })
+
+      const storeData = store.getDataOptions()
+      expect(storeData).toHaveLength(2)
+      expect(storeData[0].text).toBe('test1')
+      expect(storeData[1].text).toBe('test2')
+    })
+  })
+
+  describe('setSelectedBy', () => {
+    let store: Store
+
+    beforeEach(() => {
+      store = new Store('single', [
+        {
+          text: 'opt 1',
+        },
+        {
+          id: '12345678',
+          text: 'id opt',
+        },
+        {
+          text: 'opt 2',
+        },
+        {
+          text: 'opt 3',
+        },
+      ])
+    })
+
+    test('set selected by ID', () => {
+      store.setSelectedBy('id', ['12345678'])
+      const data = store.getDataOptions()
+
+      expect(data[0].text).toBe('opt 1')
+      expect(data[0].selected).toBe(false)
+
+      expect(data[1].text).toBe('id opt')
+      expect(data[1].selected).toBe(true)
+    })
+
+    test('set selected by value', () => {
+      store.setSelectedBy('value', ['opt 3'])
+
+      const data = store.getDataOptions()
+
+      expect(data[0].text).toBe('opt 1')
+      expect(data[0].selected).toBe(false)
+
+      expect(data[3].text).toBe('opt 3')
+      expect(data[3].selected).toBe(true)
+    })
+
+    test('set selected to empty string selects first option', () => {
+      const store = new Store('single', [
+        {
+          text: 'all',
+          value: '',
+        },
+        {
+          text: 'Value 1',
+          value: '1',
+          selected: true,
+        },
+      ])
+      store.setSelectedBy('value', [''])
+
+      const data = store.getDataOptions()
+
+      expect(data[0].text).toBe('all')
+      expect(data[0].selected).toBe(true)
+      expect(data[1].selected).toBe(false)
+    })
+
+    test('set multiple selected by value on single select only selects the first element', () => {
+      store.setSelectedBy('value', ['opt 2', 'opt 3'])
+
+      const data = store.getDataOptions()
+
+      expect(data[2].selected).toBe(true)
+      expect(data[3].selected).toBe(false)
+    })
+  })
+
+  describe('getSelected', () => {
+    test('get correct value when one option is selected', () => {
+      const store = new Store('single', [
+        {
+          text: 'opt 0',
+        },
+        {
+          text: 'opt 1',
+        },
+      ])
+
+      const selected = store.getSelected()
+      expect(selected).toHaveLength(1)
+      expect(selected[0]).toBe('opt 0')
+    })
+
+    test('get correct value when two options is selected', () => {
+      const store = new Store('multiple', [
+        {
+          text: 'opt 0',
+        },
+        {
+          text: 'opt 1',
+          selected: true,
+        },
+        {
+          text: 'opt 2',
+          selected: true,
+        },
+      ])
+
+      const selected = store.getSelected()
+      expect(selected).toHaveLength(2)
+
+      expect(selected[0]).toBe('opt 1')
+      expect(selected[1]).toBe('opt 2')
+    })
+  })
+
+  describe('getSelectedOptions', () => {
+    test('get correct value when one option is selected', () => {
+      const store = new Store('single', [
+        {
+          text: 'opt 0',
+        },
+        {
+          text: 'opt 1',
+        },
+      ])
+
+      const selected = store.getSelectedOptions()
+      expect(selected).toHaveLength(1)
+      expect(selected[0].text).toBe('opt 0')
+    })
+
+    test('get correct value when two options is selected', () => {
+      const store = new Store('multiple', [
+        {
+          text: 'opt 0',
+        },
+        {
+          text: 'opt 1',
+          selected: true,
+        },
+        {
+          text: 'opt 2',
+          selected: true,
+        },
+      ])
+
+      const selected = store.getSelectedOptions()
+      expect(selected).toHaveLength(2)
+      expect(selected[0].text).toBe('opt 1')
+      expect(selected[1].text).toBe('opt 2')
+    })
+  })
+
+  describe('getOptionByID', () => {
+    let store: Store
+
+    beforeAll(() => {
+      store = new Store('single', [
+        {
+          text: 'opt 1',
+        },
+        {
+          id: '12345678',
+          text: 'id opt',
+        },
+        {
+          text: 'opt 2',
+        },
+        {
+          text: 'opt 3',
+        },
+      ])
+    })
+
+    test('invalid id gets null as result', () => {
+      const res = store.getOptionByID('0000')
+      expect(res).toBeNull()
+    })
+
+    test('valid id gets correct result', () => {
+      const res = store.getOptionByID('12345678')
+      expect(res).toBeInstanceOf(Option)
+      expect((res as Option).text).toBe('id opt')
+    })
+  })
+
+  describe('getSelectType', () => {
+    test('get correct type on single select', () => {
+      const store = new Store('single', [])
+      expect(store.getSelectType()).toBe('single')
+    })
+
+    test('get correct type on multiple select', () => {
+      const store = new Store('multiple', [])
+      expect(store.getSelectType()).toBe('multiple')
+    })
+  })
+
+  describe('getFirstOption', () => {
+    test('getFirstOption returns first option', () => {
+      const flatStore = new Store('single', [
+        {
+          text: 'test0',
+        },
+        {
+          text: 'test1',
+        },
+      ])
+
+      expect(flatStore.getFirstOption()?.text).toBe('test0')
+
+      const store = new Store('single', [
+        {
+          label: 'group0',
+          options: [
+            {
+              text: 'test0',
+            },
+            {
+              text: 'test1',
+            },
+          ],
+        },
+        {
+          text: 'test2',
+        },
+      ])
+
+      expect(store.getFirstOption()?.text).toBe('test0')
+    })
+  })
+
+  describe('search', () => {
+    test('search with term returns correct option', () => {
+      const store = new Store('single', [
+        {
+          text: 'test1',
+        },
+        {
+          text: 'test2',
+          value: 'test2',
+        },
+        {
+          text: 'test3',
+        },
+      ])
+
+      const searchFilter = (opt: Option, search: string): boolean => {
+        return opt.text.toLowerCase().indexOf(search.toLowerCase()) !== -1
+      }
+
+      // With searchFilter search against current store data set
+      const searchResults = store.search('test2', searchFilter)
+      expect(searchResults).toHaveLength(1)
+      expect((searchResults[0] as Option).value).toBe('test2')
+    })
+
+    test('empty search term returns all options', () => {
+      const store = new Store('single', [
+        {
+          text: 'test1',
+        },
+        {
+          text: 'test2',
+          value: 'test2',
+        },
+        {
+          text: 'test3',
+        },
+      ])
+
+      const searchFilter = (opt: Option, search: string): boolean => {
+        return opt.text.toLowerCase().indexOf(search.toLowerCase()) !== -1
+      }
+
+      // Test empty search term
+      const searchResults = store.search('', searchFilter)
+      expect(searchResults).toHaveLength(3)
+    })
+  })
+
+  describe('filter', () => {
+    let store: Store
+
+    beforeAll(() => {
+      store = new Store('single', [
+        {
+          label: 'group 0',
+          options: [
+            {
+              text: 'opt 0',
+              class: 'filter-me',
+            },
+            {
+              text: 'opt 1',
+            },
+          ],
+        },
+        {
+          text: 'opt 2',
+          class: 'filter-me',
+        },
+      ])
+    })
+
+    test('empty filter function returns all options (with opt group)', () => {
+      const res = store.filter(null, true)
+      expect(res).toHaveLength(2)
+      expect(res[0]).toBeInstanceOf(Optgroup)
+      expect((res[0] as Optgroup).label).toBe('group 0')
+      expect((res[0] as Optgroup).options).toHaveLength(2)
+      expect(res[1]).toBeInstanceOf(Option)
+    })
+
+    test('empty filter function returns all options without optgroups flattens results', () => {
+      const res = store.filter(null, false)
+      expect(res).toHaveLength(3)
+      expect(res[0]).toBeInstanceOf(Option)
+      expect((res[0] as Option).text).toBe('opt 0')
+      expect(res[1]).toBeInstanceOf(Option)
+      expect((res[1] as Option).text).toBe('opt 1')
+      expect(res[2]).toBeInstanceOf(Option)
+      expect((res[2] as Option).text).toBe('opt 2')
+    })
+
+    test('filter function filters results accordingly', () => {
+      const res = store.filter((o) => o.class === 'filter-me', false)
+      expect(res).toHaveLength(2)
+      expect(res[0]).toBeInstanceOf(Option)
+      expect((res[0] as Option).text).toBe('opt 0')
+      expect(res[1]).toBeInstanceOf(Option)
+      expect((res[1] as Option).text).toBe('opt 2')
+    })
   })
 })
diff --git a/src/slim-select/store.ts b/src/slim-select/store.ts
index 25fe3f96..25a3e07f 100644
--- a/src/slim-select/store.ts
+++ b/src/slim-select/store.ts
@@ -115,11 +115,17 @@ export default class Store {
 
         if ('options' in dataObj && dataObj.options) {
           for (let option of dataObj.options) {
-            return this.validateOption(option)
+            const validationError = this.validateOption(option)
+            if (validationError) {
+              return validationError
+            }
           }
         }
       } else if (dataObj instanceof Option || 'text' in dataObj) {
-        return this.validateOption(dataObj)
+        const validationError = this.validateOption(dataObj)
+        if (validationError) {
+          return validationError
+        }
       } else {
         return new Error('Data object must be a valid optgroup or option')
       }
@@ -253,29 +259,6 @@ export default class Store {
     }, false) as Option[]
   }
 
-  public getSelectedIDs(): string[] {
-    let selectedOptions = this.getSelectedOptions()
-
-    let selectedIDs: string[] = []
-    selectedOptions.forEach((op: Option) => {
-      selectedIDs.push(op.id)
-    })
-
-    return selectedIDs
-  }
-
-  public getOptgroupByID(id: string): Optgroup | null {
-    // Loop through each data object
-    // and if optgroup is found, return it
-    for (let dataObj of this.data) {
-      if (dataObj instanceof Optgroup && dataObj.id === id) {
-        return dataObj
-      }
-    }
-
-    return null
-  }
-
   public getOptionByID(id: string): Option | null {
     let options = this.filter((opt: Option) => {
       return opt.id === id
@@ -361,5 +344,4 @@ export default class Store {
 
     return dataSearch
   }
-
 }

From 96ed47e48f0c18c90f55be295822433655631345 Mon Sep 17 00:00:00 2001
From: Data5tream <6423657+Data5tream@users.noreply.github.com>
Date: Thu, 21 Mar 2024 16:58:25 +0100
Subject: [PATCH 04/12] Add GitHub actions and more tests

Add tests for settings and index, configure GitHub actions for code coverage and automatic testing
---
 .github/workflows/coverage.yml   |  24 +++++
 .github/workflows/jest.yml       |  18 ++++
 .prettierignore                  |   1 +
 jest.config.js                   |   6 ++
 src/slim-select/index.test.ts    |  98 +++++++++++++++++-
 src/slim-select/index.ts         |   4 +-
 src/slim-select/settings.test.ts | 172 +++++++++++++++++++++++++++++++
 7 files changed, 318 insertions(+), 5 deletions(-)
 create mode 100644 .github/workflows/coverage.yml
 create mode 100644 .github/workflows/jest.yml
 create mode 100644 .prettierignore

diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml
new file mode 100644
index 00000000..af4d9394
--- /dev/null
+++ b/.github/workflows/coverage.yml
@@ -0,0 +1,24 @@
+name: 'Code coverage'
+on:
+  push:
+    branches:
+      - develop
+    paths-ignore:
+      - '**/dist/**'
+      - '**/*.md'
+      - '.github/**'
+      - '.vscode/**'
+  pull_request:
+    branches:
+      - develop
+    paths-ignore:
+      - '**/dist/**'
+      - '**/*.md'
+      - '.github/**'
+      - '.vscode/**'
+jobs:
+  coverage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ArtiomTr/jest-coverage-report-action@v2
diff --git a/.github/workflows/jest.yml b/.github/workflows/jest.yml
new file mode 100644
index 00000000..7e638bed
--- /dev/null
+++ b/.github/workflows/jest.yml
@@ -0,0 +1,18 @@
+name: 'Jest unit tests'
+on:
+  push:
+    paths-ignore:
+      - '**/dist/**'
+      - '**/*.md'
+      - '.github/**'
+      - '.vscode/**'
+jobs:
+  jest:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '21.5.0'
+      - run: npm ci
+      - run: npm run test
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..581edad3
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+**/dist
diff --git a/jest.config.js b/jest.config.js
index 8fb6a9c9..54208409 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -5,4 +5,10 @@ module.exports = {
   testEnvironment: 'jsdom',
   testMatch: ['**/*.test.ts'],
   roots: ['./src/slim-select'],
+  reporters: process.env.CI ? [['github-actions', {silent: false}], 'summary'] : ['default'],
+  coverageThreshold: {
+    global: {
+      lines: 75,
+    },
+  },
 }
diff --git a/src/slim-select/index.test.ts b/src/slim-select/index.test.ts
index 623f9b6a..d9abbbaa 100644
--- a/src/slim-select/index.test.ts
+++ b/src/slim-select/index.test.ts
@@ -9,13 +9,105 @@ import { OptionOptional } from './store'
 import { Config } from './index'
 
 describe('SlimSelect Module', () => {
-  test('constructor', () => {
+  let slim: SlimSelect
+
+  beforeEach(() => {
     document.body.innerHTML = '<select id="test"></select>'
 
-    let slimSelect = new SlimSelect({
+    slim = new SlimSelect({
       select: '#test',
     })
-    expect(slimSelect).toBeInstanceOf(SlimSelect)
+  })
+
+  describe('constructor', () => {
+    test('missing select element throws error', () => {
+      const errorMock = jest.fn()
+      const slim = new SlimSelect({ select: '#invalid', events: { error: errorMock } })
+
+      expect(slim.select).toBeUndefined()
+      expect(slim.store).toBeUndefined()
+      expect(slim.render).toBeUndefined()
+      expect(errorMock).toHaveBeenCalled()
+      expect(errorMock.mock.calls[0][0].message).toBe('Could not find select element')
+    })
+
+    test('invalid element throws error', () => {
+      document.body.innerHTML = '<div id="invalid"></div>'
+
+      const errorMock = jest.fn()
+      const slim = new SlimSelect({ select: '#invalid', events: { error: errorMock } })
+
+      expect(slim.select).toBeUndefined()
+      expect(slim.store).toBeUndefined()
+      expect(slim.render).toBeUndefined()
+      expect(errorMock).toHaveBeenCalled()
+      expect(errorMock.mock.calls[0][0].message).toBe('Element isnt of type select')
+    })
+
+    test('valid minimal constructor with query string', () => {
+      document.body.innerHTML = '<select id="test"></select>'
+
+      const slimSelect = new SlimSelect({
+        select: '#test',
+      })
+
+      expect(slimSelect).toBeInstanceOf(SlimSelect)
+    })
+
+    test('valid minimal constructor with HTML element', () => {
+      document.body.innerHTML = '<select id="test"></select>'
+
+      const slimSelect = new SlimSelect({
+        select: document.getElementById('test') as Element,
+      })
+
+      expect(slimSelect).toBeInstanceOf(SlimSelect)
+    })
+
+    test('disabled gets applied correctly', () => {
+      document.body.innerHTML = '<select id="test"></select>'
+
+      const slim = new SlimSelect({
+        select: document.getElementById('test') as Element,
+        settings: {
+          disabled: true,
+        },
+      })
+
+      expect(slim.settings.disabled).toBe(true)
+    })
+  })
+
+  test('enable', () => {
+    slim.settings.disabled = true
+
+    const selectEnableMock = jest.fn()
+    const renderEnableMock = jest.fn()
+
+    slim.select.enable = selectEnableMock
+    slim.render.enable = renderEnableMock
+
+    slim.enable()
+
+    expect(slim.settings.disabled).toBe(false)
+    expect(selectEnableMock).toHaveBeenCalled()
+    expect(renderEnableMock).toHaveBeenCalled()
+  })
+
+  test('disable', () => {
+    slim.settings.disabled = false
+
+    const selectDisableMock = jest.fn()
+    const renderDisableMock = jest.fn()
+
+    slim.select.disable = selectDisableMock
+    slim.render.disable = renderDisableMock
+
+    slim.disable()
+
+    expect(slim.settings.disabled).toBe(true)
+    expect(selectDisableMock).toHaveBeenCalled()
+    expect(renderDisableMock).toHaveBeenCalled()
   })
 
   test('multiple - do not render deselect all with no selected options', () => {
diff --git a/src/slim-select/index.ts b/src/slim-select/index.ts
index f659b657..cc3dddd1 100644
--- a/src/slim-select/index.ts
+++ b/src/slim-select/index.ts
@@ -8,8 +8,8 @@ import CssClasses, { CssClassesPartial } from './css_classes'
 export interface Config {
   select: string | Element
   data?: DataArrayPartial
-  settings?: SettingsPartial,
-  cssClasses?: CssClassesPartial,
+  settings?: SettingsPartial
+  cssClasses?: CssClassesPartial
   events?: Events
 }
 
diff --git a/src/slim-select/settings.test.ts b/src/slim-select/settings.test.ts
index f98ac208..02dfcb01 100644
--- a/src/slim-select/settings.test.ts
+++ b/src/slim-select/settings.test.ts
@@ -1,6 +1,8 @@
 'use strict'
 import { describe, expect, test } from '@jest/globals'
 import Settings from './settings'
+import Select from './select'
+import { Option, Optgroup } from './store'
 
 const defaultSettings: { [key: string]: any } = {
   id: 'ss-qucyuytu',
@@ -36,6 +38,13 @@ const defaultSettings: { [key: string]: any } = {
 }
 
 describe('Settings module', () => {
+  let select: Select
+
+  beforeEach(() => {
+    const selectElement = document.createElement('select')
+    select = new Select(selectElement)
+  })
+
   test('empty constructor returns default settings', () => {
     // Convert to unknown and then to custom object to prevent TS from throwing errors
     const settings = new Settings() as unknown as { [key: string]: string }
@@ -81,4 +90,167 @@ describe('Settings module', () => {
       }
     })
   })
+
+  test('enable', () => {
+    select.select.disabled = true
+
+    select.enable()
+    expect(select.select.disabled).toBe(false)
+  })
+
+  test('disable', () => {
+    select.select.disabled = false
+
+    select.disable()
+    expect(select.select.disabled).toBe(true)
+  })
+
+  test('showUI', () => {
+    select.select.setAttribute('tabindex', '1')
+    select.select.setAttribute('aria-hidden', 'true')
+    select.select.style.display = 'none'
+
+    select.showUI()
+    expect(select.select.getAttribute('tabindex')).toBeFalsy()
+    expect(select.select.getAttribute('aria-hidden')).toBeFalsy()
+    expect(select.select.style.display).toBeFalsy()
+  })
+
+  describe('createOptgroup', () => {
+    test('group gets created correctly', () => {
+      const optGroup = new Optgroup({
+        label: 'test',
+        options: [
+          {
+            text: 'opt 1',
+          },
+          {
+            text: 'opt 2',
+          },
+        ],
+      })
+
+      const optGroupElement = select.createOptgroup(optGroup)
+
+      expect(optGroupElement).toBeInstanceOf(HTMLOptGroupElement)
+      expect(optGroupElement.children).toHaveLength(2)
+    })
+
+    test('selectAll get set correctly', () => {
+      const optGroup = new Optgroup({
+        label: 'test',
+        selectAll: true,
+        options: [
+          {
+            text: 'opt 1',
+          },
+          {
+            text: 'opt 2',
+          },
+        ],
+      })
+
+      const optGroupElement = select.createOptgroup(optGroup)
+
+      expect(optGroupElement).toBeInstanceOf(HTMLOptGroupElement)
+      expect(optGroupElement.dataset.selectAll).toBe('true')
+    })
+
+    test('closable get set correctly', () => {
+      const optGroup = new Optgroup({
+        label: 'test',
+        closable: 'open',
+        options: [
+          {
+            text: 'opt 1',
+          },
+          {
+            text: 'opt 2',
+          },
+        ],
+      })
+
+      const optGroupElement = select.createOptgroup(optGroup)
+
+      expect(optGroupElement).toBeInstanceOf(HTMLOptGroupElement)
+      expect(optGroupElement.dataset.closable).toBe(optGroup.closable)
+    })
+  })
+
+  describe('createOption', () => {
+    test('correct content is set', () => {
+      const option = new Option({ text: 'opt' })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement).toBeInstanceOf(HTMLOptionElement)
+      expect(optionElement.id).toBe(option.id)
+      expect(optionElement.textContent).toBe(option.text)
+    })
+
+    test('HTML is set as data attribute', () => {
+      const option = new Option({ text: 'opt', html: '<h1>opt</h1>' })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement.dataset.html).toBe(option.html)
+    })
+
+    test('disabled sets disabled property correctly', () => {
+      const option = new Option({ text: 'opt', disabled: true })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement.disabled).toBe(true)
+    })
+
+    test('display false sets inline style correctly', () => {
+      const option = new Option({ text: 'opt', display: false })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement.style.display).toBe('none')
+    })
+
+    test('placeholder and mandatory set data attributes correctly', () => {
+      const option = new Option({
+        text: 'opt',
+        placeholder: true,
+        mandatory: true,
+      })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement.dataset.placeholder).toBeTruthy()
+      expect(optionElement.dataset.mandatory).toBeTruthy()
+    })
+
+    test('class sets CSS classes correctly', () => {
+      const option = new Option({
+        text: 'opt',
+        class: 'class0 class1 class2',
+      })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement.classList.contains('class0')).toBe(true)
+      expect(optionElement.classList.contains('class1')).toBe(true)
+      expect(optionElement.classList.contains('class2')).toBe(true)
+    })
+
+    test('custom data attributes are set correctly', () => {
+      const option = new Option({
+        text: 'opt',
+        data: {
+          test0: 'a',
+          test1: 'b',
+        },
+      })
+      const optionElement = select.createOption(option)
+
+      expect(optionElement.dataset.test0).toBe('a')
+      expect(optionElement.dataset.test1).toBe('b')
+    })
+  })
+
+  test('destroy', () => {
+    select.destroy()
+
+    expect((<any>select).observer).toBeFalsy()
+    expect('id' in select.select.dataset).toBeFalsy()
+  })
 })

From 7ee8e6745b163222b95f912134cc30e8ed19ae30 Mon Sep 17 00:00:00 2001
From: Data5tream <6423657+Data5tream@users.noreply.github.com>
Date: Thu, 21 Mar 2024 17:04:13 +0100
Subject: [PATCH 05/12] Add unit test badge to README

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index f5fad2ec..262c62ef 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,7 @@
 Advanced select dropdown
 
 [![NPM Downloads](https://img.shields.io/npm/dt/slim-select.svg)](https://www.npmjs.com/package/slim-select)
+![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/brianvoe/slim-select/jest.yml?logo=jest&label=unit%20tests)
 
 ## Support
 

From 6cdf5466b13c465d215e27418ed0a3a51ba10887 Mon Sep 17 00:00:00 2001
From: Data5tream <6423657+Data5tream@users.noreply.github.com>
Date: Fri, 22 Mar 2024 19:08:35 +0100
Subject: [PATCH 06/12] Add tests for select and fix a potential bug

Also update actions to newer versions.
---
 .github/workflows/coverage.yml |   2 +-
 .github/workflows/jest.yml     |   5 +-
 src/slim-select/select.test.ts | 420 +++++++++++++++++++++------------
 src/slim-select/select.ts      |  19 +-
 4 files changed, 293 insertions(+), 153 deletions(-)

diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml
index af4d9394..2851fc71 100644
--- a/.github/workflows/coverage.yml
+++ b/.github/workflows/coverage.yml
@@ -20,5 +20,5 @@ jobs:
   coverage:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: ArtiomTr/jest-coverage-report-action@v2
diff --git a/.github/workflows/jest.yml b/.github/workflows/jest.yml
index 7e638bed..d4ede62a 100644
--- a/.github/workflows/jest.yml
+++ b/.github/workflows/jest.yml
@@ -10,9 +10,10 @@ jobs:
   jest:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '21.5.0'
+          cache: 'npm'
       - run: npm ci
       - run: npm run test
diff --git a/src/slim-select/select.test.ts b/src/slim-select/select.test.ts
index a741858b..47435c31 100644
--- a/src/slim-select/select.test.ts
+++ b/src/slim-select/select.test.ts
@@ -9,33 +9,101 @@ import Select from './select'
 import Store, { Optgroup, Option } from './store'
 
 describe('select module', () => {
-  test('constructor', () => {
-    document.body.innerHTML = '<select id="test"></select>'
+  let select: Select
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
-    expect(select).toBeInstanceOf(Select)
+  beforeEach(() => {
+    document.body.innerHTML = `<select id="test" multiple>
+        <optgroup label="test1">
+            <option value="1">One</option>
+            <option value="2">Two</option>
+        </optgroup>
+        <optgroup label="test2">
+            <option value="3">Three</option>
+            <option value="4">Four</option>
+            <option value="5">Five</option>
+        </optgroup>
+        <option value="6">Six</option>
+      </select>`
+
+    const selectElement = document.getElementById('test') as HTMLSelectElement
+    select = new Select(selectElement)
   })
 
-  test('get data from select options', () => {
-    document.body.innerHTML = `<select id="test">
-        <option id="value1" value="1">One</option>
-        <option value="2">Two</option>
-    </select>`
+  describe('constructor', () => {
+    test('constructor works', () => {
+      document.body.innerHTML = '<select id="test"></select>'
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
-    let data = select.getData() as Option[]
-    expect(data.length).toBe(2)
-    expect(data[0].id).toBe('value1')
-    expect(data[0].value).toBe('1')
-    expect(data[0].text).toBe('One')
-    expect(data[1].value).toBe('2')
-    expect(data[1].text).toBe('Two')
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
+
+      expect(select).toBeInstanceOf(Select)
+      expect(select.listen).toBe(true)
+      expect((<any>select).observer).toBeInstanceOf(MutationObserver)
+    })
+  })
+
+  describe('enable', () => {
+    test('enable enables select element', () => {
+      select.select.disabled = true
+      select.enable()
+
+      expect(select.select.disabled).toBe(false)
+    })
+  })
+
+  describe('disable', () => {
+    test('disable disables select element', () => {
+      select.disable()
+
+      expect(select.select.disabled).toBe(true)
+    })
+  })
+
+  describe('hideUI', () => {
+    test('correct HTML attributes get set', () => {
+      select.hideUI()
+
+      expect(select.select.tabIndex).toBe(-1)
+      expect(select.select.style.display).toBe('none')
+      expect(select.select.getAttribute('aria-hidden')).toBe('true')
+    })
+  })
+
+  describe('showUI', () => {
+    test('HTML attributes get reset', () => {
+      select.select.tabIndex = -1
+      select.select.style.display = 'none'
+      select.select.setAttribute('aria-hidden', 'true')
+
+      select.showUI()
+
+      expect(select.select.tabIndex).toBeFalsy()
+      expect(select.select.style.display).toBeFalsy()
+      expect(select.select.getAttribute('aria-hidden')).toBeNull()
+    })
   })
 
-  test('get data from select optgroups', () => {
-    document.body.innerHTML = `<select id="test">
+  describe('getData', () => {
+    test('get data from select options', () => {
+      document.body.innerHTML = `<select id="test">
+        <option id="value1" value="1">One</option>
+        <option value="2">Two</option>
+      </select>`
+
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
+      const data = select.getData() as Option[]
+
+      expect(data).toHaveLength(2)
+      expect(data[0].id).toBe('value1')
+      expect(data[0].value).toBe('1')
+      expect(data[0].text).toBe('One')
+      expect(data[1].value).toBe('2')
+      expect(data[1].text).toBe('Two')
+    })
+
+    test('get data from select optgroups', () => {
+      document.body.innerHTML = `<select id="test">
         <optgroup label="test1">
             <option value="1">One</option>
             <option value="2">Two</option>
@@ -45,26 +113,83 @@ describe('select module', () => {
             <option value="4">Four</option>
             <option value="5">Five</option>
         </optgroup>
-    </select>`
+      </select>`
+
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
+      const data = select.getData() as Optgroup[]
+
+      expect(data).toHaveLength(2)
+
+      expect(data[0].label).toBe('test1')
+      expect(data[0].options).toHaveLength(2)
+      expect(data[0].options[0].value).toBe('1')
+      expect(data[0].options[0].text).toBe('One')
+      expect(data[0].options[1].value).toBe('2')
+      expect(data[0].options[1].text).toBe('Two')
+
+      expect(data[1].label).toBe('test2')
+      expect(data[1].options).toHaveLength(3)
+      expect(data[1].options[0].value).toBe('3')
+      expect(data[1].options[0].text).toBe('Three')
+      expect(data[1].options[1].value).toBe('4')
+      expect(data[1].options[1].text).toBe('Four')
+      expect(data[1].options[2].value).toBe('5')
+      expect(data[1].options[2].text).toBe('Five')
+    })
+  })
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
-    let data = select.getData() as Optgroup[]
-    expect(data.length).toBe(2)
-    expect(data[0].label).toBe('test1')
-    expect(data[0].options.length).toBe(2)
-    expect(data[0].options[0].value).toBe('1')
-    expect(data[0].options[0].text).toBe('One')
-    expect(data[0].options[1].value).toBe('2')
-    expect(data[0].options[1].text).toBe('Two')
-    expect(data[1].label).toBe('test2')
-    expect(data[1].options.length).toBe(3)
-    expect(data[1].options[0].value).toBe('3')
-    expect(data[1].options[0].text).toBe('Three')
-    expect(data[1].options[1].value).toBe('4')
-    expect(data[1].options[1].text).toBe('Four')
-    expect(data[1].options[2].value).toBe('5')
-    expect(data[1].options[2].text).toBe('Five')
+  describe('setSelected', () => {
+    test('single value get selected correctly', () => {
+      select.setSelected(['6'])
+
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="6"]')?.selected).toBe(true)
+    })
+
+    test('opt group value gets selected correctly', () => {
+      select.setSelected(['4'])
+
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="4"]')?.selected).toBe(true)
+    })
+
+    test('mix of options get selected correctly', () => {
+      select.setSelected(['2', '3', '6'])
+
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="2"]')?.selected).toBe(true)
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="3"]')?.selected).toBe(true)
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="6"]')?.selected).toBe(true)
+    })
+  })
+
+  describe('updateSelected', () => {
+    test('id gets updated correctly', () => {
+      select.select.dataset.id = 'old_id'
+
+      select.updateSelect('new_id')
+
+      expect(select.select.dataset.id).toBe('new_id')
+    })
+
+    test('new styles are set correctly', () => {
+      select.updateSelect(undefined, 'color: red')
+
+      expect(select.select.style.color).toBe('red')
+    })
+
+    test("setting styles doesn't override id", () => {
+      select.select.dataset.id = 'set_id'
+
+      select.updateSelect(undefined, 'color: red')
+
+      expect(select.select.dataset.id).toBe('set_id')
+    })
+
+    test('classes are set correctly', () => {
+      select.updateSelect(undefined, undefined, ['class0', 'class1'])
+
+      expect(select.select.classList.contains('class0')).toBe(true)
+      expect(select.select.classList.contains('class1')).toBe(true)
+    })
   })
 
   test('update select from data', () => {
@@ -94,96 +219,92 @@ describe('select module', () => {
     )
   })
 
-  test('event change value listener', async () => {
-    document.body.innerHTML = `<select id="test">
+  describe('onValueChange', () => {
+    let select: Select
+    let selectElement: HTMLSelectElement
+
+    beforeEach(() => {
+      document.body.innerHTML = `<select id="test">
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
-    </select>`
-
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
+      </select>`
 
-    let data = select.getData() as Option[]
+      selectElement = document.getElementById('test') as HTMLSelectElement
+      select = new Select(selectElement)
+    })
 
-    expect(data[0].selected).toBe(true)
+    test('listener is triggered when the select value changes', async () => {
+      // make sure the first element is selected as standard
+      let data = select.getData() as Option[]
+      expect(data[0].selected).toBe(true)
 
-    const callback = jest.fn()
-    select.onValueChange = callback
+      const onValueMock = jest.fn()
+      select.onValueChange = onValueMock
 
-    // Change the value
-    selectElement.value = '2'
-    selectElement.dispatchEvent(new Event('change'))
+      // Change the value
+      selectElement.value = '2'
+      selectElement.dispatchEvent(new Event('change'))
 
-    // TODO: figure out why this is not working
-    // expect(callback).toHaveBeenCalled()
+      await new Promise((r) => setTimeout(r, 50))
+      expect(onValueMock).toHaveBeenCalled()
 
-    // Get selected data
-    const selected = select.getSelectedValues()
-    expect(selected[0]).toBe('2')
+      // Get selected data
+      const selected = select.getSelectedValues()
+      expect(selected[0]).toBe('2')
 
-    // Change the full data
-    data = select.getData() as Option[]
-    expect(data[1].selected).toBe(true)
-  })
+      // Check all data
+      data = select.getData() as Option[]
+      expect(data[0].selected).toBe(false)
+      expect(data[1].selected).toBe(true)
+    })
 
-  test('event change value listener when options are replaced', () => {
-    document.body.innerHTML = `<select id="test">
-        <option value="1">One</option>
-        <option value="2">Two</option>
-        <option value="3">Three</option>
-    </select>`
+    test('listener is triggered when inner HTML is replaced with new options', async () => {
+      const onValueMock = jest.fn()
+      select.onValueChange = onValueMock
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
-
-    let data = select.getData() as Option[]
-
-    expect(data[0].selected).toBe(true)
-
-    const callback = jest.fn()
-    select.onValueChange = callback
-
-    selectElement.innerHTML = `<option value="4">Four</option>
+      selectElement.innerHTML = `<option value="4">Four</option>
         <option value="5" selected>Five</option>
         <option value="6">Six</option>`
 
-    // TODO: figure out why this is not working
-    // expect(callback).toHaveBeenCalled()
+      await new Promise((r) => setTimeout(r, 50))
+      expect(onValueMock).toHaveBeenCalled()
 
-    // Give the mutation observer time to run
-    data = select.getData() as Option[]
-    expect(data[1].value).toBe('5')
-    expect(data[1].selected).toBe(true)
+      // Give the mutation observer time to run
+      const data = select.getData() as Option[]
+      expect(data[1].value).toBe('5')
+      expect(data[1].selected).toBe(true)
+    })
   })
 
-  test('mutation observer listener for select option changes', () => {
-    document.body.innerHTML = `<select id="test">
+  describe('onOptionsChange', () => {
+    test('listener triggers when select options change without changing the select value', async () => {
+      document.body.innerHTML = `<select id="test">
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
-    </select>`
+      </select>`
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
 
-    let data = select.getData() as Option[]
-    expect(data.length).toBe(3)
+      let data = select.getData() as Option[]
+      expect(data).toHaveLength(3)
 
-    const callback = jest.fn()
-    select.onOptionsChange = callback
+      const onOptionsMock = jest.fn()
+      select.onOptionsChange = onOptionsMock
 
-    selectElement.innerHTML = '<option value="1">One</option><option value="2">Two</option>'
+      selectElement.innerHTML = '<option value="1">One</option><option value="2">Two</option>'
 
-    // TODO: figure out why this is not working
-    // expect(callback).toHaveBeenCalled()
+      await new Promise((r) => setTimeout(r, 50))
+      expect(onOptionsMock).toHaveBeenCalled()
 
-    data = select.getData() as Option[]
-    expect(data.length).toBe(2)
-  })
+      data = select.getData() as Option[]
+      expect(data).toHaveLength(2)
+    })
 
-  test('mutation observer listener for select optgroup option changes', () => {
-    document.body.innerHTML = `<select id="test">
+    test('listener triggers when optgroup options change', async () => {
+      document.body.innerHTML = `<select id="test">
         <optgroup id="test_optgroup" label="test1">
             <option value="1">One</option>
             <option value="2">Two</option>
@@ -193,58 +314,59 @@ describe('select module', () => {
             <option value="4">Four</option>
             <option value="5">Five</option>
         </optgroup>
-    </select>`
+      </select>`
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
-
-    let dataOptgroup = select.getData() as Optgroup[]
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
 
-    expect(dataOptgroup.length).toBe(2)
+      const optGroups = select.getData() as Optgroup[]
+      expect(optGroups).toHaveLength(2)
 
-    const callback = jest.fn()
-    select.onOptionsChange = callback
+      const onOptionsMock = jest.fn()
+      select.onOptionsChange = onOptionsMock
 
-    let selectOptgroup = document.getElementById('test_optgroup') as HTMLOptGroupElement
-    selectOptgroup.innerHTML = '<option value="8">Eight</option><option value="9">Nine</option>'
+      const selectOptgroup = document.getElementById('test_optgroup') as HTMLOptGroupElement
+      selectOptgroup.innerHTML = '<option value="8">Eight</option><option value="9">Nine</option>'
 
-    // TODO: figure out why this is not working
-    // expect(callback).toHaveBeenCalled()
+      await new Promise((r) => setTimeout(r, 50))
+      expect(onOptionsMock).toHaveBeenCalled()
 
-    let dataOptgroups = select.getData() as Option[]
-    expect(dataOptgroups.length).toBe(2)
+      const options = select.getData() as Option[]
+      expect(options).toHaveLength(2)
 
-    // get selected data
-    let selected = select.getSelectedValues()
-    expect(selected.length).toBe(1)
-  })
+      // get selected data
+      const selected = select.getSelectedValues()
+      expect(selected).toHaveLength(1)
+    })
 
-  test('mutation observer listener for select option text changes', () => {
-    document.body.innerHTML = `<select id="test">
+    test('listener triggers when select option text changes', async () => {
+      document.body.innerHTML = `<select id="test">
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
-    </select>`
+      </select>`
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
 
-    let data = select.getData() as Option[]
+      let data = select.getData() as Option[]
+      expect(data[0].text).toBe('One')
 
-    expect(data[0].text).toBe('One')
+      const onOptionsMock = jest.fn()
+      select.onOptionsChange = onOptionsMock
 
-    const callback = jest.fn()
-    select.onOptionsChange = callback
+      let option = selectElement.options[0]
+      option.text = 'New One'
 
-    let option = selectElement.options[0]
-    option.text = 'New One'
+      await new Promise((r) => setTimeout(r, 50))
+      expect(onOptionsMock).toHaveBeenCalled()
 
-    data = select.getData() as Option[]
-    expect(data[0].text).toBe('New One')
-  })
+      data = select.getData() as Option[]
+      expect(data[0].text).toBe('New One')
+    })
 
-  test('mutation observer listener for select optgroup option text changes', () => {
-    document.body.innerHTML = `<select id="test">
+    test('listener triggers when select optgroup option text changes', async () => {
+      document.body.innerHTML = `<select id="test">
         <optgroup id="test_optgroup" label="test1">
             <option id=test_option value="1">One</option>
             <option value="2">Two</option>
@@ -254,22 +376,26 @@ describe('select module', () => {
             <option value="4">Four</option>
             <option value="5">Five</option>
         </optgroup>
-    </select>`
+      </select>`
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
+
+      let dataOptgroup = select.getData() as Optgroup[]
 
-    let dataOptgroup = select.getData() as Optgroup[]
+      expect(dataOptgroup[0].options[0].text).toBe('One')
 
-    expect(dataOptgroup[0].options[0].text).toBe('One')
+      const onOptionsMock = jest.fn()
+      select.onOptionsChange = onOptionsMock
 
-    const callback = jest.fn()
-    select.onOptionsChange = callback
+      let selectOption = document.getElementById('test_option') as HTMLOptionElement
+      selectOption.text = 'New One'
 
-    let selectOption = document.getElementById('test_option') as HTMLOptionElement
-    selectOption.text = 'New One'
+      await new Promise((r) => setTimeout(r, 50))
+      expect(onOptionsMock).toHaveBeenCalled()
 
-    let dataOption = select.getData() as Optgroup[]
-    expect(dataOption[0].options[0].text).toBe('New One')
+      let dataOption = select.getData() as Optgroup[]
+      expect(dataOption[0].options[0].text).toBe('New One')
+    })
   })
 })
diff --git a/src/slim-select/select.ts b/src/slim-select/select.ts
index e56c83f4..55a4626c 100644
--- a/src/slim-select/select.ts
+++ b/src/slim-select/select.ts
@@ -85,7 +85,7 @@ export default class Select {
   }
 
   private observeCall(mutations: MutationRecord[]): void {
-    // If we are not listeing do nothing
+    // Do nothing if we are not listening
     if (!this.listen) {
       return
     }
@@ -107,6 +107,19 @@ export default class Select {
         if (m.attributeName === 'class') {
           classChanged = true
         }
+
+        if (m.type === 'childList') {
+          for (const n of m.addedNodes) {
+            if (n.nodeName === 'OPTION' && (<HTMLOptionElement>n).value === this.select.value) {
+              // we added a new option that's now the select value
+              this.select.dispatchEvent(new Event('change'))
+              break
+            }
+          }
+
+          // options changed, so we need the optionsChange event to fire
+          optgroupOptionChanged = true
+        }
       }
 
       // Check if its an optgroup or option
@@ -184,7 +197,7 @@ export default class Select {
       text: option.text,
       html: option.dataset && option.dataset.html ? option.dataset.html : '',
       selected: option.selected,
-      display: option.style.display === 'none' ? false : true,
+      display: option.style.display !== 'none',
       disabled: option.disabled,
       mandatory: option.dataset ? option.dataset.mandatory === 'true' : false,
       placeholder: option.dataset.placeholder === 'true',
@@ -335,7 +348,7 @@ export default class Select {
     if (info.disabled) {
       optionEl.disabled = true
     }
-    if (info.display === false) {
+    if (!info.display) {
       optionEl.style.display = 'none'
     }
     if (info.placeholder) {

From c6082f59cbbb5efb66978208c30a57ee7abbd680 Mon Sep 17 00:00:00 2001
From: Data5tream <6423657+Data5tream@users.noreply.github.com>
Date: Sat, 23 Mar 2024 12:53:34 +0100
Subject: [PATCH 07/12] Add tests for the render class

---
 src/slim-select/render.test.ts | 1193 +++++++++++++++++++++++++++++++-
 src/slim-select/render.ts      |    2 +-
 2 files changed, 1176 insertions(+), 19 deletions(-)

diff --git a/src/slim-select/render.test.ts b/src/slim-select/render.test.ts
index 200283f2..29d75396 100644
--- a/src/slim-select/render.test.ts
+++ b/src/slim-select/render.test.ts
@@ -7,35 +7,1192 @@
 import { describe, expect, test } from '@jest/globals'
 import Render, { Callbacks } from './render'
 import Settings from './settings'
-import Store, { DataArray, Option } from './store'
+import Store, { Option } from './store'
 import CssClasses from './css_classes'
 
-describe('select module', () => {
-  test('constructor', () => {
-    // create a new store with 2 options
+describe('render module', () => {
+  let render: Render
+  let openMock: jest.Mock
+  let closeMock: jest.Mock
+  let addSelectedMock: jest.Mock
+  let setSelectedMock: jest.Mock
+  let addOptionMock: jest.Mock
+  let searchMock: jest.Mock
+  let afterChangeMock: jest.Mock
+  let beforeChangeMock: jest.Mock
+
+  beforeEach(() => {
     const store = new Store('single', [
-      { text: 'test1', value: 'test1' },
-      { text: 'test2', value: 'test2' },
+      {
+        text: 'test0',
+        value: 'test0',
+      },
+      {
+        text: 'test1',
+        value: 'test1',
+        html: '<span>test1</span>',
+      },
+      {
+        text: 'test2',
+        selected: true,
+      },
     ])
 
     // default settings
     const settings = new Settings()
     const classes = new CssClasses()
 
+    openMock = jest.fn(() => {})
+    closeMock = jest.fn(() => {})
+    addSelectedMock = jest.fn(() => {})
+    setSelectedMock = jest.fn(() => {})
+    addOptionMock = jest.fn(() => {})
+    searchMock = jest.fn(() => {})
+    afterChangeMock = jest.fn(() => {})
+    beforeChangeMock = jest.fn(() => true)
+
     // default callbacks
     const callbacks = {
-      open: () => {},
-      close: () => {},
-      addSelected: (value: string) => {},
-      setSelected: (value: string[]) => {},
-      addOption: (option: Option) => {},
-      search: (search: string) => {},
-      beforeChange: (before: DataArray, after: DataArray) => {
-        return true
-      },
-    } as Callbacks
+      open: openMock,
+      close: closeMock,
+      addSelected: addSelectedMock,
+      setSelected: setSelectedMock,
+      addOption: addOptionMock,
+      search: searchMock,
+      afterChange: afterChangeMock,
+      beforeChange: beforeChangeMock,
+    }
+
+    render = new Render(settings, classes, store, callbacks)
+  })
+
+  describe('constructor', () => {
+    test('default constructor works', () => {
+      // create a new store with 2 options
+      const store = new Store('single', [
+        { text: 'test1', value: 'test1' },
+        { text: 'test2', value: 'test2' },
+      ])
+
+      // default settings
+      const settings = new Settings()
+      const classes = new CssClasses()
+
+      // default callbacks
+      const callbacks = {
+        open: () => {},
+        close: () => {},
+        addSelected: () => {},
+        setSelected: () => {},
+        addOption: () => {},
+        search: () => {},
+        beforeChange: () => {
+          return true
+        },
+      } as Callbacks
+
+      const render = new Render(settings, classes, store, callbacks)
+      expect(render).toBeInstanceOf(Render)
+      expect(render.main.main).toBeInstanceOf(HTMLDivElement)
+      expect(render.content.search.input).toBeInstanceOf(HTMLInputElement)
+    })
+  })
+
+  describe('enable', () => {
+    test('enable removes disabled class from main and enables search input', () => {
+      // disable stuff directly
+      render.main.main.classList.add(render.classes.disabled)
+      render.content.search.input.disabled = true
+
+      render.enable()
+      expect(render.main.main.classList.contains(render.classes.disabled)).toBe(false)
+      expect(render.content.search.input.disabled).toBe(false)
+    })
+  })
+
+  describe('disable', () => {
+    test('disable adds disabled class to main and disables search input', () => {
+      render.disable()
+      expect(render.main.main.classList.contains(render.classes.disabled)).toBe(true)
+      expect(render.content.search.input.disabled).toBe(true)
+    })
+  })
+
+  describe('open', () => {
+    test('open sets the correct attributes and CSS classes', () => {
+      render.open()
+
+      expect(render.main.arrow.path.getAttribute('d')).toBe(render.classes.arrowOpen)
+      expect(render.main.main.classList.contains(render.classes.openBelow)).toBe(true)
+      expect(render.main.main.classList.contains(render.classes.openAbove)).toBe(false)
+      expect(render.main.main.getAttribute('aria-expanded')).toBe('true')
+      expect(render.content.main.classList.contains(render.classes.openBelow)).toBe(true)
+      expect(render.content.main.classList.contains(render.classes.openAbove)).toBe(false)
+    })
+  })
+
+  describe('close', () => {
+    test('close sets the correct attributes and CSS classes', () => {
+      render.close()
+
+      expect(render.main.arrow.path.getAttribute('d')).toBe(render.classes.arrowClose)
+      expect(render.main.main.classList.contains(render.classes.openBelow)).toBe(false)
+      expect(render.main.main.classList.contains(render.classes.openAbove)).toBe(false)
+      expect(render.main.main.getAttribute('aria-expanded')).toBe('false')
+      expect(render.content.main.classList.contains(render.classes.openBelow)).toBe(false)
+      expect(render.content.main.classList.contains(render.classes.openAbove)).toBe(false)
+    })
+  })
+
+  describe('updateClassStyles', () => {
+    test('existing classes and styles are cleared', () => {
+      // manually set classes and styles for testing
+      render.main.main.className = 'test'
+      render.main.main.style.color = 'red'
+
+      render.content.main.className = 'test'
+      render.content.main.style.color = 'red'
+
+      render.updateClassStyles()
+
+      expect(render.main.main.classList.contains('test')).toBe(false)
+      expect(render.main.main.style.color).toBeFalsy()
+
+      expect(render.content.main.classList.contains('test')).toBe(false)
+      expect(render.content.main.style.color).toBeFalsy()
+    })
+
+    test('inline styles are applied to main elements', () => {
+      render.settings.style = 'color: red'
+
+      render.updateClassStyles()
+
+      expect(render.main.main.style.color).toBe('red')
+      expect(render.content.main.style.color).toBe('red')
+    })
+
+    test('classes are applied to main elements', () => {
+      render.settings.class = ['test0', 'test1', 'test2']
+
+      render.updateClassStyles()
+
+      expect(render.main.main.classList.contains('test0')).toBe(true)
+      expect(render.main.main.classList.contains('test1')).toBe(true)
+      expect(render.main.main.classList.contains('test2')).toBe(true)
+
+      expect(render.content.main.classList.contains('test0')).toBe(true)
+      expect(render.content.main.classList.contains('test1')).toBe(true)
+      expect(render.content.main.classList.contains('test2')).toBe(true)
+    })
+
+    test('if content position is relative, class is added on content', () => {
+      render.settings.contentPosition = 'relative'
+
+      render.updateClassStyles()
+
+      expect(render.content.main.classList.contains('ss-relative')).toBe(true)
+    })
+  })
+
+  describe('updateAriaAttributes', () => {
+    test('sets correct aria attributes', () => {
+      render.updateAriaAttributes()
+
+      expect(render.main.main.role).toBe('combobox')
+      expect(render.main.main.getAttribute('aria-haspopup')).toBe('listbox')
+      expect(render.main.main.getAttribute('aria-controls')).toBe(render.content.main.id)
+      expect(render.main.main.getAttribute('aria-expanded')).toBe('false')
+      expect(render.content.main.getAttribute('role')).toBe('listbox')
+    })
+  })
+
+  describe('mainDiv', () => {
+    test('correct HTML element gets created', () => {
+      const main = render.main.main
+
+      expect(main.dataset.id).toBe(render.settings.id)
+      expect(main.getAttribute('aria-label')).toBe(render.settings.ariaLabel)
+      expect(main.tabIndex).toBe(0)
+      expect(main.children).toHaveLength(3)
+      expect(main.children.item(0)?.className).toBe(render.classes.values)
+      expect(main.children.item(1)?.classList.contains(render.classes.deselect)).toBe(true)
+      expect(main.children.item(1)?.classList.contains(render.classes.hide)).toBe(true)
+      expect(main.children.item(1)?.children).toHaveLength(1)
+      expect(main.children.item(1)?.children).toHaveLength(1)
+      expect(main.children.item(1)?.children.item(0)).toBeInstanceOf(SVGElement)
+      expect(main.children.item(2)?.classList.contains(render.classes.arrow)).toBe(true)
+      expect(main.children.item(2)?.classList.contains(render.classes.hide)).toBe(false)
+      expect(main.children.item(2)?.children.item(0)).toBeInstanceOf(SVGElement)
+    })
+
+    test('arrow is hidden when alwaysOpen is set', () => {
+      render.settings.alwaysOpen = true
+      const main = render.mainDiv().main
+
+      expect(main.children.item(2)?.classList.contains(render.classes.arrow)).toBe(true)
+      expect(main.children.item(2)?.classList.contains(render.classes.hide)).toBe(true)
+      expect(main.children.item(2)?.children.item(0)).toBeInstanceOf(SVGElement)
+    })
+
+    test('arrow key events on main element move highlight', () => {
+      const highlightMock = jest.fn(() => {})
+
+      render.highlight = highlightMock
+
+      render.main.main.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+      expect(openMock).toHaveBeenCalled()
+      expect(highlightMock).toHaveBeenCalledTimes(1)
+      expect(highlightMock.mock.calls[0]).toStrictEqual(['up'])
+
+      render.main.main.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+      expect(openMock).toHaveBeenCalledTimes(2)
+      expect(highlightMock).toHaveBeenCalledTimes(2)
+      expect(highlightMock.mock.calls[1]).toStrictEqual(['down'])
+    })
+
+    test('tab and escape key event on main element triggers close callback', () => {
+      render.main.main.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }))
+      expect(closeMock).toHaveBeenCalled()
+      render.main.main.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+      expect(closeMock).toHaveBeenCalledTimes(2)
+    })
+
+    test('enter and space key event on main element triggers open callback', () => {
+      render.main.main.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+      expect(openMock).toHaveBeenCalled()
+      render.main.main.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }))
+      expect(openMock).toHaveBeenCalledTimes(2)
+    })
+
+    test('click on main event does nothing if element is disabled', () => {
+      render.settings.disabled = true
+
+      render.main.main.dispatchEvent(new MouseEvent('click'))
+
+      expect(openMock).not.toHaveBeenCalled()
+      expect(closeMock).not.toHaveBeenCalled()
+    })
+
+    test('click on main event triggers open if element is closed', () => {
+      render.main.main.dispatchEvent(new MouseEvent('click'))
+
+      expect(openMock).toHaveBeenCalled()
+      expect(closeMock).not.toHaveBeenCalled()
+    })
+
+    test('click on main event triggers close if element is opened', () => {
+      render.settings.isOpen = true
+
+      render.main.main.dispatchEvent(new MouseEvent('click'))
+
+      expect(openMock).not.toHaveBeenCalled()
+      expect(closeMock).toHaveBeenCalled()
+    })
+
+    test('click on deselect does nothing if element is disabled', () => {
+      render.settings.disabled = true
+
+      const deselectElement: HTMLDivElement = render.main.main.querySelector(
+        '.' + render.classes.deselect,
+      ) as HTMLDivElement
+
+      deselectElement.dispatchEvent(new MouseEvent('click'))
+
+      expect(afterChangeMock).not.toHaveBeenCalled()
+    })
+
+    test('click on deselect on single select runs callbacks', () => {
+      const deselectElement: HTMLDivElement = render.main.main.querySelector(
+        '.' + render.classes.deselect,
+      ) as HTMLDivElement
+
+      deselectElement.dispatchEvent(new MouseEvent('click'))
+
+      expect(setSelectedMock).toHaveBeenCalled()
+      expect(closeMock).toHaveBeenCalled()
+      expect(afterChangeMock).toHaveBeenCalled()
+    })
+
+    test('click on deselect on multiple select runs callbacks', () => {
+      render.settings.isMultiple = true
+
+      const deselectAllMock = jest.fn()
+
+      render.updateDeselectAll = deselectAllMock
+
+      const deselectElement: HTMLDivElement = render.main.main.querySelector(
+        '.' + render.classes.deselect,
+      ) as HTMLDivElement
+      deselectElement.dispatchEvent(new MouseEvent('click'))
+
+      expect(deselectAllMock).toHaveBeenCalled()
+      expect(setSelectedMock).toHaveBeenCalled()
+      expect(closeMock).toHaveBeenCalled()
+      expect(afterChangeMock).toHaveBeenCalled()
+    })
+  })
+
+  describe('mainFocus', () => {
+    let focusMock: jest.Mock
+
+    beforeEach(() => {
+      focusMock = jest.fn(() => {})
+      render.main.main.focus = focusMock
+    })
+
+    test('mainFocus does nothing if the event is click', () => {
+      render.mainFocus('click')
+      expect(focusMock).not.toHaveBeenCalled()
+    })
+
+    test('mainFocus triggers focus if the event is not click', () => {
+      render.mainFocus('keydown')
+      expect(focusMock).toHaveBeenCalled()
+      render.mainFocus('keyup')
+      expect(focusMock).toHaveBeenCalledTimes(2)
+      render.mainFocus('mouse')
+      expect(focusMock).toHaveBeenCalledTimes(3)
+    })
+  })
+
+  describe('placeholder', () => {
+    test('placeholder uses fallback text if no option is found', () => {
+      render.settings.placeholderText = 'placeholder text'
+      const placeholder = render.placeholder()
+
+      expect(placeholder.innerHTML).toBe(render.settings.placeholderText)
+    })
+
+    test('placeholder uses option html if option is found', () => {
+      render.store.setData([
+        {
+          text: 'opt text',
+          html: '<h1>Option HTML</h1>',
+          placeholder: true,
+        },
+      ])
+      const placeholder = render.placeholder()
+
+      expect(placeholder.innerHTML).toBe('<h1>Option HTML</h1>')
+    })
+
+    test('placeholder uses option text if option is found and no HTML is set', () => {
+      render.store.setData([
+        {
+          text: 'opt text',
+          placeholder: true,
+        },
+      ])
+      const placeholder = render.placeholder()
+
+      expect(placeholder.innerHTML).toBe('opt text')
+    })
+  })
+
+  describe('renderValues', () => {
+    test('single select renders only one value', () => {
+      render.renderValues()
+
+      expect(render.main.values.children).toHaveLength(1)
+    })
+
+    test('single select renders HTML option', () => {
+      render.store.setData([
+        {
+          text: 'opt0',
+        },
+        {
+          text: 'opt1',
+          html: '<span>opt1</span>',
+          selected: true,
+        },
+      ])
+      render.renderValues()
+
+      expect(render.main.values.children).toHaveLength(1)
+      expect(render.main.values.children.item(0)?.innerHTML).toBe('<span>opt1</span>')
+    })
+
+    test('multiple select renders all selected values', () => {
+      render.settings.isMultiple = true
+      render.store = new Store('multiple', [
+        {
+          text: 'opt0',
+          value: 'opt0',
+          selected: true,
+        },
+        {
+          text: 'opt1',
+          value: 'opt1',
+          html: '<span>opt1</span>',
+          selected: true,
+        },
+        {
+          text: 'opt2',
+        },
+      ])
+
+      render.renderValues()
+
+      expect(render.main.values.children).toHaveLength(2)
+      expect(render.main.values.children.item(0)).toBeInstanceOf(HTMLDivElement)
+      expect((render.main.values.children.item(0) as HTMLDivElement).textContent).toBe('opt0')
+      expect(render.main.values.children.item(1)).toBeInstanceOf(HTMLDivElement)
+      expect((render.main.values.children.item(1) as HTMLDivElement).textContent).toBe('opt1')
+    })
+
+    test('multiple select renders counter element when maxValuesShown is set', () => {
+      render.settings.isMultiple = true
+      render.settings.maxValuesShown = 2
+      render.store = new Store('multiple', [
+        {
+          text: 'opt0',
+          value: 'opt0',
+          selected: true,
+        },
+        {
+          text: 'opt1',
+          value: 'opt1',
+          html: '<span>opt1</span>',
+          selected: true,
+        },
+        {
+          text: 'opt2',
+          value: 'opt2',
+          selected: true,
+        },
+        {
+          text: 'opt4',
+        },
+      ])
+
+      render.renderValues()
+
+      expect(render.main.values.children).toHaveLength(1)
+      expect(render.main.values.children.item(0)?.innerHTML).toBe('3 selected')
+    })
+
+    test('remove old options from values', () => {
+      render.renderValues()
+      expect(render.main.values.children).toHaveLength(1)
+      expect(render.main.values.innerText).toBeFalsy()
+
+      render.store.setSelectedBy('value', ['test1'])
+      render.renderValues()
+
+      expect(render.main.values.children).toHaveLength(1)
+      expect(render.main.values.children.item(0)?.innerHTML).toBe('<span>test1</span>')
+    })
+  })
+
+  describe('multipleValue', () => {})
+
+  describe('contentDiv', () => {})
+
+  describe('moveContent', () => {
+    let contentAboveMock: jest.Mock
+    let contentBelowMock: jest.Mock
+
+    beforeEach(() => {
+      contentAboveMock = jest.fn()
+      contentBelowMock = jest.fn()
+
+      render.moveContentAbove = contentAboveMock
+      render.moveContentBelow = contentBelowMock
+    })
+
+    test('content is moved below when position is relative', () => {
+      render.settings.contentPosition = 'relative'
+
+      render.moveContent()
+      expect(contentAboveMock).not.toHaveBeenCalled()
+      expect(contentBelowMock).toHaveBeenCalled()
+    })
+
+    test('content is moved below when open position is down', () => {
+      render.settings.openPosition = 'down'
+
+      render.moveContent()
+      expect(contentAboveMock).not.toHaveBeenCalled()
+      expect(contentBelowMock).toHaveBeenCalled()
+    })
+
+    test('content is moved above when open position is up', () => {
+      render.settings.openPosition = 'up'
+
+      render.moveContent()
+      expect(contentAboveMock).toHaveBeenCalled()
+      expect(contentBelowMock).not.toHaveBeenCalled()
+    })
+
+    test('content is moved above when putContent is up', () => {
+      render.putContent = jest.fn(() => 'up')
+
+      render.moveContent()
+      expect(contentAboveMock).toHaveBeenCalled()
+      expect(contentBelowMock).not.toHaveBeenCalled()
+    })
+
+    test('content is moved below when putContent is down', () => {
+      render.putContent = jest.fn(() => 'down')
+
+      render.moveContent()
+      expect(contentAboveMock).not.toHaveBeenCalled()
+      expect(contentBelowMock).toHaveBeenCalled()
+    })
+  })
+
+  describe('searchDiv', () => {
+    test('search is hidden when showSearch setting is false', () => {
+      render.settings.showSearch = false
+
+      const search = render.searchDiv()
+
+      expect(search.main.classList.contains(render.classes.hide)).toBe(true)
+    })
+
+    test('input is debounced', async () => {
+      const search = render.searchDiv()
+
+      search.input.dispatchEvent(new InputEvent('input', { data: 'asdf' }))
+
+      // wait for debounce to trigger
+      await new Promise((r) => setTimeout(r, 101))
+
+      expect(searchMock).toHaveBeenCalled()
+    })
+
+    test('arrow keys move highlight', () => {
+      const search = render.searchDiv()
+      const highlightMock = jest.fn(() => {})
+
+      render.highlight = highlightMock
+
+      search.input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+      expect(highlightMock).toHaveBeenCalledTimes(1)
+      expect(highlightMock.mock.calls[0]).toStrictEqual(['up'])
 
-    const render = new Render(settings, classes, store, callbacks)
-    expect(render).toBeInstanceOf(Render)
+      search.input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
+      expect(highlightMock).toHaveBeenCalledTimes(2)
+      expect(highlightMock.mock.calls[1]).toStrictEqual(['down'])
+    })
+
+    test('tab triggers close callback', () => {
+      const search = render.searchDiv()
+
+      search.input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }))
+
+      expect(closeMock).toHaveBeenCalled()
+    })
+
+    test('escape triggers close callback', () => {
+      // separate test in case we want to also test the event someday
+      const search = render.searchDiv()
+
+      search.input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+
+      expect(closeMock).toHaveBeenCalled()
+    })
+
+    test("enter and space don't call addable witout ctrl key", () => {
+      const search = render.searchDiv()
+      const addableMock = jest.fn((s: string) => ({
+        text: s,
+        value: s.toLowerCase(),
+      }))
+
+      render.callbacks.addable = addableMock
+
+      search.input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+      expect(addableMock).not.toHaveBeenCalled()
+
+      search.input.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }))
+      expect(addableMock).not.toHaveBeenCalled()
+    })
+
+    test('enter and space call event and does nothing without input value', () => {
+      const addableMock = jest.fn((s: string) => ({
+        text: s,
+        value: s.toLowerCase(),
+      }))
+
+      render.callbacks.addable = addableMock
+
+      // recreate search because we have added the addable callback
+      render.content.search = render.searchDiv()
+
+      render.content.search.input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true }))
+      expect(addableMock).not.toHaveBeenCalled()
+
+      render.content.search.input.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', ctrlKey: true }))
+      expect(addableMock).not.toHaveBeenCalled()
+    })
+
+    test('enter and space call addable when defined', () => {
+      const addableMock = jest.fn((s: string) => ({
+        text: s,
+        value: s.toLowerCase(),
+      }))
+
+      render.callbacks.addable = addableMock
+
+      // recreate search because we have added the addable callback
+      render.content.search = render.searchDiv()
+
+      render.content.search.input.value = 'Search'
+
+      render.content.search.input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true }))
+      expect(addableMock).toHaveBeenCalledTimes(1)
+      expect(addableMock.mock.calls[0]).toStrictEqual(['Search'])
+
+      render.content.search.input.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', ctrlKey: true }))
+      expect(addableMock).toHaveBeenCalledTimes(2)
+      expect(addableMock.mock.calls[1]).toStrictEqual(['Search'])
+    })
+  })
+
+  describe('searchFocus', () => {
+    test('search is focused', () => {
+      expect(document.activeElement).not.toBe(render.content.search.input)
+
+      render.searchFocus()
+      expect(document.activeElement).toBe(render.content.search.input)
+    })
+  })
+
+  describe('getOptions', () => {
+    test('returns all options when called without parameters', () => {
+      // render all 3 default options and get them back
+      render.renderOptions(render.store.getDataOptions())
+      const opts = render.getOptions()
+
+      expect(opts).toHaveLength(3)
+    })
+
+    test.skip('filters correctly when filtering out placeholders', () => {
+      // TODO placeholder options are created without placeholder class, which makes the getOptions fail
+      render.renderOptions(
+        render.store.partialToFullData([
+          {
+            text: 'opt0',
+            placeholder: true,
+          },
+          {
+            text: 'opt1',
+          },
+          {
+            text: 'opt2',
+          },
+        ]),
+      )
+
+      const opts = render.getOptions(true)
+      expect(opts).toHaveLength(2)
+    })
+
+    test('filters correctly when filtering out disabled options', () => {
+      render.renderOptions(
+        render.store.partialToFullData([
+          {
+            text: 'opt0',
+            disabled: true,
+          },
+          {
+            text: 'opt1',
+          },
+          {
+            text: 'opt2',
+          },
+        ]),
+      )
+
+      const opts = render.getOptions(false, true)
+      expect(opts).toHaveLength(2)
+    })
+
+    test('filters correctly when filtering out hidden options', () => {
+      render.renderOptions(
+        render.store.partialToFullData([
+          {
+            text: 'opt0',
+            placeholder: true,
+          },
+          {
+            text: 'opt1',
+          },
+          {
+            text: 'opt2',
+          },
+        ]),
+      )
+
+      const opts = render.getOptions(false, false, true)
+      expect(opts).toHaveLength(2)
+    })
+
+    test('filters correctly when filtering out hidden and disabled options', () => {
+      render.renderOptions(
+        render.store.partialToFullData([
+          {
+            text: 'opt0',
+            disabled: true,
+          },
+          {
+            text: 'opt1',
+            placeholder: true,
+          },
+          {
+            text: 'opt2',
+          },
+        ]),
+      )
+
+      const opts = render.getOptions(false, true, true)
+      expect(opts).toHaveLength(1)
+    })
+  })
+
+  describe('highlight', () => {
+    test('simply do nothing without breaking when options are empty', () => {
+      render.renderOptions([])
+
+      expect(() => render.highlight('up')).not.toThrowError()
+    })
+
+    test('highlight single option that is not already highlighted', () => {
+      render.renderOptions(
+        render.store.partialToFullData([
+          {
+            text: 'opt0',
+          },
+        ]),
+      )
+
+      render.highlight('up')
+
+      expect(render.getOptions()[0].classList.contains(render.classes.highlighted)).toBe(true)
+    })
+
+    test('select first option with down when no option is highlighted or selected', () => {
+      render.renderOptions(
+        render.store.partialToFullData([
+          {
+            text: 'opt0',
+          },
+          {
+            text: 'opt1',
+          },
+          {
+            text: 'opt2',
+          },
+        ]),
+      )
+
+      render.highlight('down')
+
+      expect(render.getOptions()[0].classList.contains(render.classes.highlighted)).toBe(true)
+    })
+
+    test('select last option with up when no option is highlighted or selected', () => {
+      render.renderOptions(
+        render.store.partialToFullData([
+          {
+            text: 'opt0',
+          },
+          {
+            text: 'opt1',
+          },
+          {
+            text: 'opt2',
+          },
+        ]),
+      )
+
+      render.highlight('up')
+
+      expect(render.getOptions()[2].classList.contains(render.classes.highlighted)).toBe(true)
+    })
+
+    test('highlight next option on down after highlighted option', () => {
+      render.renderOptions(
+        render.store.partialToFullData([
+          {
+            text: 'opt0',
+            class: render.classes.highlighted,
+          },
+          {
+            text: 'opt1',
+          },
+          {
+            text: 'opt2',
+          },
+        ]),
+      )
+
+      render.highlight('down')
+
+      expect(render.getOptions()[1].classList.contains(render.classes.highlighted)).toBe(true)
+    })
+
+    test('highlight previous option on up before highlighted option', () => {
+      render.renderOptions(
+        render.store.partialToFullData([
+          {
+            text: 'opt0',
+          },
+          {
+            text: 'opt1',
+          },
+          {
+            text: 'opt2',
+            class: render.classes.highlighted,
+          },
+        ]),
+      )
+
+      render.highlight('up')
+
+      expect(render.getOptions()[1].classList.contains(render.classes.highlighted)).toBe(true)
+    })
+
+    test('highlight next option on down after selected option when no options is highlighted', () => {
+      render.renderOptions(
+        render.store.partialToFullData([
+          {
+            text: 'opt0',
+            selected: true,
+          },
+          {
+            text: 'opt1',
+          },
+          {
+            text: 'opt2',
+          },
+        ]),
+      )
+
+      render.highlight('down')
+
+      expect(render.getOptions()[1].classList.contains(render.classes.highlighted)).toBe(true)
+    })
+
+    test('skip to last option when using up at the first option', () => {
+      render.renderOptions(
+        render.store.partialToFullData([
+          {
+            text: 'opt0',
+            selected: true,
+          },
+          {
+            text: 'opt1',
+          },
+          {
+            text: 'opt2',
+          },
+        ]),
+      )
+
+      render.highlight('up')
+
+      expect(render.getOptions()[2].classList.contains(render.classes.highlighted)).toBe(true)
+    })
+
+    test('highlight next option within opt group on down', () => {
+      render.renderOptions(
+        render.store.partialToFullData([
+          {
+            text: 'opt0',
+            selected: true,
+          },
+          {
+            label: 'opt group',
+            options: [
+              {
+                text: 'opt1',
+              },
+            ],
+          },
+          {
+            text: 'opt2',
+          },
+        ]),
+      )
+
+      render.highlight('down')
+
+      expect(render.getOptions()[1].classList.contains(render.classes.highlighted)).toBe(true)
+    })
+
+    test('highlight previous option within opt group on up', () => {
+      render.renderOptions(
+        render.store.partialToFullData([
+          {
+            text: 'opt0',
+          },
+          {
+            label: 'opt group',
+            options: [
+              {
+                text: 'opt1',
+                selected: true,
+              },
+            ],
+          },
+          {
+            text: 'opt2',
+          },
+        ]),
+      )
+
+      render.highlight('up')
+
+      expect(render.getOptions()[0].classList.contains(render.classes.highlighted)).toBe(true)
+    })
+  })
+
+  describe('listDiv', () => {
+    test('list div has correct class', () => {
+      const list = render.listDiv()
+
+      expect(list.classList.contains(render.classes.list)).toBe(true)
+    })
+  })
+
+  describe('renderError', () => {
+    test('error message is rendered correctly', () => {
+      expect(render.content.list.children).toHaveLength(0)
+
+      render.renderError('test error')
+
+      expect(render.content.list.children).toHaveLength(1)
+      expect(render.content.list.children.item(0)).toBeInstanceOf(HTMLDivElement)
+      expect(render.content.list.children.item(0)?.className).toBe(render.classes.error)
+      expect(render.content.list.children.item(0)?.textContent).toBe('test error')
+    })
+
+    test('list is reset on new error', () => {
+      expect(render.content.list.children).toHaveLength(0)
+
+      render.renderError('test error')
+      expect(render.content.list.children).toHaveLength(1)
+
+      render.renderError('error 2')
+      expect(render.content.list.children).toHaveLength(1)
+      expect(render.content.list.children.item(0)?.textContent).toBe('error 2')
+    })
+  })
+
+  describe('renderSearching', () => {
+    test('search text is rendered correctly', () => {
+      expect(render.content.list.children).toHaveLength(0)
+
+      render.settings.searchingText = 'search'
+      render.renderSearching()
+
+      expect(render.content.list.children).toHaveLength(1)
+      expect(render.content.list.children.item(0)).toBeInstanceOf(HTMLDivElement)
+      expect(render.content.list.children.item(0)?.className).toBe(render.classes.searching)
+      expect(render.content.list.children.item(0)?.textContent).toBe('search')
+    })
+
+    test('list is reset on new search text', () => {
+      expect(render.content.list.children).toHaveLength(0)
+
+      render.settings.searchingText = 'search'
+      render.renderSearching()
+      expect(render.content.list.children).toHaveLength(1)
+
+      render.settings.searchingText = 'search 2'
+      render.renderSearching()
+      expect(render.content.list.children).toHaveLength(1)
+      expect(render.content.list.children.item(0)?.textContent).toBe('search 2')
+    })
   })
+
+  describe('renderOptions', () => {})
+
+  describe('option', () => {
+    test('add inline styles correctly', () => {
+      const option = render.option(
+        new Option({
+          text: 'opt',
+          style: 'color: red',
+        }),
+      )
+
+      expect(option.style.color).toBe('red')
+    })
+
+    test('add hidden class on option with display false', () => {
+      const option = render.option(
+        new Option({
+          text: 'opt',
+          display: false,
+        }),
+      )
+
+      expect(option.classList.contains(render.classes.hide)).toBe(true)
+    })
+
+    test('add hidden class on selected option when hideSelected setting is true', () => {
+      render.settings.hideSelected = true
+
+      const option = render.option(
+        new Option({
+          text: 'opt',
+          selected: true,
+        }),
+      )
+
+      expect(option.classList.contains(render.classes.hide)).toBe(true)
+    })
+
+    test('title attribute is set when showOptionTooltips setting is true', () => {
+      render.settings.showOptionTooltips = true
+
+      const option = render.option(
+        new Option({
+          text: 'opt',
+        }),
+      )
+
+      expect(option.getAttribute('title')).toBe('opt')
+    })
+
+    test('text is highlighted correctly with option text', () => {
+      render.settings.searchHighlight = true
+      render.content.search.input.value = 'opt'
+
+      const option = render.option(
+        new Option({
+          text: 'opt 1',
+        }),
+      )
+
+      expect(option.querySelector('mark')).toBeTruthy()
+      expect(option.querySelector('mark')?.textContent).toBe('opt')
+    })
+
+    test('text is highlighted correctly with option HTML', () => {
+      render.settings.searchHighlight = true
+      render.content.search.input.value = 'opt'
+
+      const option = render.option(
+        new Option({
+          text: 'opt 1',
+          html: '<h1>opt 1</h1>',
+        }),
+      )
+
+      expect(option.querySelector('mark')).toBeTruthy()
+      expect(option.querySelector('mark')?.textContent).toBe('opt')
+    })
+
+    test('click does nothing when option is disabled', () => {
+      const option = render.option(
+        new Option({
+          text: 'opt 1',
+          disabled: true,
+        }),
+      )
+      option.dispatchEvent(new MouseEvent('click'))
+
+      expect(addOptionMock).not.toHaveBeenCalled()
+      expect(setSelectedMock).not.toHaveBeenCalled()
+    })
+
+    test('click does nothing when max count of selected options is reached', () => {
+      render.settings.isMultiple = true
+      render.settings.maxSelected = 1
+
+      const option = render.option(
+        new Option({
+          text: 'opt 1',
+        }),
+      )
+      option.dispatchEvent(new MouseEvent('click'))
+
+      expect(addOptionMock).not.toHaveBeenCalled()
+      expect(setSelectedMock).not.toHaveBeenCalled()
+    })
+
+    test('click does nothing when min count of selected options is reached', () => {
+      render.settings.isMultiple = true
+      render.settings.allowDeselect = true
+      render.settings.minSelected = 1
+
+      const option = render.option(
+        new Option({
+          text: 'opt 1',
+          selected: true,
+        }),
+      )
+      option.dispatchEvent(new MouseEvent('click'))
+
+      expect(addOptionMock).not.toHaveBeenCalled()
+      expect(setSelectedMock).not.toHaveBeenCalled()
+    })
+
+    test('click removes option', () => {
+      const option = render.option(
+        new Option({
+          text: 'new opt 1',
+        }),
+      )
+      option.dispatchEvent(new MouseEvent('click'))
+
+      expect(addOptionMock).toHaveBeenCalled()
+      // check that we add the right option
+      expect(addOptionMock.mock.calls[0][0].text).toBe('new opt 1')
+      expect(setSelectedMock).toHaveBeenCalled()
+      // check that we select the new option
+      expect(setSelectedMock.mock.calls[0][0]).toStrictEqual(['new opt 1'])
+    })
+  })
+
+  describe('destroy', () => {
+    test('elements get removed', () => {
+      expect(render.main.main).toBeInstanceOf(HTMLDivElement)
+      expect(render.content.main).toBeInstanceOf(HTMLDivElement)
+
+      // set some simple IDs, so we can search for the elements in the DOM
+      render.main.main.id = 'main-id'
+      render.content.main.id = 'content-id'
+
+      render.destroy()
+
+      expect(document.getElementById('main-id')).toBeNull()
+      expect(document.getElementById('#content-id')).toBeNull()
+    })
+  })
+
+  describe('moveContentAbove', () => {
+    test('correct classes are set', () => {
+      render.moveContentAbove()
+
+      expect(render.main.main.classList.contains(render.classes.openAbove)).toBe(true)
+      expect(render.main.main.classList.contains(render.classes.openBelow)).toBe(false)
+
+      expect(render.content.main.classList.contains(render.classes.openAbove)).toBe(true)
+      expect(render.content.main.classList.contains(render.classes.openBelow)).toBe(false)
+    })
+  })
+
+  describe('moveContentBelow', () => {
+    test('correct classes are set', () => {
+      render.moveContentBelow()
+
+      expect(render.main.main.classList.contains(render.classes.openAbove)).toBe(false)
+      expect(render.main.main.classList.contains(render.classes.openBelow)).toBe(true)
+
+      expect(render.content.main.classList.contains(render.classes.openAbove)).toBe(false)
+      expect(render.content.main.classList.contains(render.classes.openBelow)).toBe(true)
+    })
+  })
+
+  describe('ensureElementInView', () => {})
+
+  describe('putContent', () => {})
+
+  describe('updateDeselectAll', () => {})
 })
diff --git a/src/slim-select/render.ts b/src/slim-select/render.ts
index 4d7393a5..4d3346d9 100644
--- a/src/slim-select/render.ts
+++ b/src/slim-select/render.ts
@@ -495,7 +495,7 @@ export default class Render {
 
     const text = document.createElement('div')
     text.classList.add(this.classes.valueText)
-    text.innerText = option.text // For multiple values always use text
+    text.textContent = option.text // For multiple values always use text
     value.appendChild(text)
 
     // Only add deletion if the option is not mandatory

From b27592919ee6883d83dd67b3d24c1da28825762a Mon Sep 17 00:00:00 2001
From: Data5tream <6423657+Data5tream@users.noreply.github.com>
Date: Mon, 25 Mar 2024 09:33:20 +0100
Subject: [PATCH 08/12] Cleanup code a bit

---
 src/slim-select/helpers.test.ts | 15 +++++++--------
 src/slim-select/helpers.ts      |  2 +-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/slim-select/helpers.test.ts b/src/slim-select/helpers.test.ts
index fc0f4211..f333494f 100644
--- a/src/slim-select/helpers.test.ts
+++ b/src/slim-select/helpers.test.ts
@@ -76,7 +76,7 @@ describe('helpers module', () => {
       const debounced_function = debounce(callback)
       debounced_function()
 
-      await new Promise(r => setTimeout(r, 100))
+      await new Promise((r) => setTimeout(r, 100))
 
       expect(callback).toHaveBeenCalled()
       expect(callback).toHaveBeenCalledTimes(1)
@@ -87,10 +87,10 @@ describe('helpers module', () => {
       const debounced_function = debounce(callback, 100)
       debounced_function()
 
-      await new Promise(r => setTimeout(r, 50))
+      await new Promise((r) => setTimeout(r, 50))
       expect(callback).not.toHaveBeenCalled()
 
-      await new Promise(r => setTimeout(r, 50))
+      await new Promise((r) => setTimeout(r, 50))
       expect(callback).toHaveBeenCalled()
       expect(callback).toHaveBeenCalledTimes(1)
     })
@@ -100,10 +100,10 @@ describe('helpers module', () => {
       const debounced_function = debounce(callback, 10)
       debounced_function()
 
-      await new Promise(r => setTimeout(r, 5))
+      await new Promise((r) => setTimeout(r, 5))
       expect(callback).not.toHaveBeenCalled()
 
-      await new Promise(r => setTimeout(r, 5))
+      await new Promise((r) => setTimeout(r, 5))
       expect(callback).toHaveBeenCalled()
       expect(callback).toHaveBeenCalledTimes(1)
     })
@@ -118,13 +118,12 @@ describe('helpers module', () => {
     })
 
     test('debounce respects order of calls', async () => {
-      const callback = jest.fn(() => {
-      })
+      const callback = jest.fn(() => {})
       const debounced_function: (a: number) => void = debounce(callback)
       debounced_function(0)
       debounced_function(1)
 
-      await new Promise(r => setTimeout(r, 50))
+      await new Promise((r) => setTimeout(r, 50))
       expect(callback).toHaveBeenCalledTimes(1)
       expect(callback.mock.calls[0]).toStrictEqual([1])
     })
diff --git a/src/slim-select/helpers.ts b/src/slim-select/helpers.ts
index 8c0742b5..88221e25 100644
--- a/src/slim-select/helpers.ts
+++ b/src/slim-select/helpers.ts
@@ -52,7 +52,7 @@ export function hasClassInTree(element: HTMLElement, className: string): HTMLEle
  */
 export function debounce<T extends (...args: any[]) => void>(func: T, wait = 50, immediate = false): () => void {
   let timeout: any
-  return function(this: any, ...args: any[]): void {
+  return function (this: any, ...args: any[]): void {
     const context = self
     const later = () => {
       timeout = null

From 45f15867d23b6810603e3469f04e1803d79f7133 Mon Sep 17 00:00:00 2001
From: Data5tream <6423657+Data5tream@users.noreply.github.com>
Date: Mon, 25 Mar 2024 09:42:57 +0100
Subject: [PATCH 09/12] Also run jest workflow on PRs

---
 .github/workflows/jest.yml | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.github/workflows/jest.yml b/.github/workflows/jest.yml
index d4ede62a..7161e94d 100644
--- a/.github/workflows/jest.yml
+++ b/.github/workflows/jest.yml
@@ -6,6 +6,14 @@ on:
       - '**/*.md'
       - '.github/**'
       - '.vscode/**'
+  pull_request:
+    branches:
+      - develop
+    paths-ignore:
+      - '**/dist/**'
+      - '**/*.md'
+      - '.github/**'
+      - '.vscode/**'
 jobs:
   jest:
     runs-on: ubuntu-latest

From bb50c96d728e41a4c3fd9092583e69487077157f Mon Sep 17 00:00:00 2001
From: Brian Voelker <brian@webiswhatido.com>
Date: Thu, 28 Mar 2024 08:36:50 -0500
Subject: [PATCH 10/12] Update select.ts

---
 src/slim-select/select.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/slim-select/select.ts b/src/slim-select/select.ts
index 55a4626c..9bf0d76e 100644
--- a/src/slim-select/select.ts
+++ b/src/slim-select/select.ts
@@ -85,7 +85,7 @@ export default class Select {
   }
 
   private observeCall(mutations: MutationRecord[]): void {
-    // Do nothing if we are not listening
+    // If we are not listening, do nothing.
     if (!this.listen) {
       return
     }

From d7fbbe1cf8ffa89f7a28a310a1fce677dcedd739 Mon Sep 17 00:00:00 2001
From: Data5tream <6423657+Data5tream@users.noreply.github.com>
Date: Thu, 28 Mar 2024 16:32:00 +0100
Subject: [PATCH 11/12] Revert some unnecessary changes

Revert comment changes and restore deleted public methods
---
 src/slim-select/helpers.ts | 37 ++-----------------------------------
 src/slim-select/store.ts   | 23 +++++++++++++++++++++++
 2 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/src/slim-select/helpers.ts b/src/slim-select/helpers.ts
index 88221e25..200cb365 100644
--- a/src/slim-select/helpers.ts
+++ b/src/slim-select/helpers.ts
@@ -1,20 +1,8 @@
-/**
- * Generate an 8 character random string
- *
- * @returns a random 8 character string
- */
+// Generate an 8 character random string
 export function generateID(): string {
   return Math.random().toString(36).substring(2, 10)
 }
 
-/**
- * Check if a className exists on an element or any parent of the element
- *
- * @param element - the element to check
- * @param className - the class name we are looking for
- *
- * @returns the element that has the class or `null` if the class was not found
- */
 export function hasClassInTree(element: HTMLElement, className: string): HTMLElement | null {
   function hasClass(e: HTMLElement, c: string) {
     // If the element has the class return element
@@ -43,13 +31,7 @@ export function hasClassInTree(element: HTMLElement, className: string): HTMLEle
   return hasClass(element, className) || parentByClass(element, className)
 }
 
-/**
- * Executes the last function call after the wait time (or instantaneous if `immediate` is `true`)
- *
- * @param func - function that should be called after the wait time
- * @param [wait=50] - wait time in ms
- * @param [immediate=false] - if true, execute the function immediately instead of waiting
- */
+// debounce will call the last requested function after the wait time
 export function debounce<T extends (...args: any[]) => void>(func: T, wait = 50, immediate = false): () => void {
   let timeout: any
   return function (this: any, ...args: any[]): void {
@@ -69,25 +51,10 @@ export function debounce<T extends (...args: any[]) => void>(func: T, wait = 50,
   }
 }
 
-/**
- * Compares two objects by comparing their JSON representations
- *
- * @param a - first object
- * @param b - second object
- *
- * @returns `true` if `a` and `b` JSON representations are equal, `false` otherwise
- */
 export function isEqual(a: any, b: any): boolean {
   return JSON.stringify(a) === JSON.stringify(b)
 }
 
-/**
- * Converts an input string into kebabCase
- *
- * @param str - input string
- *
- * @returns the input string in kebabCase
- */
 export function kebabCase(str: string): string {
   const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase())
   return str[0] === str[0].toUpperCase() ? result.substring(1) : result
diff --git a/src/slim-select/store.ts b/src/slim-select/store.ts
index 25a3e07f..900fece8 100644
--- a/src/slim-select/store.ts
+++ b/src/slim-select/store.ts
@@ -259,6 +259,29 @@ export default class Store {
     }, false) as Option[]
   }
 
+  public getSelectedIDs(): string[] {
+    let selectedOptions = this.getSelectedOptions()
+
+    let selectedIDs: string[] = []
+    selectedOptions.forEach((op: Option) => {
+      selectedIDs.push(op.id)
+    })
+
+    return selectedIDs
+  }
+
+  public getOptgroupByID(id: string): Optgroup | null {
+    // Loop through each data object
+    // and if optgroup is found, return it
+    for (let dataObj of this.data) {
+      if (dataObj instanceof Optgroup && dataObj.id === id) {
+        return dataObj
+      }
+    }
+
+    return null
+  }
+
   public getOptionByID(id: string): Option | null {
     let options = this.filter((opt: Option) => {
       return opt.id === id

From 6b88132492aaa6b8ce7337efe7a1aebaebf7fb73 Mon Sep 17 00:00:00 2001
From: Data5tream <6423657+Data5tream@users.noreply.github.com>
Date: Thu, 28 Mar 2024 17:36:58 +0100
Subject: [PATCH 12/12] Remove coverage report action

---
 .github/workflows/coverage.yml | 24 ------------------------
 1 file changed, 24 deletions(-)
 delete mode 100644 .github/workflows/coverage.yml

diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml
deleted file mode 100644
index 2851fc71..00000000
--- a/.github/workflows/coverage.yml
+++ /dev/null
@@ -1,24 +0,0 @@
-name: 'Code coverage'
-on:
-  push:
-    branches:
-      - develop
-    paths-ignore:
-      - '**/dist/**'
-      - '**/*.md'
-      - '.github/**'
-      - '.vscode/**'
-  pull_request:
-    branches:
-      - develop
-    paths-ignore:
-      - '**/dist/**'
-      - '**/*.md'
-      - '.github/**'
-      - '.vscode/**'
-jobs:
-  coverage:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: ArtiomTr/jest-coverage-report-action@v2