](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/){{ row.balance }}
31 |{{ row.birthdate }}
32 |No results found
39 |{{ row.balance }}
107 |{{ isoDateToEuroDate(row.birthdate) }}
108 |No results found
115 || # | 26 |27 | {{ th.name }} 28 | | 29 |||
|---|---|---|---|
| {{ rowIndex + 1 }} | 35 |{{ row.name }} | 36 |{{ row.email }} | 37 |{{ isoDateToEuroDate(row.birthdate) }} | 38 |
| Property | 175 |Type | 176 |Description | 177 |
|---|---|---|
| dsData | 182 |Array of Objects | 183 |The data object that contains all the data | 184 |
| dsIndexes | 187 |Array | 188 |The indexes of all the filtered data rows, regardless of paging | 189 |
| dsRows | 192 |Array | 193 |The indexes of the data rows in the current displayed page | 194 |
| dsPages | 197 |Array | 198 |The array used to create pagination links | 199 |
| dsResultsNumber | 202 |Number | 203 |The number of rows currently displaying | 204 |
| dsPagecount | 207 |Number | 208 |The number of pagination pages | 209 |
| dsFrom | 212 |Number | 213 |The item "from" of paginated items currently displaying | 214 |
| dsTo | 217 |Number | 218 |The item "to" of paginated items currently displaying | 219 |
| dsPage | 222 |Number | 223 |The number of the current page in pagination | 224 |
| dsShowEntries | 227 |Number | 228 |The number of items to show in pagination | 229 |
| datasetI18n | 232 |Object | 233 |An object containing translation strings | 234 |
| Name | 268 |Params | 269 |Input value/Description | 270 |
|---|---|---|
| search | 275 |String | 276 |The value to search | 277 |
| showEntries | 280 |Number | 281 |The number of items to show on each page | 282 |
| setActive | 285 |Number | 286 |The number of the page to set as active | 287 |
| Name | 297 |Emits | 298 |Description | 299 |
|---|---|---|
| update:dsData | 304 |Array of Objects | 305 |Emits the filtered dsData items, every time the internal computed results is changed. |
306 |
| Property | 320 |Type | 321 |Description | 322 |
|---|---|---|
| dsData | 327 |Array of Objects | 328 |The data object that contains all the data | 329 |
| dsIndexes | 332 |Array | 333 |The indexes of all the filtered data rows, regardless of paging | 334 |
| dsRows | 337 |Array | 338 |The indexes of the data rows in the current displayed page | 339 |
| dsPages | 342 |Array | 343 |The array used to create pagination links | 344 |
| dsResultsNumber | 347 |Number | 348 |The number of rows currently displaying | 349 |
| dsPagecount | 352 |Number | 353 |The number of pagination pages | 354 |
| dsFrom | 357 |Number | 358 |The item "from" of paginated items currently displaying | 359 |
| dsTo | 362 |Number | 363 |The item "to" of paginated items currently displaying | 364 |
| dsPage | 367 |Number | 368 |The number of the current page in pagination | 369 |
| dsShowEntries | 372 |Number | 373 |The number of items to show in pagination | 374 |
No results found
398 | 399 || Property | 422 |Type | 423 |Description | 424 |
|---|---|---|
| row | 429 |Object | 430 |The dataset row data | 431 |
| rowIndex | 434 |Number | 435 |The original index of the data row | 436 |
| index | 439 |Number | 440 |The iteration index | 441 |
6 | A project setup using vue-cli, created to easily scaffold new Vue.js projects.
7 | Find out more at
8 | vue-cli documentation.
9 |
{{ row.balance }}
40 |{{ row.birthdate }}
41 |No results found
48 |{{ row.balance }}
40 |{{ row.birthdate }}
41 |No results found
48 |No results found
182 | 183 |{{ row.name }}
35 |{{ rowIndex }}
36 |{{ index }}
37 |No results found
`, 41 | }, 42 | }) 43 | 44 | return wrapper 45 | } 46 | 47 | afterEach(function () { 48 | wrapper.unmount() 49 | }) 50 | 51 | it('renders correctly', () => { 52 | wrapper = wrapperWithProvide() 53 | expect(wrapper.element).toMatchSnapshot() 54 | }) 55 | 56 | it('renders divs based on passed props', () => { 57 | wrapper = wrapperWithProvide() 58 | expect(wrapper.findAll('div.result').length).toBe(2) 59 | }) 60 | 61 | it('calculates the correct indexes', () => { 62 | wrapper = wrapperWithProvide() 63 | expect(wrapper.vm.indexes).toEqual([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) 64 | }) 65 | 66 | it('does not render any results when dsRows is empty', () => { 67 | wrapper = wrapperWithProvide({ 68 | dsRows: ref([]), 69 | }) 70 | expect(wrapper.findAll('div.result').length).toBe(0) 71 | }) 72 | 73 | it('renders the noDataFound slot when dsRows is empty', () => { 74 | wrapper = wrapperWithProvide({ 75 | dsRows: ref([]), 76 | }) 77 | expect(wrapper.find('p').text()).toBe('No results found') 78 | }) 79 | 80 | it('renders divs after data changed', () => { 81 | wrapper = wrapperWithProvide({ 82 | dsData: ref([ 83 | { 84 | age: 17, 85 | name: 'John Doe', 86 | email: 'john.doe@flyboyz.biz', 87 | }, 88 | ]), 89 | dsRows: ref([0]), 90 | }) 91 | expect(wrapper.findAll('div.result').length).toBe(1) 92 | expect(wrapper.element).toMatchSnapshot() 93 | }) 94 | }) 95 | -------------------------------------------------------------------------------- /tests/unit/DatasetPager.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils' 2 | import { ref } from 'vue' 3 | import DatasetPager from '@/DatasetPager.vue' 4 | import datasetI18n from '@/i18n/en.js' 5 | 6 | const mockSetActive = vi.fn() 7 | 8 | const isButtonDisabled = function (el) { 9 | return el.tabIndex === -1 && el.hasAttribute('aria-disabled') === true 10 | } 11 | 12 | const isButtonEnabled = function (el) { 13 | return el.hasAttribute('tabIndex') === false && el.hasAttribute('aria-disabled') === false 14 | } 15 | 16 | describe('DatasetPager', () => { 17 | let wrapper = null 18 | 19 | function wrapperWithProvide(provideOpts = {}) { 20 | const wrapper = shallowMount(DatasetPager, { 21 | global: { 22 | provide: { 23 | datasetI18n: ref(datasetI18n), 24 | setActive: function (value) { 25 | mockSetActive(value) 26 | }, 27 | dsPages: ref([1, 2, 3]), 28 | dsPagecount: ref(0), 29 | dsPage: ref(1), 30 | ...provideOpts, 31 | }, 32 | }, 33 | }) 34 | 35 | return wrapper 36 | } 37 | 38 | afterEach(function () { 39 | wrapper.unmount() 40 | }) 41 | 42 | it('renders a ul element', () => { 43 | wrapper = wrapperWithProvide() 44 | const ul = wrapper.find('ul') 45 | 46 | expect(ul.exists()).toBe(true) 47 | }) 48 | 49 | it('disables the previous button on first page', () => { 50 | wrapper = wrapperWithProvide({ 51 | dsPage: ref(1), 52 | }) 53 | const previousButton = wrapper.findAll('a')[0].element 54 | 55 | expect(isButtonDisabled(previousButton)).toBe(true) 56 | }) 57 | 58 | it('disables the previous button when there is only one page', () => { 59 | wrapper = wrapperWithProvide({ 60 | dsPagecount: ref(1), 61 | }) 62 | const previousButton = wrapper.findAll('a')[0].element 63 | 64 | expect(isButtonDisabled(previousButton)).toBe(true) 65 | }) 66 | 67 | it('enables the previous button', () => { 68 | wrapper = wrapperWithProvide({ 69 | dsPage: ref(2), 70 | dsPagecount: ref(3), 71 | }) 72 | const previousButton = wrapper.findAll('a')[0].element 73 | 74 | expect(isButtonEnabled(previousButton)).toBe(true) 75 | }) 76 | 77 | it('disables the next button on last page', () => { 78 | wrapper = wrapperWithProvide({ 79 | dsPage: ref(4), 80 | dsPagecount: ref(4), 81 | }) 82 | const buttons = wrapper.findAll('a') 83 | const nextButton = buttons[buttons.length - 1].element 84 | 85 | expect(isButtonDisabled(nextButton)).toBe(true) 86 | }) 87 | 88 | it('disables the next button when there is only one page', () => { 89 | wrapper = wrapperWithProvide({ 90 | dsPagecount: ref(1), 91 | }) 92 | const buttons = wrapper.findAll('a') 93 | const nextButton = buttons[buttons.length - 1].element 94 | 95 | expect(isButtonDisabled(nextButton)).toBe(true) 96 | }) 97 | 98 | it('disables the previous and next buttons when there are no pages', () => { 99 | wrapper = wrapperWithProvide({ 100 | dsPagecount: ref(0), 101 | }) 102 | const buttons = wrapper.findAll('a') 103 | const previousButton = buttons[0].element 104 | const nextButton = buttons[buttons.length - 1].element 105 | 106 | expect(isButtonDisabled(previousButton)).toBe(true) 107 | expect(isButtonDisabled(nextButton)).toBe(true) 108 | }) 109 | 110 | it('enables the next button', () => { 111 | wrapper = wrapperWithProvide({ 112 | dsPage: ref(2), 113 | dsPagecount: ref(3), 114 | }) 115 | const buttons = wrapper.findAll('a') 116 | const nextButton = buttons[buttons.length - 1].element 117 | 118 | expect(isButtonEnabled(nextButton)).toBe(true) 119 | }) 120 | 121 | it('makes the normal page button active', () => { 122 | wrapper = wrapperWithProvide({ 123 | dsPage: ref(1), 124 | dsPagecount: ref(3), 125 | }) 126 | const li = wrapper.findAll('li')[1] 127 | 128 | expect(li.classes()).toContain('active') 129 | }) 130 | 131 | it('makes the ... page button disabled', () => { 132 | wrapper = wrapperWithProvide({ 133 | dsPages: ref([1, '...', 4, 5, 6]), 134 | dsPage: ref(6), 135 | dsPagecount: ref(6), 136 | }) 137 | const li = wrapper.findAll('li')[2] 138 | 139 | expect(li.classes()).toContain('disabled') 140 | expect(li.find('span').exists()).toBe(true) 141 | }) 142 | 143 | it('sends the correct active page number on previous button click', () => { 144 | mockSetActive.mockClear() 145 | wrapper = wrapperWithProvide({ 146 | dsPages: ref([1, '...', 4, 5, 6]), 147 | dsPage: ref(6), 148 | dsPagecount: ref(6), 149 | }) 150 | const previousButton = wrapper.findAll('a')[0] 151 | 152 | previousButton.trigger('click') 153 | expect(mockSetActive.mock.calls[0][0]).toBe(5) 154 | }) 155 | 156 | it('sends the correct active page number on next button click', () => { 157 | mockSetActive.mockClear() 158 | wrapper = wrapperWithProvide({ 159 | dsPages: ref([1, '...', 4, 5, 6]), 160 | dsPage: ref(5), 161 | dsPagecount: ref(6), 162 | }) 163 | const buttons = wrapper.findAll('a') 164 | const nextButton = buttons[buttons.length - 1] 165 | 166 | nextButton.trigger('click') 167 | expect(mockSetActive.mock.calls[0][0]).toBe(6) 168 | }) 169 | }) 170 | -------------------------------------------------------------------------------- /tests/unit/DatasetSearch.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils' 2 | import DatasetSearch from '@/DatasetSearch.vue' 3 | 4 | const mockSearch = vi.fn() 5 | 6 | describe('DatasetSearch', () => { 7 | beforeEach(() => { 8 | vi.useFakeTimers() 9 | }) 10 | 11 | afterEach(() => { 12 | vi.useRealTimers() 13 | }) 14 | 15 | const wrapper = shallowMount(DatasetSearch, { 16 | global: { 17 | provide: { 18 | search: function (value) { 19 | mockSearch(value) 20 | }, 21 | }, 22 | }, 23 | }) 24 | 25 | it('renders an input element', () => { 26 | const inputText = wrapper.find('input.form-control') 27 | 28 | expect(inputText.exists()).toBe(true) 29 | }) 30 | 31 | it('passes the correct value to the injected search method', async () => { 32 | mockSearch.mockClear() 33 | const inputText = wrapper.find('input.form-control') 34 | 35 | await inputText.setValue('test') 36 | 37 | vi.advanceTimersByTime(1000) 38 | 39 | expect(mockSearch.mock.calls[0][0]).toBe('test') 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /tests/unit/DatasetShow.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils' 2 | import { ref } from 'vue' 3 | import DatasetShow from '@/DatasetShow.vue' 4 | import datasetI18n from '@/i18n/en.js' 5 | 6 | const mockShowEntries = vi.fn() 7 | 8 | describe('DatasetShow', () => { 9 | const wrapper = shallowMount(DatasetShow, { 10 | global: { 11 | provide: { 12 | datasetI18n: ref(datasetI18n), 13 | showEntries: function (value) { 14 | mockShowEntries(value) 15 | }, 16 | }, 17 | }, 18 | }) 19 | 20 | it('renders a select element', () => { 21 | const select = wrapper.find('select.form-control') 22 | 23 | expect(select.exists()).toBe(true) 24 | }) 25 | 26 | it('passes the correct value to the injected search method', () => { 27 | mockShowEntries.mockClear() 28 | const select = wrapper.find('select.form-control') 29 | 30 | select.setValue('25') 31 | expect(mockShowEntries.mock.calls[0][0]).toBe(25) 32 | }) 33 | }) 34 | -------------------------------------------------------------------------------- /tests/unit/__snapshots__/DatasetItem.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html 2 | 3 | exports[`DatasetItem > renders correctly 1`] = ` 4 |11 | Jessie Casey 12 |
13 |14 | 0 15 |
16 |17 | 0 18 |
19 |26 | Solomon Stanley 27 |
28 |29 | 1 30 |
31 |32 | 1 33 |
34 |49 | John Doe 50 |
51 |52 | 0 53 |
54 |55 | 0 56 |
57 |