slim-select 2.8.2 → 2.9.0

package/src/slim-select/select.test.ts

@@ -9,62 +9,211 @@ import Select from './select'
 import Store, { Optgroup, Option } from './store'
 
 describe('select module', () => {
-  test('constructor', () => {
-    document.body.innerHTML = '<select id="test"></select>'
+  let select: Select
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
-    expect(select).toBeInstanceOf(Select)
+  beforeEach(() => {
+    document.body.innerHTML = `<select id="test" multiple>
+        <optgroup label="test1">
+            <option id="111" value="1">One</option>
+            <option id="222" value="2">Two</option>
+        </optgroup>
+        <optgroup label="test2">
+            <option id="333" value="3">Three</option>
+            <option id="444" value="4">Four</option>
+            <option id="555" value="5">Five</option>
+        </optgroup>
+        <option id="666" value="6">Six</option>
+      </select>`
+
+    const selectElement = document.getElementById('test') as HTMLSelectElement
+    select = new Select(selectElement)
   })
 
-  test('get data from select options', () => {
-    document.body.innerHTML = `<select id="test">
-        <option id="value1" value="1">One</option>
-        <option value="2">Two</option>
-    </select>`
+  describe('constructor', () => {
+    test('constructor works', () => {
+      document.body.innerHTML = '<select id="test"></select>'
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
-    let data = select.getData() as Option[]
-    expect(data.length).toBe(2)
-    expect(data[0].id).toBe('value1')
-    expect(data[0].value).toBe('1')
-    expect(data[0].text).toBe('One')
-    expect(data[1].value).toBe('2')
-    expect(data[1].text).toBe('Two')
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
+
+      expect(select).toBeInstanceOf(Select)
+      expect(select.listen).toBe(true)
+      expect((<any>select).observer).toBeInstanceOf(MutationObserver)
+    })
+  })
+
+  describe('enable', () => {
+    test('enable enables select element', () => {
+      select.select.disabled = true
+      select.enable()
+
+      expect(select.select.disabled).toBe(false)
+    })
+  })
+
+  describe('disable', () => {
+    test('disable disables select element', () => {
+      select.disable()
+
+      expect(select.select.disabled).toBe(true)
+    })
+  })
+
+  describe('hideUI', () => {
+    test('correct HTML attributes get set', () => {
+      select.hideUI()
+
+      expect(select.select.tabIndex).toBe(-1)
+      expect(select.select.style.display).toBe('none')
+      expect(select.select.getAttribute('aria-hidden')).toBe('true')
+    })
   })
 
-  test('get data from select optgroups', () => {
-    document.body.innerHTML = `<select id="test">
+  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()
+    })
+  })
+
+  describe('getData', () => {
+    test('get data from select options', () => {
+      document.body.innerHTML = `<select id="test">
+        <option id="value1" value="1">One</option>
+        <option value="2">Two</option>
+      </select>`
+
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
+      const data = select.getData() as Option[]
+
+      expect(data).toHaveLength(2)
+      expect(data[0].id).toBe('value1')
+      expect(data[0].value).toBe('1')
+      expect(data[0].text).toBe('One')
+      expect(data[1].value).toBe('2')
+      expect(data[1].text).toBe('Two')
+    })
+
+    test('get data from select optgroups', () => {
+      document.body.innerHTML = `<select id="test">
         <optgroup label="test1">
-            <option value="1">One</option>
-            <option value="2">Two</option>
+            <option id="111" value="1">One</option>
+            <option id="222" value="2">Two</option>
         </optgroup>
         <optgroup label="test2">
-            <option value="3">Three</option>
-            <option value="4">Four</option>
-            <option value="5">Five</option>
+            <option id="333" value="3">Three</option>
+            <option id="444" value="4">Four</option>
+            <option id="555" value="5">Five</option>
         </optgroup>
-    </select>`
+      </select>`
+
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
+      const data = select.getData() as Optgroup[]
+
+      expect(data).toHaveLength(2)
+
+      expect(data[0].label).toBe('test1')
+      expect(data[0].options).toHaveLength(2)
+      expect(data[0].options[0].id).toBe('111')
+      expect(data[0].options[0].value).toBe('1')
+      expect(data[0].options[0].text).toBe('One')
+      expect(data[0].options[1].id).toBe('222')
+      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].id).toBe('333')
+      expect(data[1].options[0].value).toBe('3')
+      expect(data[1].options[0].text).toBe('Three')
+      expect(data[1].options[1].id).toBe('444')
+      expect(data[1].options[1].value).toBe('4')
+      expect(data[1].options[1].text).toBe('Four')
+      expect(data[1].options[2].id).toBe('555')
+      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 option gets selected correctly', () => {
+      // get id of the first option in the first optgroup
+      const id = select.select.querySelector<HTMLOptionElement>('optgroup option')?.id
+      expect(id).toBe('111')
+
+      select.setSelected([id as string])
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="1"]')?.selected).toBe(true)
+    })
+
+    test('mix of options get selected correctly', () => {
+      select.setSelected(['111', '222', '333'])
+
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="1"]')?.selected).toBe(true)
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="2"]')?.selected).toBe(true)
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="3"]')?.selected).toBe(true)
+    })
+  })
+
+  describe('setSelectedByValue', () => {
+    test('single value get selected correctly', () => {
+      select.setSelectedByValue(['6'])
+
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="6"]')?.selected).toBe(true)
+    })
+
+    test('opt group value gets selected correctly', () => {
+      select.setSelectedByValue(['4'])
+
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="4"]')?.selected).toBe(true)
+    })
+
+    test('mix of options get selected correctly', () => {
+      select.setSelectedByValue(['2', '3', '6'])
+
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="2"]')?.selected).toBe(true)
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="3"]')?.selected).toBe(true)
+      expect(select.select.querySelector<HTMLOptionElement>('option[value="6"]')?.selected).toBe(true)
+    })
+  })
+
+  describe('updateSelected', () => {
+    test('id gets updated correctly', () => {
+      select.select.dataset.id = 'old_id'
+
+      select.updateSelect('new_id')
+
+      expect(select.select.dataset.id).toBe('new_id')
+    })
+
+    test('new styles are set correctly', () => {
+      select.updateSelect(undefined, 'color: red')
+
+      expect(select.select.style.color).toBe('red')
+    })
+
+    test("setting styles doesn't override id", () => {
+      select.select.dataset.id = 'set_id'
+
+      select.updateSelect(undefined, 'color: red')
+
+      expect(select.select.dataset.id).toBe('set_id')
+    })
+
+    test('classes are set correctly', () => {
+      select.updateSelect(undefined, undefined, ['class0', 'class1'])
+
+      expect(select.select.classList.contains('class0')).toBe(true)
+      expect(select.select.classList.contains('class1')).toBe(true)
+    })
   })
 
   test('update select from data', () => {
@@ -77,113 +226,109 @@ describe('select module', () => {
         id: '1',
         value: '1',
         text: 'One',
-        selected: false,
+        selected: false
       },
       {
         id: '2',
         value: '2',
         text: 'Two',
-        selected: false,
-      },
+        selected: false
+      }
     ])
     let data = store.getData()
     select.updateOptions(data)
 
     expect(selectElement.outerHTML).toBe(
-      '<select id="test"><option id="1" value="1">One</option><option id="2" value="2">Two</option></select>',
+      '<select id="test"><option id="1" value="1">One</option><option id="2" value="2">Two</option></select>'
     )
   })
 
-  test('event change value listener', async () => {
-    document.body.innerHTML = `<select id="test">
+  describe('onValueChange', () => {
+    let select: Select
+    let selectElement: HTMLSelectElement
+
+    beforeEach(() => {
+      document.body.innerHTML = `<select id="test">
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
-    </select>`
-
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
-
-    let data = select.getData() as Option[]
-
-    expect(data[0].selected).toBe(true)
+      </select>`
 
-    const callback = jest.fn()
-    select.onValueChange = callback
+      selectElement = document.getElementById('test') as HTMLSelectElement
+      select = new Select(selectElement)
+    })
 
-    // Change the value
-    selectElement.value = '2'
-    selectElement.dispatchEvent(new Event('change'))
+    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)
 
-    // TODO: figure out why this is not working
-    // expect(callback).toHaveBeenCalled()
+      const onValueMock = jest.fn()
+      select.onValueChange = onValueMock
 
-    // Get selected data
-    const selected = select.getSelectedValues()
-    expect(selected[0]).toBe('2')
+      // Change the value
+      selectElement.value = '2'
+      selectElement.dispatchEvent(new Event('change'))
 
-    // Change the full data
-    data = select.getData() as Option[]
-    expect(data[1].selected).toBe(true)
-  })
+      await new Promise((r) => setTimeout(r, 50))
+      expect(onValueMock).toHaveBeenCalled()
 
-  test('event change value listener when options are replaced', () => {
-    document.body.innerHTML = `<select id="test">
-        <option value="1">One</option>
-        <option value="2">Two</option>
-        <option value="3">Three</option>
-    </select>`
+      // Get selected data
+      const selected = select.getSelectedValues()
+      expect(selected[0]).toBe('2')
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
+      // Check all data
+      data = select.getData() as Option[]
+      expect(data[0].selected).toBe(false)
+      expect(data[1].selected).toBe(true)
+    })
 
-    let data = select.getData() as Option[]
+    test('listener is triggered when inner HTML is replaced with new options', async () => {
+      const onValueMock = jest.fn()
+      select.onValueChange = onValueMock
 
-    expect(data[0].selected).toBe(true)
-
-    const callback = jest.fn()
-    select.onValueChange = callback
-
-    selectElement.innerHTML = `<option value="4">Four</option>
+      selectElement.innerHTML = `<option value="4">Four</option>
         <option value="5" selected>Five</option>
         <option value="6">Six</option>`
 
-    // TODO: figure out why this is not working
-    // expect(callback).toHaveBeenCalled()
+      await new Promise((r) => setTimeout(r, 50))
+      expect(onValueMock).toHaveBeenCalled()
 
-    // Give the mutation observer time to run
-    data = select.getData() as Option[]
-    expect(data[1].value).toBe('5')
-    expect(data[1].selected).toBe(true)
+      // Give the mutation observer time to run
+      const data = select.getData() as Option[]
+      expect(data[1].value).toBe('5')
+      expect(data[1].selected).toBe(true)
+    })
   })
 
-  test('mutation observer listener for select option changes', () => {
-    document.body.innerHTML = `<select id="test">
+  describe('onOptionsChange', () => {
+    test('listener triggers when select options change without changing the select value', async () => {
+      document.body.innerHTML = `<select id="test">
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
-    </select>`
+      </select>`
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
 
-    let data = select.getData() as Option[]
-    expect(data.length).toBe(3)
+      let data = select.getData() as Option[]
+      expect(data).toHaveLength(3)
 
-    const callback = jest.fn()
-    select.onOptionsChange = callback
+      const onOptionsMock = jest.fn()
+      select.onOptionsChange = onOptionsMock
 
-    selectElement.innerHTML = '<option value="1">One</option><option value="2">Two</option>'
+      selectElement.innerHTML = '<option value="1">One</option><option value="2">Two</option>'
 
-    // TODO: figure out why this is not working
-    // expect(callback).toHaveBeenCalled()
+      await new Promise((r) => setTimeout(r, 50))
+      expect(onOptionsMock).toHaveBeenCalled()
 
-    data = select.getData() as Option[]
-    expect(data.length).toBe(2)
-  })
+      data = select.getData() as Option[]
+      expect(data).toHaveLength(2)
+    })
 
-  test('mutation observer listener for select optgroup option changes', () => {
-    document.body.innerHTML = `<select id="test">
+    test('listener triggers when optgroup options change', async () => {
+      document.body.innerHTML = `<select id="test">
         <optgroup id="test_optgroup" label="test1">
             <option value="1">One</option>
             <option value="2">Two</option>
@@ -193,58 +338,59 @@ describe('select module', () => {
             <option value="4">Four</option>
             <option value="5">Five</option>
         </optgroup>
-    </select>`
+      </select>`
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
 
-    let dataOptgroup = select.getData() as Optgroup[]
+      const optGroups = select.getData() as Optgroup[]
+      expect(optGroups).toHaveLength(2)
 
-    expect(dataOptgroup.length).toBe(2)
+      const onOptionsMock = jest.fn()
+      select.onOptionsChange = onOptionsMock
 
-    const callback = jest.fn()
-    select.onOptionsChange = callback
+      const selectOptgroup = document.getElementById('test_optgroup') as HTMLOptGroupElement
+      selectOptgroup.innerHTML = '<option value="8">Eight</option><option value="9">Nine</option>'
 
-    let selectOptgroup = document.getElementById('test_optgroup') as HTMLOptGroupElement
-    selectOptgroup.innerHTML = '<option value="8">Eight</option><option value="9">Nine</option>'
+      await new Promise((r) => setTimeout(r, 50))
+      expect(onOptionsMock).toHaveBeenCalled()
 
-    // TODO: figure out why this is not working
-    // expect(callback).toHaveBeenCalled()
+      const options = select.getData() as Option[]
+      expect(options).toHaveLength(2)
 
-    let dataOptgroups = select.getData() as Option[]
-    expect(dataOptgroups.length).toBe(2)
+      // get selected data
+      const selected = select.getSelectedValues()
+      expect(selected).toHaveLength(1)
+    })
 
-    // get selected data
-    let selected = select.getSelectedValues()
-    expect(selected.length).toBe(1)
-  })
-
-  test('mutation observer listener for select option text changes', () => {
-    document.body.innerHTML = `<select id="test">
+    test('listener triggers when select option text changes', async () => {
+      document.body.innerHTML = `<select id="test">
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
-    </select>`
+      </select>`
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
 
-    let data = select.getData() as Option[]
+      let data = select.getData() as Option[]
+      expect(data[0].text).toBe('One')
 
-    expect(data[0].text).toBe('One')
+      const onOptionsMock = jest.fn()
+      select.onOptionsChange = onOptionsMock
 
-    const callback = jest.fn()
-    select.onOptionsChange = callback
+      let option = selectElement.options[0]
+      option.text = 'New One'
 
-    let option = selectElement.options[0]
-    option.text = 'New One'
+      await new Promise((r) => setTimeout(r, 50))
+      expect(onOptionsMock).toHaveBeenCalled()
 
-    data = select.getData() as Option[]
-    expect(data[0].text).toBe('New One')
-  })
+      data = select.getData() as Option[]
+      expect(data[0].text).toBe('New One')
+    })
 
-  test('mutation observer listener for select optgroup option text changes', () => {
-    document.body.innerHTML = `<select id="test">
+    test('listener triggers when select optgroup option text changes', async () => {
+      document.body.innerHTML = `<select id="test">
         <optgroup id="test_optgroup" label="test1">
             <option id=test_option value="1">One</option>
             <option value="2">Two</option>
@@ -254,22 +400,26 @@ describe('select module', () => {
             <option value="4">Four</option>
             <option value="5">Five</option>
         </optgroup>
-    </select>`
+      </select>`
 
-    let selectElement = document.getElementById('test') as HTMLSelectElement
-    let select = new Select(selectElement)
+      const selectElement = document.getElementById('test') as HTMLSelectElement
+      const select = new Select(selectElement)
+
+      let dataOptgroup = select.getData() as Optgroup[]
 
-    let dataOptgroup = select.getData() as Optgroup[]
+      expect(dataOptgroup[0].options[0].text).toBe('One')
 
-    expect(dataOptgroup[0].options[0].text).toBe('One')
+      const onOptionsMock = jest.fn()
+      select.onOptionsChange = onOptionsMock
 
-    const callback = jest.fn()
-    select.onOptionsChange = callback
+      let selectOption = document.getElementById('test_option') as HTMLOptionElement
+      selectOption.text = 'New One'
 
-    let selectOption = document.getElementById('test_option') as HTMLOptionElement
-    selectOption.text = 'New One'
+      await new Promise((r) => setTimeout(r, 50))
+      expect(onOptionsMock).toHaveBeenCalled()
 
-    let dataOption = select.getData() as Optgroup[]
-    expect(dataOption[0].options[0].text).toBe('New One')
+      let dataOption = select.getData() as Optgroup[]
+      expect(dataOption[0].options[0].text).toBe('New One')
+    })
   })
 })