Merge pull request #6132 from weseek/support/gw7741-VRT-pagelist

support: gw7741 VRT pagelist

packages/app/src/components/DescendantsPageListModal.tsx

@@ -1,20 +1,20 @@
 
 import React, { useState, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 
+import { useTranslation } from 'react-i18next';
 import {
   Modal, ModalHeader, ModalBody,
 } from 'reactstrap';
 
-import { useDescendantsPageListModal } from '~/stores/modal';
 import { useIsSharedUser } from '~/stores/context';
+import { useDescendantsPageListModal } from '~/stores/modal';
 
+import { CustomNavTab } from './CustomNavigation/CustomNav';
+import CustomTabContent from './CustomNavigation/CustomTabContent';
 import { DescendantsPageList } from './DescendantsPageList';
 import ExpandOrContractButton from './ExpandOrContractButton';
-import { CustomNavTab } from './CustomNavigation/CustomNav';
 import PageListIcon from './Icons/PageListIcon';
 import TimeLineIcon from './Icons/TimeLineIcon';
-import CustomTabContent from './CustomNavigation/CustomTabContent';
 import PageTimeline from './PageTimeline';
 
 
@@ -80,6 +80,7 @@ export const DescendantsPageListModal = (props: Props): JSX.Element => {
       size="xl"
       isOpen={isOpened}
       toggle={close}
+      data-testid="page-accessories-modal"
       className={`grw-page-accessories-modal ${isWindowExpanded ? 'grw-modal-expanded' : ''} `}
     >
       <ModalHeader className="p-0" toggle={close} close={buttons}>

packages/app/src/components/Page/DisplaySwitcher.tsx

@@ -71,6 +71,7 @@ const DisplaySwitcher = (): JSX.Element => {
                         type="button"
                         className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
                         onClick={() => openDescendantPageListModal(currentPagePath)}
+                        data-testid="pageListButton"
                       >
                         <div className="grw-page-accessories-control-icon">
                           <PageListIcon />

packages/app/test/cypress/integration/20-basic-features/access-to-pagelist.spec.ts

@@ -0,0 +1,95 @@
+context('Access to pagelist', () => {
+  const ssPrefix = 'access-to-pagelist-';
+  beforeEach(() => {
+    // login
+    cy.fixture("user-admin.json").then(user => {
+      cy.login(user.username, user.password);
+    });
+    // collapse sidebar
+    cy.collapseSidebar(true);
+  });
+
+  it('Page list modal is successfully opened ', () => {
+    cy.visit('/');
+    cy.getByTestid('pageListButton').click({force: true});
+    cy.getByTestid('page-accessories-modal').parent().should('have.class','show');
+    cy.screenshot(`${ssPrefix}1-open-pagelist-modal`);
+  });
+
+  it('Successfully duplicate a page from page list', () => {
+    cy.visit('/');
+    cy.getByTestid('pageListButton').click({force: true});
+    cy.getByTestid('page-accessories-modal').parent().should('have.class','show').within(() => {
+      cy.getByTestid('open-page-item-control-btn').first().click();
+      cy.screenshot(`${ssPrefix}2-click-on-three-dots-menu`);
+      cy.get('.dropdown-menu').should('have.class', 'show').first().within(() => {
+        cy.getByTestid('open-page-duplicate-modal-btn').click();
+      });
+    });
+    cy.getByTestid('page-duplicate-modal').should('be.visible').screenshot(`${ssPrefix}3-duplicate-page-modal-opened`);
+    cy.getByTestid('page-duplicate-modal').should('be.visible').within(() => {
+      cy.get('.rbt-input-main').type('-duplicate', {force: true})
+    }).screenshot(`${ssPrefix}4-input-duplicated-page-name`);
+    cy.getByTestid('page-duplicate-modal').should('be.visible').within(() => {
+      cy.get('.modal-footer > button').click();
+    });
+    cy.get('body').type('{esc}');
+    cy.getByTestid('pageListButton').click({force: true});
+    cy.getByTestid('page-accessories-modal').parent().should('have.class','show').within(() => {
+      cy.get('.list-group-item').eq(0).within(() => {
+        cy.screenshot(`${ssPrefix}5-duplicated-page`);
+      });
+    });
+  });
+
+  it('Successfully expand and close modal', () => {
+    cy.visit('/');
+    cy.getByTestid('pageListButton').click({force: true});
+    cy.getByTestid('page-accessories-modal').parent().should('have.class','show');
+    cy.screenshot(`${ssPrefix}6-page-list-modal-size-normal`, {capture: 'viewport'});
+    cy.getByTestid('page-accessories-modal').parent().should('have.class','show').within(() => {
+      cy.get('button.close').eq(0).click();
+    });
+    cy.screenshot(`${ssPrefix}7-page-list-modal-size-fullscreen`, {capture: 'viewport'});
+
+    cy.getByTestid('page-accessories-modal').parent().should('have.class','show').within(() => {
+      cy.get('button.close').eq(1).click();
+    });
+
+    cy.screenshot(`${ssPrefix}8-close-page-list-modal`, {capture: 'viewport'});
+  });
+});
+
+context('Access to timeline', () => {
+  const ssPrefix = 'access-to-timeline-';
+  beforeEach(() => {
+    // login
+    cy.fixture("user-admin.json").then(user => {
+      cy.login(user.username, user.password);
+    });
+    // collapse sidebar
+    cy.collapseSidebar(true);
+  });
+  it('Timeline list successfully openend', () => {
+    cy.visit('/');
+    cy.getByTestid('pageListButton').click({force: true});
+    cy.getByTestid('page-accessories-modal').parent().should('have.class','show').within(() => {
+      cy.get('.nav-title > li').eq(1).find('a').click();
+    });
+    cy.screenshot(`${ssPrefix}1-timeline-list`, {capture: 'viewport'});
+  });
+
+  it('Successfully expand and close modal', () => {
+    cy.visit('/');
+    cy.getByTestid('pageListButton').click({force: true});
+    cy.getByTestid('page-accessories-modal').parent().should('have.class','show').within(() => {
+      cy.get('.nav-title > li').eq(1).find('a').click();
+      cy.get('button.close').eq(0).click();
+    });
+    cy.screenshot(`${ssPrefix}2-timeline-list-fullscreen`, {capture: 'viewport'});
+    cy.getByTestid('page-accessories-modal').parent().should('have.class','show').within(() => {
+      cy.get('button.close').eq(1).click();
+    });
+    cy.screenshot(`${ssPrefix}3-close-modal`, {capture: 'viewport'});
+  });
+});