Enabled devs to login, logout and CRUD against FireBase in Cypress tests

.lintstagedrc

@@ -1,7 +1,10 @@
 {
   "linters": {
-    "*.{ts,tsx}": [
-      "tslint --project tsconfig.json --config tslint.json"
+    "src/**/*.{ts,tsx}": [
+        "tslint --project tsconfig.json --config tslint.json"
+      ],
+    "cypress/**/*.{ts,tsx}": [
+      "tslint --project cypress/tsconfig.json --config tslint.json"
     ],
     "*.{js,jsx}": [
       "eslint"
@@ -12,4 +15,4 @@
     ]
   },
   "ignore": ["functions/**",".storybook/**",config/**]
-}
+}

cypress.json

@@ -9,5 +9,6 @@
   "reporter": "junit",
   "reporterOptions": {
     "mochaFile": "cypress/coverage/out-[hash].xml"
-  }
+  },
+  "supportFile": "cypress/support/index.ts"
 }

cypress/integration/firebase-integration.spec.ts

@@ -0,0 +1,36 @@
+describe('FireBase + Cypress', () => {
+  it('should logout and login', () => {
+    cy.visit('/how-to')
+    cy.logout()
+    cy.get('[data-cy=create]').should('not.exist')
+
+    cy.login('test1234@test.com', '12345678')
+    cy.get('[data-cy=create]').should('be.visible')
+
+    cy.logout()
+    cy.get('[data-cy=create]').should('not.exist')
+  })
+
+  it('should add/update/get/delete from FireStore', async () => {
+    const firestore = await cy.firestore()
+    const addRef = await firestore
+      .collection('testCollection')
+      .add({ name: 'Tony Stark', age: 45 })
+    console.log('Object added with ref ' + addRef.id)
+    await firestore
+      .collection('testCollection')
+      .doc(addRef.id)
+      .update({ name: 'Iron man', age: 40 })
+    console.log('Object updated ')
+    const snapshot = await firestore.collection('testCollection').get()
+    snapshot.forEach(doc => {
+      console.log(`ID ${doc.id} => `, doc.data())
+    })
+    await firestore
+      .collection('testCollection')
+      .doc(addRef.id)
+      .delete()
+    console.log(`Object ${addRef.id} deleted`)
+    cy.visit('/how-to')
+  })
+})

cypress/support/commands.ts

@@ -0,0 +1,70 @@
+import * as firebase from 'firebase/app'
+import 'firebase/auth'
+import 'firebase/database'
+import 'firebase/firestore'
+import cypress from 'cypress'
+
+const projectId = 'precious-plastics-v4-dev'
+const apiKey = 'AIzaSyChVNSMiYxCkbGd9C95aChr9GxRJtW6NRA'
+const fbConfig = {
+  apiKey,
+  authDomain: `${projectId}.firebaseapp.com`,
+  databaseURL: `https://${projectId}.firebaseio.com`,
+  projectId: `${projectId}`,
+  storageBucket: `${projectId}.appspot.com`,
+  messagingSenderId: '174193431763',
+}
+firebase.initializeApp(fbConfig)
+
+declare global {
+  namespace Cypress {
+    // tslint:disable-next-line:interface-name
+    interface Chainable {
+      firestore(): Promise<firebase.firestore.Firestore>
+
+      login(
+        username: string,
+        password: string,
+      ): Promise<firebase.auth.UserCredential>
+
+      logout(): Promise<void>
+    }
+  }
+}
+
+const attachCustomCommands = (
+  Cypress,
+  { auth, firestore }: typeof firebase,
+) => {
+  let currentUser: null | firebase.User = null
+  auth().onAuthStateChanged(user => {
+    currentUser = user
+  })
+
+  Cypress.Commands.add('login', (email, password) => {
+    Cypress.log({
+      displayName: 'login',
+      consoleProps: () => {
+        return { email, password }
+      },
+    })
+    return auth().signInWithEmailAndPassword(email, password)
+  })
+
+  Cypress.Commands.add('logout', () => {
+    const userInfo = currentUser ? currentUser.email : 'Not login yet - Skipped'
+    Cypress.log({
+      displayName: 'logout',
+      consoleProps: () => {
+        return { currentUser: userInfo }
+      },
+    })
+    return auth().signOut()
+  })
+
+  Cypress.Commands.add('firestore', () => {
+    return firestore()
+  })
+}
+
+attachCustomCommands(Cypress, firebase)

cypress/support/index.js → cypress/support/index.ts

@@ -1,3 +1,4 @@
+import './commands'
 // ***********************************************************
 // This example support/index.js is processed and
 // loaded automatically before your test files.

package.json

@@ -42,7 +42,7 @@
     "final-form": "4.18.5",
     "final-form-arrays": "^3.0.1",
     "final-form-calculate": "^1.3.1",
-    "firebase": "5.8.1",
+    "firebase": "^7.0.0",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.1",
     "geolocation-utils": "^1.2.1",