Merge branch 'master' into fix/89052-presentaion-modal-vrt

packages/app/src/components/Admin/Users/UserTable.jsx

@@ -184,7 +184,7 @@ class UserTable extends React.Component {
             <tbody>
               {adminUsersContainer.state.users.map((user) => {
                 return (
-                  <tr key={user._id}>
+                  <tr data-testid="user-table-tr" key={user._id}>
                     <td>
                       <UserPicture user={user} className="picture rounded-circle" />
                     </td>

packages/app/src/components/Fab.jsx

@@ -53,7 +53,7 @@ const Fab = (props) => {
   function renderPageCreateButton() {
     return (
       <>
-        <div className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: '2.3rem', right: '4rem' }}>
+        <div data-testid="grw-fab-create-page" className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: '2.3rem', right: '4rem' }}>
           <button
             type="button"
             className={`btn btn-lg btn-create-page btn-primary rounded-circle p-0 waves-effect waves-light ${buttonClasses}`}
@@ -69,7 +69,7 @@ const Fab = (props) => {
   return (
     <div className="grw-fab d-none d-md-block d-edit-none">
       {currentUser != null && renderPageCreateButton()}
-      <div className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: 0, right: 0 }}>
+      <div data-testid="grw-fab-return-to-top" className={`rounded-circle position-absolute ${animateClasses}`} style={{ bottom: 0, right: 0 }}>
         <button
           type="button"
           className={`btn btn-light btn-scroll-to-top rounded-circle p-0 ${buttonClasses}`}

packages/app/src/components/SearchPage.tsx

@@ -58,10 +58,11 @@ const SearchResultListHead = React.memo((props: SearchResultListHeadProps): JSX.
     <div className="form-inline d-flex align-items-center justify-content-between">
       <div className="text-nowrap">
         {t('search_result.result_meta')}
-        <span className="search-result-keyword">{`${searchingKeyword}`}</span>
+        <span className="search-result-keyword ml-2">{`${searchingKeyword}`}</span>
         <span className="ml-3">{`${leftNum}-${rightNum}`} / {total}</span>
         { took != null && (
-          <span className="ml-3 text-muted">({took}ms)</span>
+          // blackout 70px rectangle in VRT
+          <span data-hide-in-vrt className="ml-3 text-muted d-inline-block" style={{ minWidth: '70px' }}>({took}ms)</span>
         ) }
       </div>
       <div className="input-group flex-nowrap search-result-select-group ml-auto d-md-flex d-none">

packages/app/src/components/SearchPage2/SearchPageBase.tsx

@@ -150,7 +150,7 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
   }
 
   const highlightKeywords = searchingKeyword != null
-    ? highlightKeywordsSplitter.exec(searchingKeyword) ?? undefined
+    ? searchingKeyword.match(highlightKeywordsSplitter) ?? undefined
     : undefined;
 
   return (

packages/app/test/cypress/integration/2-basic-features/access-to-admin-page.spec.ts

@@ -99,6 +99,7 @@ context('Access to Admin page', () => {
   it('/admin/users is successfully loaded', () => {
     cy.visit('/admin/users');
     cy.getByTestid('admin-users').should('be.visible');
+    cy.getByTestid('user-table-tr').first().should('be.visible');
     cy.screenshot(`${ssPrefix}-admin-users`, { capture: 'viewport' });
   });
 

packages/app/test/cypress/integration/2-basic-features/access-to-page.spec.ts

@@ -29,6 +29,8 @@ context('Access to page', () => {
 
   it('/Sandbox with anchor hash is successfully loaded', () => {
     cy.visit('/Sandbox#Headers');
+    cy.getByTestid('grw-fab-create-page').should('be.visible');
+    cy.getByTestid('grw-fab-return-to-top').should('be.visible');
     cy.screenshot(`${ssPrefix}-sandbox-headers`, { capture: 'viewport' });
   });
 

packages/app/test/cypress/support/index.ts

@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
+import './screenshot'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

packages/app/test/cypress/support/screenshot.ts

@@ -0,0 +1,3 @@
+Cypress.Screenshot.defaults({
+  blackout: ['[data-hide-in-vrt=true]']
+})