(upbeat music)
- Hello and welcome
to this new Developer Quick Takes episode.
My name is Philippe Ozil.
I'm a Developer Evangelist at Salesforce.
And in this episode
I'm gonna talk to you about
how we can enable apex code coverage overlay
for visual studio code.
You'll find that it's pretty simple to enable
and you don't have anything to install.
As a side note,
I also presented a similar episode
on how you can enable jest code coverage
for visual studio code.
We are now in visual studio code
and I have opened a project which may seem familiar to you
this is called 'Dreamhouse.'
It's one of the many sample applications
that we provide to get started
and this project contains a bunch of apex classes here,
but we'll need a test.
Now, generally, if you have VS code,
you likely have also the right extensions
and we provide a set of extensions
in the Salesforce extension pack
and among those extensions,
you'll find the apex extension.
This means that you already have everything you need to do
Show the test code coverage visually on your code.
The only thing you to do
is to enable that setting
which is not enabled by default.
Let me help you do that.
So, you wanna go in "Code" here
and you wanna go in preferences and settings.
From there, you want to search for apex coverage.
You should find only you one result,
which is the one we need.
This is called 'retrieve test code coverage.'
By default, this is disabled
and the reason why this is disabled is that
we do not collect code coverage
when we run tests within visual studio code
in order to save time.
This requires a bit of extra processing.
So, we're gonna toggle that
and we can close the settings.
We now need to re-run tests
in order to calculate the code coverage.
So, we can do that directly here on the sidebar
and run our Apex test with this little green arrow here.
This re-runs all tests,
and you can also see that at bottom
that you can do the same thing
with mining, components, tests.
Now, tests are going to take a few seconds run.
Now the tests are run and are passing.
Let's go to our apex class.
So, I'm gonna take the property controller here, right now
we call coverage and it's not showing up
and still need to enable it,
you'll notice at the bottom of the screen there's
this free vertical bar icon here,
which is called Hamburger,
but you need to click in order to enable Code coverage.
So, I'm clicking it,
and you can all see that you
have green when lines are covered.
And you'll see that this happens for anything when
it's dynamic and for example,
here we have dynamic parameters.
This is why all those lines are highlighted.
The rest that is static is not directly highlighted.
Now, you'll also notice,
that on the side of the window here we have
some red parts on my file here,
which indicates that they have code
that is not covered.
If I scroll down to get there,
you'll find that some of this code here
is not covered by tests.
And this is indicated in red.
Now you won't find any of that in the original sample app
because everything is covered there.
What I did for the sake of the demo is that I've disabled.
Some of the test code to show you some uncovered code.
Let me show you,
if I go now on my classes,
and if I look at the TestPropertyController class,
I can see that I've disabled some of my test code.
I'll re-enable it by uncommenting it.
I'll save my file and I'll push it back to the Org.
Remember that part,
it's extremely important to deploy your changes back
to the Org,
because the apex tests run on the Org
they do not run in your local environment.
If you forget to deploy them,
the tests won't work.
You can ever do deployment with the terminal,
like 'sfdx force:source:push',
or you can also do it with the tools over the,
Org rather for example.
So, I'm gonna push that and we're gonna be able to
re-run our test,
right, it's deployed.
We can all re-run the test by going
into the test menu
and we execute those tests.
I'm gonna close this test file,
We can go back here,
wait for the tests to re-run and
what we'll need to do here
to refresh the code coverage overlay is to toggle the
code coverage on and off.
So, I'm clicking once to disable it,
clicking it again to re-enable it.
and you can now see that
the entire file is green,
we have reached 100% code coverage
for this particular file.
That's it for this Developer Quick Take,
and I hope you've enjoyed it.
If you're interested you can also look
at the other episode on enabling Jest code
coverage overlay in Visual Studio Code.
Thanks for watching.
If you learn something new today,
make sure to like this video,
if you wanna get more content like
this pushed directly to you,
click subscribe and that bell to get notifications.