test: write tests for grid pagination, add own items fixtures generator

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: [
     {

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({

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 {
             </FormControl>
           </Box>
           <Pagination
+            id={ITEMS_GRID_PAGINATION_ID}
             count={pagesCount}
             page={page}
             onChange={this.handlePagination}

src/config/constants.js

@@ -130,3 +130,7 @@ export const ITEM_TYPES_WITH_CAPTIONS = [
 
 export const MIN_SCREEN_WIDTH = 1000;
 export const SHARE_MODAL_AVATAR_GROUP_MAX_AVATAR = 8;
+
+/* possible choices for number of items per page in grid,
+   (must be common multiple for possible row counts of 1,2,3,4,6) */
+export const GRID_ITEMS_PER_PAGE_CHOICES = [12, 24, 36, 48];

src/config/selectors.js

@@ -111,3 +111,4 @@ export const ITEMS_GRID_ITEMS_PER_PAGE_SELECT_ID =
   'itemsGridItemsPerPageSelect';
 export const ITEMS_GRID_ITEMS_PER_PAGE_SELECT_LABEL_ID =
   'itemsGridItemsPerPageSelectLabel';
+export const ITEMS_GRID_PAGINATION_ID = 'itemsGridPagination';