I'm going to introduce you to the application that we are going to be testing and automating throughout this course.
You can find it online at todomvc.com, and it's the TodoMVC application.
This is good for us as testers, because we have the same domain context, but different applications that we can look at to understand the technology.
If we want to learn how to automate and angular application, we can come in here and use the TodoMVC application. If we want to see how that compares to automating an Ember app, or a Backbone, or a React app we've got all that in here and it's the same domain.
Good thing for us as testers, if we want to practice our abstraction layers, if we can create a TodoMVC abstraction layer then we can bolt in a backend abstraction just for Backbone, or Ember, or React, and we can learn how to build a decent abstraction.
That's not what we're going to do on this course.
You can see here that I have already started working with this application. You're going to learn how to do all the things that you can see here as you go through the course, but the first thing I have to do then is figure out, "How can I clear all the data?" because I've just started this application up. So, this application is clearly persisting data somewhere.
If I go into the Dev Tools and inspect this, if I go onto the Application, in the application tab we have got Cookies, but the data is not stored in cookies. There's no data stored in there.
We also have the Local Storage. Here you can see all the Todos that have been listed here. We've got, each Todo has got a title; a status as to whether they’ve been completed or not completed. Then, the idea of the Todo.
This is a very simple application in terms of the data used, but the reason I'm going to show you this is that I can right-click on the TodoMVC in the Local Storage, and just you Clear.
Then all the data is gone, and if I refresh the page, I have no data.
What does this application do?
Well, very simply, let me get rid of the Dev Tools. I can create a Todo and “do something”. Then, I can mark it completed. I can filter my Todos to show what are the completed ones.
There's the ones that are active. There's no active ones.
Let's create an active one, “hello”. So, we've got an active one. We've got a completed one. There's all our Todos. I could delete them here. Then, I can clear all the completed ones. Let me just again, “hello”, “there”.
I can toggle all the Todo status, and it shows me down the bottom here how many items.
I can filter, I can create, I can amend. I can set them back to completed, create Todos, adjust their state. Delete them, filter them to render them. It's a very simple application.
Now, what's interesting here is that a single-page application.
So even though when I do Active, look it's changing the URL up here. It's not actually reloading the page.
Also, when I use this application and Inspect it and look at the Network tabs when I create a “new one”.
Now because it's a single-page application, if I look in sources, and I look at page, I can see all the information that I need to understand this application in one place at the point that the application is loaded.
I can see the main index page. I can see that there's some node modules being used.
I can see the CSS. I think these are common to all the different parts of the application. I can see the CSS that's in there. There's a base CSS class.
Let me show you one more thing.
If I have a quick look here at the page source, this is a page source that is loaded when the application comes up.
There's no Todos mentioned in there. This is a very simple application here.
If I look at the DOM view here, I can see the main application here.
Here's the main section, and here's all the Todos that are in there.
It's a very simple application, which is good for us when we're starting.
That's just a quick introduction to the application we're going to look at.
Experiment with the app, play with it, get a feel for how it works. Open up the inspect tools, have a look at the network tab, have a look at the application, have a look at the local storage so you understand how it's working.