Fix next13

nextjs-v13/e2e/checkNextJSv12Apps.cy.ts

@@ -0,0 +1,117 @@
+import { BaseMethods } from '../../cypress-e2e/common/base';
+import { baseSelectors } from '../../cypress-e2e/common/selectors';
+import { Constants } from '../../cypress-e2e/fixtures/constants';
+const basePage: BaseMethods = new BaseMethods();
+
+const appsData = [
+  // {
+  //   appName: Constants.elementsText.nextJsSsrApp.checkout,
+  //   host: 3000,
+  // },
+  // {
+  //   appName: Constants.commonConstantsData.home,
+  //   host: 3001,
+  // },
+  {
+    appName: Constants.elementsText.nextJsSsrApp.shop,
+    host: 3002,
+  },
+];
+
+appsData.forEach((property: { appName: string; host: number }) => {
+  describe(`Check ${property.appName} app functionality and elements`, () => {
+    beforeEach(() => {
+      basePage.openLocalhost({
+        number: property.host,
+      });
+      cy.wait(5000);
+    });
+    it('Check the items on the Home page and the links to ZEIT and GitHub in the header', () => {
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.coreElements.list,
+        text: Constants.commonConstantsData.home,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.headers.h1,
+        text: Constants.elementsText.nextJsSsrApp.texts.text3,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.paragraph,
+        text: Constants.elementsText.nextJsSsrApp.texts.text4,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.headers.h1,
+        text: Constants.elementsText.nextJsSsrApp.messages.welcomeMessage,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.paragraph,
+        text: Constants.elementsText.nextJsSsrApp.texts.text5,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.headers.h3,
+        text: Constants.elementsText.nextJsSsrApp.tiles.documentation,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.headers.h3,
+        text: Constants.elementsText.nextJsSsrApp.tiles.learn,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.headers.h3,
+        text: Constants.elementsText.nextJsSsrApp.tiles.examples,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.coreElements.list,
+        text: Constants.elementsText.nextJsSsrApp.zeit,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.coreElements.list,
+        text: Constants.elementsText.nextJsSsrApp.gitHub,
+      });
+    });
+    it('Verify the Shop page items', () => {
+      basePage.clickElementWithText({
+        selector: baseSelectors.tags.coreElements.list,
+        text: Constants.elementsText.nextJsSsrApp.shop,
+        wait: 2000,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.headers.h1,
+        text: Constants.elementsText.nextJsSsrApp.pages.shopPage,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.headers.h3,
+        text: Constants.elementsText.nextJsSsrApp.texts.mainShopText,
+      });
+    });
+    it('Verify the Federated page items', () => {
+      basePage.clickElementWithText({
+        selector: baseSelectors.tags.coreElements.list,
+        text: Constants.elementsText.nextJSv12App.federatedButton.name,
+        wait: 2000,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.headers.h1,
+        text: Constants.elementsText.nextJSv12App.federatedButton.header,
+      });
+    });
+    it('Verify the Checkout page items', () => {
+      basePage.clickElementWithText({
+        selector: baseSelectors.tags.coreElements.list,
+        text: Constants.elementsText.nextJsSsrApp.checkout,
+        wait: 2000,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.headers.h1,
+        text: Constants.elementsText.nextJsSsrApp.pages.checkoutPage,
+      });
+      basePage.checkElementWithTextPresence({
+        selector: baseSelectors.tags.headers.h3,
+        text: Constants.elementsText.nextJsSsrApp.messages.checkoutMessage,
+      });
+      basePage.checkElementQuantity({
+        selector: baseSelectors.tags.pre,
+        quantity: 2,
+      });
+    });
+  });
+});

nextjs-v13/package.json

@@ -13,6 +13,7 @@
     "start": "concurrently \"npm --prefix checkout run dev\" \"npm --prefix home run dev\" \"npm --prefix shop run dev\"",
     "build": "concurrently \"npm --prefix checkout run build\" \"npm --prefix home run build\" \"npm --prefix shop run build\"",
     "serve": "concurrently \"npm --prefix checkout run start\" \"npm --prefix home run start\" \"npm --prefix shop run start\"",
+    "e2e:ci:legacy": "pnpm start & wait-on http-get://localhost:3001/ && wait-on http-get://localhost:3000/ && wait-on http-get://localhost:3002/ && npx cypress run --config-file ../cypress-e2e/config/cypress.config.ts --config '{\"supportFile\": \"../cypress-e2e/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome",
     "e2e:ci": "pnpm run build"
   },
   "dependencies": {

nextjs-v13/shared/index.js

@@ -38,6 +38,7 @@ module.exports = {
   createFederatedCatchAll() {
     const FederatedCatchAll = initialProps => {
       const [lazyProps, setProps] = React.useState({});
+      const [mount, setMount] = React.useState(false);
 
       const {FederatedPage, render404, renderError, needsReload, ...props} = {
         ...lazyProps,
@@ -53,6 +54,10 @@ module.exports = {
         }
       }, []);
 
+      React.useEffect(() => {
+       setMount(true)
+      }, []);
+
       if (render404) {
         // TODO: Render 404 page
         return React.createElement('h1', {}, '404 Not Found');

nextjs-v13/shop/pages/_app.js

@@ -1,15 +1,23 @@
-import { lazy } from 'react';
-const Nav = process.browser
-  ? lazy(() => {
-      const mod = import('home/nav');
-      return mod;
-    })
-  : () => null;
+import { Suspense, lazy, useEffect, useState } from 'react';
+const Nav = lazy(() => {
+  if(process.browser) {
+    const mod = import('home/nav');
+    return mod;
+  }
+});
 
 function MyApp({ Component, pageProps }) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    // Set isClient to true once the component mounts
+    setIsClient(true);
+  }, []);
   return (
     <>
-      <Nav />
+      <Suspense fallback={'loading'}>
+        {isClient && <Nav />}
+      </Suspense>
       <Component {...pageProps} />
     </>
   );