+
diff --git a/src/docs/pages/settings/search.vue b/src/docs/pages/settings/search.vue
index bae0ab6b..be235c8b 100644
--- a/src/docs/pages/settings/search.vue
+++ b/src/docs/pages/settings/search.vue
@@ -13,6 +13,12 @@ export default defineComponent({
showSearch: false,
},
})
+ new SlimSelect({
+ select: this.$refs.focusSearchSingle as HTMLSelectElement,
+ settings: {
+ focusSearch: false,
+ },
+ })
new SlimSelect({
select: this.$refs.searchTextSingle as HTMLSelectElement,
settings: {
@@ -39,6 +45,12 @@ export default defineComponent({
showSearch: false,
},
})
+ new SlimSelect({
+ select: this.$refs.focusSearchMulti as HTMLSelectElement,
+ settings: {
+ focusSearch: false,
+ },
+ })
new SlimSelect({
select: this.$refs.searchTextMulti as HTMLSelectElement,
settings: {
@@ -63,8 +75,9 @@ export default defineComponent({
-
+
showSearch - is a boolean value that will decide whether or not to show the search. Default is true.
+
focusSearch - is a boolean value that will decide whether or not to focus on the search on open. Default is true.
searchText - is a string value that will show in the event there are no results. Default is 'No Results'.
@@ -83,6 +96,11 @@ export default defineComponent({
Cat
Bird
+
+ Dog
+ Cat
+ Bird
+
Dog
Cat
@@ -106,6 +124,11 @@ export default defineComponent({
Cat
Bird
+
+ Dog
+ Cat
+ Bird
+
Dog
Cat
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
new file mode 100644
index 00000000..82c2f50f
--- /dev/null
+++ b/src/slim-select/css_classes.ts
@@ -0,0 +1,111 @@
+export type CssClassesPartial = Partial
+
+export default class CssClasses {
+ 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
+
+ // 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
+
+ // 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
+
+ // 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
+
+ // 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'
+
+ 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/helpers.test.ts b/src/slim-select/helpers.test.ts
new file mode 100644
index 00000000..f333494f
--- /dev/null
+++ b/src/slim-select/helpers.test.ts
@@ -0,0 +1,159 @@
+/**
+ * @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..200cb365 100644
--- a/src/slim-select/helpers.ts
+++ b/src/slim-select/helpers.ts
@@ -3,7 +3,7 @@ export function generateID(): string {
return Math.random().toString(36).substring(2, 10)
}
-export function hasClassInTree(element: HTMLElement, className: string) {
+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)) {
@@ -51,20 +51,11 @@ export function debounce void>(func: T, wait = 50,
}
}
-// reverseDebounce will call the function on the first call and then debounce
-function reverseDebounce 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) {
+export function isEqual(a: any, b: any): boolean {
return JSON.stringify(a) === JSON.stringify(b)
}
-export function kebabCase(str: string) {
+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/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 = '
'
+
+ 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 = 'test1 ',
+ },
+ {
+ 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: 'Option HTML ',
+ placeholder: true,
+ },
+ ])
+ const placeholder = render.placeholder()
+
+ expect(placeholder.innerHTML).toBe('Option HTML ')
+ })
+
+ 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: 'opt1 ',
+ selected: true,
+ },
+ ])
+ render.renderValues()
+
+ expect(render.main.values.children).toHaveLength(1)
+ expect(render.main.values.children.item(0)?.innerHTML).toBe('opt1 ')
+ })
+
+ 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: 'opt1 ',
+ 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: 'opt1 ',
+ 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('test1 ')
+ })
+ })
+
+ 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, 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: 'opt 1 ',
+ }),
+ )
+
+ 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 005a2525..ea36d09d 100644
--- a/src/slim-select/render.ts
+++ b/src/slim-select/render.ts
@@ -1,6 +1,7 @@
import { debounce } from './helpers'
import Settings from './settings'
import Store, { DataArray, Optgroup, Option, OptionOptional } from './store'
+import CssClasses from './css_classes'
export interface Callbacks {
open: () => void
@@ -53,73 +54,12 @@ export default class Render {
public content: Content
// Classes
- public classes = {
- // Main
- main: 'ss-main',
-
- // Placeholder
- placeholder: 'ss-placeholder',
-
- // Values
- 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
- deselect: 'ss-deselect',
- deselectPath: 'M10,10 L90,90 M10,90 L90,10', // Not a class but whatever
-
- // Arrow
- arrow: 'ss-arrow',
- arrowClose: 'M10,30 L50,70 L90,30', // Not a class but whatever
- arrowOpen: 'M10,70 L50,30 L90,70', // Not a class but whatever
-
- // Content
- content: 'ss-content',
- openAbove: 'ss-open-above',
- openBelow: 'ss-open-below',
-
- // Search
- search: 'ss-search',
- searchHighlighter: 'ss-search-highlight',
- searching: 'ss-searching',
- addable: 'ss-addable',
- addablePath: 'M50,10 L50,90 M10,50 L90,50', // Not a class but whatever
-
- // List optgroups/options
- list: 'ss-list',
-
- // Optgroup
- optgroup: 'ss-optgroup',
- optgroupLabel: 'ss-optgroup-label',
- optgroupLabelText: 'ss-optgroup-label-text',
- optgroupActions: 'ss-optgroup-actions',
- optgroupSelectAll: 'ss-selectall', // optgroup select all
- optgroupSelectAllBox: 'M60,10 L10,10 L10,90 L90,90 L90,50', // Not a class but whatever
- optgroupSelectAllCheck: 'M30,45 L50,70 L90,10', // Not a class but whatever
- optgroupClosable: 'ss-closable',
-
- // Option
- option: 'ss-option',
- optionDelete: 'M10,10 L90,90 M10,90 L90,10', // Not a class but whatever
- highlighted: 'ss-highlighted',
-
- // Misc
- open: 'ss-open',
- close: 'ss-close',
- selected: 'ss-selected',
- error: 'ss-error',
- disabled: 'ss-disabled',
- hide: 'ss-hide',
- }
+ public classes: CssClasses
- constructor(settings: Required, store: Store, callbacks: Callbacks) {
+ constructor(settings: Required, classes: Required, store: Store, callbacks: Callbacks) {
this.store = store
this.settings = settings
+ this.classes = classes
this.callbacks = callbacks
this.main = this.mainDiv()
@@ -265,7 +205,7 @@ export default class Render {
return false
}
- return false
+ return true
}
// Add onclick for main div
@@ -555,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
@@ -1345,7 +1285,7 @@ export default class Render {
private highlightText(str: string, search: any, className: string) {
// the completed string will be itself if already set, otherwise, the string that was passed in
let completedString: any = str
- const regex = new RegExp('(' + search.trim() + ')(?![^<]*>[^<>]*)(' + search.trim() + ')(?![^<]*>[^<>]* {
- test('constructor', () => {
- document.body.innerHTML = '
+
+ One
+ Two
+
+
+ Three
+ Four
+ Five
+
+ Six
+ `
+
+ const selectElement = document.getElementById('test') as HTMLSelectElement
+ select = new Select(selectElement)
})
- test('get data from select options', () => {
- document.body.innerHTML = `
- One
- Two
- `
+ describe('constructor', () => {
+ test('constructor works', () => {
+ document.body.innerHTML = '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 = `
+ describe('getData', () => {
+ test('get data from select options', () => {
+ document.body.innerHTML = `
+ One
+ Two
+ `
+
+ 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 = `
One
Two
@@ -45,26 +113,83 @@ describe('select module', () => {
Four
Five
- `
+ `
+
+ 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('option[value="6"]')?.selected).toBe(true)
+ })
+
+ test('opt group value gets selected correctly', () => {
+ select.setSelected(['4'])
+
+ expect(select.select.querySelector('option[value="4"]')?.selected).toBe(true)
+ })
+
+ test('mix of options get selected correctly', () => {
+ select.setSelected(['2', '3', '6'])
+
+ expect(select.select.querySelector('option[value="2"]')?.selected).toBe(true)
+ expect(select.select.querySelector('option[value="3"]')?.selected).toBe(true)
+ expect(select.select.querySelector('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 = `
+ describe('onValueChange', () => {
+ let select: Select
+ let selectElement: HTMLSelectElement
+
+ beforeEach(() => {
+ document.body.innerHTML = `
One
Two
Three
- `
-
- let selectElement = document.getElementById('test') as HTMLSelectElement
- let select = new Select(selectElement)
+ `
- 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 = `
- One
- Two
- Three
- `
+ 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 = `Four
+ selectElement.innerHTML = `Four
Five
Six `
- // 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 = `
+ describe('onOptionsChange', () => {
+ test('listener triggers when select options change without changing the select value', async () => {
+ document.body.innerHTML = `
One
Two
Three
- `
+ `
- 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 = 'One Two '
+ selectElement.innerHTML = 'One Two '
- // 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 = `
+ test('listener triggers when optgroup options change', async () => {
+ document.body.innerHTML = `
One
Two
@@ -193,58 +314,59 @@ describe('select module', () => {
Four
Five
- `
+ `
- 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 = 'Eight Nine '
+ const selectOptgroup = document.getElementById('test_optgroup') as HTMLOptGroupElement
+ selectOptgroup.innerHTML = 'Eight Nine '
- // 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 = `
+ test('listener triggers when select option text changes', async () => {
+ document.body.innerHTML = `
One
Two
Three
- `
+ `
- 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 = `
+ test('listener triggers when select optgroup option text changes', async () => {
+ document.body.innerHTML = `
One
Two
@@ -254,22 +376,26 @@ describe('select module', () => {
Four
Five
- `
+ `
- 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 647a201c..bb94c3bc 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
+ // If we are not listening, do nothing.
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' && (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',
@@ -301,7 +314,7 @@ export default class Select {
}
// Trigger change event on original select
- this.select.dispatchEvent(new Event('change'))
+ this.select.dispatchEvent(new Event('change', { bubbles: true }))
// Start listening to changes
this.changeListen(true)
@@ -339,7 +352,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) {
diff --git a/src/slim-select/settings.test.ts b/src/slim-select/settings.test.ts
new file mode 100644
index 00000000..02dfcb01
--- /dev/null
+++ b/src/slim-select/settings.test.ts
@@ -0,0 +1,256 @@
+'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',
+ 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', () => {
+ 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 }
+ 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])
+ }
+ })
+ })
+
+ 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: 'opt ' })
+ 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((select).observer).toBeFalsy()
+ expect('id' in select.select.dataset).toBeFalsy()
+ })
+})
diff --git a/src/slim-select/settings.ts b/src/slim-select/settings.ts
index 573af1f5..7a33cdd3 100644
--- a/src/slim-select/settings.ts
+++ b/src/slim-select/settings.ts
@@ -17,6 +17,7 @@ export default class Settings {
public disabled: boolean
public alwaysOpen: boolean
public showSearch: boolean
+ public focusSearch: boolean
public ariaLabel: string
public searchPlaceholder: string
public searchText: string
@@ -49,6 +50,7 @@ export default class Settings {
this.disabled = settings.disabled !== undefined ? settings.disabled : false
this.alwaysOpen = settings.alwaysOpen !== undefined ? settings.alwaysOpen : false
this.showSearch = settings.showSearch !== undefined ? settings.showSearch : true
+ this.focusSearch = settings.focusSearch !== undefined ? settings.focusSearch : true
this.ariaLabel = settings.ariaLabel || 'Combobox'
this.searchPlaceholder = settings.searchPlaceholder || 'Search'
this.searchText = settings.searchText || 'No Results'
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
+
+ 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
+
+ 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
+
+ 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
+
+ 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
+ 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
+ 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
+ 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 a2fd5831..eca985ba 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')
}
