WEBVTT

00:00:00.160 --> 00:00:03.920
So, giving Claude Code browser access,
for example, through the

00:00:04.000 --> 00:00:07.200
Playwright plugin, can be pretty helpful.

00:00:07.220 --> 00:00:11.120
But in general, giving AI tools a

00:00:11.140 --> 00:00:15.040
way of verifying their work can be useful,
and browser

00:00:15.140 --> 00:00:17.770
access is not the only thing you can do
there.

00:00:17.800 --> 00:00:21.680
Instead,
another powerful way of giving AI agents a

00:00:21.740 --> 00:00:25.640
of verifying their work
is by using good old testing,

00:00:25.700 --> 00:00:29.640
unit testing, integration testing,
end-to-end testing, all these kinds of

00:00:29.650 --> 00:00:33.410
automated tests can be helpful.
So here in this

00:00:33.440 --> 00:00:36.140
project, I'll add Vitest

00:00:37.080 --> 00:00:40.780
as a new testing library. It's a

00:00:40.820 --> 00:00:43.620
very popular JavaScript testing library.

00:00:43.640 --> 00:00:47.520
And now, of course,
we could set up tests manually, but the

00:00:47.560 --> 00:00:51.490
good thing about Claude Code
and AI in general, of course, is

00:00:51.520 --> 00:00:55.480
hand off tasks like that to AI.
And we could send a prompt

00:00:55.540 --> 00:00:59.100
like this to Claude Code informing us
that we installed that testing

00:00:59.160 --> 00:01:02.920
library and that we wanna do unit testing,
in my case here, and that it

00:01:02.960 --> 00:01:06.800
should set up the library appropriately
and add unit

00:01:06.900 --> 00:01:10.750
tests for all the key features,
add mocks as needed and

00:01:10.860 --> 00:01:14.620
split complex functions to simplify
testing if needed.

00:01:14.660 --> 00:01:17.740
I'll run this in plan mode because maybe
it needs more information.

00:01:18.100 --> 00:01:21.680
Now, indeed,
it does have one follow-up question here,

00:01:21.760 --> 00:01:25.320
and I want to work with a tests folder.

00:01:25.380 --> 00:01:29.200
Got another question,
extract those validation schemas

00:01:29.340 --> 00:01:32.720
and submit the answers to let it continue
planning,

00:01:32.780 --> 00:01:36.490
and it seems like it wants to install a
couple of dependencies,

00:01:36.520 --> 00:01:40.020
then set up the configuration file for
Vitest,

00:01:41.360 --> 00:01:45.200
and then add a bunch of tests for
sanitization, for

00:01:45.420 --> 00:01:48.000
rendering of the rich text content,

00:01:49.440 --> 00:01:52.940
for validation, plan some

00:01:53.000 --> 00:01:56.980
refactoring to simplify testing
and improve the code

00:01:57.020 --> 00:01:59.920
there for overall, and also, as a mocking

00:01:59.980 --> 00:02:02.320
strategy.

00:02:04.380 --> 00:02:06.930
So that's looking good then I'll accept
that.

00:02:07.000 --> 00:02:10.440
Actually, I have one follow-up note
which I sent to Claude Code.

00:02:10.520 --> 00:02:13.520
As mentioned,
you can always inject messages into an

00:02:13.560 --> 00:02:17.540
existing task,
and I accidentally canceled, which

00:02:17.580 --> 00:02:21.530
another one.
And I sent this one because Bun,

00:02:21.600 --> 00:02:25.060
has its own built-in test runner,
but I want to use that Vitest library

00:02:25.100 --> 00:02:27.800
instead,
and that's why I sent this extra message.

00:02:27.840 --> 00:02:31.800
So it looks like it now did add its test,
so let it

00:02:31.840 --> 00:02:35.540
run it,
and that's exactly the kind of feedback

00:02:35.580 --> 00:02:39.060
talking about. It can now run its own

00:02:39.240 --> 00:02:43.100
tests and fix any errors it detects.

00:02:43.700 --> 00:02:46.020
So now it looks like all tests passed.

00:02:46.060 --> 00:02:49.980
Now, one thing to watch out for is
that AI can

00:02:50.040 --> 00:02:53.880
be inclined to write tests
that fit the code that's

00:02:53.940 --> 00:02:57.700
already there.
So you might wanna consider writing tests

00:02:57.710 --> 00:03:01.520
first before you actually have the
implementation, and

00:03:01.640 --> 00:03:05.560
just as with the code that
was generated by AI, you wanna review

00:03:05.600 --> 00:03:09.500
those tests and see
if the right things are tested,

00:03:09.560 --> 00:03:13.510
AI to add more tests,
and you can specifically specify which

00:03:13.540 --> 00:03:17.440
tests it should add. But of course,
combined with the browser access it

00:03:17.540 --> 00:03:21.170
has, automated tests
are a great way for creating such a

00:03:21.200 --> 00:03:24.520
feedback loop where AI can validate its
changes on its

00:03:24.580 --> 00:03:25.200
own.