Skip to content
Snippets Groups Projects
Commit f61cec99 authored by Williams, Darius Shamar's avatar Williams, Darius Shamar
Browse files

more tests

parent 69ead27a
No related branches found
No related tags found
1 merge request!364wdfn-746 - More generic sorting, nav arrows, bug fix
Hide whitespace changes
Inline Side-by-side
assets/src/scripts/monitoring-location/components/hydrograph/vue-components/paginated-table.test.js
+ 92
− 0
View file @ f61cec99
......@@ -112,6 +112,32 @@ describe('monitoring-location/components/hydrograph/components/data-table.vue',
expect(pageButtons[4].html()).toContain('navigate_next');
});
it('Hides the pagination buttons if there is only one page', () => {
wrapper = mount(PaginatedTable, {
props: {
dataSet: [
{
time: '12:00',
value: '3',
notes: 'sth 456'
},
{
time: '12:15',
value: '453',
notes: 'sth 1'
}],
headers: ['Time', 'Result', 'Notes'],
rowsPerPage: 2,
title: 'Test Title',
keyOrder: ['time', 'value', 'notes'],
sortBy: ['time']
}
});
const pageButtons = wrapper.findAll('ul li');
expect(pageButtons).toHaveLength(0);
});
it('Changes the table when a page button is clicked', async() => {
wrapper = mount(PaginatedTable, {
props: {
......@@ -204,5 +230,71 @@ describe('monitoring-location/components/hydrograph/components/data-table.vue',
expect(rows[1].findAll('td')[0].text()).toBe('12:15');
expect(rows[1].findAll('td')[1].text()).toBe('453');
expect(rows[1].findAll('td')[2].text()).toBe('sth 1');
wrapper.find('svg').trigger('click');
await wrapper.vm.$nextTick();
expect(rows).toHaveLength(2);
expect(rows[0].findAll('td')).toHaveLength(3);
expect(rows[0].findAll('td')[0].text()).toBe('14:15');
expect(rows[0].findAll('td')[1].text()).toBe('30');
expect(rows[0].findAll('td')[2].text()).toBe('sth 9');
expect(rows[1].findAll('td')).toHaveLength(3);
expect(rows[1].findAll('td')[0].text()).toBe('14:00');
expect(rows[1].findAll('td')[1].text()).toBe('300');
expect(rows[1].findAll('td')[2].text()).toBe('sth 8');
});
it('Resets the page count when the dataSet changes', async() => {
wrapper = mount(PaginatedTable, {
props: {
dataSet: TEST_DATASET,
headers: ['Time', 'Result', 'Notes'],
rowsPerPage: 2,
title: 'Test Title',
keyOrder: ['time', 'value', 'notes'],
sortBy: ['time']
}
});
wrapper.findAll('ul li button')[3].trigger('click');
await wrapper.vm.$nextTick();
await wrapper.setProps({
dataSet: [
{
time: '12:00',
value: '3',
notes: 'sth 456'
},
{
time: '12:15',
value: '453',
notes: 'sth 1'
},
{
time: '12:30',
value: '123',
notes: 'sth 2'
},
{
time: '12:45',
value: '35',
notes: 'sth 3'
},
{
time: '13:00',
value: '33',
notes: 'sth 4'
}]
});
const pageButtons = wrapper.findAll('ul li');
expect(pageButtons).toHaveLength(4);
expect(pageButtons[0].text()).toBe('1');
expect(pageButtons[1].text()).toBe('2');
expect(pageButtons[2].text()).toBe('3');
expect(pageButtons[3].html()).toContain('navigate_next');
});
});
\ No newline at end of file
assets/src/scripts/monitoring-location/components/hydrograph/vue-components/paginated-table.vue
+ 143
− 141
View file @ f61cec99
<template>
<table class="usa-table">
<!-- eslint-disable vue/no-v-html -->
<caption v-html="myTitle" />
<!--eslint-enable-->
<thead>
<tr>
<th
v-for="(column, columnNumber) in myHeaders"
:key="column"
scope="col"
>
{{ column }}
<svg
v-if="trackedSortBy.includes(myKeyOrder[columnNumber])"
class="usa-icon sort"
aria-hidden="true"
role="img"
@click="sortOrder[0] === 'desc' ? sortOrder = ['asce', myKeyOrder[columnNumber]] : sortOrder = ['desc', myKeyOrder[columnNumber]]"
>
<use :xlink:href="sortOrder.join('') === ['desc', myKeyOrder[columnNumber]].join('') ? downArrowURL : upArrowURL" />
</svg>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(dataObject, index) in pagedArray[page-1]"
:key="index"
>
<td
v-for="key in myKeyOrder"
:key="key"
:data-sort-value="key === 'dateTime' ? dataObject[key] : null"
>
{{ dataObject[key] }}
</td>
</tr>
</tbody>
<nav
v-if="data.length > 1"
class="usa-pagination"
>
<ul class="usa-pagination__list">
<li
v-if="page !== 1"
class="usa-pagination__item usa-pagination__arrow"
>
<button
class="usa-pagination__link usa-pagination__previous-page"
aria-label="Previous page"
@click="page = page - 1"
<div>
<table class="usa-table data-table-pages">
<!-- eslint-disable vue/no-v-html -->
<caption v-html="myTitle" />
<!--eslint-enable-->
<thead>
<tr>
<th
v-for="(column, columnNumber) in myHeaders"
:key="column"
scope="col"
>
{{ column }}
<svg
class="usa-icon"
v-if="trackedSortBy.includes(myKeyOrder[columnNumber])"
class="usa-icon sort"
aria-hidden="true"
role="img"
@click="sortOrder[0] === 'desc' ? sortOrder = ['asce', myKeyOrder[columnNumber]] : sortOrder = ['desc', myKeyOrder[columnNumber]]"
>
<use :xlink:href="previousArrowURL" />
<use :xlink:href="sortOrder.join('') === ['desc', myKeyOrder[columnNumber]].join('') ? downArrowURL : upArrowURL" />
</svg>
</button>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<button
:disabled="page === 1"
:class="`usa-pagination__button ${page === 1 ? 'usa-current' : ''}`"
aria-label="Page 1"
@click="page=1"
>
{{ 1 }}
</button>
</li>
<li
v-if="page > 3"
class="usa-pagination__item usa-pagination__overflow"
>
<span>...</span>
</li>
<li
v-if="3 <= page && page <= data.length"
class="usa-pagination__item usa-pagination__page-no"
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(dataObject, index) in pagedArray[page-1]"
:key="index"
>
<button
class="usa-pagination__button"
:aria-label="`Page ${page - 1}`"
@click="page=page - 1"
<td
v-for="key in myKeyOrder"
:key="key"
:data-sort-value="key === 'dateTime' ? dataObject[key] : null"
>
{{ page - 1 }}
</button>
</li>
<li
v-if="1 < page && page < data.length"
class="usa-pagination__item usa-pagination__page-no"
>
<button
class="usa-pagination__button usa-current"
:aria-label="`Page ${page}`"
:disabled="1 < page && page < data.length"
{{ dataObject[key] }}
</td>
</tr>
</tbody>
</table>
<nav
v-if="data.length > 1"
class="usa-pagination"
>
<ul class="usa-pagination__list">
<li
v-if="page !== 1"
class="usa-pagination__item usa-pagination__arrow"
>
{{ page }}
</button>
</li>
<li
v-if="1 <= page && page < (data.length - 1)"
class="usa-pagination__item usa-pagination__page-no"
>
<button
class="usa-pagination__button"
:aria-label="`Page ${page + 1}`"
@click="page=page + 1"
<button
class="usa-pagination__link usa-pagination__previous-page"
aria-label="Previous page"
@click="page = page - 1"
>
<svg
class="usa-icon"
aria-hidden="true"
role="img"
>
<use :xlink:href="previousArrowURL" />
</svg>
</button>
</li>
<li class="usa-pagination__item usa-pagination__page-no">
<button
:disabled="page === 1"
:class="`usa-pagination__button ${page === 1 ? 'usa-current' : ''}`"
aria-label="Page 1"
@click="page=1"
>
{{ 1 }}
</button>
</li>
<li
v-if="page > 3"
class="usa-pagination__item usa-pagination__overflow"
>
{{ page + 1 }}
</button>
</li>
<li
v-if="page < data.length - 2"
class="usa-pagination__item usa-pagination__overflow"
>
<span>...</span>
</li>
<li
class="usa-pagination__item usa-pagination__page-no"
>
<button
:disabled="page === data.length"
:class="`usa-pagination__button ${page === data.length ? 'usa-current' : ''}`"
:aria-label="`Last page, page ${data.length}`"
@click="page=data.length"
<span>...</span>
</li>
<li
v-if="3 <= page && page <= data.length"
class="usa-pagination__item usa-pagination__page-no"
>
{{ data.length }}
</button>
</li>
<li
v-if="page !== data.length"
class="usa-pagination__item usa-pagination__arrow"
>
<button
class="usa-pagination__link usa-pagination__previous-page"
aria-label="Previous page"
@click="page = page + 1"
<button
class="usa-pagination__button"
:aria-label="`Page ${page - 1}`"
@click="page=page - 1"
>
{{ page - 1 }}
</button>
</li>
<li
v-if="1 < page && page < data.length"
class="usa-pagination__item usa-pagination__page-no"
>
<svg
class="usa-icon"
aria-hidden="true"
role="img"
<button
class="usa-pagination__button usa-current"
:aria-label="`Page ${page}`"
:disabled="1 < page && page < data.length"
>
<use :xlink:href="nextArrowURL" />
</svg>
</button>
</li>
</ul>
</nav>
</table>
{{ page }}
</button>
</li>
<li
v-if="1 <= page && page < (data.length - 1)"
class="usa-pagination__item usa-pagination__page-no"
>
<button
class="usa-pagination__button"
:aria-label="`Page ${page + 1}`"
@click="page=page + 1"
>
{{ page + 1 }}
</button>
</li>
<li
v-if="page < data.length - 2"
class="usa-pagination__item usa-pagination__overflow"
>
<span>...</span>
</li>
<li
class="usa-pagination__item usa-pagination__page-no"
>
<button
:disabled="page === data.length"
:class="`usa-pagination__button ${page === data.length ? 'usa-current' : ''}`"
:aria-label="`Last page, page ${data.length}`"
@click="page=data.length"
>
{{ data.length }}
</button>
</li>
<li
v-if="page !== data.length"
class="usa-pagination__item usa-pagination__arrow"
>
<button
class="usa-pagination__link usa-pagination__previous-page"
aria-label="Previous page"
@click="page = page + 1"
>
<svg
class="usa-icon"
aria-hidden="true"
role="img"
>
<use :xlink:href="nextArrowURL" />
</svg>
</button>
</li>
</ul>
</nav>
</div>
</template>
<script>
......@@ -201,7 +203,7 @@ export default {
const trackedSortBy = toRefs(props).sortBy;
const page = ref(1);
const initialSortTarget = trackedKeyOrder.value[0];
const sortOrder = ref(['desc', initialSortTarget.value]);
const sortOrder = ref(['desc', initialSortTarget]);
const upArrowURL = `${config.STATIC_URL}img/sprite.svg#arrow_drop_up`;
const downArrowURL = `${config.STATIC_URL}img/sprite.svg#arrow_drop_down`;
const previousArrowURL = `${config.STATIC_URL}img/sprite.svg#navigate_before`;
......@@ -245,7 +247,7 @@ export default {
return array;
});
watch(pagedArray, () => {
watch(trackedData, () => {
page.value = 1;
});
......
assets/src/styles/monitoring-location.scss
+ 5
− 1
View file @ f61cec99
......@@ -99,9 +99,13 @@ body {
@include uswds.u-bg('accent-warm-dark');
}
.usa-table svg {
.data-table-pages svg {
cursor: pointer;
}
.data-table-pages+.usa-pagination {
justify-content: left;
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment