TGIMBA .NET Core Upgrade – Registration Page – Vanilla JS, JQuery JS, Angular 6 Type Script and React/Redux JS w/Selenium Test

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.

Vanilla and JQuery JavaScript

It may seem weird that I am combining these two, but I believe it makes sense.  The main difference (in my opinion) between Vanilla and JQuery are the way they access data and use it.  For example, you obtain an HTML element (among other ways) by document.getElementById(‘id’).  JQuery is $(‘#id’).  The previous version of The Globe In My Bucket Application (TGIMBA) used JQuery and other than server calls and accessing HTML elements, much of the code was traditional JavaScript.  So, I am combining what I can and only leaving what is unique to both as separate.  That said, I am focusing more on Vanilla JavaScript because it is new.  JQuery’s size will be very small in this version of TGIMBA.

So in this implementation:

  • I added the HTML and common JavaScript.
    ggggg
  • I decided to objectify Display. The reason is that because I am using a JavaScript Promise that has a call back and I have to pass the display to the callback.  I added Display.SetView(args) which has the logic to display each view. At this point, its just setting the title.  I also made ServerCalls.js and ServerCall.js objects and added relevant registration calls to both the Vanilla and JQuery versions.
    vj2
  • I found some commonalities, so I started adding some stuff to the BaseController.js
    vj3

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.
Ang6-02

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.

Ang6-02.1

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.

Ang6-1

  • I redirect to the Login Component inside the app.component.ts’s constructor.

Ang6-02.1

  • 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.

Ang6-3

The Angular 5 Type Script base url injection technique did not work for me in Angular 6. I am not sure why, but I found another option using JavaScript. Reference #10 showed me the technique using the windows.location.x set of properties
Ang6-4

React/Redux JavaScript

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.

next

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.

asefasefas

Commonalities

  • 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.

NOTE:

  • 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.

Capture

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.

Stay tuned!

References

  1. https://stackoverflow.com/questions/34331478/angular-redirect-to-login-page
  2. https://www.techiediaries.com/angular-tutorial/
  3. https://stackoverflow.com/questions/47417152/how-to-add-multiple-components-on-same-page
  4. https://angular.io/tutorial/toh-pt3
  5. https://v2.angular.io/docs/ts/latest/tutorial/toh-pt3.html
  6. https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7
  7. https://angular.io/guide/styleguide
  8. https://stackoverflow.com/questions/46200912/angular-4-routing-to-a-route-doesnt-work
  9. https://stackoverflow.com/questions/33571605/angular-2-how-to-navigate-to-another-route-using-this-router-parent-navigate
  10. https://www.bing.com/search?q=window.location.hostname%20AND%20get%20port&qs=ds&form=QBRE
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s