sr-npm 2.0.19 → 2.0.20

package/backend/careersMultiBoxesPageIds.js

@@ -39,6 +39,11 @@ const fieldTitlesInCMS={
     "brand": "Brands",
     category: "Category",
     visibility: "Visibility",
+    location: "Location",
+    employmenttype: "Employment Type",
+    contracttype: "Contract Type",
+    companysegment: "Company Segment",
+    storename: "Store Name",
 }
 
 const FiltersIds={
@@ -52,10 +57,21 @@ const FiltersIds={
    Visibility: 'Visibility',
 }
 
+const possibleUrlParams=[
+     "brand",
+     "location",
+    "employmenttype",
+    "contracttype",
+    "visibility",
+    "category",
+    "companysegment",
+    "storename",
+]
 
 module.exports = {
     CAREERS_MULTI_BOXES_PAGE_CONSTS,
     FiltersIds,
     fieldTitlesInCMS,   
     CATEGORY_CUSTOM_FIELD_ID_IN_CMS,
+    possibleUrlParams,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sr-npm",
-  "version": "2.0.19",
+  "version": "2.0.20",
   "description": "",
   "main": "index.js",
   "scripts": {

package/pages/careersMultiBoxesPage.js

@@ -1,9 +1,11 @@
 const { COLLECTIONS,CUSTOM_VALUES_COLLECTION_FIELDS,JOBS_COLLECTION_FIELDS } = require('../backend/collectionConsts');
-const { queryParams} = require('wix-location-frontend');
+
+const { queryParams,onChange} = require('wix-location-frontend');
 const { location } = require("@wix/site-location");
-const {CAREERS_MULTI_BOXES_PAGE_CONSTS,FiltersIds,fieldTitlesInCMS} = require('../backend/careersMultiBoxesPageIds');
+const {CAREERS_MULTI_BOXES_PAGE_CONSTS,FiltersIds,fieldTitlesInCMS,possibleUrlParams} = require('../backend/careersMultiBoxesPageIds');
 const { groupValuesByField, debounce, getAllRecords, getFieldById, getFieldByTitle,getCorrectOption,getOptionIndexFromCheckBox,loadPrimarySearchRepeater,bindPrimarySearch,primarySearch } = require('./pagesUtils');
 
+
 let dontUpdateThisCheckBox;
 const selectedByField = new Map(); // fieldId -> array of selected value IDs
 const optionsByFieldId = new Map(); // fieldId -> [{label, value}] array of objects with label which is the valueLabel and value which is the valueId
@@ -22,6 +24,10 @@ const pagination = {
   currentPage: 1,
 };
 async function careersMultiBoxesPageOnReady(_$w,urlParams) {
+  //to handle back and forth , url changes
+  onChange(async ()=>{
+    await handleBackAndForth(_$w);
+  });
     await loadData(_$w);
     loadJobsRepeater(_$w);
     loadPrimarySearchRepeater(_$w);
@@ -41,7 +47,15 @@ async function careersMultiBoxesPageOnReady(_$w,urlParams) {
 
 }
 
-async function clearAll(_$w) {
+async function handleBackAndForth(_$w){
+    const newQueryParams=await location.query();
+    console.log("newQueryParams: ", newQueryParams);
+    await clearAll(_$w,true);
+    await handleUrlParams(_$w,newQueryParams);
+    
+}
+
+async function clearAll(_$w,urlOnChange=false) {
   if(selectedByField.size>0 || _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.SECONDARY_SEARCH_INPUT).value || _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.PRIMARY_SEARCH_INPUT).value) {
     for(const field of allfields) {
       _$w(`#${FiltersIds[field.title]}CheckBox`).selectedIndices = [];
@@ -52,6 +66,9 @@ async function clearAll(_$w) {
     secondarySearchIsFilled=false;
     currentJobs=alljobs;
     keywordAllJobs=undefined;
+    if(!urlOnChange) {
+      queryParams.remove(possibleUrlParams.concat(["keyword", "page"]));
+    }
     await updateJobsAndNumbersAndFilters(_$w,true);
     }
 }
@@ -95,26 +112,30 @@ function handleFilterInMobile(_$w) {
 async function handleUrlParams(_$w,urlParams) {
   try { 
   let applyFiltering=false;
-
+  let currentApplyFilterFlag=false;
+  //apply this first to determine all jobs
   if(urlParams.keyword) {
     applyFiltering=await primarySearch(_$w, decodeURIComponent(urlParams.keyword), alljobs);
     _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.PRIMARY_SEARCH_INPUT).value=decodeURIComponent(urlParams.keyword);
     currentJobs=_$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.JOB_RESULTS_REPEATER).data;   
     keywordAllJobs=_$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.JOB_RESULTS_REPEATER).data;
   }
-    if(urlParams.brand) {
-      applyFiltering=await handleParams(_$w,"brand",urlParams.brand)
-    }
-    if(urlParams.visibility) {
-      applyFiltering=await handleParams(_$w,"visibility",urlParams.visibility)
-    }
-    if(urlParams.category) {
-      applyFiltering=await handleParams(_$w,"category",urlParams.category)
+  
+  for (const url of possibleUrlParams)
+  {
+    if(urlParams[url])
+    {
+      currentApplyFilterFlag=await handleParams(_$w,url,urlParams[url])
+      if(currentApplyFilterFlag) {
+        applyFiltering=true;
+      }
     }
-
+    currentApplyFilterFlag=false;
+  }
     if(applyFiltering || keywordAllJobs) {
       await updateJobsAndNumbersAndFilters(_$w);
     }
+  
     if(urlParams.page) {
       if(Number.isNaN(Number(urlParams.page)) || Number(urlParams.page)<=1 || Number(urlParams.page)>Math.ceil(currentJobs.length/pagination.pageSize)) {
         console.warn("page number is invalid, removing page from url");
@@ -122,14 +143,14 @@ async function handleUrlParams(_$w,urlParams) {
         return;
       }
         pagination.currentPage=Number(urlParams.page);
-        let paginationCurrentText=Number(urlParams.page)*pagination.pageSize
+        //let paginationCurrentText=urlParams.page;
         let startSlicIndex=pagination.pageSize*(pagination.currentPage-1);
         let endSlicIndex=(pagination.pageSize)*(pagination.currentPage);
         if(Number(urlParams.page)==Math.ceil(currentJobs.length/pagination.pageSize)) {
-          paginationCurrentText=paginationCurrentText-(pagination.pageSize-(currentJobs.length%pagination.pageSize));          
+         // paginationCurrentText=(paginationCurrentText-(pagination.pageSize-(currentJobs.length%pagination.pageSize))).toString();          
           endSlicIndex=currentJobs.length;
         }
-        _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationCurrentText).text = paginationCurrentText.toString();
+        _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationCurrentText).text = urlParams.page
         const jobsFirstPage=currentJobs.slice(startSlicIndex,endSlicIndex);
         _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.JOBS_REPEATER).data = jobsFirstPage;
         handlePaginationButtons(_$w);
@@ -139,31 +160,49 @@ async function handleUrlParams(_$w,urlParams) {
   }
 }
 
-async function handleParams(_$w,param,value) {
+async function handleParams(_$w,param,values) {
   let applyFiltering=false;
+  let valuesAsArray = values.split(',')
+  valuesAsArray=valuesAsArray.filter(value=>value.trim()!=='');
+
+  let selectedIndices=[];
+  const field=getFieldByTitle(fieldTitlesInCMS[param],allfields);
+
+  let existing = selectedByField.get(field._id) || [];
+  for(const value of valuesAsArray) {
+    
        const decodedValue = decodeURIComponent(value);
-      const field=getFieldByTitle(fieldTitlesInCMS[param],allfields);
+    
       const options=optionsByFieldId.get(field._id);
-      const option=getCorrectOption(decodedValue,options);
+    
+      const option=getCorrectOption(decodedValue,options,param);
+    
       if(option) {
        const optionIndex=getOptionIndexFromCheckBox(_$w(`#${FiltersIds[field.title]}CheckBox`).options,option.value);
-       _$w(`#${FiltersIds[field.title]}CheckBox`).selectedIndices = [optionIndex];
-        selectedByField.set(field._id, [option.value]);
+       selectedIndices.push(optionIndex);
+       existing.push(option.value);
         applyFiltering=true;
         dontUpdateThisCheckBox=field._id;
       }
       else {
         console.warn(`${param} value not found in dropdown options`);
       }
-      return applyFiltering;
+    }
+
+    selectedByField.set(field._id, existing);
+    _$w(`#${FiltersIds[field.title]}CheckBox`).selectedIndices=selectedIndices;
+
+    return applyFiltering;
+
 }
 
  function loadPaginationButtons(_$w) {
   try {
     _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.PAGE_BUTTON_NEXT).onClick(async () => {
       let nextPageJobs=currentJobs.slice(pagination.pageSize*pagination.currentPage,pagination.pageSize*(pagination.currentPage+1));
-      _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationCurrentText).text = (nextPageJobs.length+pagination.pageSize*pagination.currentPage).toString();
+      
       pagination.currentPage++;
+      _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationCurrentText).text = pagination.currentPage.toString();
       _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.JOBS_REPEATER).data = nextPageJobs;
       handlePaginationButtons(_$w);
     });
@@ -171,7 +210,7 @@ async function handleParams(_$w,param,value) {
     _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.PAGE_BUTTON_PREVIOUS).onClick(async () => {
       let previousPageJobs=currentJobs.slice(pagination.pageSize*(pagination.currentPage-2),pagination.pageSize*(pagination.currentPage-1));
       pagination.currentPage--;
-      _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationCurrentText).text = (pagination.pageSize*pagination.currentPage).toString();
+      _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationCurrentText).text =   pagination.currentPage.toString();
       _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.JOBS_REPEATER).data = previousPageJobs;
       handlePaginationButtons(_$w);
     });
@@ -186,21 +225,22 @@ async function handleParams(_$w,param,value) {
         $item(CAREERS_MULTI_BOXES_PAGE_CONSTS.SELECTED_VALUES_REPEATER_ITEM_LABEL).text = itemData.label || '';
         // Deselect this value from both the selected map and the multibox
           $item(CAREERS_MULTI_BOXES_PAGE_CONSTS.DESELECT_BUTTON_ID).onClick(async () => {
-            
             const fieldId = itemData.fieldId;
             const valueId = itemData.valueId;
             dontUpdateThisCheckBox=fieldId;
             if (!fieldId || !valueId) return;
-
             const existing = selectedByField.get(fieldId) || [];
             const updated = existing.filter(v => v !== valueId);
+            const field=getFieldById(fieldId,allfields);
+            let fieldTitle=field.title.toLowerCase().replace(' ', '');
+            fieldTitle==="brands"? fieldTitle="brand":fieldTitle;
             if (updated.length) {
               selectedByField.set(fieldId, updated);
+              queryParams.add({ [fieldTitle] : updated.map(val=>encodeURIComponent(val)).join(',') });
             } else {
               selectedByField.delete(fieldId);
+              queryParams.remove([fieldTitle ]);
             }
-
-            const field=getFieldById(fieldId,allfields);
             const currentVals = _$w(`#${FiltersIds[field.title]}CheckBox`).value || [];
             const nextVals = currentVals.filter(v => v !== valueId);
             _$w(`#${FiltersIds[field.title]}CheckBox`).value = nextVals;
@@ -247,8 +287,8 @@ async function loadJobsRepeater(_$w) {
 
     const jobsFirstPage=alljobs.slice(0,pagination.pageSize);
     _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.JOBS_REPEATER).data = jobsFirstPage;
-    _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationCurrentText).text = jobsFirstPage.length.toString();
-    _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationTotalCountText).text = currentJobs.length.toString();
+    _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationCurrentText).text = "1"
+    _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationTotalCountText).text = Math.ceil(currentJobs.length/pagination.pageSize).toString();
     updateTotalJobsCountText(_$w);
     handlePaginationButtons(_$w);
   } catch (error) {
@@ -289,28 +329,35 @@ async function loadJobsRepeater(_$w) {
         else{
             originalOptions=value
         }
-
         optionsByFieldId.set(key, originalOptions);
         for (const val of allvaluesobjects) {
           counter[val.title]=val.count
         }
-
         countsByFieldId.set(key, new Map(originalOptions.map(o => [o.value, counter[o.label]])));
         updateOptionsUI(_$w,field.title, field._id, ''); // no search query
         _$w(`#${FiltersIds[field.title]}CheckBox`).selectedIndices = []; // start empty
         _$w(`#${FiltersIds[field.title]}CheckBox`).onChange(async (ev) => {
-          console.log("i am here !!!!!")
-          console.log("field.title: ",field.title)
-          console.log("value: ",value)
           dontUpdateThisCheckBox=field._id;
         const selected = ev.target.value; // array of selected value IDs
-        console.log("ev: ",ev)
-        console.log("ev.target: ",ev.target)
+        let fieldTitle=field.title.toLowerCase().replace(' ', '');
+        fieldTitle==="brands"? fieldTitle="brand":fieldTitle;
+
         if (selected && selected.length) {
           selectedByField.set(field._id, selected); 
+          if(fieldTitle==="brand" || fieldTitle==="storename") {
+            //in this case we need the label not valueid
+            const valueLabels=getValueFromValueId(selected,value);
+            queryParams.add({ [fieldTitle] : valueLabels.map(val=>encodeURIComponent(val)).join(',') });
+          }
+          else{
+            queryParams.add({ [fieldTitle] : selected.map(val=>encodeURIComponent(val)).join(',') });
+          }
+          
         } else {
           selectedByField.delete(field._id);  
+          queryParams.remove([fieldTitle ]);
         }
+
         await updateJobsAndNumbersAndFilters(_$w);
     
       });
@@ -328,8 +375,18 @@ async function loadJobsRepeater(_$w) {
     }
   }
 
+function getValueFromValueId(valueIds,value) {
+  let valueLabels=[];
+  let currentVal
+  for(const valueId of valueIds) {
+    currentVal=value.find(val=>val.value===valueId);
+    if(currentVal) {
+      valueLabels.push(currentVal.label);
+    }
+  }
+  return valueLabels
+}
  
-
   async function updateJobsAndNumbersAndFilters(_$w,clearAll=false) {
     await applyJobFilters(_$w); // re-query jobs
     await refreshFacetCounts(_$w,clearAll);    // recompute and update counts in all lists
@@ -340,7 +397,6 @@ async function loadJobsRepeater(_$w) {
   function updateOptionsUI(_$w,fieldTitle, fieldId, searchQuery,clearAll=false) {
     let base = optionsByFieldId.get(fieldId) || [];
     const countsMap = countsByFieldId.get(fieldId) || new Map();
-    
     if(dontUpdateThisCheckBox===fieldId && !clearAll)
     {
         dontUpdateThisCheckBox=null;
@@ -416,12 +472,15 @@ async function loadJobsRepeater(_$w) {
         finalFilteredJobs=tempFilteredJobs;
         tempFilteredJobs=[];
     }
+    
     secondarySearchIsFilled? currentSecondarySearchJobs=finalFilteredJobs:currentJobs=finalFilteredJobs;
+   
+    
     let jobsFirstPage=[];
     secondarySearchIsFilled? jobsFirstPage=currentSecondarySearchJobs.slice(0,pagination.pageSize):jobsFirstPage=currentJobs.slice(0,pagination.pageSize);
     _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.JOBS_REPEATER).data = jobsFirstPage;
-    _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationCurrentText).text = jobsFirstPage.length.toString();
-    _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationTotalCountText).text = secondarySearchIsFilled? currentSecondarySearchJobs.length.toString():currentJobs.length.toString();
+    _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationCurrentText).text = "1";
+    _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationTotalCountText).text = secondarySearchIsFilled? Math.ceil(currentSecondarySearchJobs.length/pagination.pageSize).toString():Math.ceil(currentJobs.length/pagination.pageSize).toString();
     if(jobsFirstPage.length===0) {
       await _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.JOBS_MULTI_STATE_BOX).changeState("noJobs");
     }
@@ -467,6 +526,7 @@ async function refreshFacetCounts(_$w,clearAll=false) {
 
   secondarySearchIsFilled? countJobsPerField(currentSecondarySearchJobs):countJobsPerField(currentJobs);
     for(const field of allfields) {
+
         const query = (_$w(`#${FiltersIds[field.title]}input`).value || '').toLowerCase().trim();
         clearAll? updateOptionsUI(_$w,field.title, field._id, '',true):updateOptionsUI(_$w,field.title, field._id, query);
         // no search query
@@ -519,9 +579,10 @@ async function secondarySearch(_$w,query) {
     currentSecondarySearchJobs=allsecondarySearchJobs;
     const jobsFirstPage=allsecondarySearchJobs.slice(0,pagination.pageSize);
     _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.JOBS_REPEATER).data = jobsFirstPage;
-    _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationCurrentText).text = jobsFirstPage.length.toString();
-    _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationTotalCountText).text = allsecondarySearchJobs.length.toString();
+    _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationCurrentText).text = "1";
+    _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.paginationTotalCountText).text = Math.ceil(allsecondarySearchJobs.length/pagination.pageSize).toString();
     pagination.currentPage=1;
+
     if(jobsFirstPage.length===0) {
       await _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.JOBS_MULTI_STATE_BOX).changeState("noJobs");
     }

package/pages/pagesUtils.js

@@ -2,6 +2,7 @@ const { items: wixData } = require('@wix/data');
 const { JOBS_COLLECTION_FIELDS,COLLECTIONS } = require('../backend/collectionConsts');
 const { CAREERS_MULTI_BOXES_PAGE_CONSTS,CATEGORY_CUSTOM_FIELD_ID_IN_CMS } = require('../backend/careersMultiBoxesPageIds');
 const { location } = require("@wix/site-location");
+const { normalizeString } = require('../backend/utils');
 
 function groupValuesByField(values, refKey) {
     const map = new Map();
@@ -62,14 +63,19 @@ function groupValuesByField(values, refKey) {
     return allFields.find(field=>field.title===title);
   }
 
-  function getCorrectOption(value,options) {
-    const standardizedValue = value.toLowerCase().trim().replace(/[^a-z0-9]/gi, '');
-    return options.find(option=>option.label.toLowerCase().trim().replace(/[^a-z0-9]/gi, '')===standardizedValue);
+  function getCorrectOption(value,options,param) {
+    const standardizedValue = normalizeString(value.toLowerCase())
+    if(param==="employmenttype") //employmenttype have a problematic value
+    {
+      return options.find(option=>normalizeString(option.value.toLowerCase())===standardizedValue);
+    }
+    return options.find(option=>normalizeString(option.label.toLowerCase())===standardizedValue);
   }
 
   function getOptionIndexFromCheckBox(options,value) {
+    const normalizedValue=normalizeString(value.toLowerCase());
     for(let index=0;index<options.length;index++) {
-      if(options[index].value===value) {
+      if(normalizeString(options[index].value.toLowerCase())===normalizedValue) {
         return index;
       }
     }
@@ -85,7 +91,10 @@ function loadPrimarySearchRepeater(_$w) {
     const data = _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.JOB_RESULTS_REPEATER).data;
     const clickedItemData = data.find(
       (item) => item._id === event.context.itemId,
+      
     );
+    console.log("clickedItemData: ",clickedItemData);
+    console.log("clickedItemData['link-jobs-title']: ",clickedItemData["link-jobs-title"]);
     location.to(clickedItemData["link-jobs-title"]);
   });
   _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.CATEGORY_RESULTS_REPEATER).onItemReady(async ($item, itemData) => {
@@ -109,7 +118,7 @@ function loadPrimarySearchRepeater(_$w) {
   const primarySearchDebounced = debounce(async () => {
     const query = (_$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.PRIMARY_SEARCH_INPUT).value || '').toLowerCase().trim();
     await primarySearch(_$w, query, alljobs);
-  }, 150);
+  }, 300);
 
   _$w(CAREERS_MULTI_BOXES_PAGE_CONSTS.PRIMARY_SEARCH_INPUT).onInput(async () => {
     await primarySearchDebounced();

package/tests/multiSearchBoxCareers.spec.js

@@ -1,3 +1,22 @@
+jest.mock('wix-location-frontend');
+jest.mock('@wix/site-location', () => ({
+  location: {
+    to: jest.fn()
+  }
+}));
+jest.mock('@wix/data', () => ({
+  items: {
+    query: jest.fn(() => ({
+      eq: jest.fn().mockReturnThis(),
+      find: jest.fn().mockResolvedValue({ items: [] }),
+      include: jest.fn().mockReturnThis(),
+      hasSome: jest.fn().mockReturnThis(),
+      ne: jest.fn().mockReturnThis(),
+      limit: jest.fn().mockReturnThis()
+    })),
+    queryReferenced: jest.fn()
+  }
+}));
 const rewire = require('rewire');
 const MockJobBuilder = require('./mockJobBuilder');
 const { CAREERS_MULTI_BOXES_PAGE_CONSTS, CATEGORY_CUSTOM_FIELD_ID_IN_CMS } = require('../backend/careersMultiBoxesPageIds');
@@ -9,7 +28,13 @@ const pagesUtils = rewire('../pages/pagesUtils');
 const secondarySearch = careersMultiBoxesPage.__get__('secondarySearch');
 const primarySearch = pagesUtils.__get__('primarySearch');
 const loadCategoriesListPrimarySearch = pagesUtils.__get__('loadCategoriesListPrimarySearch');
-
+const mockQueryParams = {
+  add: jest.fn(),
+  remove: jest.fn()
+};
+const mockOnChange = jest.fn();
+careersMultiBoxesPage.__set__('queryParams', mockQueryParams);
+careersMultiBoxesPage.__set__('onChange', mockOnChange);
 
 describe('secondarySearch function tests', () => {
   let mockW;
@@ -79,13 +104,11 @@ describe('secondarySearch function tests', () => {
     mockJobs.push(new MockJobBuilder().withTitle('Frontend Engineer').build());
 
     careersMultiBoxesPage.__set__('currentJobs', mockJobs);
-
     const result = await secondarySearch(mockW, 'product');
-
     expect(result.length).toBe(11);
     expect(mockTotalJobsCountText.text).toContain('11');
-    expect(mockPaginationCurrentText.text).toBe('10');
-    expect(mockPaginationTotalCountText.text).toBe('11');
+    expect(mockPaginationCurrentText.text).toBe('1');
+    expect(mockPaginationTotalCountText.text).toBe('2');
     expect(mockPageButtonNext.enable).toHaveBeenCalled();
     expect(mockPageButtonPrevious.disable).toHaveBeenCalled();
   });