Adasp 33 oauth

.gitignore

@@ -28,4 +28,6 @@ yarn-error.log*
 
 # depcruiser visualizations
 dependency-graph.svg
-dependency-report.html
+dependency-report.html
+
+todo-app-315819-5c42dd0d1c80.json

cypress/integration/tasks.ts

@@ -1,4 +1,4 @@
-describe("App", function () {
+describe("app with no oauth", () => {
   it("Contains a button that starts the app in motion", function () {
     cy.visit("/")
     cy.findByText("Get Started").contains("Get Started")
@@ -10,6 +10,12 @@ describe("App", function () {
     cy.visit("/todo")
     cy.get(".AppHeader").contains("My Tasks")
   })
+})
+
+describe("App with oauth before each test", function () {
+  beforeEach(() => {
+    cy.loginByGoogleApi()
+  })
   it("shows a modal after clicking Create New Task button and hides it after clicking cancel", function () {
     cy.visit("/todo")
     cy.findByText("Create New Task").click()
@@ -18,26 +24,21 @@ describe("App", function () {
     cy.findByText("Cancel").click()
     cy.get(".taskForm").should("not.exist")
   })
+
   it("creates a new task with a checkbox", function () {
     cy.visit("/todo")
-    cy.findByText("Create New Task").click()
-    cy.get("#taskInput").type("make dinner")
-    cy.findByText("Save").click()
+    cy.createTask()
     cy.get(".checkbox > .MuiSvgIcon-root").should("exist")
   })
   it("changes an active task to completed when checkbox is clicked", function () {
     cy.visit("/todo")
-    cy.findByText("Create New Task").click()
-    cy.get("#taskInput").type("make dinner")
-    cy.findByText("Save").click()
+    cy.createTask()
     cy.get("[data-testid=unchecked]").click()
     cy.get("[data-testid=checked] > path").should("exist")
   })
   it("shows an edit modal after clicking a task, edits the description, then hides the modal after clicking save", function () {
     cy.visit("/todo")
-    cy.findByText("Create New Task").click()
-    cy.get("#taskInput").type("make dinner")
-    cy.findByText("Save").click()
+    cy.createTask()
     cy.get(".taskCard").click()
     cy.get("#taskInput").type("wash the dishes")
     cy.findByText("Save").click()
@@ -48,9 +49,7 @@ describe("App", function () {
   })
   it("shows and hides complete tasks", function () {
     cy.visit("/todo")
-    cy.findByText("Create New Task").click()
-    cy.get("#taskInput").type("another task")
-    cy.findByText("Save").click()
+    cy.createTask()
     cy.get("[data-testid=unchecked]").click({ multiple: true })
     cy.get(".taskCard").should("exist")
     cy.get(".expand").click()

cypress/plugins/index.ts

@@ -1,3 +1,4 @@
+import { config } from "dotenv"
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
 //
@@ -11,7 +12,14 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-module.exports = (_on, _config) => {
+config()
+export default (_on: Cypress.PluginEvents, config: Cypress.ConfigOptions) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  if (config.env) {
+    config.env.googleRefreshToken = process.env.GOOGLE_REFRESH_TOKEN
+    config.env.googleClientId = process.env.REACT_APP_GOOGLE_CLIENTID
+    config.env.googleClientSecret = process.env.REACT_APP_GOOGLE_CLIENT_SECRET
+  }
+  return config
 }

cypress/support/commands/createTask.ts

@@ -0,0 +1,7 @@
+import "@testing-library/cypress/add-commands"
+
+Cypress.Commands.add("createTask", () => {
+  cy.findByText("Create New Task").click()
+  cy.get("#taskInput").type("make dinner")
+  cy.findByText("Save").click()
+})

cypress/support/commands/googleLogin.ts

@@ -0,0 +1,38 @@
+import "@testing-library/cypress/add-commands"
+
+Cypress.Commands.add("loginByGoogleApi", () => {
+  cy.log("Logging in to Google")
+  cy.request({
+    method: "POST",
+    url: "https://www.googleapis.com/oauth2/v4/token",
+    body: {
+      grant_type: "refresh_token",
+      client_id: Cypress.env("googleClientId"),
+      client_secret: Cypress.env("googleClientSecret"),
+      refresh_token: Cypress.env("googleRefreshToken"),
+    },
+  }).then(({ body }) => {
+    const { access_token, id_token } = body
+
+    cy.request({
+      method: "GET",
+      url: "https://www.googleapis.com/oauth2/v3/userinfo",
+      headers: { Authorization: `Bearer ${access_token}` },
+    }).then(({ body }) => {
+      cy.log(body)
+      const userItem = {
+        token: id_token,
+        user: {
+          googleId: body.sub,
+          email: body.email,
+          givenName: body.given_name,
+          familyName: body.family_name,
+          imageUrl: body.picture,
+        },
+      }
+
+      window.localStorage.setItem("googleCypress", JSON.stringify(userItem))
+      cy.visit("/todo")
+    })
+  })
+})

cypress/support/commands/index.ts

@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-namespace */
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./googleLogin"
+import "./createTask"
+import "@testing-library/cypress/add-commands"
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Custom command to select DOM element by data-cy attribute.
+       * @example cy.loginByGoogleApi()
+       */
+      loginByGoogleApi(): Chainable<Window>
+      createTask(): Chainable<Window>
+    }
+  }
+}

cypress/tsconfig.json

@@ -14,5 +14,5 @@
   },
   "include": [
     "**/*.ts"
-  ]
+  ],
 }