Skip to content

Commit 10e2be7

Browse files
prescottpruedependabot[bot]
prescottprue
and
dependabot[bot]
authored
v1.4.2 (#149)
* chore(docs): remove references to old API including createTestEnvFile (closes #143) * build(deps): bump lodash from 4.17.15 to 4.17.19 (#147) * build(deps): bump lodash from 4.17.15 to 4.17.19 in /examples/basic (#146) * chore(ci): add node 14 to versions matrix of verify workflow * chore(ci): add cancel previous runs step * chore(ci): switch to codecov custom action now this it does not depend on a docker image * chore(examples): update example dependencies Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
1 parent bd94248 commit 10e2be7

File tree

13 files changed

+2484
-2142
lines changed

13 files changed

+2484
-2142
lines changed

‎.github/workflows/publish.yml

+9-5
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ jobs:
1111
publish-npm:
1212
runs-on: ubuntu-latest
1313
steps:
14+
- name: Cancel Previous Runs
15+
uses: styfle/[email protected]
16+
with:
17+
access_token: ${{ github.token }}
18+
1419
- name: Checkout code
1520
uses: actions/checkout@v2
1621

@@ -94,11 +99,10 @@ jobs:
9499
name: build
95100
path: lib
96101

97-
# Upload to codecov.io. Curl used in place of codecov/codecov-action
98-
# due to long build time. See https://github.com/codecov/codecov-action/issues/21
99-
- name: Upload Coverage
100-
if: steps.check.outputs.changed == 'true'
101-
run: bash <(curl -s https://codecov.io/bash) || echo 'Codecov failed to upload'
102+
- name: Upload Test Coverage
103+
uses: codecov/codecov-action@v1
104+
with:
105+
fail_ci_if_error: true
102106

103107
- name: Create Release
104108
if: steps.check.outputs.changed == 'true'

‎.github/workflows/verify.yml

+11-5
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,13 @@ jobs:
88
runs-on: ubuntu-latest
99
strategy:
1010
matrix:
11-
node-version: [10.x, 12.x]
11+
node-version: [10.x, 12.x, 14.x]
1212
steps:
13+
- name: Cancel Previous Runs
14+
uses: styfle/[email protected]
15+
with:
16+
access_token: ${{ github.token }}
17+
1318
- name: Checkout code
1419
uses: actions/checkout@v2
1520

@@ -59,7 +64,8 @@ jobs:
5964
- name: Size Check
6065
run: $(yarn bin)/size-limit
6166

62-
# Upload to codecov.io. Curl used in place of codecov/codecov-action
63-
# due to long build time. See https://github.com/codecov/codecov-action/issues/21
64-
- name: Upload Coverage
65-
run: bash <(curl -s https://codecov.io/bash) || echo 'Codecov failed to upload'
67+
- name: Upload Test Coverage
68+
uses: codecov/codecov-action@v1
69+
with:
70+
fail_ci_if_error: false
71+

‎README.md

+2-3
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,10 @@
77
[![License][license-image]][license-url]
88
[![Code Style][code-style-image]][code-style-url]
99

10-
> Utilities and cli to help testing Firebase projects with Cypress
10+
> Cypress plugin and custom commands for testing Firebase projects
1111
1212
## What?
1313

14-
- Test environment config generation (including custom auth token) with [`createTestEnvFile`](#createTestEnvFile)
1514
- [Custom cypress commands](https://docs.cypress.io/api/cypress-api/custom-commands.html#Syntax) for auth and database interactions:
1615
- [cy.login][1]
1716
- [cy.logout][4]
@@ -31,7 +30,7 @@ If you are interested in what drove the need for this checkout [the why section]
3130

3231
**Note:** These instructions assume your tests are in the `cypress` folder (cypress' default). See the [folders section below](#folders) for more info about other supported folders.
3332

34-
1. Install `cypress-firebase` and [`firebase-admin`](https://www.npmjs.org/package/firebase-admin) both: `npm i --save-dev cypress-firebase firebase-admin` or `yarn add -D cypress-firebase firebase-admin --save-dev`
33+
1. Install `cypress-firebase` and [`firebase-admin`](https://www.npmjs.org/package/firebase-admin) both: `yarn add -D cypress-firebase firebase-admin` or `npm i --save-dev cypress-firebase firebase-admin`
3534
1. Go to project setting on firebase console and generate new private key. See how to do so [in the Google Docs](https://sites.google.com/site/scriptsexamples/new-connectors-to-google-services/firebase/tutorials/authenticate-with-a-service-account).
3635
1. Add `serviceAccount.json` to your `.gitignore` (THIS IS VERY IMPORTANT TO KEEPING YOUR INFORMATION SECURE!)
3736
1. Save the downloaded file as `serviceAccount.json` in the root of your project (make sure that it is .gitignored) - needed for `firebase-admin` to have read/write access to your DB from within your tests

‎examples/basic/README.md

+153-121
Original file line numberDiff line numberDiff line change
@@ -2,147 +2,179 @@
22

33
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
44

5-
65
## How Was It Made?
6+
77
### Project Creation
8+
89
1. `create-react-app basic && cd basic`
910
1. Add some useful tools: `yarn add lodash` or `npm i --save lodash`
1011

1112
### Add Firebase
13+
1214
1. Install Firebase library: `yarn add firebase` or `npm i --save firebase`
1315
1. Add Firebase config to `src/config.js`:
14-
```js
15-
export const firebase = {
16-
apiKey: "AIzaSyCTUERDM-Pchn_UDTsfhVPiwM4TtNIxots",
17-
authDomain: "redux-firebasev3.firebaseapp.com",
18-
databaseURL: "https://redux-firebasev3.firebaseio.com",
19-
projectId: "redux-firebasev3",
20-
storageBucket: "redux-firebasev3.appspot.com",
21-
messagingSenderId: "823357791673"
22-
}
23-
```
16+
17+
```js
18+
export const firebase = {
19+
apiKey: "AIzaSyCTUERDM-Pchn_UDTsfhVPiwM4TtNIxots",
20+
authDomain: "redux-firebasev3.firebaseapp.com",
21+
databaseURL: "https://redux-firebasev3.firebaseio.com",
22+
projectId: "redux-firebasev3",
23+
storageBucket: "redux-firebasev3.appspot.com",
24+
messagingSenderId: "823357791673",
25+
};
26+
```
27+
2428
1. Add `src/initFirebase.js` - a util to import Firebase and initialize it (supports already initialized Firebase instance on window for testing):
2529

26-
```js
27-
import firebase from 'firebase/app'
28-
import 'firebase/auth'
29-
import 'firebase/database'
30-
import 'firebase/firestore' // make sure you add this for firestore
31-
import { firebase as fbConfig } from './config'
32-
33-
let firebaseInstance
34-
35-
export default function initFirebase(initialState, history) {
36-
if (firebaseInstance) {
37-
return firebaseInstance
38-
}
39-
// Handle initializeing firebase app if not already on window (when running tests)
40-
if (window.fbInstance) {
41-
firebaseInstance = window.fbInstance
42-
}
43-
// Init Firebase if an instance doesn't already exist
44-
if (!firebaseInstance) {
45-
firebase.initializeApp(fbConfig)
46-
firebaseInstance = firebase
47-
}
48-
// Return Firebase instance
49-
return firebaseInstance
30+
```js
31+
import firebase from "firebase/app";
32+
import "firebase/auth";
33+
import "firebase/database";
34+
import "firebase/firestore"; // make sure you add this for firestore
35+
import { firebase as fbConfig } from "./config";
36+
37+
let firebaseInstance;
38+
39+
export default function initFirebase(initialState, history) {
40+
if (firebaseInstance) {
41+
return firebaseInstance;
5042
}
51-
```
43+
// Handle initializeing firebase app if not already on window (when running tests)
44+
if (window.fbInstance) {
45+
firebaseInstance = window.fbInstance;
46+
}
47+
// Init Firebase if an instance doesn't already exist
48+
if (!firebaseInstance) {
49+
firebase.initializeApp(fbConfig);
50+
firebaseInstance = firebase;
51+
}
52+
// Return Firebase instance
53+
return firebaseInstance;
54+
}
55+
```
5256

5357
1. Load Firebase data in the home component:
54-
55-
```jsx
56-
import React, { Component } from 'react';
57-
import { invoke, map } from 'lodash';
58-
import logo from './logo.svg';
59-
import initFirebase from './initFirebase'
60-
import Project from './Project'
61-
import './App.css';
62-
63-
const fbInstance = initFirebase()
64-
65-
class App extends Component {
66-
constructor() {
67-
super()
68-
this.state = { loading: false }
69-
}
70-
71-
componentDidMount() {
72-
this.setState({ loading: true })
73-
fbInstance.database()
74-
.ref('projects')
75-
.limitToFirst(10)
76-
.on('value', (snap) => {
58+
59+
```jsx
60+
import React, { Component } from "react";
61+
import { invoke, map } from "lodash";
62+
import logo from "./logo.svg";
63+
import initFirebase from "./initFirebase";
64+
import Project from "./Project";
65+
import "./App.css";
66+
67+
const fbInstance = initFirebase();
68+
69+
class App extends Component {
70+
constructor() {
71+
super();
72+
this.state = { loading: false };
73+
}
74+
75+
componentDidMount() {
76+
this.setState({ loading: true });
77+
fbInstance
78+
.database()
79+
.ref("projects")
80+
.limitToFirst(10)
81+
.on(
82+
"value",
83+
(snap) => {
7784
this.setState({
7885
projects: snap.val(),
79-
loading: false
80-
})
81-
}, (err) => {
86+
loading: false,
87+
});
88+
},
89+
(err) => {
8290
this.setState({
8391
loading: false,
84-
error: invoke(err, 'toString') || err
85-
})
86-
})
87-
}
88-
89-
render() {
90-
const { loading, projects } = this.state
91-
return (
92-
<div className="App">
93-
<header className="App-header">
94-
<img src={logo} className="App-logo" alt="logo" />
95-
<p>
96-
Edit <code>src/App.js</code> and save to reload.
97-
</p>
98-
{
99-
loading
100-
? <div>Loading...</div>
101-
: !projects
102-
? <div>Projects not found</div>
103-
: map(projects, (project, projectKey) =>
104-
<Project
105-
key={`Project-${projectKey}`}
106-
project={project}
107-
projectId={projectKey}
108-
/>
109-
)
110-
}
111-
</header>
112-
</div>
92+
error: invoke(err, "toString") || err,
93+
});
94+
}
11395
);
114-
}
11596
}
11697

117-
export default App;
118-
```
98+
render() {
99+
const { loading, projects } = this.state;
100+
return (
101+
<div className="App">
102+
<header className="App-header">
103+
<img src={logo} className="App-logo" alt="logo" />
104+
<p>
105+
Edit <code>src/App.js</code> and save to reload.
106+
</p>
107+
{loading ? (
108+
<div>Loading...</div>
109+
) : !projects ? (
110+
<div>Projects not found</div>
111+
) : (
112+
map(projects, (project, projectKey) => (
113+
<Project
114+
key={`Project-${projectKey}`}
115+
project={project}
116+
projectId={projectKey}
117+
/>
118+
))
119+
)}
120+
</header>
121+
</div>
122+
);
123+
}
124+
}
125+
126+
export default App;
127+
```
119128

120129
### Add Cypress Testing
130+
121131
1. Add `.env` that looks like so (to skip warnings due to Cypress deps being out of date):
122-
```
123-
SKIP_PREFLIGHT_CHECK=true
124-
```
125-
1. Install Cypress: `yarn add --dev cypress` or `npm i --save-dev cypress`
126-
1. Install deps for testing: `yarn add --dev cypress-firebase firebase-tools-extra cross-env` or `npm i --save-dev cypress-firebase firebase-tools-extra cross-env`
127-
1. Run `cypress open` to scaffold out Cypress project and open Cypress UI
128-
1. Close the Cypress UI and remove the `cypress/examples` folder
129-
1. Add npm scripts:
130-
```json
131-
"build:testConfig": "cypress-firebase createTestEnvFile",
132-
"test": "npm run build:testConfig && cross-env CYPRESS_baseUrl=http://localhost:3000 cypress run",
133-
"test:ui": "npm run build:testConfig && cross-env CYPRESS_baseUrl=http://localhost:3000 cypress open",
134-
```
135-
1. Add custom commands and Firebase initialization to `cypress/support/commands.js`:
136-
```js
137-
import firebase from 'firebase/app';
138-
import 'firebase/auth';
139-
import 'firebase/database';
140-
import 'firebase/firestore';
141-
import { attachCustomCommands } from 'cypress-firebase';
142-
const fbConfig = {
143-
// your firebase config
144-
}
145-
window.fbInstance = firebase.initializeApp(fbConfig);
146-
// add cy.login, cy.logout, cy.callRtdb, and cy.callFirestore
147-
attachCustomCommands({ Cypress, cy, firebase })
148-
```
132+
133+
```
134+
SKIP_PREFLIGHT_CHECK=true
135+
```
136+
137+
1. Install `cypress-firebase` and [`firebase-admin`](https://www.npmjs.org/package/firebase-admin) both: `npm i --save-dev cypress-firebase firebase-admin` or `yarn add -D cypress-firebase firebase-admin`
138+
1. Go to project setting on firebase console and generate new private key. See how to do so [in the Google Docs](https://sites.google.com/site/scriptsexamples/new-connectors-to-google-services/firebase/tutorials/authenticate-with-a-service-account).
139+
1. Add `serviceAccount.json` to your `.gitignore` (THIS IS VERY IMPORTANT TO KEEPING YOUR INFORMATION SECURE!)
140+
1. Save the downloaded file as `serviceAccount.json` in the root of your project (make sure that it is .gitignored) - needed for `firebase-admin` to have read/write access to your DB from within your tests
141+
1. Add the following your custom commands file (`cypress/support/commands.js`):
142+
143+
```js
144+
import firebase from "firebase/app";
145+
import "firebase/auth";
146+
import "firebase/database";
147+
import "firebase/firestore";
148+
import { attachCustomCommands } from "cypress-firebase";
149+
150+
const fbConfig = {
151+
// Your config from Firebase Console
152+
};
153+
154+
firebase.initializeApp(fbConfig);
155+
156+
attachCustomCommands({ Cypress, cy, firebase });
157+
```
158+
159+
1. Make sure that you load the custom commands file in an `cypress/support/index.js` like so:
160+
161+
```js
162+
import "./commands";
163+
```
164+
165+
**NOTE**: This is a pattern which is setup by default by Cypress, so this file may already exist
166+
167+
1. Setup plugin adding following your plugins file (`cypress/plugins/index.js`):
168+
169+
```js
170+
const admin = require("firebase-admin");
171+
const cypressFirebasePlugin = require("cypress-firebase").plugin;
172+
173+
module.exports = (on, config) => {
174+
const extendedConfig = cypressFirebasePlugin(on, config, admin);
175+
176+
// Add other plugins/tasks such as code coverage here
177+
178+
return extendedConfig;
179+
};
180+
```

0 commit comments

Comments
 (0)