In the segment, I will create placeholders with unit tests for any of the views I anticipate needing for TGIMBA. Before I begin, I do want to point out three things:
- To break with the current TGIMBA, I am going to modify the dashboard to be available on both the mobile and desktop versions.
- I hope to be able to use the same views for both mobile and desktop and distinguish them by using Cascading Style Sheets (CSS) only.
- Two git commits because the list of files was getting large and I wanted to make sure everything got added correctly.
After taking an inventory of the current TGIMBA’s views, I added placeholders under app/components for the following – Dashboard, Static Display, Login, Registration, Add/Edit, Search Entry, Search Results, Item List, Desktop Category Panel, Menu (generic for each menu needed), Header and Footer.
Each one was a carbon copy of each other, so to demonstrate, I will explain the details of the Dashboard:
- I updated the TGIMBA component I created last time.
- I added a unit test looking for a hidden <div> I placed on the page (a way I am going to verify a page exists). I was reading up on what the Angular TestBed fixture objects expose and I was pleased to find out that the good ol’ standard document.getElementById() works.
- It works by looking for this hidden <div> inside dashboard.component.html.
- I added a .css file with the <div> id to hide it from view. I also noticed that global .css seems to be missing. I found references to a styles.css, but that file does not appear to be part of the application I have. I would like to have the .css entry to hide the componentIdentifier <div> I am using in a global file instead of each component. If I discover how, I will update the project. For now though, it will go in each component’s .css file.
- The controller is empty at this point.
Something interesting I noticed. VS 2017’s solution explorer started losing track of the git file status again. However, when I added and commited from the command line, everything was there as expected.
Ok, next time I will start with putting in the dashboard text and status display based on the database.