Skip to content

Commit ca6b1cf

Browse files
authored
update: nextjs-ssr sample (#2731)
1 parent 98940da commit ca6b1cf

File tree

9 files changed

+1530
-310
lines changed

9 files changed

+1530
-310
lines changed

nextjs-ssr/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,11 @@ Next.js has all its internal modules pre-shared vis `@module-federation/nextjs-m
5353
The sharing limit is due to next not having any async boundary, theres no way to "pause" the application while webpack orchestrates share scope.
5454

5555
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.
56+
57+
# Running Cypress E2E Tests
58+
59+
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)
60+
61+
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.
62+
63+
["Best Practices, Rules amd more interesting information here](../../cypress/README.md)

nextjs-ssr/checkout/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "checkout",
2+
"name": "nextjs-ssr_checkout",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {

nextjs-ssr/e2e/checkApps.cy.ts

Lines changed: 37 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,10 @@
88
appName: Constants.commonConstantsData.home,
99
host: 3001
1010
},
11-
// TODO : Checks for Shop app (port 3002) are commented, because there is the error after reloading shop page (localhost:3002/shop).
12-
// Error: Hydration failed because the initial UI does not match what was rendered on the server.
13-
// Uncomment after fixing
14-
// {
15-
// appName: Constants.elementsText.nextjsSsrShop,
16-
// host: 3002
17-
// },
11+
{
12+
appName: Constants.elementsText.nextJsSsrApp.shop,
13+
host: 3002
14+
},
1815
{
1916
appName: Constants.elementsText.nextJsSsrApp.checkout,
2017
host: 3000
@@ -27,11 +24,6 @@
2724
appName: string
2825
host: number
2926
}) => {
30-
// TODO : Uncomment after fixing the Error: Hydration failed
31-
// let appName = property.host === 3001 ? appsData[0].appName : property.host === 3002 ? appsData[1].appName : appsData[2].appName;
32-
// let host = property.host === 3001 ? appsData[0].host : property.host === 3002 ? appsData[1].host : appsData[2].host;
33-
const appName = property.host === 3001 ? appsData[0].appName : appsData[1].appName;
34-
const host = property.host === 3001 ? appsData[0].host : appsData[1].host;
3527

3628
const navigationTextedLinks = [
3729
{
@@ -82,21 +74,9 @@
8274
},
8375
]
8476

85-
describe(`Check content in ${appName} app`, () => {
86-
// TODO cy.exec don't build the apps correctly cause lerna executes without exit code. Uncomment after fix this issue!
87-
// before(() => {
88-
// basePage.buildTheSample(Constants.samplesPath.nextjsSsr)
89-
// })
90-
91-
// after(() => {
92-
// basePage.shutdownTheSample(Constants.samplesPath.nextjsSsr)
93-
// })
94-
95-
96-
97-
describe(`Check the content of Home page`, () => {
77+
describe(`Check content in ${property.appName} app`, () => {
9878
beforeEach(() => {
99-
basePage.openLocalhost(host)
79+
basePage.openLocalhost(property.host)
10080
})
10181

10282
it(`Check the header content of Home page`, () => {
@@ -180,7 +160,7 @@
180160

181161
describe(`Check links on Home page`, () => {
182162
beforeEach(() => {
183-
basePage.openLocalhost(host)
163+
basePage.openLocalhost(property.host)
184164
})
185165

186166
navigationTextedLinks.forEach((property: { text: string, link: string }) => {
@@ -208,8 +188,7 @@
208188
basePage.checkElementContainText({
209189
selector: baseSelectors.tags.coreElements.link,
210190
text: property.text,
211-
link: property.link,
212-
isParent: true
191+
link: property.link
213192
})
214193
})
215194
});
@@ -228,7 +207,7 @@
228207

229208
describe(`Check the content of Shop page`, () => {
230209
beforeEach(() => {
231-
basePage.openLocalhost(host, Constants.hrefs.nextJsSsrApp.shop)
210+
basePage.openLocalhost(property.host, Constants.hrefs.nextJsSsrApp.shop)
232211
})
233212

234213
it(`Check the header content of Shop page`, () => {
@@ -271,7 +250,7 @@
271250

272251
describe(`Check links on Shop page`, () => {
273252
beforeEach(() => {
274-
basePage.openLocalhost(host, Constants.hrefs.nextJsSsrApp.shop)
253+
basePage.openLocalhost(property.host, Constants.hrefs.nextJsSsrApp.shop)
275254
})
276255

277256
navigationTextedLinks.forEach((property: { text: string, link: string }) => {
@@ -308,7 +287,7 @@
308287

309288
describe(`Check the content of Checkout page`, () => {
310289
beforeEach(() => {
311-
basePage.openLocalhost(host, Constants.hrefs.nextJsSsrApp.checkout)
290+
basePage.openLocalhost(property.host, Constants.hrefs.nextJsSsrApp.checkout)
312291
})
313292

314293

@@ -362,43 +341,42 @@
362341
index: 1
363342
})
364343
})
365-
344+
366345
describe(`Check links on Checkout page`, () => {
367-
beforeEach(() => {
368-
basePage.openLocalhost(host, Constants.hrefs.nextJsSsrApp.checkout)
369-
})
346+
beforeEach(() => {
347+
basePage.openLocalhost(property.host, Constants.hrefs.nextJsSsrApp.checkout)
348+
})
370349

371-
navigationTextedLinks.forEach((property: { text: string, link: string }) => {
372-
it(`Check that ${property.text} text includes link and is not disabled`, () => {
373-
basePage.checkElementContainText({
374-
selector: baseSelectors.tags.coreElements.link,
375-
text: property.text,
376-
link: property.link,
350+
navigationTextedLinks.forEach((property: { text: string, link: string }) => {
351+
it(`Check that ${property.text} text includes link and is not disabled`, () => {
352+
basePage.checkElementContainText({
353+
selector: baseSelectors.tags.coreElements.link,
354+
text: property.text,
355+
link: property.link,
356+
})
377357
})
378358
})
379-
})
380359

381-
commonTextedLinks.forEach((property: { text: string, link: string }) => {
382-
it(`Check that ${property.text} text includes link and is not disabled`, () => {
383-
basePage.checkElementContainText({
384-
selector: baseSelectors.tags.coreElements.link,
385-
text: property.text,
386-
link: property.link,
360+
commonTextedLinks.forEach((property: { text: string, link: string }) => {
361+
it(`Check that ${property.text} text includes link and is not disabled`, () => {
362+
basePage.checkElementContainText({
363+
selector: baseSelectors.tags.coreElements.link,
364+
text: property.text,
365+
link: property.link,
366+
})
387367
})
388368
})
389-
})
390369

391-
navigationTextedLinks.forEach((property: { text: string, url: string }) => {
392-
it(`Check that ${property.text} text navigation link works`, () => {
393-
basePage.clickElementWithText({
394-
selector: baseSelectors.tags.coreElements.link,
395-
text: property.text})
370+
navigationTextedLinks.forEach((property: { text: string, url: string }) => {
371+
it(`Check that ${property.text} text navigation link works`, () => {
372+
basePage.clickElementWithText({
373+
selector: baseSelectors.tags.coreElements.link,
374+
text: property.text})
396375

397-
cy.wait(500)
398-
basePage.checkUrlText(property.url, true)
376+
cy.wait(500)
377+
basePage.checkUrlText(property.url, true)
378+
})
399379
})
400380
})
401381
})
402-
})
403-
})
404382
})

nextjs-ssr/home/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "home",
2+
"name": "nextjs-ssr_home",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {

nextjs-ssr/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
"scripts": {
1212
"start": "concurrently \"cd checkout; npm run dev\" \"cd home; npm run dev\" \"cd shop; npm run dev\"",
1313
"build": "concurrently \"cd checkout; npm run build\" \"cd home; npm run build\" \"cd shop; npm run build\"",
14-
"serve": "concurrently \"cd checkout; npm run start\" \"cd home; npm run start\" \"cd shop; npm run start\""
14+
"serve": "concurrently \"cd checkout; npm run start\" \"cd home; npm run start\" \"cd shop; npm run start\"",
15+
"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"
1516
},
1617
"dependencies": {
1718
"concurrently": "^7.0.0"

nextjs-ssr/shared/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "nextjs-shared",
2+
"name": "nextjs-ssr_shared",
33
"version": "1.0.0",
44
"license": "MIT",
55
"module": "./index.js",

nextjs-ssr/shop/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "shop",
2+
"name": "nextjs-ssr_shop",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@
4949
"./nested/*",
5050
"./nextjs-react",
5151
"./nextjs-react/*",
52+
"./nextjs-ssr",
53+
"./nextjs-ssr/*",
5254
"./react-hmr",
5355
"./react-hmr/*",
5456
"./react-in-vue",

0 commit comments

Comments
 (0)