NOTICE: The TGIMBA git hub repository has been corrupted and I had to start over. The link to the repository is here -> Git Code Commit
Selenium_Tests Git Code Commit (this and all commits back to my last blog post)
Today will be all about the registration page. As you may have noticed, I included all four clients in this post. As I start moving forward through each page, it seems redundant to dedicate a post to each page/component combination. In each page moving forward, I will include what is interesting for my implementation for each client and the Selenium integration test(s).
Reviewing the old site, there are 4 data points – username, password, password confirmation and email.
So in this implementation:
- I found some commonalities, so I started adding some stuff to the BaseController.js
Angular 6 Type Script
This implementation was tough. At first after adding the registration files, I kept getting an obscure build failed error. After some digging, the fix was that the html markup Type Script references (i.e. username, password, etc) has to match the .ts file. Once this happened (initially, the error was not helpful…but reviewing the output revealed the issue), it built correctly.
Another big issue I had was navigating between components. At this point, the work flow is from the app.component.ts to the login on load, login to the registration and then back to the login. To figure this out, I found a lot of posts where the router.navigate(path) method did not work, but the ahref did. I finally found the answer in reference #9. Even though this.router.navigate(‘/myroute’) compiles, it does not seem to work. The secret (apparently) is to send an array with the desired path.
The template I used to create the Angular 6 TypeScript VS 2017 project did not have the previous ClientApp folder with the boiler plate components. So (if you remember from the Angular 6 TypeScript Login Page blog post), I chose to put the Login Component inside the app.component.x files because I didn’t know what to expect for multiple components. Referencing multiple sites (especially 1 & 2), I found that the previous Angular practice of routing was still alive and well.
Taking the routing lesson above:
- I added the components to app.module.ts.
- I redirect to the Login Component inside the app.component.ts’s constructor.
- I added (back) the router output. I stumbled on this a bit because the url kept updating, but the HTML would not display. Very similar to the MasterPage infrastructure from the WebForm days, Angular 6 TypeScript’s router needs a display target.
I added Registration.js to the component and store folders with appropriate code updates. For the most part, this update was looks very similar to the previous Login update.
I started testing and I was hopeful that this would be quick. However, after I a bit, I noticed that the store Registration.js was not being used. Even though the registration page loaded, the Login.js store was still being used. It seems that navigation within a single page React Redux JS application does not work.
However, after reading a bunch of posts, I recreated a single page React Redux JS application using the Visual Studio 2017 wizard and traced the linking system. Turns out my mistake was very simple. I had forgotten to add the Registration.js store component to configureStore.js.
- All four clients use Hyper Text Markup Language (HTML) for display.
- I added Registration() method to WebClient.cs. I also moved WebClient.cs to the Shared project.
- I have also been parking (for the time being) all of the my controller methods in HomeController.cs. This is not a good long term strategy. I have been doing it this way because I want to figure out a way to share the controller(s) among the three solutions.
- Also on my TODO is to start encrypting all data points. I will most likely do that after the clients are done and I re-write the Application Programmatic Interface (API) back end. I will be creating a stand alone API that is called by this client. I will (I hope) be able to use the API for other clients like mobile apps.
This effort completed with the registration integration tests.
I did comment out the Firefox test because I started getting a target not found on the Login page. I will revisit this in the future.