muratkeremozcan · muratkeremozcan · Jan 27, 2023 · Jan 26, 2023 · Jan 26, 2023 · Jan 27, 2023
diff --git a/cypress.config.js b/cypress.config.js
@@ -12,7 +12,7 @@ export default defineConfig({
   },
   e2e: {
     setupNodeEvents(on, config) {},
-    baseUrl: 'http://localhost:3000',
+    // baseUrl: 'http://localhost:3000', // need to test index.html in another test...
     specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}'
   },
   component: {

diff --git a/cypress/component/redirect/window.location.replace/login.cy.tsx b/cypress/component/redirect/window.location.replace/login.cy.tsx
@@ -0,0 +1,14 @@
+import { LoginBtn, Location } from './login'
+
+it('should deal with win.location.replace', () => {
+  // how would we do the same workaround in a component test?
+  // we stub the common object Location instead
+  // https://glebbahmutov.com/blog/stub-react-import/#move-the-side-effect
+
+  cy.stub(Location, 'assign').as('assign')
+
+  cy.mount(<LoginBtn />)
+
+  cy.getByCy('login-button').click()
+  cy.get('@assign').should('have.been.calledOnceWith', 'https://www.cypress.io')
+})
diff --git a/cypress/component/redirect/window.location.replace/login.tsx b/cypress/component/redirect/window.location.replace/login.tsx
@@ -0,0 +1,29 @@
+// https://glebbahmutov.com/blog/stub-react-import/#move-the-side-effect
+
+/** This common object wraps around things we cannot stub
+ * like window.locations methods which are locked for security reasons
+ * But, we can stub Location's methods
+ * In you app this would be in a common lib
+ */
+export const Location = {
+  assign(url: string) {
+    window.location.assign(url)
+  },
+  replace(url: string) {
+    window.location.replace(url)
+  }
+}
+
+export const LoginBtn = () => {
+  const handleSubmit = () => {
+    setTimeout(() => {
+      Location.assign('https://www.cypress.io')
+    }, 1000)
+  }
+
+  return (
+    <button onClick={handleSubmit} data-cy="login-button">
+      Log in
+    </button>
+  )
+}
diff --git a/cypress/e2e/sanity.spec.ts b/cypress/e2e/sanity.spec.ts
@@ -1,7 +1,7 @@
 // @ts-ignore
 describe('app-a', () => {
   it('passes sanity', () => {
-    cy.visit('/')
+    cy.visit('http://localhost:3000')
     cy.contains('Hello world')
   })
 })
diff --git a/cypress/e2e/win-location-assign.spec.ts b/cypress/e2e/win-location-assign.spec.ts
@@ -0,0 +1,25 @@
+it('should deal with win.location.replace', () => {
+  // https://glebbahmutov.com/blog/cypress-tips-and-tricks/#deal-with-windowlocationreplace
+  // window.location is locked down for security reasons.
+  // During the test, we can use the cy.intercept command to modify the application code.
+  //  For example, it could call window.__location.assign instead.
+  //  Our test would create this dummy window.__location object before the component mounts
+
+  cy.on('window:before:load', (win) => {
+    // @ts-ignore
+    win.__location = {
+      assign: cy.stub().as('assign')
+    }
+  })
+
+  cy.intercept('GET', 'index.html', (req) => {
+    req.reply((res) => {
+      res.body = res.body.replaceAll('window.location.assign', 'window.__location.assign')
+    })
+  }).as('index')
+
+  cy.visit('index.html')
+  cy.wait('@index')
+  cy.contains('h1', 'First page')
+  cy.get('@assign').should('have.been.calledOnceWith', 'https://www.cypress.io')
+})
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
@@ -2,18 +2,13 @@
   "compilerOptions": {
     "target": "esnext",
     "lib": ["esnext", "dom"],
-    "types": [
-      "cypress",
-      "node",
-      "@testing-library/cypress",
-      "cypress-real-events"
-    ],
+    "types": ["cypress", "node", "@testing-library/cypress", "cypress-real-events"],
     "moduleResolution": "node",
     "esModuleInterop": true,
     "allowJs": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "jsx": "react-jsx"
   },
-  "include": ["**/*.ts", "**/*.tsx", "**/*.cy.tsx"]
+  "include": ["**/*.ts", "**/*.tsx", "**/*.cy.tsx", "component/redirect/okta.tsx"]
 }
diff --git a/index.html b/index.html
@@ -0,0 +1,8 @@
+<body>
+	<h1>First page</h1>
+	<script>
+		setTimeout(() => {
+			window.location.assign('https://www.cypress.io')
+		}, 1000)
+	</script>
+</body>