WEBVTT 1 00:00:05.240 --> 00:00:09.119 Hello, everybody, Welcome to another thrilling episode of JavaScript Jabber. 2 00:00:09.160 --> 00:00:11.439 I am Steve Edwards, the host with the face for 3 00:00:11.560 --> 00:00:13.800 radio and the voice for being a mine. But I'm 4 00:00:13.800 --> 00:00:17.519 still your host with me on the panel today, all 5 00:00:17.519 --> 00:00:19.800 the way from Tel Aviv, Israel's mister Dan Shapier. 6 00:00:19.839 --> 00:00:20.559 How are you doing, Dan? 7 00:00:21.399 --> 00:00:23.079 I'm doing well. How are you, Steve? 8 00:00:23.839 --> 00:00:24.960 Doing good? Doing good? 9 00:00:25.039 --> 00:00:28.679 It's Wednesday morning, first day back at school for kids here, so. 10 00:00:29.320 --> 00:00:30.079 That's always good. 11 00:00:31.280 --> 00:00:35.200 I'm still hot and toasty there in Tel Aviv as always. 12 00:00:35.039 --> 00:00:37.960 Yeah, when is it not? Yeah? 13 00:00:38.240 --> 00:00:40.240 Yeah, it's a little cooler here, starting to cool down 14 00:00:40.280 --> 00:00:41.920 a little bit, which is always a bummer, but. 15 00:00:43.479 --> 00:00:44.240 It is what it is. 16 00:00:45.119 --> 00:00:48.640 And our guest today coming all the way also from Israel, 17 00:00:48.719 --> 00:00:49.719 mister Joannie Goldberg. 18 00:00:49.759 --> 00:00:50.479 How are you doing, Yanni? 19 00:00:51.560 --> 00:00:54.320 Hey, hey, great, great Tom. I'm really happy to be 20 00:00:54.359 --> 00:00:58.039 here today. It's one degree cooler here comparing with Al Aviv. 21 00:00:59.039 --> 00:01:01.759 Very hot, but the good news that after two months 22 00:01:01.759 --> 00:01:04.359 as of being at home, kids are finally back at 23 00:01:04.400 --> 00:01:09.239 school yesterday or before, so. 24 00:01:08.280 --> 00:01:10.319 Yeah, back to work a little yes. 25 00:01:10.599 --> 00:01:13.920 And for those of you that might see Yohannis drink, 26 00:01:14.000 --> 00:01:16.840 he is not drinking and podcasting that is tea, not beer. 27 00:01:17.000 --> 00:01:21.439 I clarified that before the episode, so so not that 28 00:01:21.480 --> 00:01:24.959 it's not okay to drink and podcasts, but just clarifying. 29 00:01:24.719 --> 00:01:29.000 I literally drank beer on stage while giving certain talks. 30 00:01:29.840 --> 00:01:32.959 My contention is that it only made the talks better. 31 00:01:34.680 --> 00:01:37.239 Started listening up a little bit. Is that it Yeah, 32 00:01:37.640 --> 00:01:38.560 if you probably. 33 00:01:38.319 --> 00:01:40.439 Know, is it also legit in the States? I know 34 00:01:40.480 --> 00:01:42.719 it's you in Europe, it's okay. But if I drink 35 00:01:43.040 --> 00:01:46.280 at like it's the States during the talk will be 36 00:01:46.359 --> 00:01:47.079 considered PC. 37 00:01:49.400 --> 00:01:51.840 I've never heard anything against it. I guess it depends 38 00:01:51.879 --> 00:01:55.400 on how well you handle the the alcohol and well 39 00:01:55.599 --> 00:01:57.640 you stay on topic and have somewhat of a sense 40 00:01:57.640 --> 00:01:58.040 of humor. 41 00:01:58.120 --> 00:02:00.439 Then you're saying that the first two okay. 42 00:02:01.040 --> 00:02:05.319 In Germany, it's perfectly legit to have been at lunch 43 00:02:05.439 --> 00:02:08.400 during work days and legita required. 44 00:02:10.400 --> 00:02:14.400 Yes, there is something to that, and it's really good beer. 45 00:02:15.159 --> 00:02:16.000 Uh. 46 00:02:16.080 --> 00:02:18.759 When I worked at Wix, let's just say. Let's just 47 00:02:18.800 --> 00:02:23.039 say that we worked hard and played hard and sometimes 48 00:02:23.120 --> 00:02:27.439 played hard during working hours. 49 00:02:28.479 --> 00:02:33.680 Alrighty, So with that we will transition into the topic 50 00:02:33.759 --> 00:02:38.199 juju early topic of the day, which is JavaScript testing 51 00:02:38.240 --> 00:02:42.159 and what's going on in testing in the JavaScript world, 52 00:02:42.360 --> 00:02:44.520 so you on need to take it away. 53 00:02:44.879 --> 00:02:45.879 Where do we want to start? 54 00:02:47.639 --> 00:02:49.400 I'm sure you wanted to start by sharing a few 55 00:02:49.400 --> 00:02:50.840 words about myself and. 56 00:02:50.680 --> 00:02:53.479 My Now we don't care about that. We just want 57 00:02:53.520 --> 00:02:55.120 to know what you have to say. 58 00:02:56.159 --> 00:02:56.360 Now. 59 00:02:56.439 --> 00:02:59.280 I just yeah, seriously, sorry, I'm a little off track. 60 00:02:59.319 --> 00:03:01.840 Tell us who you are wire famous and where people 61 00:03:01.919 --> 00:03:04.319 can give you money or will say that for the end, 62 00:03:04.360 --> 00:03:08.319 just tell us who are true things? Surprise, surprise. 63 00:03:08.360 --> 00:03:12.840 I'm a developer, freelancer and a consultant doing full stack 64 00:03:13.240 --> 00:03:17.159 a lot of JavaScript, but more than anything else, really 65 00:03:17.199 --> 00:03:19.879 my love, my passion. The things that I'm trying to 66 00:03:19.960 --> 00:03:24.639 specialize in is that all developer workflow and specifically testing. 67 00:03:25.319 --> 00:03:29.360 I think that I've worked with more than forty organizations. 68 00:03:29.719 --> 00:03:32.199 Some of them are big ney you're probably recognize on 69 00:03:32.280 --> 00:03:35.879 improving their testing. So I literally said, over the shoulders 70 00:03:35.919 --> 00:03:39.280 of like hundreds of developers, as we try to craft 71 00:03:39.360 --> 00:03:42.800 tested are both efficient and yet simple. Done a lot 72 00:03:42.800 --> 00:03:46.280 of mistakes, learned, a lot, tried a lot of new frameworks, 73 00:03:46.800 --> 00:03:49.520 and I hope to share some of these lessons here today. 74 00:03:50.479 --> 00:03:54.840 Isn't the process to your basically cursor right tests? 75 00:03:54.840 --> 00:03:55.199 For me. 76 00:03:57.439 --> 00:04:00.840 Exactly exactly this actually we're about to cover. I would 77 00:04:00.960 --> 00:04:03.919 I would also cover some kind of testing AI trends, 78 00:04:05.280 --> 00:04:08.960 mostly the useful parts of AI. So yeah, okay, just 79 00:04:09.000 --> 00:04:09.639 to just to. 80 00:04:11.520 --> 00:04:15.639 Finish that particular point. The scary thing is afterwards, when 81 00:04:15.680 --> 00:04:18.720 you make changes and then the tests break, you tell it, 82 00:04:19.319 --> 00:04:22.199 Cursor fix the test for me, and you're not sure 83 00:04:22.240 --> 00:04:25.920 whether it's fixing your test to hide the bugs or 84 00:04:25.959 --> 00:04:29.120 fixing your code to fix the tests, or doing both 85 00:04:29.360 --> 00:04:33.199 or whatever it's It can be really interesting. 86 00:04:33.279 --> 00:04:36.959 That's this way, definitely. I mean, I think that one 87 00:04:36.959 --> 00:04:39.160 of the first things one should tune in Cursor or 88 00:04:39.199 --> 00:04:41.759 cloud code or whatever you're working is that you can 89 00:04:41.920 --> 00:04:44.040 let it work in yellow mode. But I think there 90 00:04:44.079 --> 00:04:48.759 is one exception any a human A human confirmation should 91 00:04:48.759 --> 00:04:51.759 be made anytime a test is changed. You may change 92 00:04:51.759 --> 00:04:54.399 my production code, I may inspect each and every nine 93 00:04:54.480 --> 00:04:57.000 or not, I don't know, but a test changed should 94 00:04:57.040 --> 00:04:58.839 supervise that that's. 95 00:04:58.720 --> 00:05:01.040 My That's a good take. I think. 96 00:05:01.839 --> 00:05:03.279 I can't think of any time I'm just going to 97 00:05:03.319 --> 00:05:05.720 say here writing some code and then committed or do 98 00:05:05.839 --> 00:05:08.839 whatever without looking over it and making sure it works. 99 00:05:09.279 --> 00:05:09.560 Well. 100 00:05:10.000 --> 00:05:14.600 Yeah, that's easy to say, and everybody starts with good intentions, 101 00:05:14.639 --> 00:05:18.720 but at a certain point in time, you know, especially 102 00:05:18.720 --> 00:05:21.079 when you're under the gun and certain things and things 103 00:05:22.680 --> 00:05:25.240 seem to work and you build a certain level of trust. 104 00:05:26.160 --> 00:05:30.480 I've known people to almost even engineers, almost get to 105 00:05:30.519 --> 00:05:33.759 the point of almost vibe coding their way through projects. 106 00:05:34.360 --> 00:05:40.240 And I think you Only's statement that if you've got 107 00:05:40.319 --> 00:05:46.199 good test coverage, then ensuring that the tests are properly 108 00:05:46.439 --> 00:05:51.360 maintained and reviewed is a good way to add a 109 00:05:51.399 --> 00:05:55.639 significant layer of trust and security around your vibe coding. 110 00:05:59.720 --> 00:06:03.079 Yeah, I agree with both. I think that people have 111 00:06:03.360 --> 00:06:07.680 various degrees of how much they supervise AI generated God, 112 00:06:09.199 --> 00:06:12.600 I'm just saying that the least conservative one can be 113 00:06:12.800 --> 00:06:15.000 is at least guard you're testing. You might do this 114 00:06:15.079 --> 00:06:19.319 also for the production cod but I think that letting 115 00:06:19.360 --> 00:06:22.040 AI also change tests has to change God. This is 116 00:06:22.040 --> 00:06:26.240 the highest amount of frizk one may take. 117 00:06:27.839 --> 00:06:32.199 Yes, Okay, then, so what are the latest and greatest 118 00:06:32.240 --> 00:06:35.839 trends when it comes to tests, aside from having AI 119 00:06:36.120 --> 00:06:38.000 do all the coding for us? 120 00:06:39.279 --> 00:06:44.000 Yeah, so I'll kind of mention some kind of super 121 00:06:44.120 --> 00:06:48.040 trends and are very impactful changes, and then we can 122 00:06:48.879 --> 00:06:52.040 dig dive deeper into each one of them, at least 123 00:06:52.079 --> 00:06:54.920 the ones that we found interesting. So I think there 124 00:06:54.959 --> 00:06:58.920 is always in testing one kind of everlasting progress in 125 00:06:58.959 --> 00:07:02.800 which we always we try to get our tests to 126 00:07:02.839 --> 00:07:07.360 be more production like without paying the price of So 127 00:07:08.759 --> 00:07:12.519 in the past two years we keep seeing this progress 128 00:07:13.120 --> 00:07:15.600 and in this in front and the front and world. 129 00:07:15.920 --> 00:07:18.079 For the first time, I think like we ad React 130 00:07:18.120 --> 00:07:20.720 testing library ruling this world for a lot of time 131 00:07:21.120 --> 00:07:23.360 tests that runs in a jazz things that's for the 132 00:07:23.399 --> 00:07:27.639 first time it's safe to say that tests don't run 133 00:07:27.680 --> 00:07:32.839 in the browser, that are not visual are almost out 134 00:07:32.879 --> 00:07:37.279 of scope. There are many new ways and frameworks to 135 00:07:37.399 --> 00:07:39.759 run your tests in the browser and get the full 136 00:07:39.920 --> 00:07:44.839 visual experience and the confidence, so it's more like production. 137 00:07:44.920 --> 00:07:47.600 But some of them run really fast, so you're not 138 00:07:47.720 --> 00:07:51.199 paying the price of like full full blown end to 139 00:07:51.360 --> 00:07:54.600 end framework on the back inside it means that you 140 00:07:54.600 --> 00:07:56.720 having a micro service, you can more easily now run 141 00:07:56.759 --> 00:08:00.000 it on your computer with all the layers and almost 142 00:08:00.079 --> 00:08:04.560 light production infrastructure, and again without paying a tremendous price. 143 00:08:05.360 --> 00:08:09.920 I think these are bold and the changes that we're seeing, 144 00:08:09.920 --> 00:08:12.279 and we I guess we will dig deeper into the 145 00:08:12.319 --> 00:08:13.600 specific tooling. 146 00:08:13.959 --> 00:08:19.720 And just to clarify, there are obviously layers to tests, 147 00:08:19.800 --> 00:08:23.720 so there I don't know if you should refer to 148 00:08:23.759 --> 00:08:27.480 them as higher or lower layers. It's just different positions 149 00:08:27.480 --> 00:08:30.759 in the testing cycle. So you've got obviously stuff like 150 00:08:30.920 --> 00:08:36.320 unit tests, which should be very relatively small, relatively straightforward, 151 00:08:36.360 --> 00:08:40.440 and certainly very very fast, and they usually don't need 152 00:08:40.919 --> 00:08:45.679 special wiring, although you know a certain degree or a 153 00:08:45.679 --> 00:08:48.960 certain amount of mocking is often involved. Then you've got 154 00:08:49.039 --> 00:08:52.720 integration tests, and you've got into end tests. It seemed 155 00:08:52.720 --> 00:08:55.480 to me that when you were talking about the improvements 156 00:08:55.519 --> 00:09:02.399 in our ability to do effective, efficient and performance testing, 157 00:09:02.480 --> 00:09:05.919 you were mostly talking about integration tests and end to 158 00:09:06.120 --> 00:09:08.759 end tests and less about unit tests. 159 00:09:08.799 --> 00:09:14.200 Correct yes and a little no. I mean, I think 160 00:09:14.200 --> 00:09:17.000 at first there is a trend. I'm not advocating, by 161 00:09:17.000 --> 00:09:19.759 the way, on anything. I'm just trying to cover what 162 00:09:20.039 --> 00:09:25.320 like trends that I observed. And I think another trend 163 00:09:25.440 --> 00:09:28.360 is seeing less unit tests and more kind of component 164 00:09:28.480 --> 00:09:32.039 page integration tests. But so called the testing diamond. It's 165 00:09:32.039 --> 00:09:34.840 a kind of an emerging concept where you should write 166 00:09:34.919 --> 00:09:39.320 more integration test but with the new tooling, even if 167 00:09:39.360 --> 00:09:42.039 you write unit tests like take a framework that we 168 00:09:42.080 --> 00:09:44.679 will cover with that. It's called VITAS browser mode. Even 169 00:09:44.759 --> 00:09:48.200 your unit tests run in the browser. Now think about it. 170 00:09:48.320 --> 00:09:50.000 Not all the unit tests in the world are pure. 171 00:09:50.240 --> 00:09:53.039 You might test the models that actually doing some stuff 172 00:09:53.080 --> 00:09:56.360 with the web APIs. So instead of running it in 173 00:09:56.559 --> 00:10:00.000 no JS with polyphils and trust and trust the similarity, 174 00:10:00.679 --> 00:10:03.080 it runs your test in a real browser and Chromium 175 00:10:03.159 --> 00:10:06.200 for example. So even your unit test gains more kind 176 00:10:06.240 --> 00:10:09.919 of production like experience. Does this make sense? 177 00:10:10.840 --> 00:10:14.240 Yes, it does, although it's I need to. 178 00:10:16.240 --> 00:10:20.440 Think about what I think about it. It's kind of 179 00:10:20.480 --> 00:10:27.000 a recursive statement because really, when I'm thinking about unit tests, 180 00:10:27.679 --> 00:10:31.039 I'm really trying in most cases to be as stateless 181 00:10:31.039 --> 00:10:37.120 as possible and consequently not be dependent on having access 182 00:10:37.320 --> 00:10:41.399 to a browser dome, which is kind of like persistent 183 00:10:41.559 --> 00:10:43.159 by the definition. 184 00:10:45.200 --> 00:10:47.840 And so I'm. 185 00:10:47.639 --> 00:10:52.000 Not sure that this is where I want my unit 186 00:10:52.039 --> 00:10:58.080 tests to go necessarily, but I certainly appreciate the fact 187 00:10:58.159 --> 00:11:03.960 that we don't need to mock browser a p I 188 00:11:04.200 --> 00:11:09.240 S domin p I S, which is always let's say, 189 00:11:09.600 --> 00:11:14.320 less than ideal. But why do you think that is 190 00:11:14.720 --> 00:11:18.440 what has changed that has made this What has changed 191 00:11:18.879 --> 00:11:20.559 that has made this possible? 192 00:11:20.679 --> 00:11:22.799 Now? That was not available before. 193 00:11:24.600 --> 00:11:27.799 Yeah, first forced margining that I fully agree. The real 194 00:11:27.879 --> 00:11:31.399 value is in is in integration tests and about page 195 00:11:31.399 --> 00:11:33.840 testing or component tests, also in end to end. In 196 00:11:34.399 --> 00:11:42.120 unit test, it's indeed less significant. So it's mostly if 197 00:11:42.279 --> 00:11:46.240 if we if we double double click into the front 198 00:11:46.320 --> 00:11:48.919 end word for a start. I think now there is 199 00:11:48.960 --> 00:11:52.639 a key up from decisions the team should make. There 200 00:11:52.679 --> 00:11:58.000 is kind of a triangle decision between three different frameworks 201 00:11:58.000 --> 00:12:03.360 for testing components and pages, and one of them is 202 00:12:03.840 --> 00:12:07.440 relatively One of them is is new. It's for the 203 00:12:07.480 --> 00:12:11.279 past two years, and it makes running visual test in 204 00:12:11.320 --> 00:12:14.600 the browser almost as fast as unit test. So there 205 00:12:14.639 --> 00:12:16.879 was a lot of people trying to avoid that kind 206 00:12:16.879 --> 00:12:20.440 of visual experience because of the hassle involved. But with 207 00:12:20.559 --> 00:12:23.360 some of the new frameworks like vitest browser mode and 208 00:12:23.639 --> 00:12:29.120 the new storybook model, it becomes easier faster, so you 209 00:12:29.159 --> 00:12:32.559 have less reasons not to just hey, let's test it 210 00:12:32.639 --> 00:12:36.720 like where the user lives. And maybe it's worth at 211 00:12:36.720 --> 00:12:40.399 some point explaining what is vitest browser mode, how does 212 00:12:40.440 --> 00:12:43.840 it stack with playwright go for it? 213 00:12:45.399 --> 00:12:45.559 Now? 214 00:12:45.639 --> 00:12:48.720 Is that the same as v test UI this browser mode? 215 00:12:50.360 --> 00:12:54.840 Ah, not exactly, because you can you can also have 216 00:12:54.879 --> 00:12:58.759 vites I with unit tests and browser mode is a 217 00:12:58.799 --> 00:13:03.360 new sub frameworks sort VI test and to zoom out 218 00:13:03.360 --> 00:13:05.559 for a second, I think that we have now three 219 00:13:05.960 --> 00:13:09.600 measure and good options in the front and word that 220 00:13:09.679 --> 00:13:12.240 one must make a decision up front. The first one 221 00:13:12.320 --> 00:13:18.840 is Playwright, the good all known Playwright, very reputable, very 222 00:13:18.879 --> 00:13:23.200 reputable frameworks that is being very popular, which allows you 223 00:13:23.240 --> 00:13:25.440 to test your system as is like you can spin 224 00:13:25.559 --> 00:13:28.120 up a whole page and you get a real page 225 00:13:28.759 --> 00:13:34.039 in a browser, but you get the all the you 226 00:13:34.120 --> 00:13:37.840 get the entire you get d their application with the 227 00:13:37.919 --> 00:13:40.759 router and the state and a lot of things beyond 228 00:13:40.840 --> 00:13:43.200 the page level or the component what you want to test. 229 00:13:43.600 --> 00:13:47.759 So the performance is like a little of concerning Playwright 230 00:13:47.840 --> 00:13:50.000 even when you mock the back. 231 00:13:50.840 --> 00:13:56.759 Correct me if I'm wrong. Playwright is essentially just a 232 00:13:56.840 --> 00:14:04.159 headless Chrome with api is to automate various tasks. That's 233 00:14:04.240 --> 00:14:05.519 more less it right. 234 00:14:07.200 --> 00:14:09.480 Yes, and maybe a little more because it can run 235 00:14:09.519 --> 00:14:11.960 your test in other browsers as well, like run the 236 00:14:12.000 --> 00:14:14.480 test once and get it running in Chrome or Safari 237 00:14:14.639 --> 00:14:15.440 or anything. 238 00:14:15.639 --> 00:14:18.919 Yeah, because they basically later on added support for the 239 00:14:18.960 --> 00:14:20.799 same APIs as I. 240 00:14:20.720 --> 00:14:24.519 Recall exactly they imported kind of a CDP protocol for 241 00:14:24.600 --> 00:14:28.320 other browsers exactly. But on top of this, they also 242 00:14:28.360 --> 00:14:33.679 have a very nice and stable API to make the 243 00:14:33.759 --> 00:14:38.519 experience of interacting with pages less flaky. So for example, 244 00:14:38.559 --> 00:14:40.879 if you're trying to assert on something, they will take 245 00:14:40.879 --> 00:14:45.320 care to retry in wait and until that condition is 246 00:14:45.360 --> 00:14:47.919 met on the page. So the overall testing experience is 247 00:14:48.759 --> 00:14:49.519 really great, and. 248 00:14:50.879 --> 00:14:55.960 It replaced all the frameworks like Cyprus and Selenium. 249 00:14:55.440 --> 00:14:59.039 Right exactly exactly. It is. 250 00:14:59.600 --> 00:15:03.320 Okay, So how is v test browser mode different from Playwright. 251 00:15:05.279 --> 00:15:08.000 Yeah, so first worldt mentioning mentioning is that the viittest 252 00:15:08.000 --> 00:15:12.279 browser mode is using Playwright under the hood, so you 253 00:15:12.440 --> 00:15:17.240 get a battle tested engine that you can trust. But 254 00:15:17.320 --> 00:15:19.320 what they try to do Playwright is a little bit 255 00:15:19.360 --> 00:15:23.799 disruptive to front and testing. So if you take traditional 256 00:15:23.840 --> 00:15:28.200 front and testing with people used to work with things 257 00:15:28.240 --> 00:15:31.519 like React Testing Library, the syntax of React Testing library, 258 00:15:31.879 --> 00:15:34.960 the concept of React Testing library supporting from there to 259 00:15:35.039 --> 00:15:41.159 Playwright was a little disruptive. Vitus Browser mode allows you 260 00:15:41.200 --> 00:15:44.720 to take your existing test or learn nothing new, use 261 00:15:44.759 --> 00:15:48.240 the same syntax, same concept, only instead of running it 262 00:15:48.279 --> 00:15:51.320 in nogs like React Testing Library, you run it in 263 00:15:51.480 --> 00:15:57.240 real browser, which obviously allows you to see. You probably 264 00:15:57.279 --> 00:16:00.559 know that that really nasty experience when you with React 265 00:16:00.559 --> 00:16:03.360 testing library and the test failed. What you see on 266 00:16:03.399 --> 00:16:07.120 the screen is three hundred lines of XML of HTML 267 00:16:07.440 --> 00:16:09.919 in a CLI in which you try to understand in 268 00:16:10.000 --> 00:16:12.519 this my component, how does it look like? What's wrong here? 269 00:16:12.559 --> 00:16:16.799 I mean nobody wants to travel shoot test in HTML 270 00:16:16.879 --> 00:16:20.000 over CLI. With this browser mode, you can see them 271 00:16:20.000 --> 00:16:22.559 in a browser and benefits from all of the Chrome 272 00:16:22.600 --> 00:16:29.039 Developer tool bar perks. So that's that's the premise. That's 273 00:16:29.080 --> 00:16:33.799 the obvious upside. They also make it like you know, 274 00:16:33.879 --> 00:16:37.600 vitt stands for fast in French, with the word wit 275 00:16:37.759 --> 00:16:39.720 is fast in French, and they they stand up to 276 00:16:39.759 --> 00:16:43.240 their reputation like I can I already use it in production. 277 00:16:43.639 --> 00:16:47.519 It's amazing. I can like test then entire page, some interactions, 278 00:16:47.519 --> 00:16:51.120 sometimes specific scenario in two hundred milliseconds. It's like blazing fast. 279 00:16:51.120 --> 00:16:54.000 You click on a button and you don't have enough 280 00:16:54.159 --> 00:16:55.960 chance to see what happened on the screen. So the 281 00:16:56.000 --> 00:17:02.679 performance is really awesome. With that, there are some cons 282 00:17:02.720 --> 00:17:07.359 that should be mentioned as well. It's very new, it's 283 00:17:07.400 --> 00:17:12.039 still tagged as experimental for like two years or so, 284 00:17:14.839 --> 00:17:18.559 and so's it's it didn't yet stand the battle of 285 00:17:18.640 --> 00:17:22.599 time like Playwright, And there are many other other decisions 286 00:17:22.640 --> 00:17:25.119 that were made that are that might appeal to some 287 00:17:25.200 --> 00:17:28.559 teams and not to others. But it's definitely a bold 288 00:17:28.680 --> 00:17:33.039 opportunity I think now in twenty twenty five for testing 289 00:17:33.079 --> 00:17:35.960 and I could not finish that. I'm sorry. This is 290 00:17:36.039 --> 00:17:39.720 kind of a mini mini TED talk. But there is 291 00:17:39.759 --> 00:17:44.480 also Storybook, and Storybook now change their model and now 292 00:17:44.519 --> 00:17:48.519 they're using Vita's browser mode under the hood, which use Playwright. 293 00:17:49.160 --> 00:17:51.359 So you have three options. You know that Russian doll 294 00:17:51.440 --> 00:17:56.920 which is called I believe Matroyshka Babushka or matroys Career. 295 00:17:56.960 --> 00:17:59.680 It's kind of a nested doll. So what we have 296 00:17:59.799 --> 00:18:03.119 now the in the testing space, it's a troche car, 297 00:18:03.200 --> 00:18:05.359 so you have to play right or VI test brother 298 00:18:05.440 --> 00:18:07.559 mos that you just play right, or storybooks that use 299 00:18:08.720 --> 00:18:12.200 you got idea and you have to make you have 300 00:18:12.279 --> 00:18:13.279 to make the choice. 301 00:18:15.039 --> 00:18:20.599 So if you're starting a new front end project today, 302 00:18:20.680 --> 00:18:24.400 and let's say that you're using one of the two 303 00:18:24.480 --> 00:18:27.079 leading options, I don't know how familiar you are with them. 304 00:18:27.519 --> 00:18:31.720 Either React, which is approximately fifty percent of the market 305 00:18:32.480 --> 00:18:37.440 or view which is approximately twenty to thirty percent of 306 00:18:37.480 --> 00:18:41.720 the market, and you need to do and you want 307 00:18:41.759 --> 00:18:44.920 to do testing because we started with testing for the 308 00:18:44.960 --> 00:18:45.400 front end. 309 00:18:46.160 --> 00:18:47.759 What would you use? 310 00:18:51.240 --> 00:18:55.319 Yeah, that's that's first. Very I think that the choice 311 00:18:55.359 --> 00:18:57.400 is really hard today. I had to choose for a 312 00:18:57.440 --> 00:19:00.519 customer like two weeks ago, and the decision is really hard. 313 00:19:01.039 --> 00:19:04.880 So from one hand, Eileen Tower being conservative and say, hey, 314 00:19:04.920 --> 00:19:09.039 let's use play right. It works. It's like the most simple, 315 00:19:10.119 --> 00:19:13.240 it's like the last layer. It's simple, it's proven, let's 316 00:19:13.279 --> 00:19:14.920 just use it again. 317 00:19:15.119 --> 00:19:18.519 Playwright in this case is for mostly for the end 318 00:19:18.519 --> 00:19:19.599 to end tests. 319 00:19:19.359 --> 00:19:23.160 Right, or you can use it also for components, for 320 00:19:23.160 --> 00:19:26.359 for component or page testing. It it has great tooling 321 00:19:26.440 --> 00:19:28.599 to allow you to mock your bacond and I think 322 00:19:29.039 --> 00:19:32.400 I think that for the majority of the testing front 323 00:19:32.480 --> 00:19:36.599 and team want to mock the beacon. But yeah, you 324 00:19:36.640 --> 00:19:37.359 can also run in. 325 00:19:37.559 --> 00:19:40.960 Well, let's put it this way, if you're not mocking 326 00:19:41.039 --> 00:19:46.960 your back end, then you're by definition dependent. It's almost 327 00:19:47.000 --> 00:19:49.640 it kind of almost means that by definition your tests 328 00:19:49.640 --> 00:19:51.599 are going to be flaky at least some of the time. 329 00:19:52.920 --> 00:19:55.440 If you do involve if you do involve the back 330 00:19:57.640 --> 00:19:59.799 so so yes, if you want to go for a 331 00:20:00.000 --> 00:20:05.960 operations of concerns, you want to mock external services reduce 332 00:20:06.000 --> 00:20:09.039 the amount of dependencies that you have on external services 333 00:20:09.079 --> 00:20:10.599 and that includes your own back end. 334 00:20:12.920 --> 00:20:17.960 Totally agree, it's slower, it's more flaky. But my highest 335 00:20:17.960 --> 00:20:21.240 concern with end to end is actually that it's really 336 00:20:21.279 --> 00:20:25.279 hard to simulate things beyond heavy passes. So think about it. 337 00:20:25.359 --> 00:20:27.720 You want to test now that the user is disabled, 338 00:20:27.759 --> 00:20:31.200 it's a premium user. You get twenty records, all of 339 00:20:31.240 --> 00:20:34.559 the things that are beyond the simplest response. With real 340 00:20:34.599 --> 00:20:36.960 back end, it might be very hard to tune the 341 00:20:37.000 --> 00:20:39.839 backet into each and every scenarios that you want. However, 342 00:20:39.880 --> 00:20:42.279 when you mock it, you can simply just say, hey, 343 00:20:42.319 --> 00:20:44.200 I want this response, I want that response. 344 00:20:44.759 --> 00:20:45.000 Yeah. 345 00:20:45.079 --> 00:20:47.640 On the other hand, when you're mocking it, you're basically 346 00:20:47.680 --> 00:20:52.799 inventing the responses, so it's not necessarily how the system behaves. 347 00:20:52.839 --> 00:20:55.759 It's not really end to end if it's mocking. 348 00:20:56.400 --> 00:20:59.279 I mean when you normally like spin up like a 349 00:20:59.559 --> 00:21:02.720 maybe this is what you're talking about with mocking, but 350 00:21:02.839 --> 00:21:07.559 basically create a test database or a copy of your database, 351 00:21:07.599 --> 00:21:10.400 spin one upset it. You know, you got your data 352 00:21:10.440 --> 00:21:12.880 in it and then run your tests. Are actually using 353 00:21:12.920 --> 00:21:15.119 a database. It's not your Pride database obviously, but at 354 00:21:15.200 --> 00:21:17.160 least you have a clone and a real database that 355 00:21:17.200 --> 00:21:20.240 you're interacting with, because I know, speaking personal experience, a 356 00:21:20.279 --> 00:21:23.160 lot of times that's that's valuable testing. 357 00:21:23.960 --> 00:21:28.960 Yeah, yes, but I think that first before answering that 358 00:21:29.039 --> 00:21:31.319 I'd like to repeat to a dance. And I think 359 00:21:31.359 --> 00:21:35.400 it's like a key point here. If you're doing naive mocking, Okay, 360 00:21:35.440 --> 00:21:38.559 I'm just walking some Jason. Yeah, you are now at 361 00:21:38.599 --> 00:21:41.559 the risk of doing things that are not exactly the 362 00:21:41.559 --> 00:21:44.119 same in production, and this is why you also need 363 00:21:44.200 --> 00:21:47.039 contract testing. And I think this is definitely a topic 364 00:21:47.039 --> 00:21:49.279 we want to double click into later because there are 365 00:21:49.279 --> 00:21:53.119 a new interesting tooling in the JavaScript space related exactly 366 00:21:53.160 --> 00:21:57.400 with this problem. How do you create smart and aligned mogs? 367 00:21:58.000 --> 00:22:02.200 Now to this one. Yeah, in a simple case, it's 368 00:22:02.279 --> 00:22:04.559 just crawd applications, So you set up something in the 369 00:22:04.640 --> 00:22:08.640 database and you display them. But in many cases, creating 370 00:22:08.720 --> 00:22:11.480 the server response is much harder than this. Let's give 371 00:22:11.519 --> 00:22:15.119 you an example. One of my customers, is there a 372 00:22:15.599 --> 00:22:18.599 user entity and it might get disabled? How does it 373 00:22:18.640 --> 00:22:21.799 get disabled, there is some chron job running every minute 374 00:22:21.839 --> 00:22:24.799 and concluding that the user is disabled. So how would 375 00:22:24.920 --> 00:22:28.519 you create a disabled user from a test and make 376 00:22:28.559 --> 00:22:32.400 the back end run a chron job and tag it. 377 00:22:32.000 --> 00:22:36.839 It becomes much so much harder than just returning one line. Hey, 378 00:22:37.720 --> 00:22:41.319 just give me a disabled user, Jason, am I being 379 00:22:41.680 --> 00:22:42.480 clear on this point. 380 00:22:42.640 --> 00:22:47.799 No, it's It's obviously true like getting an application to 381 00:22:47.960 --> 00:22:53.519 do what you exactly what you want and can be challenging, 382 00:22:54.759 --> 00:23:00.960 and configuring a certain backend application to replicate certain scenarios 383 00:23:01.200 --> 00:23:05.319 is a problem. Just think about, you know, the scenario 384 00:23:05.359 --> 00:23:09.160 where a customer tells you that they're experiencing a certain problem, 385 00:23:09.240 --> 00:23:12.759 and maybe you even have traces that kind of show 386 00:23:12.799 --> 00:23:17.119 the problem the way that the customer is experiencing it, 387 00:23:17.240 --> 00:23:19.799 and now you're trying to replicate that scenario in the 388 00:23:19.880 --> 00:23:22.400 lab in order to debug it. We all know how 389 00:23:22.519 --> 00:23:28.079 challenging that can be. So I totally agree that replicating 390 00:23:29.599 --> 00:23:34.960 weird behaviors or edge certain edge behaviors that are legitimate 391 00:23:35.039 --> 00:23:40.079 and you want to test for in an actual environment 392 00:23:40.160 --> 00:23:44.119 that simulates production can be challenging, and it's often much 393 00:23:44.160 --> 00:23:50.480 easier to just play recordings of back end responses and 394 00:23:51.400 --> 00:23:54.839 you know, effectively mocking the back end it can be 395 00:23:55.039 --> 00:23:59.079 much much easier. Likewise, also mocking the front end. 396 00:23:59.160 --> 00:24:01.079 You know you want to. 397 00:24:02.599 --> 00:24:05.440 Test the back end, says system, then you might use 398 00:24:05.480 --> 00:24:07.880 some sort of I don't know, just post things out 399 00:24:07.920 --> 00:24:12.920 of Postman or whatever or playwright rather than actually having 400 00:24:12.960 --> 00:24:18.680 an actual front end that you know you create a 401 00:24:18.799 --> 00:24:21.799