Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/439767 - Configure e2e tests for next.js. #523

Merged
merged 6 commits into from Dec 30, 2020
Merged

Feature/439767 - Configure e2e tests for next.js. #523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
44113ec
next.js e2e tests initial approach
sc-olexandrtroyanovskyy Dec 23, 2020
48f35ce
Timeouts were added for 3 tests for the disconnected mode. Port confi…
sc-olexandrtroyanovskyy Dec 29, 2020
8320da3
comment update
sc-olexandrtroyanovskyy Dec 29, 2020
ab4984f
Merge branch 'dev' into feature/439767
sc-olexandrtroyanovskyy Dec 29, 2020
43a87ee
Minor updates
sc-olexandrtroyanovskyy Dec 29, 2020
a9fbc0e
Implementing updates according to PR reivew.
sc-olexandrtroyanovskyy Dec 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 7 additions & 0 deletions e2e/appmodes.js
View file
Open in desktop
Expand Up @@ -19,6 +19,13 @@ if (!verb || (verb !== 'connected' && verb !== 'disconnected')) {
}

const config = [
// Due to current inablitiy to set\change a port for the next.js app
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Next.js CLI supports a port parameter for the dev and start commands, which should be able to read an env variable. What if you change the Next.js sample app's "next:dev" to:

"next:dev": "cross-env NODE_OPTIONS='--inspect' next dev --port $PORT",

It seems to use 3000 by default if PORT isn't defined (which is what we'd want), but should pick up our e2e setting I think?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ambrauer If you use cross-env it will not pick up PORT env variable, I tried to do it (if you use appmodes.js script).
In case If I use cross-env-shell NODE_OPTIONS='--inspect' next dev --port $PORT it will work only if $PORT is defined, if this variable is not provided, it will throw error: UnhandledPromiseRejectionWarning: Error: Option requires argument: --port

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sc-illiakovalenko That's a bummer. I attempted to use a fork of cross-env which adds default value functionality. That solved the "option requires argument" error, however didn't pick up the port supplied by appmodes.js.

I suppose the other option would be to rewrite appmodes.js to fire up and test each app sequentially - avoiding any port conflicts - but that's beyond the scope of this task.

// this section has to be commented due to conflict with angular app on the same port untill this is resolved
// {
// name: 'nextjs',
// port: 3000,
// proxyPort: 1336,
// },
{
name: 'react',
port: 1337,
Expand Down
6 changes: 6 additions & 0 deletions e2e/cypress/cypress/integration/jss-sample-site/i18n.spec.js
View file
Open in desktop
Expand Up @@ -16,13 +16,17 @@ describe('Language URL Routing', () => {

it('Should Handle Danish in URL', () => {
cy.visit(`/da-dk${PAGE}`);
// In case of disconnected mode following timeout is needed
cy.wait(500);
cy.contains('Indholdet og layoutet');
});
});

describe('Danish Styleguide', () => {
before(() => {
cy.visit(`/da-dk${PAGE}`);
// In case of disconnected mode following timeout is needed
cy.wait(5000);
});

const selector = '[data-e2e-id="styleguide-multilingual"]';
Expand All @@ -47,6 +51,8 @@ describe('Danish Styleguide', () => {
describe('Language Switch Link', () => {
before(() => {
cy.visit(`/da-dk${PAGE}`);
// In case of disconnected mode following timeout is needed
cy.wait(5000);
});

const selector = '[data-e2e-id="styleguide-multilingual"]';
Expand Down
4 changes: 3 additions & 1 deletion e2e/cypress/package.json
View file
Open in desktop
Expand Up @@ -16,9 +16,11 @@
"test:disconnected:vue": "cypress run --config baseUrl=http://localhost:3000 --env SSR=false,FRAMEWORK=vue,GRAPHQL=false",
"test:disconnected:react": "cypress run --config baseUrl=http://localhost:3000 --env SSR=false,FRAMEWORK=react,GRAPHQL=false",
"test:disconnected:angular": "cypress run --config baseUrl=http://localhost:3000 --env SSR=false,FRAMEWORK=angular,GRAPHQL=false",
"test:disconnected:next": "cypress run --config baseUrl=http://localhost:3000 --env SSR=false,FRAMEWORK=nextjs,GRAPHQL=false",
"test:connected:vue": "cypress run --config baseUrl=http://localhost:3000 --env SSR=false,FRAMEWORK=vue",
"test:connected:react": "cypress run --config baseUrl=http://localhost:3000 --env SSR=false,FRAMEWORK=react",
"test:connected:angular": "cypress run --config baseUrl=http://localhost:3000 --env SSR=false,FRAMEWORK=angular"
"test:connected:angular": "cypress run --config baseUrl=http://localhost:3000 --env SSR=false,FRAMEWORK=angular",
"test:connected:next": "cypress run --config baseUrl=http://localhost:3000 --env SSR=false,FRAMEWORK=nextjs"
},
"author": "Sitecore Corporation",
"private": true,
Expand Down
2 changes: 1 addition & 1 deletion samples/nextjs/next.config.js
View file
Open in desktop
Expand Up @@ -6,7 +6,7 @@ const withEditing = require('@sitecore-jss/sitecore-jss-nextjs-editing-host').co
enabled: process.env.JSS_MODE === JSS_MODE_EDITING,
});

const disconnectedServerUrl = `http://localhost:${process.env.DISCONNECTED_SERVER_PORT || 3042}/`;
const disconnectedServerUrl = `http://localhost:${process.env.PROXY_PORT || 3042}/`;
const disconnected = process.env.JSS_MODE === JSS_MODE_DISCONNECTED;

const nextConfig = {
Expand Down
4 changes: 2 additions & 2 deletions samples/nextjs/package.json
View file
Open in desktop
Expand Up @@ -96,8 +96,8 @@
"next:dev": "cross-env NODE_OPTIONS='--inspect' next dev",
"next:start": "next start",
"scaffold": "ts-node --project tsconfig.scripts.json scripts/scaffold-component.ts",
"start": "npm-run-all --serial bootstrap --parallel next:dev start:watch-components",
"start:disconnected": "cross-env-shell JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel next:dev start:disconnected-proxy start:watch-components\"",
"start:connected": "npm-run-all --serial bootstrap --parallel next:dev start:watch-components",
"start": "cross-env-shell JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel next:dev start:disconnected-proxy start:watch-components\"",
"start:disconnected-proxy": "ts-node --project tsconfig.scripts.json ./scripts/disconnected-mode-proxy.ts",
"start:production": "npm-run-all --serial bootstrap next:build next:start",
"start:watch-components": "ts-node --project tsconfig.scripts.json scripts/generate-component-factory.ts --watch",
Expand Down
2 changes: 1 addition & 1 deletion samples/nextjs/scripts/disconnected-mode-proxy.ts
View file
Open in desktop
Expand Up @@ -23,7 +23,7 @@ const serverOptions = {
requireArg: '',
watchPaths: ['./data'],
language: config.language,
port: Number(process.env.DISCONNECTED_SERVER_PORT) || 3042,
port: Number(process.env.PROXY_PORT) || 3042,
onManifestUpdated: () => {
// if we can resolve the config file, we can alter it to force reloading the app automatically
// instead of waiting for a manual reload. We must materially alter the _contents_ of the file to trigger
Expand Down
3 changes: 2 additions & 1 deletion samples/nextjs/src/components/Styleguide-Multilingual/index.tsx
View file
Open in desktop
Expand Up @@ -33,7 +33,8 @@ const StyleguideMultilingual = (props: StyleguideMultilingualProps): JSX.Element
</p>

<p>
<Link href={`${publicUrl}/styleguide`} locale="en">
// In case if href already includes locale: https://nextjs.org/docs/advanced-features/i18n-routing#transition-between-locales
<Link href={`${publicUrl}/en/styleguide`} locale={false}>
ambrauer marked this conversation as resolved.
Show resolved Hide resolved
<a>Show in English</a>
</Link>
<br />
Expand Down