improve VRT spec for PageCreateModal

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

@@ -112,7 +112,7 @@ const DisplaySwitcher = (): JSX.Element => {
         </TabPane>
         { isEditable && (
           <TabPane tabId={EditorMode.Editor}>
-            <div id="page-editor">
+            <div data-testid="page-editor" id="page-editor">
               <Editor />
             </div>
           </TabPane>

packages/app/src/components/PageCreateModal.jsx

@@ -165,7 +165,12 @@ const PageCreateModal = (props) => {
             </div>
 
             <div className="d-flex justify-content-end mt-1 mt-sm-0">
-              <button type="button" className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3" onClick={createTodayPage}>
+              <button
+                type="button"
+                data-testid="btn-create-memo"
+                className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3"
+                onClick={createTodayPage}
+              >
                 <i className="icon-fw icon-doc"></i>{t('Create')}
               </button>
             </div>
@@ -179,7 +184,7 @@ const PageCreateModal = (props) => {
 
   function renderInputPageForm() {
     return (
-      <div className="row">
+      <div className="row" data-testid="row-create-page-under-below">
         <fieldset className="col-12 mb-4">
           <h3 className="grw-modal-head pb-2">{t('Create under')}</h3>
 
@@ -213,9 +218,9 @@ const PageCreateModal = (props) => {
             <div className="d-flex justify-content-end mt-1 mt-sm-0">
               <button
                 type="button"
+                data-testid="btn-create-page-under-below"
                 className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3"
                 onClick={createInputPage}
-                data-testid="createPageBtn"
               >
                 <i className="icon-fw icon-doc"></i>{t('Create')}
               </button>
@@ -280,6 +285,7 @@ const PageCreateModal = (props) => {
       size="lg"
       isOpen={isOpened}
       toggle={() => closeCreateModal()}
+      data-testid="page-create-modal"
       className="grw-create-page"
       autoFocus={false}
     >

packages/app/test/cypress/integration/2-basic-features/create-page.spec.ts → packages/app/test/cypress/integration/2-basic-features/open-page-create-modal.spec.ts

@@ -1,6 +1,6 @@
-context('Create page modal', () => {
+context('Open PageCreateModal', () => {
 
-  const ssPrefix = 'create-page';
+  const ssPrefix = 'open-page-create-modal-';
 
   let connectSid: string | undefined;
 
@@ -21,12 +21,16 @@ context('Create page modal', () => {
     }
   });
 
-  it("Page create modal is shown successfully", () => {
+  it("PageCreateModal is shown successfully", () => {
     cy.getByTestid('newPageBtn').click();
-     // eslint-disable-next-line cypress/no-unnecessary-waiting
-    cy.wait(1000);
-    cy.screenshot(`${ssPrefix}-open-page-create-modal`,{ capture: 'viewport' });
-    cy.getByTestid('createPageBtn').click();
+
+    cy.getByTestid('page-create-modal').should('be.visible');
+    cy.screenshot(`${ssPrefix}-open`,{ capture: 'viewport' });
+
+    cy.getByTestid('row-create-page-under-below').find('input.form-control').clear().type('/new-page');
+    cy.getByTestid('btn-create-page-under-below').click();
+
+    cy.getByTestid('page-editor').should('be.visible');
     cy.screenshot(`${ssPrefix}-create-clicked`, {capture: 'viewport'});
   });