This project was generated with Angular CLI version 12.2.8.
- Setup after cloning
- Setup
- ** IGNORE BELOW HERE **
- Todo
- Firebase CLI
- Description
- Setup
- Test security rules using emulator
- Testing Security Rules with Jest
- Run app using emulator
- Run Cypress tests with emulator
- Scripts
- References
- Release Notes
- Notes
- aaa
Service account file from Firebase.
You need Java to run the emulators. wsl2 test edit
npx ng generate @schematics/angular:library --name=MyLibrary --skip-install --skip-package-json --skip-ts-config
Create the following files.
{
"projects": {
"default": "firebase project"
}
}
Edit the following scripts:
Edit --project
to use your demo project.
"scripts": {
"emulators:start-demo": "firebase emulators:start --only firestore,auth --project demo-1",
}
src > app > firebase
// This file should be added to .gitignore.
import { FirebaseConfig } from './firebase-config-interface';
export const firebaseConfigDev: FirebaseConfig = {
apiKey: 'XXXXXXXXX',
authDomain: 'XXXXXXXXX',
databaseURL: 'XXXXXXXXX',
projectId: 'XXXXXXXXX',
storageBucket: 'XXXXXXXXX',
messagingSenderId: 'XXXXXXXXX',
appId: 'XXXXXXXXX',
};
// This file should be added to .gitignore.
import { FirebaseConfig } from './firebase-config-interface';
export const firebaseConfigProd: FirebaseConfig = {
apiKey: 'XXXXXXXXX',
authDomain: 'XXXXXXXXX',
databaseURL: 'XXXXXXXXX',
projectId: 'XXXXXXXXX',
storageBucket: 'XXXXXXXXX',
messagingSenderId: 'XXXXXXXXX',
appId: 'XXXXXXXXX',
};
Edit the following scripts:
Edit GCLOUD_PROJECT
to use your demo project.
"scripts": {
"cypress:emulate-demo": "cross-env FIRESTORE_EMULATOR_HOST=\"localhost:8080\" FIREBASE_AUTH_EMULATOR_HOST=\"localhost:9099\" CYPRESS_USE_DEMO_PROJECT=\"true\" GCLOUD_PROJECT=\"demo-1\" npm run cypress:open",
}
Edit GCLOUD_PROJECT
to use your real project.
"scripts": {
"cypress:emulate-real": "cross-env FIRESTORE_EMULATOR_HOST=\"localhost:8080\" FIREBASE_AUTH_EMULATOR_HOST=\"localhost:9099\" GCLOUD_PROJECT=\"emulators-codelab-a5a89\" npm run cypress:open",
}
Service account file from Firebase.
cypress > support > firebase
// This file should be added to .gitignore.
import { FirebaseConfig } from './firebase-config-interface';
export const firebaseConfigDev: FirebaseConfig = {
apiKey: 'XXXXXXXXX',
authDomain: 'XXXXXXXXX',
databaseURL: 'XXXXXXXXX',
projectId: 'XXXXXXXXX',
storageBucket: 'XXXXXXXXX',
messagingSenderId: 'XXXXXXXXX',
appId: 'XXXXXXXXX',
};
test https://firebase.google.com/docs/emulator-suite/connect_auth
There are 3 scenarios when testing with Cypress:
Run npm scripts:
-
Using real Firebase projects.
- start
- cypress:open
-
Using real firebase projects with emulators.
- emulators:start-real
- start:start:emulator-real
- cypress:emulate-real
-
Using demo projects with emulators.
- emulators:start-demo
- start:emulator-demo
- cypress:emulate-demo
- Testing data service.
- Install Firebase CLI.
npm install -g firebase-tools
firebase init
Firestore and Emulators
Authentication, Functions, Firestore,& Hosting emulators.
Intended to show:
- The use of AngularFire with the Firebase emulator.
- The use of Jest for testing the Firestore security rules with the Firebase emulator.
- The use of Cypress to test an app using AngularFire with the Firebase emulator.
In the following YOUR_PROJECT_ID is the id of your Firebase project.
Add the following files
serviceAccount.json
.firebaserc
test-security-rules\firebase-info.ts
src\app\firebase\firebase-config.ts
cypress\support\firebase\firebase-config.ts
Run npm install
in root and in `test-security-rules.
To generate a private key file for your service account:
-
In the Firebase console, open
Settings > Service Accounts
. -
Click
Generate New Private Key
, then confirm by clickingGenerate Key
. -
Securely store the JSON file containing the key.
{
"projects": {
"default": "YOUR_PROJECT_ID"
}
}
Open test-security-rules
folder in own copy of vscode. This allows the use of the Jest(vscode-jest) extension when developing tests.
Or from this project run scripts
emulators:start
test - test-security-rules
- Open the
test-security-rules
folder in another instance of vscode. This will allow the use of thevscode-jest
extension for working with the tests. - Initially Jest will be stopped.
View > Command Pallete > Jest: Start Ruuner
will start Jest. - The emulator needs to be running for the the tests to pass:
emulators:start
Run scripts
emulators:start
start:emulator
Run scripts
emulators:start
start:emulator
cy:emulate
May have a requirement to run tests which require the emulator to be running. These tests should not run when the emulator is not running.
The current technique is to x
the tests when not needed and f
the tests when they are needed.
Or maybe switch to Jest.
npm run ... |
Description |
---|---|
cy:emulate | Opens Cypress after setting environment variable. |
emulators:start | Starts emulator |
start:emulator | Starts app using the emulator configuration. Requires the emulator to be running. |
Runs security rules tests. Requires the emulator to be running.
Starts emulator and runs security rules tests.
- emulators:start
- Starts emulator
- test-firestore-rules
- Runs security rules tests. Requires the emulator to be running.
- test-firestore-rules:emulator
- Starts emulator and runs security rules tests.
- need to only run tests when emulator is running.
Use Cypress.
-
Cypress
-
UKM
- firestore.rules.spec.ts
- transactions.service.spec.ts
-
tickist-app
-
angularfire
-
document.spec.ts
- provide
-
- @angular-builders/jest
- @firebase/testing
- firebase
- firebase-admin
- firebase-tools
- cypress
- cypress-firebase
- Typescript
After upgrade Angular to v8: Can't resolve all parameters for Component: (?)
thymikee/jest-preset-angular#288
This project was generated with Angular CLI version 9.1.7.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.