In this lesson, we'll be setting up our project from scratch.
If you are already experienced working with Vite
and setting up Vue Test Utils with Vue and TypeScript,
feel free to just download the zip or clone the repository in the description
and move on to the next lesson.
Getting a project up and running with tests, TypeScript,
and a front-end framework used to be a pretty daunting task.
Thankfully nowadays,
a lot of this work has been simplified thanks to resources like Vite.
Vite is a modern web development tool
that will not only give us a ready-to-go boilerplate for our project,
but it will also be our bundler and development server resource.
To use it, you have to have Node installed in your system.
To get our project boilerplate, we need to type pnpm create vite.
Please note that even though I'm using pnpm,
any Node package manager should work just fine.
If you prefer to use npm or Yarn, please feel free to do so.
Now we can see that the wizard is asking me for my project name.
I'm going to call it Wordle.
And the framework, we're going to be using Vue today.
For the variant selection,
I like to use the customization from create Vue.
It will allow us to have Vue test Utils and Vitest, already pre-configured for us.
We won't be exploring Vue Router, Pinia, and JSX supports in this course
because my intention is to keep our application as lean as possible
so we can focus on the core elements, which is tests.
In regards to testing,
Vitest will allow us to write both unit or feature tests.
Feature tests will be the main driving force
for the desired criteria that our code will need to meet.
Finally, we won't be writing E2E tests for this project,
but I do want to mention that E2E tests are great
for protecting your most important user stories.
We'll be discussing different types of tests
and their respective purpose in the test hierarchy
in more details in the next episode.
Now that the project has been created, let's open it.
I've been working with JetBrains IDEs for years now.
In this case, I'm using PhpStorm,
but feel free to use whatever IDE you prefer.
This should not affect your experience with this course.
If you are using VS Code,
please do keep in mind that the Vue team has made a recommended setup available
right at the README of this boilerplate.
Let's see if our setup is properly working.
We'll start by installing our dependencies with pnpm install.
Then we'll initialize our repository with git init.
Finally, let's make our first commit.
We'll start by doing git add . to add all the files,
then git commit -m with the respective commit message.
We should try to run our tests.
Since we'll be writing feature tests with Vitest,
I suggest renaming the script on line 9 to just test.
Now if we run pnpm test,
we can see that we already have one test written for us.
It is in HelloWorld.spec.ts inside of our tests folder.
Let's find it.
Go to source, components, tests,
HelloWorld.spec.ts is right there.
It looks like the example test we have
is checking to see whether a message we pass
to the HelloWorld component as a prop
gets rendered to the page.
Let's go to that component.
Now what would happen
if we were to just hard code a text
that has nothing to do with the message we're passing to the user?
We can see that Vitest immediately has let us know that our test is failing.
This instantaneous feedback is one of the reasons
why we'll strive to have a robust test suite in our project.
Do note that usually IDEs
offer a dedicated vue for visualizing your tests.
In the case of WebStorm or PhpStorm,
we can go to edit configurations,
press on the plus icon,
and finally select Vitest.
If you're using VS Code, I've included links to a plugin
that you can install to get support for Vitest in VS Code as well.
Okay, let's cancel our process that is running tests in the terminal.
We can close the terminal as well.
Now by pressing play,
we can see that we have a very nice UI for the execution of our tests.
Alright, so we're in the red stage right now.
Let's undo the changes that we've done by doing git research hard.
This has undone all the changes we haven't committed,
and we can see that our tests are back to green again.
We should also make sure that the application is being properly served
in our development environment.
For that, let's just run pnpm dev.
Perfect! We have a working Vue TypeScript application with tests.
Next, we should remove all the excess code we have in our boilerplate,
just so we can have a cleaner start.
Let's get rid of all the excess components.
I want to keep just app.vue and HelloWorld.
So let's get rid of these two over here.
Let's remove all the icons, so deleting the icons folder.
And let's delete the assets folder as well.
Next, if we go to app.vue,
And let's simplify the template
to just have the HelloWorld component being rendered.
Everything else can be deleted.
The styling can be removed as well.
We're going to be worrying about styling in the future.
We are almost there.
Let's take a look at main as well.
assets/main.css no longer exists, so...
let's remove that.
All right. If we take a look at our tests, we are still passing.
Another thing that I want to do
finally is the HelloWorld component itself can be simplified.
Let's just have it render a paragraph that contains the message prop.
Also, once again, styles don't matter for us at the moment.
And we are still passing.
If we go back to the browser,
we can see that our app looks much simpler now.
All right. Let's commit these changes.
To do this, let's go back to the IDE and make another commit.
This time, let's call it remove clutter
because we're removing a bunch of code that doesn’t matter to us.
Great. Another thing that I want to do as well,
just like a final touch,
is let's rename our HelloWorld component to WordleBoard.
In PhpStorm, I can do this by doing shift+F6
and simply change this to WordleBoard vector.
Okay. Same over here.
WordleBoard.
Finally, I want to replace every text reference
to HelloWorld to also be WordleBoard, so I can,
find and replace with command+shift+R on Mac.
Great. And personal preference of mine,
I prefer to have it kebab case for my vue components.
Please note that if you're using VS Code,
I also included a link to an official guide
on how you can leverage VS Code's
refactoring tools to make your life easier for you as well.
Let's make a commit.
Our commit this time around
is going to be rename component to WordleBoard.
Notice that we're making commits quite often.
We're going to be practicing this principle throughout this course.
In this episode, we covered how we can leverage tools like Vite
to save a lot of time setting up modern applications with tests.
We also started dipping our toes into refactoring,
since we have removed clutter
and renamed components to better represent their intended purpose.
We are now ready to start turning this application into a true worlde game.