Skip to content

Commit

Permalink
feat(kcatalog): support offest pagination [KHCP-13325] (#2424)
Browse files Browse the repository at this point in the history
  • Loading branch information
@portikM
portikM authored Oct 1, 2024
1 parent cd8bbb3 commit e00860b
Show file tree
Hide file tree
Showing 4 changed files with 260 additions and 9 deletions.
1 change: 1 addition & 0 deletions docs/components/catalog.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@ KCatalog uses KPagination component under the hood and exposes a few props as a
* `paginationTotalItems`
* `paginationNeighbors`
* `paginationPageSizes`
* `paginationOffset`
* `disablePaginationPageJump`

### disablePagination
Expand Down
160 changes: 157 additions & 3 deletions src/components/KCatalog/KCatalog.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,13 @@ const largeDataSet = [
},
]

interface FetchParams {
pageSize: number
page: number
query?: string
offset?: string | null
}

describe('KCatalog', () => {
function getItems(count: number) {
const myItems = []
Expand Down Expand Up @@ -325,7 +332,7 @@ describe('KCatalog', () => {
cy.getTestId('catalog-empty-state').should('contain.text', emptySlotContent)
})

it('displays a loading skeletion when the "loading" prop is set to true"', () => {
it('displays a loading skeletion when the loading prop is set to true', () => {
mount(KCatalog, {
props: {
fetcher: () => {
Expand All @@ -338,7 +345,7 @@ describe('KCatalog', () => {
cy.get('.catalog-skeleton-loader').should('be.visible')
})

it('displays an error state when the "error" prop is set to true"', () => {
it('displays an error state when the error prop is set to true', () => {
mount(KCatalog, {
props: {
fetcher: () => {
Expand Down Expand Up @@ -435,7 +442,7 @@ describe('KCatalog', () => {
it('does not display pagination when hidePaginationWhenOptional is true and total is less than min pageSize', () => {
mount(KCatalog, {
propsData: {
cacheIdentifier: 'pagination5',
cacheIdentifier: 'pagination-offset1',
fetcher: () => {
return { data: getItems(5), total: 5 }
},
Expand All @@ -448,6 +455,23 @@ describe('KCatalog', () => {
cy.getTestId('catalog-pagination').should('not.exist')
})

it('does not display offset-based pagination when hidePaginationWhenOptional is true and total is less than min pageSize', () => {
mount(KCatalog, {
propsData: {
cacheIdentifier: 'pagination5',
fetcher: () => {
return { data: getItems(5), offset: null }
},
loading: false,
paginationPageSizes: [10, 15, 20],
hidePaginationWhenOptional: true,
PaginationOffset: true,
},
})

cy.getTestId('catalog-pagination').should('not.exist')
})

it('does not display pagination when hidePaginationWhenOptional is true and total is equal to pageSize', () => {
mount(KCatalog, {
propsData: {
Expand Down Expand Up @@ -478,5 +502,135 @@ describe('KCatalog', () => {

cy.getTestId('catalog-pagination').should('exist')
})

it('does display offset-based pagination when total is greater than pageSize', () => {
mount(KCatalog, {
propsData: {
fetcher: () => {
return { data: getItems(25), offset: 'abc' }
},
loading: false,
hidePaginationWhenOptional: true,
cacheIdentifier: 'pagination-offset2',
paginationOffset: true,
},
})

cy.getTestId('catalog-pagination').should('exist')
})

it('refetch with paginationOffset: true', () => {
const data: Array<{ title: string }> = []
for (let i = 0; i < 12; i++) {
data.push({ title: 'item' + i })
}
const fns = {
fetcher: (params: FetchParams) => {
const { pageSize, page, offset } = params
const start = offset ? Number(offset) : 0
return {
data: data.slice(start, start + pageSize),
pagination: {
offset: `${start + pageSize}`,
page,
},
}
},
}
cy.spy(fns, 'fetcher').as('fetcher')

mount(KCatalog, {
propsData: {
fetcher: fns.fetcher,
initialFetcherParams: { pageSize: 10 },
loading: false,
paginationPageSizes: [10],
paginationOffset: true,
hidePaginationWhenOptional: true,
fetcherCacheKey: '0',
},
})

// page 1
cy.getTestId('catalog-pagination').should('be.visible')
cy.get('.k-catalog-item').should('have.length', 10)
cy.get('@fetcher')
.should('have.callCount', 1) // ensure fetcher is NOT called twice on load
.should('have.been.calledWith', { pageSize: 10, page: 1, offset: null, query: '' })
.then(() => cy.wrap(Cypress.vueWrapper.setProps({ fetcherCacheKey: '1' }))) // manually trigger refetch
.get('@fetcher')
.should('have.callCount', 2)
.its('lastCall')
.should('have.been.calledWith', { pageSize: 10, page: 1, offset: null, query: '' })

// page 2
cy.getTestId('next-button').click()
cy.get('.k-catalog-item').should('have.length', 2)
cy.get('@fetcher')
.should('have.callCount', 3)
.its('lastCall')
.should('have.been.calledWith', { pageSize: 10, page: 2, offset: '10', query: '' })
.then(() => cy.wrap(Cypress.vueWrapper.setProps({ fetcherCacheKey: '2' }))) // manually trigger refetch
.get('@fetcher')
.should('have.callCount', 4)
.its('lastCall')
.should('have.been.calledWith', { pageSize: 10, page: 2, offset: '10', query: '' })
})

it('refetch with paginationOffset: false', () => {
const data: Array<{ title: string }> = []
for (let i = 0; i < 12; i++) {
data.push({ title: 'item' + i })
}
const fns = {
fetcher: (params: FetchParams) => {
const { pageSize, page } = params
return {
data: data.slice((page - 1) * pageSize, page * pageSize),
total: data.length,
}
},
}
cy.spy(fns, 'fetcher').as('fetcher')

mount(KCatalog, {
propsData: {
fetcher: fns.fetcher,
initialFetcherParams: { pageSize: 10 },
loading: false,
paginationPageSizes: [10],
paginationOffset: false,
hidePaginationWhenOptional: true,
fetcherCacheKey: '0',
},
})

// page 1
cy.getTestId('catalog-pagination').should('be.visible')
cy.get('.k-catalog-item').should('have.length', 10)
// cy.get('.table tbody').should('contain.text', 'row0')
cy.get('@fetcher')
.should('have.callCount', 1) // ensure fetcher is NOT called twice on load
.should('have.been.calledWith', { pageSize: 10, page: 1, offset: null, query: '' })
.then(() => cy.wrap(Cypress.vueWrapper.setProps({ fetcherCacheKey: '1' }))) // manually trigger refetch
.get('@fetcher')
.should('have.callCount', 2)
.its('lastCall')
.should('have.been.calledWith', { pageSize: 10, page: 1, offset: null, query: '' })

// page 2
cy.getTestId('next-button').click()
cy.get('.k-catalog-item').should('have.length', 2)
// cy.get('.table tbody').should('contain.text', 'row10')
cy.get('@fetcher')
.should('have.callCount', 3)
.its('lastCall')
.should('have.been.calledWith', { pageSize: 10, page: 2, offset: null, query: '' })
.then(() => cy.wrap(Cypress.vueWrapper.setProps({ fetcherCacheKey: '2' }))) // manually trigger refetch
.get('@fetcher')
.should('have.callCount', 4)
.its('lastCall')
.should('have.been.calledWith', { pageSize: 10, page: 2, offset: null, query: '' })
})
})
})
Loading

0 comments on commit e00860b

Please sign in to comment.