Practical Testing of Firebase Projects

Presented at Shift Remote conference 2020.

Your little Firebase project is getting bigger every day? Never underestimate the need to establish solid and firm integration tests from the get go, which covers Hosting, Firestore, and Cloud Functions.

Transcript

1. Practical Testing of Firebase Projects
   

   View Slide

2. github.com/ariya/hello-firebase-experiment
   

   View Slide

3. Hosting
   

   View Slide

4. $ npm run firebase -- emulators:start
   i hosting: Serving hosting files from: public/
   ✔ hosting: Local server: http://localhost:5000
   ✔ hosting: hosting emulator started at http://localhost:5000
   

   View Slide

5. Functions
   

   View Slide

6. Health Check
   exports.ping = functions.https.onRequest((request, response) => {
   response.send(`OK`);
   });
   

   View Slide

7. Health Check
   exports.ping = functions.https.onRequest((request, response) => {
   response.send(`OK ${Date.now()}`);
   });
   

   View Slide

8. it('should have a working ping function', async function () {
   const res = await axios.get('http://localhost:5000/ping');
   const status = res.data.substr(0, 2);
   const timestamp = res.data.substr(3);
   expect(status).toEqual('OK');
   expect(timestamp).toMatch(/[0-9]+/);
   });
   

   View Slide

9. $ npm run firebase -- emulators:exec "npm test"
   i hosting: Serving hosting files from: public/
   ✔ hosting: Local server: http://localhost:5000
   ✔ hosting: hosting emulator started at http://localhost:5000
   ✔ functions[ping]: http function initialized (http://localhost:5001/firebase/us-
   central1/ping).
   i Running script: npm test
   > npm run jasmine
   Randomized with seed 06465
   Started
   i functions: Beginning execution of "ping"
   127.0.0.1 - - [22/Oct/2020:17:49:19 +0000] "GET /ping HTTP/1.1" 200 16 "-" "axios/0.19.2"
   i functions: Finished "ping" in ~1s
   .
   1 spec, 0 failures
   

   View Slide

10. Firestore
    

    View Slide

11. exports.answer = functions.https.onRequest(async (request, response) => {
    try {
    const doc = await db.collection('universe').doc('answer').get();
    const value = doc.data().value;
    response.send(`Answer is ${value}`);
    } catch (err) {
    response.send(`EXCEPTION: ${err.toString()}`);
    }
    });
    

    View Slide

12. $ npm run firebase -- emulators:exec "npm test"
    EXCEPTION: TypeError: Cannot read property 'value' of undefined
    

    View Slide

13. View Slide

14. $ npm run firebase -- emulator:export spec/fixture
    

    View Slide

15. $ npm run firebase -- emulators:exec "npm test" --import spec/fixture
    ✔ firestore: firestore emulator started at http://localhost:8080
    i hosting: Serving hosting files from: public/
    ✔ hosting: Local server: http://localhost:5000
    ✔ hosting: hosting emulator started at http://localhost:5000
    i Running script: npm test
    i functions: Beginning execution of "answer"
    > Answer is 42
    127.0.0.1 - - [22/Oct/2020:18:30:39 +0000] "GET /answer HTTP/1.1" 200 12 "-" "axios/0.19.2"
    i functions: Finished "answer" in ~1s
    1 spec, 0 failures
    Finished in 0.814 seconds
    ✔ Script exited successfully (code 0)
    

    View Slide

16. Epilog
    

    View Slide

17. name: Tests
    jobs:
    test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
    uses: actions/setup-node@v1
    with:
    node-version: 10.x
    - run: npm ci
    - run: npm run firebase -- emulators:exec "npm test" --import fixture/ --project hello
    env:
    CI: true
    GitHub Actions
    

    View Slide

18. Thank You
    Some artworks are from http://openclipart.org.
    @ariyahidayat
    

    View Slide