Skip to content
This repository has been archived by the owner on Oct 24, 2018. It is now read-only.

Commit

Permalink
fix cs
Browse files Browse the repository at this point in the history
  • Loading branch information
@freekmurze
freekmurze committed Aug 2, 2017
1 parent ef66c85 commit 85c0b3a
Show file tree
Hide file tree
Showing 4 changed files with 208 additions and 10 deletions.
38 changes: 38 additions & 0 deletions __tests__/components/table-component/TableComponent.test.js
View file
@@ -1,6 +1,7 @@
import TableComponent from '../../../src';
import Vue from 'vue/dist/vue.js';
import LocalStorageMock from '../../helpers/LocalStorageMock';
import simulant from 'simulant';

const localStorage = new LocalStorageMock();

Expand Down Expand Up @@ -177,6 +178,43 @@ describe('TableComponent', () => {

expect(document.body.innerHTML).toMatchSnapshot();
});

it('clicking a link in the pagination will rerender the table', async () => {
const serverResponse = ({ page }) => {
return {
data: [{ firstName: `John ${page}` },{ id: 2, firstName: `Paul ${page}` }],
pagination: {
total_pages: 4,
current_page: page,
},
};
};

document.body.innerHTML = `
<div id="app">
<table-component
:data="${serverResponse}">
<table-column show="firstName" label="First name"></table-column>
</table-component>
</div>
`;

await createVm();

await Vue.nextTick(() => {});

expect(document.body.innerHTML).toMatchSnapshot();

const thirdPageLink = document.getElementsByClassName('page-link')[2];

await simulant.fire(thirdPageLink, 'click');

await createVm();

await Vue.nextTick(() => {});

expect(document.body.innerHTML).toMatchSnapshot();
});
});

async function createVm() {
Expand Down
158 changes: 158 additions & 0 deletions __tests__/components/table-component/__snapshots__/TableComponent.test.js.snap
View file
Expand Up @@ -292,6 +292,164 @@ exports[`TableComponent can render pagination when the server responds with pagi
`;
exports[`TableComponent clicking a link in the pagination will rerender the table 1`] = `
<div id="app">
<div class="table-component">
<div class="table-component__filter">
<input type="text"
placeholder="Filter table…"
class="table-component__filter__field"
>
<!---->
</div>
<div class="table-component__table-wrapper">
<table class="table-component__table">
<caption role="alert"
aria-live="polite"
class="table-component__table__caption"
>
Table not sorted
</caption>
<thead>
<tr>
<th role="columnheader"
scope="col"
aria-sort="none"
class="table-component__th--sort"
>
First name
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
John 1
</td>
</tr>
<tr>
<td>
Paul 1
</td>
</tr>
</tbody>
</table>
</div>
<!---->
<div style="display: none;">
<div>
</div>
</div>
<nav aria-label="Page navigation example"
class="my-4"
>
<ul class="pagination justify-content-center">
<li class="page-item active">
<a class="page-link">
1
</a>
</li>
<li class="page-item">
<a class="page-link">
2
</a>
</li>
<li class="page-item">
<a class="page-link">
3
</a>
</li>
<li class="page-item">
<a class="page-link">
4
</a>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`TableComponent clicking a link in the pagination will rerender the table 2`] = `
<div id="app">
<div class="table-component">
<div class="table-component__filter">
<input type="text"
placeholder="Filter table…"
class="table-component__filter__field"
>
</div>
<div class="table-component__table-wrapper">
<table class="table-component__table">
<caption role="alert"
aria-live="polite"
class="table-component__table__caption"
>
Table not sorted
</caption>
<thead>
<tr>
<th role="columnheader"
scope="col"
aria-sort="none"
class="table-component__th--sort"
>
First name
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
John 3
</td>
</tr>
<tr>
<td>
Paul 3
</td>
</tr>
</tbody>
</table>
</div>
<div style="display: none;">
<div>
</div>
</div>
<nav aria-label="Page navigation example"
class="my-4"
>
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link">
1
</a>
</li>
<li class="page-item">
<a class="page-link">
2
</a>
</li>
<li class="page-item active">
<a class="page-link">
3
</a>
</li>
<li class="page-item">
<a class="page-link">
4
</a>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`TableComponent has an prop to disable the caption 1`] = `
<div id="app">
Expand Down
10 changes: 6 additions & 4 deletions src/components/Pagination.vue
View file
Expand Up @@ -9,14 +9,14 @@
</template>

<script>
import {range} from 'lodash';
import { range } from 'lodash';
export default {
props: {
pagination: {
type: Object,
default: () => ({}),
}
},
},
computed: {
Expand All @@ -41,7 +41,9 @@
methods: {
isActive(page) {
return this.pagination.current_page === page;
const currentPage = this.pagination.current_page || 1;
return currentPage === page;
},
pageClicked(page) {
Expand All @@ -52,5 +54,5 @@
this.$emit('choosePage', page);
},
},
}
};
</script>
12 changes: 6 additions & 6 deletions src/components/TableComponent.vue
View file
Expand Up @@ -157,16 +157,16 @@
data() {
if (isArray(this.data)) {
this.mapDataToRows();
}
}
},
},
async mounted() {
this.columns = this.$slots.default
.filter(column => column.componentInstance)
.map(column => pick(column.componentInstance, [
'show', 'label', 'dataType', 'sortable', 'sortBy', 'filterable', 'filterOn', 'hidden'
'show', 'label', 'dataType', 'sortable', 'sortBy', 'filterable', 'filterOn', 'hidden',
]))
.map(columnProperties => new Column(columnProperties));
Expand All @@ -189,7 +189,7 @@
},
async mapDataToRows() {
let data = isArray(this.data)
const data = isArray(this.data)
? this.prepareLocalData()
: await this.prepareServerData();
Expand All @@ -210,15 +210,15 @@
},
async prepareServerData() {
const page = this.pagination && this.pagination.current_page || 1;
const response = await this.data({
filters: this.filters,
sort: this.sort,
page: this.pagination && this.pagination.current_page,
page: page,
});
this.pagination = response.pagination;
return response.data;
Expand Down

0 comments on commit 85c0b3a

Please sign in to comment.