module-federation · PeaceDate · Feb 6, 2023 · Feb 6, 2023
diff --git a/nextjs-ssr/README.md b/nextjs-ssr/README.md
@@ -53,3 +53,11 @@ Next.js has all its internal modules pre-shared vis `@module-federation/nextjs-m
 The sharing limit is due to next not having any async boundary, theres no way to "pause" the application while webpack orchestrates share scope.
 
 I am investigating new methods that may solve the module sharing problem in next.js, however this is a complex problem to solve and requires enormus amounts of knowladge around how webpack and federation work inside the module graph.
+
+# Running Cypress E2E Tests
+
+To run tests in interactive mode, run  `npm run cypress:debug` from the root directory of the project. It will open Cypress Test Runner and allow to run tests in interactive mode. [More info about "How to run tests"](../../cypress/README.md#how-to-run-tests)
+
+To build app and run test in headless mode, run `yarn e2e:ci`. It will build app and run tests for this workspace in headless mode. If tets failed cypress will create `cypress` directory in sample root folder with screenshots and videos.
+
+["Best Practices, Rules amd more interesting information here](../../cypress/README.md)
diff --git a/nextjs-ssr/checkout/package.json b/nextjs-ssr/checkout/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "checkout",
+  "name": "nextjs-ssr_checkout",
   "version": "0.1.0",
   "private": true,
   "scripts": {

diff --git a/nextjs-ssr/e2e/checkApps.cy.ts b/nextjs-ssr/e2e/checkApps.cy.ts
@@ -8,13 +8,10 @@
                 appName: Constants.commonConstantsData.home,
                 host: 3001
             },
-    // TODO : Checks for Shop app (port 3002) are commented, because there is the error after reloading shop page (localhost:3002/shop). 
-    // Error: Hydration failed because the initial UI does not match what was rendered on the server.
-    // Uncomment after fixing
-            // {
-            //     appName: Constants.elementsText.nextjsSsrShop,
-            //     host: 3002
-            // },
+            {
+                appName: Constants.elementsText.nextJsSsrApp.shop,
+                host: 3002
+            },
             {
                 appName: Constants.elementsText.nextJsSsrApp.checkout,
                 host: 3000
@@ -27,11 +24,6 @@
                     appName: string
                     host: number
                 }) => {
-            // TODO : Uncomment after fixing the Error: Hydration failed 
-                // let appName = property.host === 3001 ? appsData[0].appName : property.host === 3002 ? appsData[1].appName : appsData[2].appName;
-                // let host = property.host === 3001 ? appsData[0].host : property.host === 3002 ? appsData[1].host : appsData[2].host;
-                const appName = property.host === 3001 ? appsData[0].appName :  appsData[1].appName;
-                const host = property.host === 3001 ? appsData[0].host : appsData[1].host;
 
                 const navigationTextedLinks = [
                     {
@@ -82,21 +74,9 @@
                     }, 
                 ]
 
-        describe(`Check content in ${appName} app`, () => {
-            // TODO cy.exec don't build the apps correctly cause lerna executes without exit code. Uncomment after fix this issue!
-                // before(() => {
-                //     basePage.buildTheSample(Constants.samplesPath.nextjsSsr)
-                // })
-
-                // after(() => {
-                //     basePage.shutdownTheSample(Constants.samplesPath.nextjsSsr)
-                // })
-
-
-
-        describe(`Check the content of Home page`, () => {
+        describe(`Check content in ${property.appName} app`, () => {
             beforeEach(() => {
-                basePage.openLocalhost(host)
+                basePage.openLocalhost(property.host)
             })
 
             it(`Check the header content of Home page`, () => {
@@ -180,7 +160,7 @@
 
             describe(`Check links on Home page`, () => {
                 beforeEach(() => {
-                    basePage.openLocalhost(host)
+                    basePage.openLocalhost(property.host)
                 })
 
                 navigationTextedLinks.forEach((property: { text: string, link: string }) => {
@@ -208,8 +188,7 @@
                         basePage.checkElementContainText({
                             selector: baseSelectors.tags.coreElements.link,
                             text: property.text,
-                            link: property.link,
-                            isParent: true
+                            link: property.link
                         })
                     })
                 });
@@ -228,7 +207,7 @@
 
             describe(`Check the content of Shop page`, () => {
                 beforeEach(() => {
-                    basePage.openLocalhost(host, Constants.hrefs.nextJsSsrApp.shop)
+                    basePage.openLocalhost(property.host, Constants.hrefs.nextJsSsrApp.shop)
                 })
 
                 it(`Check the header content of Shop page`, () => {
@@ -271,7 +250,7 @@
 
         describe(`Check links on Shop page`, () => {
             beforeEach(() => {
-                basePage.openLocalhost(host, Constants.hrefs.nextJsSsrApp.shop)
+                basePage.openLocalhost(property.host, Constants.hrefs.nextJsSsrApp.shop)
             })
 
             navigationTextedLinks.forEach((property: { text: string, link: string }) => {
@@ -308,7 +287,7 @@
 
         describe(`Check the content of Checkout page`, () => {
             beforeEach(() => {
-                basePage.openLocalhost(host, Constants.hrefs.nextJsSsrApp.checkout)
+                basePage.openLocalhost(property.host, Constants.hrefs.nextJsSsrApp.checkout)
             })
 
 
@@ -362,43 +341,42 @@
                     index: 1
                 })
         })
-
+        
         describe(`Check links on Checkout page`, () => {
-        beforeEach(() => {
-            basePage.openLocalhost(host, Constants.hrefs.nextJsSsrApp.checkout)
-        })
+            beforeEach(() => {
+                basePage.openLocalhost(property.host, Constants.hrefs.nextJsSsrApp.checkout)
+            })
 
-        navigationTextedLinks.forEach((property: { text: string, link: string }) => {
-            it(`Check that ${property.text} text includes link and is not disabled`, () => {
-                basePage.checkElementContainText({
-                    selector: baseSelectors.tags.coreElements.link,
-                    text: property.text,
-                    link: property.link,
+            navigationTextedLinks.forEach((property: { text: string, link: string }) => {
+                it(`Check that ${property.text} text includes link and is not disabled`, () => {
+                    basePage.checkElementContainText({
+                        selector: baseSelectors.tags.coreElements.link,
+                        text: property.text,
+                        link: property.link,
+                    })
                 })
             })
-        })
 
-        commonTextedLinks.forEach((property: { text: string, link: string }) => {
-            it(`Check that ${property.text} text includes link and is not disabled`, () => {
-                basePage.checkElementContainText({
-                    selector: baseSelectors.tags.coreElements.link,
-                    text: property.text,
-                    link: property.link,
+            commonTextedLinks.forEach((property: { text: string, link: string }) => {
+                it(`Check that ${property.text} text includes link and is not disabled`, () => {
+                    basePage.checkElementContainText({
+                        selector: baseSelectors.tags.coreElements.link,
+                        text: property.text,
+                        link: property.link,
+                    })
                 })
             })
-        })
 
-        navigationTextedLinks.forEach((property: { text: string, url: string }) => {
-            it(`Check that ${property.text} text navigation link works`, () => {
-                basePage.clickElementWithText({
-                selector: baseSelectors.tags.coreElements.link,
-                text: property.text})
+            navigationTextedLinks.forEach((property: { text: string, url: string }) => {
+                it(`Check that ${property.text} text navigation link works`, () => {
+                    basePage.clickElementWithText({
+                    selector: baseSelectors.tags.coreElements.link,
+                    text: property.text})
 
-                cy.wait(500)
-                basePage.checkUrlText(property.url, true)
+                    cy.wait(500)
+                    basePage.checkUrlText(property.url, true)
+                })
             })
         })
     })
-    })
-    })
 })
diff --git a/nextjs-ssr/home/package.json b/nextjs-ssr/home/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "home",
+  "name": "nextjs-ssr_home",
   "version": "0.1.0",
   "private": true,
   "scripts": {

diff --git a/nextjs-ssr/package.json b/nextjs-ssr/package.json
@@ -11,7 +11,8 @@
   "scripts": {
     "start": "concurrently \"cd checkout; npm run dev\" \"cd home; npm run dev\" \"cd shop; npm run dev\"",
     "build": "concurrently \"cd checkout; npm run build\" \"cd home; npm run build\" \"cd shop; npm run build\"",
-    "serve": "concurrently \"cd checkout; npm run start\" \"cd home; npm run start\" \"cd shop; npm run start\""
+    "serve": "concurrently \"cd checkout; npm run start\" \"cd home; npm run start\" \"cd shop; npm run start\"",
+    "e2e:ci": "yarn start & wait-on http-get://localhost:3001/ && npx cypress run --config-file ../cypress/config/cypress.config.ts --config '{\"supportFile\": \"../cypress/support/e2e.ts\"}' --spec \"./e2e/*.cy.ts\" --browser=chrome"
   },
   "dependencies": {
     "concurrently": "^7.0.0"

diff --git a/nextjs-ssr/shared/package.json b/nextjs-ssr/shared/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "nextjs-shared",
+  "name": "nextjs-ssr_shared",
   "version": "1.0.0",
   "license": "MIT",
   "module": "./index.js",

diff --git a/nextjs-ssr/shop/package.json b/nextjs-ssr/shop/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "shop",
+  "name": "nextjs-ssr_shop",
   "version": "0.1.0",
   "private": true,
   "scripts": {

diff --git a/package.json b/package.json
@@ -49,6 +49,8 @@
       "./nested/*",
       "./nextjs-react",
       "./nextjs-react/*",
+      "./nextjs-ssr",
+      "./nextjs-ssr/*",
       "./react-hmr",
       "./react-hmr/*",
       "./react-in-vue",