it('should filter', async () => {
const fetcherStub = stub();
fetcherStub.returns({
data: [{ id: '1' }],
meta: {
total: 10000
}
});
store.apply([{ op: OperationType.REPLACE, path: new Pointer(['grid', 'meta', 'page']), value: 10 }]);
await filterProcess(store)({ filterOptions: { columnId: 'id', value: 'filter' }, id: 'grid', fetcher: fetcherStub });
const pages = store.get(store.path('grid', 'data'));
assert.deepEqual(pages, { pages: { 'page-1': [{ id: '1' }] } });
const meta = store.get(store.path('grid', 'meta'));
assert.deepEqual(meta, {
currentFilter: {
columnId: 'id',
value: 'filter'
},
page: 1,
filter: { id: 'filter' },
fetchedPages: [1],
isSorting: false,
total: 10000
});
});
it('Should not fail if the page is already set', () => {
pageChangeProcess(store)({ id: 'grid', page: 2 });
let page = store.get(store.path('grid', 'meta', 'page'));
assert.strictEqual(page, 2);
pageChangeProcess(store)({ id: 'grid', page: 2 });
page = store.get(store.path('grid', 'meta', 'page'));
assert.strictEqual(page, 2);
});
function onRouteChange() {
const outlet = store.get(store.path('routing', 'outlet'));
const params = store.get(store.path('routing', 'params'));
if (outlet) {
const link = router.link(outlet, params);
if (link !== undefined) {
router.setPath(link);
}
}
}
it('fetcher should update the page and meta data for request', async () => {
const fetcherStub = stub();
fetcherStub.returns({
data: [{ id: '1' }],
meta: {
total: 10000
}
});
await fetcherProcess(store)({ id: 'grid', page: 2, fetcher: fetcherStub, pageSize: 100 });
const pages = store.get(store.path('grid', 'data'));
assert.deepEqual(pages, { pages: { 'page-2': [{ id: '1' }] } });
const meta = store.get(store.path('grid', 'meta'));
assert.deepEqual(meta, { fetchedPages: [2], total: 10000, pageSize: 100 });
});
router.on('outlet', ({ outlet, action }) => {
if (action === 'enter') {
switch (outlet.id) {
case 'user':
if (outlet.isExact()) {
getProfileProcess(store)({ username: outlet.params.username });
fetchFeedProcess(store)({ type: 'user', page: 0, filter: outlet.params.username });
}
break;
case 'favorites':
getProfileProcess(store)({ username: outlet.params.username });
fetchFeedProcess(store)({ type: 'favorites', page: 0, filter: outlet.params.username });
break;
case 'article':
getArticleProcess(store)({ slug: outlet.params.slug });
break;
case 'settings':
getUserSettingsProcess(store)({});
break;
case 'edit-post':
getEditorArticleProcess(store)({ slug: outlet.params.slug });
break;
case 'home':
const isAuthenticated = !!store.get(store.path('user', 'token'));
fetchFeedProcess(store)({ type: isAuthenticated ? 'feed' : 'global', page: 0, filter: '' });
break;
}
} else {
if (outlet.id === 'edit-post') {
clearEditorProcess(store)({});
}
}
});
it('Should throw an error if the grid is sorting', async () => {
const fetcherStub = stub();
store.apply([{ op: OperationType.REPLACE, path: new Pointer(['grid', 'meta', 'isSorting']), value: true }]);
return fetcherProcess(store)({ id: 'grid', page: 2, fetcher: fetcherStub, pageSize: 100 }).then(
(result) => {
assert.isOk(result.error);
assert.strictEqual((result as any).error.error.message, 'The grid is being sorted or filtered');
}
);
});
it('Should throw an error if the page has already been fetched', async () => {
const fetcherStub = stub();
fetcherStub.returns({
data: [{ id: '1' }],
meta: {
total: 10000
}
});
await fetcherProcess(store)({ id: 'grid', page: 2, fetcher: fetcherStub, pageSize: 100 });
const pages = store.get(store.path('grid', 'data'));
assert.deepEqual(pages, { pages: { 'page-2': [{ id: '1' }] } });
const meta = store.get(store.path('grid', 'meta'));
assert.deepEqual(meta, { fetchedPages: [2], total: 10000, pageSize: 100 });
return fetcherProcess(store)({ id: 'grid', page: 2, fetcher: fetcherStub, pageSize: 100 }).then(
(result) => {
assert.isOk(result.error);
assert.strictEqual((result as any).error.error.message, 'The page has already been requested');
}
);
});
it('should sort', async () => {
const fetcherStub = stub();
fetcherStub.returns({
data: [{ id: '1' }],
meta: {
total: 10000
}
});
store.apply([{ op: OperationType.REPLACE, path: new Pointer(['grid', 'meta', 'page']), value: 10 }]);
await sortProcess(store)({ columnId: 'id', direction: 'asc', id: 'grid', fetcher: fetcherStub });
const pages = store.get(store.path('grid', 'data'));
assert.deepEqual(pages, { pages: { 'page-9': [{ id: '1' }], 'page-10': [{ id: '1' }] } });
const meta = store.get(store.path('grid', 'meta'));
assert.deepEqual(meta, {
page: 10,
sort: { columnId: 'id', direction: 'asc' },
fetchedPages: [10, 9],
isSorting: false,
total: 10000
});
});
it('Should update item', async () => {
const updaterStub = stub();
store.apply([
{
op: OperationType.REPLACE,
path: new Pointer(['grid', 'data', 'pages', 'page-1']),
value: [{ id: 'A', name: 'bill' }]
}
]);
let pages = store.get(store.path('grid', 'data'));
assert.deepEqual(pages, { pages: { 'page-1': [{ id: 'A', name: 'bill' }] } });
await updaterProcess(store)({
updater: updaterStub,
columnId: 'name',
id: 'grid',
value: 'foo',
page: 1,
rowNumber: 0
});
pages = store.get(store.path('grid', 'data'));
assert.deepEqual(pages, { pages: { 'page-1': [{ id: 'A', name: 'foo' }] } });
});
it('should use store from properties when passed', () => {
const store = new Store();
const filterableConfig = [{ id: 'id', title: 'id', filterable: true }];
const h = harness(() =>
w(MockMetaMixin(Grid, mockMeta), {
fetcher: noop,
updater: noop,
columnConfig: filterableConfig,
store,
height: 500
})
);
h.expect(() =>
v('div', { key: 'root', classes: [css.root, fixedCss.rootFixed], role: 'table', 'aria-rowcount': null }, [
v('div', {
key: 'header',
scrollLeft: 0,
classes: [css.header, fixedCss.headerFixed, css.filterGroup],
row: 'rowgroup'
}, [
w(Header, {
key: 'header-row',
columnConfig: filterableConfig,
sorter: noop,
sort: undefined,
filter: undefined,
filterer: noop
})
]),
w(Body, {
key: 'body',
pages: {},
totalRows: undefined,
pageSize: 100,
columnConfig: filterableConfig,
pageChange: noop,
updater: noop,
fetcher: noop,
onScroll: noop,
height: 300
}),
v('div', { key: 'footer' }, [
w(Footer, {
key: 'footer-row',
total: undefined,
page: 1,
pageSize: 100
})
])
])
);
store.apply(
[
{
op: OperationType.REPLACE,
path: new Pointer('_grid/data/pages/page-1'),
value: [{ id: 'id' }]
},
{
op: OperationType.REPLACE,
path: new Pointer('_grid/meta'),
value: {
page: 10,
sort: {
columnId: 'id',
direction: 'asc'
},
filter: {
columnId: 'id',
value: 'id'
},
total: 100
}
}
],
true
);
h.expect(() =>
v('div', { key: 'root', classes: [css.root, fixedCss.rootFixed], role: 'table', 'aria-rowcount': '100' }, [
v('div', {
key: 'header',
scrollLeft: 0,
classes: [css.header, fixedCss.headerFixed, css.filterGroup],
row: 'rowgroup'
}, [
w(Header, {
key: 'header-row',
columnConfig: filterableConfig,
sorter: noop,
sort: {
columnId: 'id',
direction: 'asc'
},
filter: {
columnId: 'id',
value: 'id'
},
filterer: noop
})
]),
w(Body, {
key: 'body',
pages: {
'page-1': [{ id: 'id' }]
},
totalRows: 100,
pageSize: 100,
columnConfig: filterableConfig,
pageChange: noop,
updater: noop,
fetcher: noop,
onScroll: noop,
height: 300
}),
v('div', { key: 'footer' }, [
w(Footer, {
key: 'footer-row',
total: 100,
page: 10,
pageSize: 100
})
])
])
);
});
