Monday, May 27, 2019

#CodeConfident: Angular7 Example App

After my recently fulfilled challenge to implement a backend feature for an existing application, I now wanted to do the same on the frontend side. Once again, as soon as I had found my practice application to extend, I could not let go. What helped me accomplish my goal within one week in the end was to pair up, this time with the wonderful Mirjana Andovska! We had already paired on my Testing Tour last year which was a great experience. Now she saw my call for collaboration for my #CodeConfident challenge on Twitter and scheduled a session with me. It was super fun and enlightening and it definitely won't be the last! I feel really honored and lucky that even further pairing sessions are coming up Amitai Schleier and Parveen Khan. Can't wait!


May 19


May 20


May 21

  • small things are easy to change, like removing the GitHub link, removing the footer, etc.; looking for something bigger where I can learn more
  • learned about Firebase, the example app is using a cloud database for all instances, same for the deployed example https://www.angularexampleapp.com
  • learned that even opening a hero detail page will result in POST requests to the Firebase database (interesting to follow up on!)
  • one of the first goals was to be able to open the detail page for newly created heroes instead of getting routed to the hero list itself --> found this decision is done in the heroes list page component html, just a basic case detection
  • feels now that this is the right practice project to work on, forked it
  • played a bit more with "default" and non-default heroes, adapted the search to include both, checked how to display default avatar images for detail page for non-default heroes etc.
  • feature idea would be the one from the project: implement material tables

May 22

  • recent feature idea were to implement tables
  • alternative feature idea would be to implement "Personal heroes", the heroes you liked
  • tried the latter, copy & paste & adapt

May 23


May 24

  • made first steps in Visual Studio Code, had not used it as IDE yet, got really popular at work for frontend development, even over IntelliJ
  • filtered list of heroes not displayed; debugging in Chrome shows that heroes is undefined
  • TODO: display list; write tests

May 25

  • cleaned commits to what is already working (without filtering for heroes that I liked)
  • tried to push, got error that translations are not configured correctly for spec file; lesson learned: run the tests first... -_-
  • found the culprit, fixed, now tests are passing
  • learned how git controls work in Visual Studio Code; yet lacking permissions to push
  • pushed again using IntelliJ UI, failed again due to quite cryptic message
    Push failed: 0% compiling�������������� 10% building 0/0 modules 0 active���������������������������������� 10% building 0/1 modules 1 active ...s! ...
  • using git push in command line finally revealed the prerequisites to push, like running tests in advance etc.; this explained why it took so long... and it worked in the end!
  • TODO: learn how to add authorization to VisualCode to be able to push from IDE as well
  • TODO: filter for heroes I liked only

May 26

  • paired with Mirjana Andovska
  • Mirjana already checked out my practice project and had a look how to filter for personal heroes
  • we found out that the live app URL https://www.angularexampleapp.com runs into a timeout (522) for her, yet does work for me although be both shared the same browser versions; she's located in Skopje, would be interesting path to investigate in itself (yet not now)
  • we shared our approaches how to filter for personal heroes, by using the Angular filters in the html or directly in the TypeScript component like it's also done on the home page; I showed I tried to use the filter function there yet no personal hero was listed; Mirjana had found that the value was always reset to false by logging, so the filter would work it just did not list any as they were set again to false
  • in the hero model the attribute personalHero was set to false whenever we fetched them; we could confirm this by adding simple console logs; for now we just used simple console logs, yet for proper logging we would use the framework used; Mirjana: "logging is like adding adjectives in an essay"
  • we changed the constructor's attribute value to and it was working!
    this.personalHero = hero.personalHero || false;
  • when testing this in different browsers we found that now not only any likes are stored in the global database, but seemingly also the personalHero flag; which we did not intend to, to not interfere with the global database but keep things local for practicing
  • we started learning more about Firebase and how to verify whether we actually stored it globally
    https://medium.com/factory-mind/angular-firebase-typescript-step-by-step-tutorial-2ef887fc7d71
    https://www.learnhowtoprogram.com/javascript/angular-extended/firebase-retrieving-data
    https://www.learnrxjs.io/operators/transformation/map.html
  • we found that we could log the values when subscribing:
    getHero(id: string): Observable<any> {
      const retrievedHero = this.afs.doc(`${AppConfig.routes.heroes}/${id}`).get().pipe(
        map((hero) => {
          return new Hero({id, ...hero.data()});
        }),
        tap(() => LoggerService.log(`fetched hero ${id}`)),
        catchError(HeroService.handleError('getHero', []))
      );

      const subscribe = retrievedHero.subscribe(val => console.log(val));
      return null;
    }
  • this way we could verify it's really stored in the global database; when looking at the tests, we found the same way was done for the mocked databases! Lesson learned: should have looked at the tests in the beginning :)
  • we reset all values by setting the flag to false again, and then re-implemented it using the local storage of the browser instead, setting a new entry for each hero we liked; we tested things out, it worked! we noted for later to change this store a list of ids instead to avoid creating new entries and save memory (https://www.taniarascia.com/how-to-use-local-storage-with-javascript/)
  • we wanted to have our feature covered in the tests as well; added expectations that a hero should be a personal hero after liking them; wanted to test the filtering as well; learned to add a new fixture for a different test setup
  • shortly investigated how to run a single test but then skipped this for later; UPDATE: as we're using Karma & Jasmine here, we can just focus on one test or suite by using "fit" instead of "it" or "fdescribe" instead of "describe"; f = focused, x = ignored
  • we cleaned up files for commit and tried to push; yet TSLint checks failed; we ran the tests but forgot to run about them! fixed them; then the push was successful :D
  • the scope of my personal challenge is now fulfilled, yet we identified next steps we could do to improve and extend the code to practice further:
    1. store the personal heroes ids in an array in the local storage
    2. add proper logging using the framework used
    3. write e2e tests for our new feature
    4. show the user which heroes they liked, either by adding an icon or not allowing them to vote again for the same hero and marking the heart icon gray
  • Retrospective:
    • Mirjana: normally it's a great thing to go to the tests first, can learn a lot from them; now we rushed ahead due to time, but would have been valuable as well
    • Mirjana: we had to be reminded of writing tests; interestingly this would be the first thing we as testers would remark, yet when developing we often stay inside our little box, this is why it's crucial to have someone with a different perspective looking at it from a different angle
    • Lisi: learned there's so much more to learn, there are so many more question marks now in my head as it usually is with learning and trying to puzzle all bits and pieces of knowledge together; thank you so much for sharing your knowledge with me, learned a lot in this session!
    • Mirjana this whole challenge idea a super cool thing to learn outside of our work's boundaries! Would like to create a GitHub account herself and contribute to the project or future ones, we could create pull requests and also learn so much by reading code from each other
    • Mirjana: you reminded me how to learn! use a small project to practice, and especially pair! Lisi: pairing helps me so much, it keeps me accountable and also together we always generated new ideas so we did not get stuck, or at least quickly unstuck again
    • Looking back, we paired for nearly 4h instead of the originally planned 1.5h! It was fun and super enlightening, and afterwards we could fully enjoy our evenings :)

What else?

The great news is: I fulfilled now the promise to myself to have at least 5 repositories published on GitHub. Even in 5 months! Still can't quite believe it. The next and final step: build an application from scratch which will serve as my proof of concept. I'm really excited. And that's not the only thing I'm excited about these days. These are busy days, great days, and especially exciting days!

No comments:

Post a Comment