From b14ebaa9265d72ca59e9927538d23d4753d35f1c Mon Sep 17 00:00:00 2001 From: Alexandre Chau Date: Thu, 8 Jul 2021 12:22:08 +0200 Subject: [PATCH] test: write tests for grid pagination, add own items fixtures generator --- cypress/fixtures/items.js | 26 ++++++- .../integration/item/view/viewFolder.spec.js | 78 ++++++++++++++++++- src/components/main/ItemsGrid.js | 7 +- src/config/constants.js | 4 + src/config/selectors.js | 1 + 5 files changed, 108 insertions(+), 8 deletions(-) diff --git a/cypress/fixtures/items.js b/cypress/fixtures/items.js index 82d6a49a1..c9f58ebae 100644 --- a/cypress/fixtures/items.js +++ b/cypress/fixtures/items.js @@ -1,8 +1,8 @@ import { SETTINGS } from '../../src/config/constants'; import { ITEM_TYPES, PERMISSION_LEVELS } from '../../src/enums'; import { buildItemLoginSchemaExtra } from '../../src/utils/itemExtra'; -import { CURRENT_USER, MEMBERS } from './members'; import { DEFAULT_TAGS, ITEM_LOGIN_TAG } from './itemTags'; +import { CURRENT_USER, MEMBERS } from './members'; export const DEFAULT_FOLDER_ITEM = { extra: {}, @@ -94,6 +94,30 @@ export const SAMPLE_ITEMS = { memberships: [], }; +export const generateOwnItems = (number) => { + const id = (i) => `cafebabe-dead-beef-1234-${`${i}`.padStart(12, '0')}`; + const path = (i) => id(i).replaceAll('-', '_'); + + return Array(number) + .fill(null) + .map((_, i) => ({ + ...DEFAULT_FOLDER_ITEM, + id: id(i), + name: `item ${i}`, + path: path(i), + extra: { + image: 'someimageurl', + }, + memberships: [ + { + itemPath: path(i), + permission: PERMISSION_LEVELS.ADMIN, + memberId: MEMBERS.ANNA.id, + }, + ], + })); +}; + export const ITEM_LOGIN_ITEMS = { items: [ { diff --git a/cypress/integration/item/view/viewFolder.spec.js b/cypress/integration/item/view/viewFolder.spec.js index bb48abfa4..444ef3dc0 100644 --- a/cypress/integration/item/view/viewFolder.spec.js +++ b/cypress/integration/item/view/viewFolder.spec.js @@ -1,16 +1,22 @@ -import { DEFAULT_ITEM_LAYOUT_MODE } from '../../../../src/config/constants'; -import { ITEM_LAYOUT_MODES } from '../../../../src/enums'; +import { + DEFAULT_ITEM_LAYOUT_MODE, + GRID_ITEMS_PER_PAGE_CHOICES, +} from '../../../../src/config/constants'; import { buildItemPath, HOME_PATH } from '../../../../src/config/paths'; import { buildItemCard, buildItemsTableRowId, + ITEMS_GRID_ITEMS_PER_PAGE_SELECT_ID, + ITEMS_GRID_ITEMS_PER_PAGE_SELECT_LABEL_ID, ITEMS_GRID_NO_ITEM_ID, + ITEMS_GRID_PAGINATION_ID, ITEMS_TABLE_EMPTY_ROW_ID, ITEM_SCREEN_ERROR_ALERT_ID, NAVIGATION_HOME_LINK_ID, } from '../../../../src/config/selectors'; +import { ITEM_LAYOUT_MODES } from '../../../../src/enums'; import { IMAGE_ITEM_DEFAULT, VIDEO_ITEM_S3 } from '../../../fixtures/files'; -import { SAMPLE_ITEMS } from '../../../fixtures/items'; +import { generateOwnItems, SAMPLE_ITEMS } from '../../../fixtures/items'; import { GRAASP_LINK_ITEM } from '../../../fixtures/links'; import { REQUEST_FAILURE_TIME } from '../../../support/constants'; import { expectFolderViewScreenLayout } from './utils'; @@ -100,6 +106,72 @@ describe('View Space', () => { }); }); }); + + describe('Grid pagination', () => { + const sampleItems = generateOwnItems(30); + + const checkGridPagination = (items, itemsPerPage) => { + const numberPages = Math.ceil(items.length / itemsPerPage); + + // for each page + for (let i = 0; i < numberPages; i += 1) { + // navigate to page + cy.get(`#${ITEMS_GRID_PAGINATION_ID} > ul > li`) + .eq(i + 1) // leftmost li is "prev" button + .click(); + // compute items that should be on this page + const shouldDisplay = items.slice( + i * itemsPerPage, + (i + 1) * itemsPerPage, + ); + // compute items that should not be on this page + const shouldNotDisplay = items.filter( + (it) => !shouldDisplay.includes(it), + ); + + shouldDisplay.forEach((item) => { + cy.get(`#${buildItemCard(item.id)}`).should('exist'); + }); + + shouldNotDisplay.forEach((item) => { + cy.get(`#${buildItemCard(item.id)}`).should('not.exist'); + }); + } + }; + + beforeEach(() => { + // create many items to be shown on Home (more than default itemsPerPage) + cy.setUpApi({ items: sampleItems }); + cy.visit(HOME_PATH); + + if (DEFAULT_ITEM_LAYOUT_MODE !== ITEM_LAYOUT_MODES.GRID) { + cy.switchMode(ITEM_LAYOUT_MODES.GRID); + } + + cy.wait('@getOwnItems'); + }); + + it('shows only items of each page', () => { + // using default items per page count + checkGridPagination(sampleItems, GRID_ITEMS_PER_PAGE_CHOICES[0]); + }); + + it('selects number of items per page', () => { + // test every possible value of itemsPerPage count + GRID_ITEMS_PER_PAGE_CHOICES.forEach((itemsPerPage, i) => { + // click on itemsPerPage select + cy.get(`#${ITEMS_GRID_ITEMS_PER_PAGE_SELECT_ID}`).click(); + + // select ith option in select popover + const popover = `ul[aria-labelledby="${ITEMS_GRID_ITEMS_PER_PAGE_SELECT_LABEL_ID}"] > li`; + cy.get(popover).eq(i).click(); + + // check pagination display with second items per page count choice + checkGridPagination(sampleItems, itemsPerPage); + }); + }); + }); + describe('List', () => { beforeEach(() => { cy.setUpApi({ diff --git a/src/components/main/ItemsGrid.js b/src/components/main/ItemsGrid.js index 821a4f383..9f183cca0 100644 --- a/src/components/main/ItemsGrid.js +++ b/src/components/main/ItemsGrid.js @@ -10,19 +10,17 @@ import { List } from 'immutable'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { withRouter } from 'react-router'; +import { GRID_ITEMS_PER_PAGE_CHOICES } from '../../config/constants'; import { ITEMS_GRID_ITEMS_PER_PAGE_SELECT_ID, ITEMS_GRID_ITEMS_PER_PAGE_SELECT_LABEL_ID, + ITEMS_GRID_PAGINATION_ID, } from '../../config/selectors'; import { ItemSearchInput, NoItemSearchResult } from '../item/ItemSearch'; import EmptyItem from './EmptyItem'; import Item from './Item'; import TableToolbar from './TableToolbar'; -/* possible choices for number of items per page in grid, - (must be common multiple for possible row counts of 1,2,3,4,6) */ -const GRID_ITEMS_PER_PAGE_CHOICES = [12, 24, 36, 48]; - const styles = (theme) => ({ empty: { padding: theme.spacing(1, 2.5) }, title: { @@ -146,6 +144,7 @@ class ItemsGrid extends Component {