Merge pull request #5370 from weseek/fix/88635-show-presentation-modal-in-top-page

fix: 88924 Show presentation modal in top page

packages/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -249,8 +249,7 @@ export const PageItemControlSubstance = (props: PageItemControlSubstanceProps):
   }, [onClickDeleteMenuItem, pageId, fetchedPageInfo, presetPageInfo]);
 
   return (
-    <Dropdown isOpen={isOpen} toggle={() => setIsOpen(!isOpen)}>
-
+    <Dropdown isOpen={isOpen} toggle={() => setIsOpen(!isOpen)} data-testid="open-page-item-control-btn">
       { children ?? (
         <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control">
           <i className="icon-options text-muted"></i>

packages/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -67,12 +67,15 @@ const AdditionalMenuItems = (props: AdditionalMenuItemsProps): JSX.Element => {
   const { open: openPresentationModal } = usePagePresentationModal();
   const { open: openAccessoriesModal } = usePageAccessoriesModal();
 
-  const hrefForPresentationModal = '?presentation=1';
+  const hrefForPresentationModal = `${pageId}/?presentation=1`;
 
   return (
     <>
       {/* Presentation */}
-      <DropdownItem onClick={() => openPresentationModal(hrefForPresentationModal)}>
+      <DropdownItem
+        onClick={() => openPresentationModal(hrefForPresentationModal)}
+        data-testid="open-presentation-modal-btn"
+      >
         <i className="icon-fw"><PresentationIcon /></i>
         { t('Presentation Mode') }
       </DropdownItem>

packages/app/test/cypress/integration/2-basic-features/open-presentation-modal.spec.ts

@@ -0,0 +1,61 @@
+
+context('Open presentation modal', () => {
+  const ssPrefix = 'access-to-presentation-modal-';
+
+  let connectSid: string | undefined;
+
+  before(() => {
+    // login
+    cy.fixture("user-admin.json").then(user => {
+      cy.login(user.username, user.password);
+    });
+    cy.getCookie('connect.sid').then(cookie => {
+      connectSid = cookie?.value;
+    });
+  });
+
+  beforeEach(() => {
+    if (connectSid != null) {
+      cy.setCookie('connect.sid', connectSid);
+    }
+  });
+
+  it('PageCreateModal for "/" is shown successfully', () => {
+    cy.visit('/');
+
+    cy.get('#grw-subnav-container').within(() => {
+      cy.getByTestid('open-page-item-control-btn').click({force: true})
+      cy.getByTestid('open-presentation-modal-btn').click({force: true})
+    });
+
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(1500);
+    cy.screenshot(`${ssPrefix}-opne-top`, { capture: 'viewport' });
+  });
+
+  it('PageCreateModal for "/Sandbox/Bootstrap4" is shown successfully', () => {
+    cy.visit('/Sandbox/Bootstrap4');
+
+    cy.get('#grw-subnav-container').within(() => {
+      cy.getByTestid('open-page-item-control-btn').click({force: true})
+      cy.getByTestid('open-presentation-modal-btn').click({force: true})
+    });
+
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(1500);
+    cy.screenshot(`${ssPrefix}-open-bootstrap4`, { capture: 'viewport' });
+  });
+
+  it('PageCreateModal for /Sandbox/Bootstrap4#Cards" is shown successfully', () => {
+    cy.visit('/Sandbox/Bootstrap4#Cards');
+
+    cy.get('#grw-subnav-container').within(() => {
+      cy.getByTestid('open-page-item-control-btn').click({force: true})
+      cy.getByTestid('open-presentation-modal-btn').click({force: true})
+    });
+
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(1500);
+    cy.screenshot(`${ssPrefix}-open-bootstrap4-with-ancker-link`, { capture: 'viewport' });
+  });
+});