Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

View prescottprue's full-sized avatar

Scott Prue prescottprue

View GitHub Profile
@prescottprue
prescottprue / SomeComponent.jsx
Last active February 11, 2021 03:59
Custom hook which makes use of reactfire hooks
import React, { useCallback } from 'react';
import { useFirestoreCollectionData, useFirestore } from 'reactfire';
function useProjects() {
// lazy load the Firestore SDK
const firestore = useFirestore()
const projectsRef = firestore.collection('projects')
// subscribe to the do throws a Promise for Suspense to catch,
// and then streams live updates
@prescottprue
prescottprue / snapshotResolver.js
Created November 26, 2018 21:54
Jest snapshot resolver for snapshots at top level of repo when tests are in component folders.
const path = require('path')
const rootDir = path.resolve(__dirname, '..')
module.exports = {
/** resolves from test to snapshot path */
resolveSnapshotPath: (testPath, snapshotExtension) => {
return testPath.replace('src/', '__snapshots__/') + snapshotExtension
},
@prescottprue
prescottprue / npmScripts.json
Created November 25, 2018 00:11
Npm scripts for cypress-firebase + cypress tests
"scripts": {
"build:testConfig": "cypress-firebase createTestEnvFile",
"test": "npm run build:testConfig && cypress run",
"test:open": "npm run build:testConfig && cypress open",
"test:stage": "npm run test:run -- --env envName=stage",
"test:open:stage": "npm run test:open -- --env envName=stage",
"test:open:debug": "cross-env DEBUG=cypress:* npm test:open"
}
@prescottprue
prescottprue / cypressPlugins.js
Last active November 30, 2018 20:07
Cypress plugin file for setting baseUrl to localhost or firebase url.
const cypressFirebasePlugin = require('cypress-firebase').plugin
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
// Return extended config (with settings from .firebaserc)
return cypressFirebasePlugin(config)
}
@prescottprue
prescottprue / createSelector.js
Created November 24, 2018 23:53
Super simple utility for creating selector string from a selector value for use in Cypress tests
/**
* Create a selector string from a selector value.
* @param {String} selectorValue - Value of the selector
* @example
* createSelector('some-btn')
* // => [data-test=some-btn]
*/
export function createSelector(selectorValue) {
return `[data-test=${selectorValue}]`
}
@prescottprue
prescottprue / Project.spec.js
Last active December 1, 2018 09:57
Cypress test of Firebase app route that requires auth
const TEST_PROJECT_PATH = 'projects/123abc'
const fakeProject = {
name: 'My Project'
}
describe('Project Detail Page', () => {
beforeEach(() => {
// Login using custom token
cy.login()
// Go to projects page
@prescottprue
prescottprue / createStore.js
Last active December 1, 2018 09:54
Setup of redux store for a Firebase application using cypress-firebase to test
import { createStore, compose } from 'redux'
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'
import 'firebase/firestore' // make sure you add this for firestore
import { reactReduxFirebase } from 'react-redux-firebase'
import rootReducer from './reducer'
export default function configureStore(initialState, history) {
// Initialize firebase app if instance does not already exist
@prescottprue
prescottprue / commands.js
Created November 24, 2018 03:54
Attaching custom commands from cypress-firebase
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/firestore';
import { attachCustomCommands } from 'cypress-firebase';
const projectId = Cypress.env('FIREBASE_PROJECT_ID')
const env = Cypress.env('env') || 'stage'
const apiKey = Cypress.env('FIREBASE_API_KEY')
@prescottprue
prescottprue / Account.spec.js
Last active December 1, 2018 09:58
Cypress test for verifying app writes valid data to database
const USER_PROFILE_PATH = `users/${Cypress.env('TEST_UID')}`
describe('Account Page', () => {
beforeEach(() => {
// Login using custom token
cy.login()
// Go to account page
cy.visit('/account')
})
@prescottprue
prescottprue / Projects.spec.js
Last active November 24, 2018 03:44
Cypress test to confirm a Firebase app correctly routes authed/unauthed users.
describe('Projects Page', () => {
describe('when not authenticated', () => {
before(() => {
// Attempt to go to /projects (requires user to be logged in)
cy.visit('/projects')
})
it('Redirects to Home (/)', () => {
cy.url().should('equal', '/')
});
})