1
00:00:04,767 --> 00:00:08,967
In this lesson, we'll be setting up
our project from scratch.

2
00:00:09,267 --> 00:00:12,340
If you are already experienced
working with Vite

3
00:00:12,500 --> 00:00:16,900
and setting up Vue Test Utils
with Vue and TypeScript,

4
00:00:17,200 --> 00:00:22,333
feel free to just download the zip
or clone the repository in the description

5
00:00:22,358 --> 00:00:24,300
and move on to the next lesson.

6
00:00:25,313 --> 00:00:29,314
Getting a project up
and running with tests, TypeScript,

7
00:00:29,339 --> 00:00:34,110
and a front-end framework
used to be a pretty daunting task.

8
00:00:34,347 --> 00:00:35,856
Thankfully nowadays,

9
00:00:35,881 --> 00:00:40,567
a lot of this work has been simplified
thanks to resources like Vite.

10
00:00:41,040 --> 00:00:43,667
Vite is a modern web development tool

11
00:00:43,733 --> 00:00:48,433
that will not only give us
a ready-to-go boilerplate for our project,

12
00:00:48,726 --> 00:00:55,100
but it will also be our bundler
and development server resource.

13
00:00:55,833 --> 00:01:00,000
To use it, you have to have Node
installed in your system.

14
00:01:01,963 --> 00:01:07,833
To get our project boilerplate,
we need to type pnpm create vite.

15
00:01:09,267 --> 00:01:12,300
Please note
that even though I'm using pnpm,

16
00:01:12,533 --> 00:01:15,500
any Node package manager
should work just fine.

17
00:01:15,567 --> 00:01:19,800
If you prefer to use npm or Yarn,
please feel free to do so.

18
00:01:20,400 --> 00:01:23,900
Now we can see that the wizard
is asking me for my project name.

19
00:01:23,967 --> 00:01:25,400
I'm going to call it Wordle.

20
00:01:25,907 --> 00:01:28,933
And the framework,
we're going to be using Vue today.

21
00:01:29,626 --> 00:01:31,267
For the variant selection,

22
00:01:31,293 --> 00:01:34,633
I like to use
the customization from create Vue.

23
00:01:35,180 --> 00:01:40,620
It will allow us to have Vue test Utils
and Vitest, already pre-configured for us.

24
00:01:42,093 --> 00:01:46,967
We won't be exploring Vue Router,
Pinia, and JSX supports in this course

25
00:01:46,967 --> 00:01:51,191
because my intention is to keep
our application as lean as possible

26
00:01:51,216 --> 00:01:55,367
so we can focus on the core elements,
which is tests.

27
00:01:55,940 --> 00:01:57,433
In regards to testing,

28
00:01:57,458 --> 00:02:02,300
Vitest will allow us to write
both unit or feature tests.

29
00:02:02,533 --> 00:02:05,423
Feature tests
will be the main driving force

30
00:02:05,448 --> 00:02:10,033
for the desired criteria
that our code will need to meet.

31
00:02:10,753 --> 00:02:14,900
Finally, we won't be writing
E2E tests for this project,

32
00:02:15,200 --> 00:02:19,067
but I do want to mention
that E2E tests are great

33
00:02:19,092 --> 00:02:21,900
for protecting
your most important user stories.

34
00:02:22,067 --> 00:02:25,260
We'll be discussing
different types of tests

35
00:02:25,299 --> 00:02:28,633
and their respective purpose
in the test hierarchy

36
00:02:28,859 --> 00:02:31,400
in more details in the next episode.

37
00:02:32,367 --> 00:02:35,467
Now that the project
has been created, let's open it.

38
00:02:36,757 --> 00:02:40,533
I've been working
with JetBrains IDEs for years now.

39
00:02:40,558 --> 00:02:43,300
In this case, I'm using PhpStorm,

40
00:02:43,479 --> 00:02:46,533
but feel free to use
whatever IDE you prefer.

41
00:02:46,800 --> 00:02:50,400
This should not affect
your experience with this course.

42
00:02:51,033 --> 00:02:52,933
If you are using VS Code,

43
00:02:53,033 --> 00:03:00,200
please do keep in mind that the Vue team
has made a recommended setup available

44
00:03:00,225 --> 00:03:02,933
right at the README of this boilerplate.

45
00:03:04,073 --> 00:03:06,833
Let's see if our setup
is properly working.

46
00:03:07,066 --> 00:03:12,743
We'll start by installing
our dependencies with pnpm install.

47
00:03:15,583 --> 00:03:20,600
Then we'll initialize
our repository with git init.

48
00:03:22,973 --> 00:03:25,773
Finally, let's make our first commit.

49
00:03:25,833 --> 00:03:30,067
We'll start by doing
git add . to add all the files,

50
00:03:30,272 --> 00:03:35,263
then git commit -m
with the respective commit message.

51
00:03:40,563 --> 00:03:42,800
We should try to run our tests.

52
00:03:42,826 --> 00:03:46,067
Since we'll be writing
feature tests with Vitest,

53
00:03:46,200 --> 00:03:50,367
I suggest renaming
the script on line 9 to just test.

54
00:03:52,533 --> 00:03:55,567
Now if we run pnpm test,

55
00:03:58,743 --> 00:04:03,233
we can see that we already
have one test written for us.

56
00:04:03,579 --> 00:04:09,010
It is in HelloWorld.spec.ts
inside of our tests folder.

57
00:04:09,133 --> 00:04:10,267
Let's find it.

58
00:04:11,920 --> 00:04:16,633
Go to source, components, tests,

59
00:04:16,853 --> 00:04:20,133
HelloWorld.spec.ts is right there.

60
00:04:25,389 --> 00:04:28,167
It looks like the example test we have

61
00:04:28,260 --> 00:04:31,700
is checking to see
whether a message we pass

62
00:04:31,733 --> 00:04:34,150
to the HelloWorld component as a prop

63
00:04:34,363 --> 00:04:36,367
gets rendered to the page.

64
00:04:36,500 --> 00:04:38,300
Let's go to that component.

65
00:04:39,712 --> 00:04:42,775
Now what would happen

66
00:04:42,800 --> 00:04:46,663
if we were to just hard code a text

67
00:04:46,688 --> 00:04:49,700
that has nothing to do with the message
we're passing to the user?

68
00:04:54,730 --> 00:05:00,667
We can see that Vitest immediately
has let us know that our test is failing.

69
00:05:00,933 --> 00:05:04,602
This instantaneous feedback
is one of the reasons

70
00:05:04,627 --> 00:05:10,667
why we'll strive to have
a robust test suite in our project.

71
00:05:11,700 --> 00:05:14,777
Do note that usually IDEs

72
00:05:14,800 --> 00:05:18,867
offer a dedicated vue
for visualizing your tests.

73
00:05:19,000 --> 00:05:22,200
In the case of WebStorm or PhpStorm,

74
00:05:22,967 --> 00:05:26,067
we can go to edit configurations,

75
00:05:27,806 --> 00:05:29,833
press on the plus icon,

76
00:05:31,086 --> 00:05:33,999
and finally select Vitest.

77
00:05:36,705 --> 00:05:41,467
If you're using VS Code,
I've included links to a plugin

78
00:05:41,492 --> 00:05:45,833
that you can install to get support
for Vitest in VS Code as well.

79
00:05:48,070 --> 00:05:53,650
Okay, let's cancel our process
that is running tests in the terminal.

80
00:05:53,675 --> 00:05:55,967
We can close the terminal as well.

81
00:05:56,033 --> 00:05:57,700
Now by pressing play,

82
00:05:58,367 --> 00:06:03,733
we can see that we have a very nice UI
for the execution of our tests.

83
00:06:04,433 --> 00:06:07,530
Alright, so we're in the red
stage right now.

84
00:06:07,533 --> 00:06:11,700
Let's undo the changes that we've done
by doing git research hard.

85
00:06:13,183 --> 00:06:16,800
This has undone
all the changes we haven't committed,

86
00:06:16,833 --> 00:06:21,167
and we can see that our tests
are back to green again.

87
00:06:21,917 --> 00:06:26,333
We should also make sure that the
application is being properly served

88
00:06:26,333 --> 00:06:28,133
in our development environment.

89
00:06:28,200 --> 00:06:31,967
For that, let's just run pnpm dev.

90
00:06:34,577 --> 00:06:40,133
Perfect! We have a working Vue TypeScript
application with tests.

91
00:06:40,800 --> 00:06:45,667
Next, we should remove all the excess code
we have in our boilerplate,

92
00:06:45,833 --> 00:06:47,933
just so we can have a cleaner start.

93
00:06:48,367 --> 00:06:51,133
Let's get rid
of all the excess components.

94
00:06:51,167 --> 00:06:55,600
I want to keep just app.vue
and HelloWorld.

95
00:06:55,625 --> 00:06:59,133
So let's get rid of these two over here.

96
00:07:01,490 --> 00:07:06,967
Let's remove all the icons,
so deleting the icons folder.

97
00:07:07,867 --> 00:07:10,933
And let's delete
the assets folder as well.

98
00:07:12,767 --> 00:07:18,733
Next, if we go to app.vue,

99
00:07:19,186 --> 00:07:21,542
And let's simplify the template

100
00:07:21,567 --> 00:07:25,200
to just have
the HelloWorld component being rendered.

101
00:07:25,400 --> 00:07:27,933
Everything else can be deleted.

102
00:07:30,006 --> 00:07:32,533
The styling can be removed as well.

103
00:07:32,558 --> 00:07:36,367
We're going to be worrying
about styling in the future.

104
00:07:37,367 --> 00:07:39,100
We are almost there.

105
00:07:39,125 --> 00:07:41,300
Let's take a look at main as well.

106
00:07:41,700 --> 00:07:46,500
assets/main.css no longer exists, so...

107
00:07:47,140 --> 00:07:48,487
let's remove that.

108
00:07:50,926 --> 00:07:56,733
All right. If we take a look
at our tests, we are still passing.

109
00:07:57,672 --> 00:07:59,470
Another thing that I want to do

110
00:07:59,500 --> 00:08:04,133
finally is the HelloWorld
component itself can be simplified.

111
00:08:04,373 --> 00:08:11,333
Let's just have it render a paragraph
that contains the message prop.

112
00:08:12,630 --> 00:08:17,967
Also, once again,
styles don't matter for us at the moment.

113
00:08:19,076 --> 00:08:20,833
And we are still passing.

114
00:08:21,863 --> 00:08:23,200
If we go back to the browser,

115
00:08:23,225 --> 00:08:26,800
we can see that our app
looks much simpler now.

116
00:08:27,490 --> 00:08:30,167
All right. Let's commit these changes.

117
00:08:30,500 --> 00:08:34,296
To do this, let's go back to the IDE
and make another commit.

118
00:08:34,827 --> 00:08:38,233
This time, let's call it remove clutter

119
00:08:38,393 --> 00:08:43,267
because we're removing a bunch of code
that doesn’t matter to us.

120
00:08:44,433 --> 00:08:47,167
Great. Another thing
that I want to do as well,

121
00:08:47,192 --> 00:08:49,042
just like a final touch,

122
00:08:49,067 --> 00:08:55,100
is let's rename
our HelloWorld component to WordleBoard.

123
00:08:56,013 --> 00:08:59,833
In PhpStorm,
I can do this by doing shift+F6

124
00:09:00,300 --> 00:09:08,110
and simply change this
to WordleBoard vector.

125
00:09:08,679 --> 00:09:10,933
Okay. Same over here.

126
00:09:14,283 --> 00:09:16,467
WordleBoard.

127
00:09:19,676 --> 00:09:23,483
Finally, I want to replace
every text reference

128
00:09:23,508 --> 00:09:27,000
to HelloWorld to also
be WordleBoard, so I can,

129
00:09:27,133 --> 00:09:31,067
find and replace
with command+shift+R on Mac.

130
00:09:37,737 --> 00:09:41,333
Great. And personal preference of mine,

131
00:09:41,358 --> 00:09:46,467
I prefer to have it kebab case
for my vue components.

132
00:09:47,020 --> 00:09:49,742
Please note that if you're using VS Code,

133
00:09:49,767 --> 00:09:52,467
I also included a link
to an official guide

134
00:09:52,533 --> 00:09:54,733
on how you can leverage VS Code's

135
00:09:54,758 --> 00:09:58,200
refactoring tools to make your life
easier for you as well.

136
00:09:58,833 --> 00:10:00,233
Let's make a commit.

137
00:10:00,379 --> 00:10:02,467
Our commit this time around

138
00:10:02,500 --> 00:10:06,967
is going to be rename
component to WordleBoard.

139
00:10:09,936 --> 00:10:12,600
Notice that we're making
commits quite often.

140
00:10:12,633 --> 00:10:17,067
We're going to be practicing
this principle throughout this course.

141
00:10:17,879 --> 00:10:22,533
In this episode, we covered
how we can leverage tools like Vite

142
00:10:22,533 --> 00:10:26,767
to save a lot of time
setting up modern applications with tests.

143
00:10:27,240 --> 00:10:30,767
We also started dipping
our toes into refactoring,

144
00:10:30,833 --> 00:10:32,833
since we have removed clutter

145
00:10:32,867 --> 00:10:37,467
and renamed components to better
represent their intended purpose.

146
00:10:38,019 --> 00:10:42,691
We are now ready to start turning
this application into a true worlde game.