fix(test): add test for builds and fix failing tests

4commerce-technologies-AG · Jan 4, 2022 · c493655 · c493655
1 parent 7e4b30d
commit c493655
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 19 deletions.
diff --git a/cypress.json b/cypress.json
@@ -1,3 +1,6 @@
 {
-  "baseUrl": "http://localhost:3000"
+  "baseUrl": "http://localhost:3000",
+  "env": {
+    "prodBaseUrl": "https://next-multilingual-example.vercel.app"
+  }
 }
diff --git a/cypress/constants.ts b/cypress/constants.ts
@@ -5,4 +5,5 @@ export const LOCALE_NAMES = {
 };
 
 export const DEFAULT_LOCALE = LOCALES[0];
-export const BASE_URL = Cypress.config().baseUrl;
+
+export const ORIGIN = Cypress.env('isProd') ? Cypress.env('prodBaseUrl') : Cypress.config().baseUrl;
diff --git a/cypress/integration/dynamic-route.spec.ts b/cypress/integration/dynamic-route.spec.ts
@@ -1,4 +1,4 @@
-import { BASE_URL, DEFAULT_LOCALE, LOCALE_NAMES, LOCALES } from '../constants';
+import { DEFAULT_LOCALE, LOCALE_NAMES, LOCALES, ORIGIN } from '../constants';
 
 export const DYNAMIC_ROUTE_URLS = {
   'en-US': '/dynamic-route-test',
@@ -74,7 +74,7 @@ describe('A dynamic route', () => {
       cy.get(`#link-with-parameter`)
         .click()
         .then(() => {
-          cy.url().should('eq', `${BASE_URL}${dynamicRouteUrl}`);
+          cy.url().should('eq', `${Cypress.config().baseUrl}${dynamicRouteUrl}`);
         });
     });
 
@@ -85,7 +85,7 @@ describe('A dynamic route', () => {
       cy.get(`#route-push-button`)
         .click()
         .then(() => {
-          cy.url().should('eq', `${BASE_URL}${dynamicRouteUrl}`);
+          cy.url().should('eq', `${Cypress.config().baseUrl}${dynamicRouteUrl}`);
         });
     });
 
@@ -100,7 +100,7 @@ describe('A dynamic route', () => {
         },
       }).then(({ body }: Cypress.Response<string>) => {
         source = body; // Save it for the next test to avoid multiple calls.
-        const canonicalLinkMarkup = `<link rel="canonical" href="${BASE_URL}${canonicalDynamicRouteUrl}"/>`;
+        const canonicalLinkMarkup = `<link rel="canonical" href="${ORIGIN}${canonicalDynamicRouteUrl}"/>`;
         expect(source).to.contain(canonicalLinkMarkup);
       });
     });
@@ -111,7 +111,7 @@ describe('A dynamic route', () => {
         const alternateLinkHref = `/${locale.toLowerCase()}${
           DYNAMIC_ROUTE_URLS[locale]
         }/${parameterValue}`;
-        const alternateLinkMarkup = `<link rel="alternate" href="${BASE_URL}${alternateLinkHref}" hrefLang="${locale}"/>`;
+        const alternateLinkMarkup = `<link rel="alternate" href="${ORIGIN}${alternateLinkHref}" hrefLang="${locale}"/>`;
         expect(source).to.contain(alternateLinkMarkup);
       });
     });
@@ -129,7 +129,7 @@ describe('A dynamic route', () => {
       cy.get(`head link[rel=canonical]`)
         .should('have.attr', 'href')
         .then((href) => {
-          expect(href).eq(`${BASE_URL}${canonicalDynamicRouteUrl}`);
+          expect(href).eq(`${ORIGIN}${canonicalDynamicRouteUrl}`);
         });
     });
 
@@ -140,7 +140,7 @@ describe('A dynamic route', () => {
           .should('have.attr', 'href')
           .then((href) => {
             expect(href).eq(
-              `${BASE_URL}/${locale.toLowerCase()}${DYNAMIC_ROUTE_URLS[locale]}/${parameterValue}`
+              `${ORIGIN}/${locale.toLowerCase()}${DYNAMIC_ROUTE_URLS[locale]}/${parameterValue}`
             );
           });
       });

diff --git a/cypress/integration/homepage.ts b/cypress/integration/homepage.ts
@@ -1,4 +1,4 @@
-import { LOCALES, LOCALE_NAMES, DEFAULT_LOCALE, BASE_URL } from '../constants';
+import { DEFAULT_LOCALE, LOCALE_NAMES, LOCALES, ORIGIN } from '../constants';
 
 export const ABOUT_US_URLS = {
   'en-US': '/about-us',
@@ -79,15 +79,15 @@ describe('The Next.js application', () => {
     });
 
     // Check that the canonical link points on the default locale on the SSR markup.
-    const canonicalLinkMarkup = `<link rel="canonical" href="${BASE_URL}/${DEFAULT_LOCALE.toLowerCase()}"/>`;
+    const canonicalLinkMarkup = `<link rel="canonical" href="${ORIGIN}/${DEFAULT_LOCALE.toLowerCase()}"/>`;
     it(`returns SSR html that contains '${canonicalLinkMarkup}' for '${LOCALE_NAMES[locale]}'`, () => {
       expect(source).to.contain(canonicalLinkMarkup);
     });
 
     // Check that all alternate links or all locales are present on the SSR markup.
     it(`returns SSR html that contains all alternate links for '${LOCALE_NAMES[locale]}'`, () => {
       LOCALES.forEach((locale) => {
-        const alternateLinkMarkup = `<link rel="alternate" href="${BASE_URL}/${locale.toLowerCase()}" hrefLang="${locale}"/>`;
+        const alternateLinkMarkup = `<link rel="alternate" href="${ORIGIN}/${locale.toLowerCase()}" hrefLang="${locale}"/>`;
         expect(source).to.contain(alternateLinkMarkup);
       });
     });
@@ -115,7 +115,7 @@ describe('The Next.js application', () => {
       cy.get(`head link[rel=canonical]`)
         .should('have.attr', 'href')
         .then((href) => {
-          expect(href).eq(`${BASE_URL}/${DEFAULT_LOCALE.toLowerCase()}`);
+          expect(href).eq(`${ORIGIN}/${DEFAULT_LOCALE.toLowerCase()}`);
         });
     });
 
@@ -125,7 +125,7 @@ describe('The Next.js application', () => {
         cy.get(`head link[rel=alternate][hreflang=${locale}]`)
           .should('have.attr', 'href')
           .then((href) => {
-            expect(href).eq(`${BASE_URL}/${locale.toLowerCase()}`);
+            expect(href).eq(`${ORIGIN}/${locale.toLowerCase()}`);
           });
       });
     });

diff --git a/example/.eslintrc.json b/example/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/package.json b/package.json
@@ -78,11 +78,13 @@
     "start-example": "cd example && npm run dev",
     "start-example-build": "cd example && npm run build && npm run start",
     "cypress": "cypress open",
+    "cypress:build": "cypress open --env isProd=true",
     "cypress:headless": "cypress run",
+    "cypress:build:headless": "cypress run --env isProd=true",
     "e2e": "start-server-and-test start-example http://localhost:3000 cypress",
     "e2e:headless": "start-server-and-test start-example http://localhost:3000 cypress:headless",
-    "e2e:build": "start-server-and-test start-example-build http://localhost:3000 cypress",
-    "e2e:build:headless": "start-server-and-test start-example-build http://localhost:3000 cypress:headless"
+    "e2e:build": "start-server-and-test start-example-build http://localhost:3000 cypress:build",
+    "e2e:build:headless": "start-server-and-test start-example-build http://localhost:3000 cypress:build:headless"
   },
   "dependencies": {
     "@babel/core": "^7.16.7",

diff --git a/src/hooks/use-rewrites.ts b/src/hooks/use-rewrites.ts
@@ -36,11 +36,12 @@ export function useRewrites(): Rewrite[] {
   useEffect(() => {
     getClientBuildManifest()
       .then((clientBuildManifest) => {
-        // Next.js needs to add types https://github.com/vercel/next.js/blob/d130f63c416b21adc67dc3c755ad6e1a707e2cc8/packages/next/build/webpack/plugins/build-manifest-plugin.ts#L41
-        setRewrites((clientBuildManifest.__rewrites as unknown as Rewrites).afterFiles);
+        if (!buildManifestRewrites.length) {
+          setRewrites((clientBuildManifest.__rewrites as unknown as Rewrites).afterFiles);
+        }
       })
       .catch(console.error);
-  }, []);
+  });
 
   return rewrites;
 }