WEBVTT 1 00:00:01.000 --> 00:00:04.759 How'd you like to listen to dot net rocks with no ads? Easy? 2 00:00:05.320 --> 00:00:09.880 Become a patron For just five dollars a month you get access to a private 3 00:00:10.000 --> 00:00:14.359 RSS feed where all the shows have no ads. Twenty dollars a month will 4 00:00:14.400 --> 00:00:18.800 get you that and a special dot net Rocks patron mug. Sign up now 5 00:00:18.839 --> 00:00:24.199 at Patreon dot dot net rocks dot com. Hey Carlin Richard Here. As 6 00:00:24.239 --> 00:00:29.519 you may have heard, NDC is back offering their incredible in person conferences around 7 00:00:29.559 --> 00:00:33.320 the world, and we'd like to tell you about them. NDC Oslow will 8 00:00:33.359 --> 00:00:37.039 be me twenty first through the twenty fifth. Go to NDC Oslo dot com 9 00:00:37.159 --> 00:00:42.840 to register. NDC Copenhagen is happening August twenty seventh through the thirty first. 10 00:00:42.880 --> 00:00:48.880 The early bird discount for NDC Copenhagen ends June second. Go to NDC Copenhagen 11 00:00:49.000 --> 00:00:54.719 dot com for more information. NDC Porto is happening October sixteenth through the twentieth. 12 00:00:54.920 --> 00:00:59.000 The early bird discount for dc Porto ends July twenty first. Go to 13 00:00:59.119 --> 00:01:03.840 EDDC Porto dot calm to register and check out the full lineup of conferences at 14 00:01:03.960 --> 00:01:22.799 NDC Conferences dot com. Hey, guess what it's Donn Rocks. Wow, 15 00:01:22.840 --> 00:01:26.719 I'm Carl Franklin and I'm Richard Campbell. What do you know? Just happened 16 00:01:26.719 --> 00:01:32.239 again? It's so strange. I know eighteen hundred and forty three times that 17 00:01:32.280 --> 00:01:38.519 we've done this stupid show. I think it's that stupid. But you know, 18 00:01:38.680 --> 00:01:41.159 it's not that I haven't done that many. I'm a slacker. I'm 19 00:01:41.159 --> 00:01:48.760 the new guy. We were just talking about podcasts and the pod in podcast 20 00:01:48.760 --> 00:01:51.719 I always have to explain to you know, and well, that's because there 21 00:01:51.719 --> 00:01:55.439 are no iPods anymore, right, Like that product's gone. That's right, 22 00:01:55.480 --> 00:01:59.680 that's what it stood for. It was iPods where the where the device of 23 00:01:59.719 --> 00:02:01.640 the day. Yeah, it's just like you know, Microsoft had Channel nine, 24 00:02:01.680 --> 00:02:06.239 which was based on United Airlines Channel nine, where if you're flying United 25 00:02:06.239 --> 00:02:08.080 you could switch a Channel nine you could listen to. The United doesn't do 26 00:02:08.120 --> 00:02:13.599 that anymore. So like nobody knows what Channel nine means. It's gone. 27 00:02:14.319 --> 00:02:16.159 It's just funny. People people would say, hey, have you heard about 28 00:02:16.199 --> 00:02:25.360 podcasts, and I say no, no, no idea. Really it's just 29 00:02:25.400 --> 00:02:29.759 a little weird. All right, let's roll the crazy music for better no 30 00:02:29.919 --> 00:02:38.879 framework awesome? All right, man, what do you go, all right, 31 00:02:38.919 --> 00:02:43.680 well, I'm talking about the dot Net Show, which is a video 32 00:02:43.719 --> 00:02:47.280 show that I do. It's presented by Devi Express, right, and it's 33 00:02:47.319 --> 00:02:52.280 all about Maui right now. And I don't mean their tools, just general 34 00:02:52.360 --> 00:02:57.719 Maui stuff. And I started building in zamorin Forms. I started building a 35 00:02:57.800 --> 00:03:04.120 dot net rocks mobile podcasts in a podcast a client app right for iOS and 36 00:03:04.120 --> 00:03:07.800 Android. And then when Maui came out, I started rebuilding it because there 37 00:03:07.879 --> 00:03:12.000 was no converting it. That was just silly. Different approach, different approach, 38 00:03:12.039 --> 00:03:15.080 different projects, structure and everything. So we just started over and we 39 00:03:15.199 --> 00:03:20.919 got to four episodes on that and then the app doesn't really look all that 40 00:03:21.000 --> 00:03:23.680 great right now, but it's functional, right, So I figured this is 41 00:03:23.719 --> 00:03:29.719 the time to start the process of publishing to the app store. What is 42 00:03:29.800 --> 00:03:34.560 involved, you know, of moving parts, lots of moving parts, And 43 00:03:34.599 --> 00:03:38.360 I realized that I'll be an update hell forever. Yeah, but you got 44 00:03:38.360 --> 00:03:42.759 to start somewhere. So this, you know, this is episode eighteen forty 45 00:03:42.800 --> 00:03:46.319 three. So if you get eighteen forty three popped up me, that'll bring 46 00:03:46.319 --> 00:03:53.919 you to a YouTube video where I go and register yes, brand new accounts 47 00:03:53.520 --> 00:04:00.240 in Google Play you know, a Google developer and in Apple developer through the 48 00:04:00.280 --> 00:04:02.520 two app stores. Yeah, the two app stores. So I'm starting from 49 00:04:02.560 --> 00:04:06.840 scratch, and both of them require a waiting period where you have to get 50 00:04:08.080 --> 00:04:12.479 approved, and so the following week then we'll pick up where we left off. 51 00:04:12.560 --> 00:04:15.439 We're just going to go through the entire process, warts and all. 52 00:04:15.520 --> 00:04:17.519 Yeah, get right through it until you see your thing appear in the store 53 00:04:17.600 --> 00:04:21.519 and exactly and then start looking at updating it and how much fun that is. 54 00:04:21.600 --> 00:04:25.360 Absolutely I can't wait for that. That's going to be the show, 55 00:04:25.439 --> 00:04:28.399 right, Okay, you've published it well? And also like, what if 56 00:04:28.399 --> 00:04:31.120 they turn you down? Right? Like I almost tempted to put in something 57 00:04:31.199 --> 00:04:33.439 inappropriate in it just to see if they will turn it down. Oh, 58 00:04:33.519 --> 00:04:40.000 Richard, don't get me any ideas, because you know it's all an experiment. 59 00:04:40.040 --> 00:04:42.560 In the test, man, you might as well try test the limits 60 00:04:42.600 --> 00:04:45.759 of the system. Well, I am really interested in what happens when you 61 00:04:45.759 --> 00:04:47.839 want to update, right, because I know that there's pain around that. 62 00:04:47.879 --> 00:04:51.480 I've heard the time is the whole thing, especially when the Apple updates their 63 00:04:51.560 --> 00:04:55.279 OS and it breaks your app and all you need to do is recompile and 64 00:04:55.319 --> 00:04:59.160 redest why but that still takes time. Yeah, we had that problem with 65 00:04:59.199 --> 00:05:00.959 the last app that we had, which, by the way, it is 66 00:05:00.000 --> 00:05:04.319 no longer out there, so it's gone yeah yeah for various reasons. But 67 00:05:04.680 --> 00:05:09.040 this is going to be our dot net rocks app, and I'm going to 68 00:05:09.279 --> 00:05:12.839 document the whole process of publishing it and getting it in the app store. 69 00:05:13.000 --> 00:05:15.000 Awesome, That's what I'm doing. Okay, so part one, No it, 70 00:05:15.040 --> 00:05:17.639 learned it, love it. Who's talking to us today? Richard grabbed 71 00:05:17.639 --> 00:05:20.120 a comment of the show sixteen fifty nine, the one we did with one 72 00:05:20.240 --> 00:05:25.519 Jennifer Wooddell. I remember Jell. Yeah, we were talking about modernizing Angular 73 00:05:25.560 --> 00:05:28.759 apps and it certainly dug into Cypress and a bunch of other testing frameworks so 74 00:05:28.839 --> 00:05:31.199 forth. But that was back in twenty nineteen, so that's the before time. 75 00:05:31.439 --> 00:05:35.040 As we say in New England, she's Wick, it's Matt. Yes, 76 00:05:35.240 --> 00:05:41.079 it's true. She Wick Wick, It's Matt. And the comment comes 77 00:05:41.120 --> 00:05:44.639 from Red Dorian, who says, I have worked with Cyprus in Anger for 78 00:05:44.720 --> 00:05:46.439 more than a year, and this is now three years ago or four years 79 00:05:46.480 --> 00:05:49.560 ago, and I feel safe enough to comment on its usage performance. I 80 00:05:49.560 --> 00:05:55.040 wouldn't consider it replacement for unit tests. It has greater functionality in the end 81 00:05:55.079 --> 00:05:58.720 to end testing or automating user testing. As with all testing, there was 82 00:05:58.720 --> 00:06:01.000 a balancing act of how much testing you do, and the more testing you 83 00:06:01.040 --> 00:06:04.319 do with Cyprus, the longer your builds can take. And I'm talking adding 84 00:06:04.319 --> 00:06:09.160 anywhere between five and twenty minutes to a build. As you gain more experience 85 00:06:09.199 --> 00:06:11.879 with it, you learn where and what to test. But it's definitely an 86 00:06:11.879 --> 00:06:15.439 a compliment to unit testing with Karma, but not necessarily an alternative. Again 87 00:06:15.639 --> 00:06:19.079 four years ago, so the tools of evolved. The infancy of a technology 88 00:06:19.120 --> 00:06:21.560 is a factor that definitely needs to be taking a new account before jumping on 89 00:06:21.600 --> 00:06:26.199 the latest and greatest. Such is the cost of living on the bleeding edge. 90 00:06:26.240 --> 00:06:31.720 The cost of living on the bleeding edge is bleeding. Amen, did 91 00:06:31.759 --> 00:06:35.759 you just do that yourself? You had that in or is that actually okay? 92 00:06:36.519 --> 00:06:44.000 Little commentary, little editorialization there, But well, Red, we're about 93 00:06:44.000 --> 00:06:47.839 to introduce you to the newer versions of Cyprus because things have evolved, and 94 00:06:47.839 --> 00:06:53.839 it's great that you were on board back in the twenty nineteen twenty twenty because 95 00:06:54.319 --> 00:06:56.720 it's always good to have a view back of the player. Things started and 96 00:06:56.759 --> 00:07:00.480 I appreciate your thinking around how you mix stuff up, and that the price 97 00:07:00.879 --> 00:07:03.120 of testing. You know that that additional time is worth it because it makes 98 00:07:03.120 --> 00:07:06.720 feel more reliable software. Absolutely. So a copy of music code By is 99 00:07:06.720 --> 00:07:09.879 on its way to you. And if you'd like a copy of music codey, 100 00:07:09.920 --> 00:07:13.079 write a comment on the website at dot net rocks dot com or on 101 00:07:13.120 --> 00:07:15.439 the facebooks. We publish every show there, and if you comment there and 102 00:07:15.439 --> 00:07:17.240 everybody little show, we'll send you copy of music cod by. And by 103 00:07:17.279 --> 00:07:21.720 the way, music to Codeby has another brand, music to flow by, 104 00:07:21.879 --> 00:07:27.439 that's not just for developers, And I will also build an app for that 105 00:07:27.560 --> 00:07:30.879 and put that in the app store once I get the dot net rocks thing 106 00:07:30.199 --> 00:07:34.319 in there. That's gonna be fun. And you know, you can definitely 107 00:07:34.360 --> 00:07:39.319 follow us on Twitter if you want to. But I think the cooler place 108 00:07:39.319 --> 00:07:42.839 to hang out these days is masteredon Sir Richard and I are both there. 109 00:07:42.920 --> 00:07:46.800 I'm at Carl Franklin at tech Hub dot social and I'm Richcampbell at Masterdon dot 110 00:07:46.839 --> 00:07:51.560 social. So send us a tute and join join the tutors. All the 111 00:07:51.600 --> 00:07:55.399 tutes, yeah, all the tutes. And you know, I think I've 112 00:07:55.439 --> 00:08:00.560 resigned myself to not making up a joke. Right there, I'm done. 113 00:08:00.639 --> 00:08:05.439 That joke is done. Send us a tute. That's about it, all 114 00:08:05.519 --> 00:08:09.600 right, So let us introduce Eli here. Eli Lucas is the head of 115 00:08:09.680 --> 00:08:15.199 developer Ecosystem at Cyprus and has been doing software development for over twenty five years. 116 00:08:15.680 --> 00:08:20.000 After spending the first fifteen years doing dot net development, Eli moved more 117 00:08:20.079 --> 00:08:22.800 to the front end world and has been drinking the type script kool aid ever 118 00:08:22.879 --> 00:08:30.399 since. Lately, he's been focused on sharing techniques on producing better quality software, 119 00:08:30.800 --> 00:08:33.039 with testing at the heart of it. He lives in Denver with his 120 00:08:33.039 --> 00:08:37.440 wife and four kids, and when not developing, can be found taking his 121 00:08:37.559 --> 00:08:43.919 chaos on tour around the Colorado Mountains and probably breathing more heavily than you want 122 00:08:43.000 --> 00:08:48.559 him to. Because I've been to Denver. I kudn't even breathe now. 123 00:08:48.559 --> 00:08:54.120 Actually it was in Breckinridge that I really lost my breath. That's above Denver 124 00:08:54.200 --> 00:09:00.440 and it yes it is anyway. Welcome Eli, thanks guys, pleasure to 125 00:09:00.480 --> 00:09:03.399 be here. It's one way to keep four kids settled down, deprived them 126 00:09:03.399 --> 00:09:07.000 of oxygen and make them run around the coolest combination. Yeah, we actually 127 00:09:07.279 --> 00:09:09.519 we actually do that every year. We take them up. We go up 128 00:09:09.720 --> 00:09:13.360 for a week during the summer to Breckon Ridge every year. So it's good 129 00:09:13.399 --> 00:09:16.440 there you go. Breckon Ridge was so cool. They have the in the 130 00:09:16.480 --> 00:09:20.360 grocery stores. They have containers of oxygen that you can buy for a couple 131 00:09:20.399 --> 00:09:24.080 of bucks. And you know, anytime you feel like you just put that 132 00:09:24.120 --> 00:09:28.840 on and you feel better. It's crazy nice. Yeah, pressurized oxygen in 133 00:09:28.879 --> 00:09:35.600 the grocery store. Three thousand meters up, that's legit. Oh yeah, 134 00:09:35.600 --> 00:09:41.120 it's fourteen thousand feet something like ten thousand. Yeah ten. Denver's nine thousands. 135 00:09:41.159 --> 00:09:46.360 So I thought Breckon Ridge is abound. Denver was five. Yeah, 136 00:09:46.399 --> 00:09:48.240 okay, mile High City. That's why it's to Mile High City. Yeah, 137 00:09:48.279 --> 00:09:50.720 all right, okay, correct me on my math. That's right. 138 00:09:50.759 --> 00:09:54.480 It's been a while. As I said, I was oxygen deprived when I 139 00:09:54.519 --> 00:09:58.240 was there. You make too many memories that stuck around. Um Eli, 140 00:09:58.519 --> 00:10:03.120 tell us about Cypress and what it is. I mean, we've talked about 141 00:10:03.120 --> 00:10:05.840 it on the show before, but I'd like you to explain it for everybody 142 00:10:05.879 --> 00:10:09.159 who may not have heard about it. Yeah. Absolutely, So for those 143 00:10:09.200 --> 00:10:15.960 of you who may not know what Cypress is we are a free, open 144 00:10:16.000 --> 00:10:20.840 source utility that you can use to test anything that runs inside of the browser. 145 00:10:22.480 --> 00:10:26.240 And so our bread and butter has been pretty much in testing. That's 146 00:10:26.240 --> 00:10:31.519 what people primarily know us. For a few years back. We came onto 147 00:10:31.559 --> 00:10:35.879 the scene as being a quick, easy way to get into intesting up and 148 00:10:35.000 --> 00:10:41.039 learning inside your apps. Okay, and I guess it's in the category of 149 00:10:41.159 --> 00:10:45.679 testing tools. But as it works, as it works inside the browser, 150 00:10:46.200 --> 00:10:52.559 does it integrate with IDEs? How does that work? So the primary way 151 00:10:52.600 --> 00:10:58.440 that people work with Cypress is through our tool that you download and install. 152 00:10:58.600 --> 00:11:03.720 And to kind of go back into like how you get started with Cyprus is 153 00:11:03.759 --> 00:11:07.440 that it's an MPM installation that you install and to you typically your front end 154 00:11:07.639 --> 00:11:13.000 portion of your project, and then once you fire it up, it opens 155 00:11:13.159 --> 00:11:18.360 up a desktop application that you can use to start running your tests and whatnot. 156 00:11:18.720 --> 00:11:24.480 And so there might be like plugins and whatnot out there that you can 157 00:11:24.559 --> 00:11:28.360 use inside of your ide, but our primary interface is through this desktop application 158 00:11:28.440 --> 00:11:33.240 that you use. All right, very cool, and so do you have 159 00:11:33.279 --> 00:11:39.919 any answer to the message that Richard read there? It was granted four years 160 00:11:39.919 --> 00:11:43.559 ago, but I mean I take it things have changed a little bit. 161 00:11:43.120 --> 00:11:48.000 Yeah four years ago. Man, so much has changed since then. And 162 00:11:48.159 --> 00:11:54.080 if I recall, like the context around the message was around unit testing, 163 00:11:54.120 --> 00:11:58.200 maybe something about comparing testing type tools. Yeah, he was just saying that 164 00:11:58.240 --> 00:12:01.840 he's doing unit testing elsewhere, Yeah, right, not doing testing with Cyprus, 165 00:12:03.000 --> 00:12:05.720 which I wouldn't disagree with. Yeah. Yeah, So that's one of 166 00:12:05.720 --> 00:12:09.720 the things, Like with Cypress you can really test anything that runs inside of 167 00:12:09.720 --> 00:12:13.399 the browser, and so if you're testing to your front end code, your 168 00:12:13.480 --> 00:12:18.399 JavaScript that runs inside of the browser, you can definitely do so with Cyprus. 169 00:12:18.519 --> 00:12:24.080 It's not necessarily what we come out and advertise that's possible, but you 170 00:12:24.120 --> 00:12:28.159 can do it. What you would typically use for something like that is like 171 00:12:28.320 --> 00:12:35.679 just Right or Mocha directly to do those types of things, and the test 172 00:12:35.759 --> 00:12:41.360 runners to do unitype tests are probably better suited, like Jess is probably better 173 00:12:41.360 --> 00:12:45.080 suited for unit testing than cypresses. Right. Well, I guess suppose an 174 00:12:45.080 --> 00:12:48.360 advantage as you get if you wanted to do unit testing with Cyprus is that 175 00:12:48.600 --> 00:12:52.440 now you're all underneath one tool, with one set of APIs, one one 176 00:12:52.559 --> 00:12:58.559 learning curve to get everything done. As they say in the enterprise world, 177 00:12:58.600 --> 00:13:05.559 one throat to choke. Is that inappropriate? I don't know. I don't 178 00:13:05.639 --> 00:13:07.159 think so. It's a term, it's a term we use. It's pretty 179 00:13:07.159 --> 00:13:11.039 accurate. Yeah, all right, But yeah, if we go back to 180 00:13:11.000 --> 00:13:15.440 the timeframe that Red's talking about, that late twenty nineteen early twenty twenty, 181 00:13:15.440 --> 00:13:20.279 you really are talking about even before V one of Cyprus or maybe or maybe 182 00:13:20.360 --> 00:13:24.360 just V one V two. Yeah, it was, it was towards the 183 00:13:24.440 --> 00:13:26.879 earlier days. I'm not just sure what version would have been out because we 184 00:13:26.960 --> 00:13:31.679 come out with versions fairly rapidly. Yeah, it's yeah, impressive. So 185 00:13:31.759 --> 00:13:35.879 you guys had a major version number three version version numbers last year, ten 186 00:13:35.039 --> 00:13:39.200 eleven and twelve, Like, right, are you changing that much? Um? 187 00:13:39.279 --> 00:13:45.240 It's mostly well, so we follow semantic virgion Ingum, so when we 188 00:13:45.320 --> 00:13:48.759 come up with something that needs to be released that's going to require people to 189 00:13:48.840 --> 00:13:52.360 either update their codes or our epis are changing, you know, basically we're 190 00:13:52.360 --> 00:13:56.919 releasing. A breaking change is when we determine when we have to do a 191 00:13:56.960 --> 00:14:01.639 major version versus some type of shipping schedule. We do know towards the end 192 00:14:01.639 --> 00:14:05.320 of last year, because I think we released V eleven in like December and 193 00:14:05.360 --> 00:14:09.919 then V twelve like a month or two later in January February. Wow, 194 00:14:11.279 --> 00:14:15.799 and that was pretty quick even for us, but it's what we needed to 195 00:14:15.879 --> 00:14:20.519 do to kind of like hit some of these feature releases that we wanted to 196 00:14:20.559 --> 00:14:24.360 do. But the big one was V ten ok, and that was the 197 00:14:24.399 --> 00:14:30.759 one where we had a major UI refreshed because pretty much the UI hasn't changed 198 00:14:30.799 --> 00:14:35.120 at all since the Cyprus was originally released, and so the UI of the 199 00:14:35.120 --> 00:14:39.840 application got a total rehaul. But along with that, we released a new 200 00:14:39.919 --> 00:14:45.279 type of testing that you do with Cyprus called component testing. Okay, so 201 00:14:45.399 --> 00:14:50.519 what do you mean when you say component testing? Yeah, so specifically we're 202 00:14:50.559 --> 00:14:56.399 talking about the front end framework ceter, component based, so your Angular React 203 00:14:56.720 --> 00:15:00.759 view, any of these ones that kind of promote a component of an architecture 204 00:15:00.799 --> 00:15:05.639 where you break down the UI of your application and to small components that are 205 00:15:05.720 --> 00:15:09.799 usable across the app and so being able to test those on their own, 206 00:15:09.879 --> 00:15:13.600 not necessarily depending on a given page exactly. Yeah. So you're taking those 207 00:15:13.600 --> 00:15:16.120 components, you're mounting them in isolation from them the rest of the app, 208 00:15:16.159 --> 00:15:20.080 and then that way you can write tests that are just specifically for that widget 209 00:15:20.799 --> 00:15:24.159 versus like normally what you would have to do if you want to write test 210 00:15:24.200 --> 00:15:26.879 to it somehow throw it into the context of another page where it's going to 211 00:15:26.919 --> 00:15:31.679 be used. I we've built test pages with all of the components on it 212 00:15:33.039 --> 00:15:35.879 and then written the tests around that test page. It creates its own kind 213 00:15:35.919 --> 00:15:39.440 of hell. Yeah, yeah, and so this component testing is to get 214 00:15:39.440 --> 00:15:43.320 you out of that hell and to bring you to the light, all right, 215 00:15:43.480 --> 00:15:46.200 Yeah, being able to test the street. Like when I think componentization 216 00:15:46.279 --> 00:15:50.679 of controls, I think React especially. It's good at them like that seems 217 00:15:50.720 --> 00:15:54.559 to be there one of their claims to fame. It is very much that 218 00:15:54.600 --> 00:15:58.480 component mindset of style, function, all of that is all sort of bundled 219 00:15:58.480 --> 00:16:03.639 together. Yeah. On the JavaScript side, most of the um all the 220 00:16:03.679 --> 00:16:08.440 modern JavaScript frameworks subscribe to some type of component based architecture, right, and 221 00:16:08.840 --> 00:16:15.720 so we have official support for Angular, View, React and spelt okay, 222 00:16:15.840 --> 00:16:19.519 and then we also have the ability for the community to make their own mounting 223 00:16:19.559 --> 00:16:22.679 libraries because it is an open source project. Yep, it is an open 224 00:16:22.679 --> 00:16:27.080 source project, and we have a pretty vibrant community and ecosystem of people developing 225 00:16:27.080 --> 00:16:33.519 plugins for Cyprus, right, and so we are um a couple of minor 226 00:16:33.600 --> 00:16:37.840 releases back, we exposed an API that if you're a community like so, 227 00:16:38.080 --> 00:16:45.120 for instance, Quick is a newer front end framework that's coming out quic qu 228 00:16:45.320 --> 00:16:51.039 i k i k because games are hard, yeah, and did Neslee give 229 00:16:51.080 --> 00:16:56.600 them any problems? Isn't that that's chocolate drink? Yeah, let me let 230 00:16:56.600 --> 00:17:02.639 me double check that suspelling? But q q w i k qwik Yeah, 231 00:17:02.679 --> 00:17:07.240 because spelling things is hard, it is. Yeah, yeah, and searching 232 00:17:07.279 --> 00:17:11.400 for things like that is even harder. Oh yeah, no kidding. Try 233 00:17:11.480 --> 00:17:15.559 having a podcast with a period and beginning with the period is the first character, 234 00:17:15.720 --> 00:17:18.319 Like, what could go wrong? I'm I'm and I'm adding these all 235 00:17:18.359 --> 00:17:21.880 of the show notes, so I need I do want to find them all 236 00:17:21.960 --> 00:17:25.440 just so that folks can can look them up easily on the show. Yeah, 237 00:17:25.480 --> 00:17:27.200 but yeah, it's good to have Quick in there. I haven't looked 238 00:17:27.200 --> 00:17:32.720 it. Quick. It's another one. Yeah. So a Quick is being 239 00:17:32.759 --> 00:17:37.440 headed up by somebody who was one of the founders of Angular Misco. Yeah 240 00:17:37.519 --> 00:17:42.200 Misco. He's from the Angler team is working on Quick along with some of 241 00:17:42.200 --> 00:17:45.359 my old colleagues. I used to work out a coming called Ionic and some 242 00:17:45.440 --> 00:17:48.720 of my old college Ionic are also working on it. Yeah, all right, 243 00:17:48.839 --> 00:17:52.640 because there was the Ionic framework back in the day too, not that 244 00:17:52.680 --> 00:17:56.279 it's gone away, No no Ionic store around. Yeah, um, but 245 00:17:56.359 --> 00:17:59.920 yeah, that's that's an example of another like you know, really new. 246 00:18:00.680 --> 00:18:03.799 I think they just released their first RC a couple of weeks ago, but 247 00:18:03.920 --> 00:18:10.519 they're kind of disrupting the front end industry with yet another JavaScript framework, but 248 00:18:10.799 --> 00:18:15.559 making massive strides and performance and developer experience and all that fun stuff. But 249 00:18:15.640 --> 00:18:19.200 now the folks at Cyprus no longer have to debate do we add quick support. 250 00:18:19.480 --> 00:18:22.599 The API means if Quick ones to be supported in Cyprus, they can 251 00:18:22.640 --> 00:18:26.000 do it themselves exactly. Yeah, And we were actually working with the Quick 252 00:18:26.000 --> 00:18:32.839 team and their developer advocates and whatnot to get the library written and we're promoting 253 00:18:32.880 --> 00:18:38.240 it together. But yeah, because when we work on our own mounting library 254 00:18:38.359 --> 00:18:41.519 that is an efficient officially a part of the product. There's a lot to 255 00:18:41.519 --> 00:18:45.519 go along with that. We have all the documentation, all of our examples 256 00:18:45.000 --> 00:18:49.799 like show it also. Yeah, but that's what it takes for folks to 257 00:18:49.799 --> 00:18:52.599 be successful with it, right. It's like you guys who got a template 258 00:18:52.680 --> 00:18:56.640 where here's the things you need to do so someone can use Cyper successfully with 259 00:18:56.720 --> 00:19:00.559 your web framework exactly. I like it, you know, it's it speaks 260 00:19:00.559 --> 00:19:07.720 to our responsible approach to allowing people to be successful with their tools. Yeah, 261 00:19:07.839 --> 00:19:11.319 definitely, because goodness knows, we don't have enough jab script frameworks. 262 00:19:12.599 --> 00:19:15.599 Did I say that loud? I'm sorry? I apologize, all right. 263 00:19:15.680 --> 00:19:19.119 So the component testing is obviously a big piece and being able to do that 264 00:19:19.240 --> 00:19:23.200 discreetly other particular kinds of testing that I mean, you guys are famous for 265 00:19:23.279 --> 00:19:26.480 end to end yep. So, like I said, d end is primarily 266 00:19:26.519 --> 00:19:30.559 what we're known for. We're making a splash in the component testing scene. 267 00:19:30.960 --> 00:19:34.400 M Something else that's really interesting that is starting to gain a lot of interest 268 00:19:34.480 --> 00:19:38.440 that you can do with Cyprus is api testing, okay, And so we've 269 00:19:38.440 --> 00:19:44.240 had the ability because we have a method that you can use to make HTTP 270 00:19:44.440 --> 00:19:48.480 requests to a back end server inside of our API for the longest time, 271 00:19:48.559 --> 00:19:56.480 and people have been using that to write integration style tests to a backend API. 272 00:19:56.640 --> 00:20:00.400 So you make the requests and then you can check the content checked the 273 00:20:00.440 --> 00:20:03.920 status codes and the headers and all that fun stuff to make sure that you 274 00:20:03.000 --> 00:20:07.279 expect them to be what they are. But we had a community member make 275 00:20:07.319 --> 00:20:11.359 a new plug in that's called the Cypress plug in API that actually gives you 276 00:20:11.400 --> 00:20:17.400 a nice interface that shows you the contents of the body, the headers, 277 00:20:17.880 --> 00:20:19.839 all this other fun stuff. And so if you ever used something like Postman, 278 00:20:21.440 --> 00:20:26.279 it's kind of taken Postman but putting it inside of the Cypress Testing application. 279 00:20:26.920 --> 00:20:29.839 And so you use it, not only are you getting the benefits of 280 00:20:30.079 --> 00:20:33.440 like visualizing your API requests, but at the same time you're getting a set 281 00:20:33.559 --> 00:20:37.079 of tests that go along with it as well. Nice so sort of sets 282 00:20:37.079 --> 00:20:41.559 the standard for all the things you should be testing on an API. Yeah, 283 00:20:41.720 --> 00:20:45.920 and did that get introduce in ten as well? So that is a 284 00:20:45.920 --> 00:20:49.960 community plug in, right, I think it requires v ten because it has 285 00:20:49.960 --> 00:20:55.440 its own UI that comes along with it and whatnot. And so yeah, 286 00:20:55.480 --> 00:21:00.160 that makes sense, okay, And I found Phillip's repository for it, so 287 00:21:00.279 --> 00:21:02.519 yeah, just include that in the show notes too. The people can go 288 00:21:02.559 --> 00:21:04.440 and grab it. Yeah, I Philips one of our great ambassadors. Yeah, 289 00:21:04.440 --> 00:21:11.000 it's awesome and it just so it seems to me like ten because you 290 00:21:11.440 --> 00:21:15.359 created tooling around letting the community be more effective with you is why it's such 291 00:21:15.440 --> 00:21:19.279 a big version. So what happened in eleven and twelve? Okay, So 292 00:21:19.319 --> 00:21:25.240 the big thing was with Cyprus eleven. So Cyprus ten released the beta version 293 00:21:25.359 --> 00:21:30.920 of Component Testing right, and Cyprus eleven brought Component Testing out of beta into 294 00:21:30.000 --> 00:21:34.240 general availability, and with that there were some API changes and stuff that we 295 00:21:34.279 --> 00:21:41.359 wanted to make to get it out. Cyprus twelve was a bit bigger of 296 00:21:41.440 --> 00:21:47.839 our release, and that I saw a couple of features that our community have 297 00:21:47.960 --> 00:21:52.000 been asking for for a real long time. And so one of them was 298 00:21:52.920 --> 00:21:57.079 the way that Cyprus is architected is that when you write your tests, instead 299 00:21:57.119 --> 00:22:03.519 of like driving like a web browser via like a protocoler or anything like that, 300 00:22:03.599 --> 00:22:07.319 we actually take your test code and inject it inside of your application. 301 00:22:07.519 --> 00:22:11.799 Okay, and so the test code has direct access to all the HTML and 302 00:22:11.880 --> 00:22:15.480 the buttons and the elements and the dom right that would but because of the 303 00:22:15.519 --> 00:22:21.240 way that we're running, we had security issues when you had to go to 304 00:22:21.440 --> 00:22:23.599 another domain to do something. Yeah. Yeah, that makes sense because it 305 00:22:23.599 --> 00:22:27.319 looks like code injection, right, yep. Yeah. The only difference between 306 00:22:27.359 --> 00:22:30.480 you and a regular man in the middle of the track is you're the good 307 00:22:30.480 --> 00:22:33.680 guys. Otherwise it's the same thing. So we figured out a way that 308 00:22:33.960 --> 00:22:37.240 we could actually get around that, and that's what we call side dot origin 309 00:22:37.480 --> 00:22:42.440 is the new API and with side dot origin inside of your test when you're 310 00:22:42.559 --> 00:22:47.440 up out ready to transfer to new domain. So a common use case for 311 00:22:47.559 --> 00:22:51.079 this is third party authentication, right, and so you click a log in 312 00:22:51.160 --> 00:22:55.960 button you're going to go over to like Google or an auth provider like off 313 00:22:56.079 --> 00:22:59.640 zero or Opta, and inside of your code you use site dot origin. 314 00:22:59.720 --> 00:23:03.200 You're like, hey, I'm about we're about ready to make an origin change 315 00:23:03.319 --> 00:23:07.720 to this new domain name. Everything that's inside of the side out origin block 316 00:23:07.880 --> 00:23:10.880 execute inside of that new domain name, and so they'll take that code, 317 00:23:11.079 --> 00:23:14.400 put it into the new one, and then when you come back to your 318 00:23:14.400 --> 00:23:18.039 website, you exit the site origin and you're able to do that. But 319 00:23:18.119 --> 00:23:22.079 this makes it possible because we had a limitation before that you couldn't go to 320 00:23:22.119 --> 00:23:25.359 a new domain and do anything. You had to like work away, work 321 00:23:25.400 --> 00:23:29.799 yourself around it programmatically. But now you can actually just use the website like 322 00:23:29.839 --> 00:23:33.079 a normal user would. Yeah, that was my next question is how much 323 00:23:33.160 --> 00:23:37.480 JavaScript does one have to know to effectively use Cyprus. Yeah, and so 324 00:23:37.640 --> 00:23:41.440 writing your tests in Cyprus is either written with JavaScript or type script. But 325 00:23:42.079 --> 00:23:45.880 we've written the API in a way that it's more like I like to think 326 00:23:45.920 --> 00:23:51.559 of it as like a DSL, the domain specific language into testing. And 327 00:23:51.599 --> 00:23:56.079 so we have an API that is very fluent and chains off of each other, 328 00:23:56.119 --> 00:23:59.079 and so when you write the test, they kind of read a lot 329 00:23:59.119 --> 00:24:02.160 like English. And so the first thing that you're going to want to do 330 00:24:02.480 --> 00:24:07.839 is like select something inside of your site, and so you'll use a selector 331 00:24:07.880 --> 00:24:11.680 and a method to do so. And the primary way do you do that 332 00:24:11.880 --> 00:24:15.799 is with the get method, and so you say side dot get and then 333 00:24:15.839 --> 00:24:18.480 you pass in some type of selector. And the selectors are a lot like 334 00:24:18.559 --> 00:24:22.720 j C Ray selectors, and so you can select via class name, via 335 00:24:22.880 --> 00:24:26.440 ide, via elements, attributes and whatnot. We have best practice guides on 336 00:24:26.440 --> 00:24:30.839 how to do this in a good way. But then you select your element 337 00:24:30.519 --> 00:24:33.759 and then you take some type of action on it. And so like let's 338 00:24:33.759 --> 00:24:37.319 say you select a button and now you want to do something. You want 339 00:24:37.319 --> 00:24:40.920 to click it, and so you call the click method, and then after 340 00:24:41.000 --> 00:24:44.799 that you want to run an assertion, and so you have the assertion that 341 00:24:45.000 --> 00:24:48.960 is should and so you say dot should and then you say like should have 342 00:24:48.039 --> 00:24:53.680 been clicked or you know, text should equal whatever result you're expecting to be. 343 00:24:55.039 --> 00:24:57.359 But when you're looking at the code itself, it's very English like. 344 00:25:00.359 --> 00:25:04.440 And because of that, we have a lot of kind of QA teams that 345 00:25:04.480 --> 00:25:08.200 aren't necessarily developers, but they just know enough to go in there and be 346 00:25:08.279 --> 00:25:15.039 able to write test with Cyprus. And if your app becomes really big and 347 00:25:15.160 --> 00:25:21.000 you're constantly adding functions and functionality, that QA team is going to have to 348 00:25:21.039 --> 00:25:25.440 grow too, isn't it um? Yeah, And so we got we do 349 00:25:25.519 --> 00:25:30.839 have certain ways to be able to organize your your code, and we have 350 00:25:30.880 --> 00:25:34.359 a mechanism that we call custom commands, and this is where you can create 351 00:25:34.400 --> 00:25:38.319 your own command method that chains off of the side object and so you can 352 00:25:38.359 --> 00:25:44.759 actually use it as part of its fluence and tax. But one example might 353 00:25:44.799 --> 00:25:48.039 be like you need to log into your app. That's a common thing that 354 00:25:48.079 --> 00:25:49.319 you have to do, so you don't want to put that code in every 355 00:25:49.319 --> 00:25:52.039 single test that you need to do that in, and so you can create 356 00:25:52.079 --> 00:25:56.559 a custom log in command that will do your login for you, and then 357 00:25:56.599 --> 00:26:02.440 you can say side out log in, and then you can say dot get 358 00:26:02.480 --> 00:26:06.640 the avatar that shows that you locked in. Okay, so wait a bypass 359 00:26:06.680 --> 00:26:08.599 that now. And I've played with Cypress, I think we use the recorder 360 00:26:08.680 --> 00:26:11.960 primarily. Is that still a thing? Yep? Yeah. So it's called 361 00:26:12.079 --> 00:26:18.799 Cypress Studio, and it's an experimental feature right now, has been since it 362 00:26:18.839 --> 00:26:22.640 came out. So there's a flag that you have to turn on and side 363 00:26:22.640 --> 00:26:27.880 of the configuration. But with that you can use it to record your actions 364 00:26:27.920 --> 00:26:32.559 against a website. And so you can go through do a bunch of clicking, 365 00:26:32.680 --> 00:26:34.759 and then at the very end you can write click on something and add 366 00:26:34.759 --> 00:26:37.799 an assertion. You could be like this tech should equal what I expected to 367 00:26:37.839 --> 00:26:41.720 be and I will overrecord that, right, And it's just writing a DSL 368 00:26:41.799 --> 00:26:45.920 under the hood for you. Yep. Yeah. It actually takes a Cypress 369 00:26:45.960 --> 00:26:48.519 code, puts it inside of a JavaScript file along with all your other tests, 370 00:26:49.000 --> 00:26:52.039 and then from there that can get you like, you know, eighty 371 00:26:52.039 --> 00:26:55.720 percent of the way that are to a complete test. And from there you 372 00:26:55.759 --> 00:27:00.759 can just go and modify the JavaScript directly. Right now, the tool doesn't 373 00:27:00.880 --> 00:27:04.759 go back and modify an existing test. It's previously recorded, right so not 374 00:27:04.839 --> 00:27:10.319 re entrant. It just generates your initial impact paths and then you tweak it 375 00:27:10.359 --> 00:27:11.559 correct. Yeah, that's fair. Yeah, that was one of that was 376 00:27:11.559 --> 00:27:15.279 one of those things. And so in Cyprus ten, since we redid the 377 00:27:15.440 --> 00:27:18.039 entire UI, one of the shortcuts that we took was actually getting rid of 378 00:27:18.039 --> 00:27:23.599 to Cyprus Studio, right, And we got a ton of feedback from that. 379 00:27:23.680 --> 00:27:26.799 I think a lot of people were relying on the on the recorder man 380 00:27:27.039 --> 00:27:30.799 like that's yeah, yeah, what'd you replace it with? One of the 381 00:27:30.799 --> 00:27:33.759 subsequent releases, we did put that back in there, so there we go, 382 00:27:33.960 --> 00:27:37.119 Okay, well, what were you going to replace it with something? 383 00:27:37.200 --> 00:27:41.599 What was the idea? So it's a it's a it's always been an experimental 384 00:27:41.640 --> 00:27:45.119 feature since it's first came out, and that's because, like, while it 385 00:27:45.279 --> 00:27:48.200 is useful, we do know that it has quite a bit of limitations as 386 00:27:48.240 --> 00:27:52.079 far as like usually you do have to go in and kind of modify the 387 00:27:52.119 --> 00:27:53.559 code to get it to do exactly what you wanted to do, and you 388 00:27:53.599 --> 00:27:57.640 can't, like I said, you can't change previous tests with it. So 389 00:27:57.799 --> 00:28:03.400 expectations were too maybe yeah, yeah, And so it's it's one thing that 390 00:28:03.400 --> 00:28:06.480 we find is that it's a great learning tool because you can use it and 391 00:28:06.519 --> 00:28:08.720 go through and do things and then see the code that is writing for you 392 00:28:08.759 --> 00:28:11.400 and be like, Okay, that's that's how you do this, and right, 393 00:28:11.519 --> 00:28:15.599 this is how you Yeah, provided to the code you're generating is the 394 00:28:15.640 --> 00:28:18.519 best practice code. Yeah, then you're going to teach us best practice code 395 00:28:18.559 --> 00:28:23.079 just by starting to generator. But I love this hole getting over the blank 396 00:28:23.119 --> 00:28:27.200 screen syndrome. So Rana write a test. Here's the blank screen. Have 397 00:28:27.279 --> 00:28:32.119 a good time being able to use the recorder. Sort of lay down the 398 00:28:32.119 --> 00:28:36.480 initial template. This is the page, here are the fields, here's the 399 00:28:36.519 --> 00:28:40.359 assertion. Go. Now you go in and say, all right, well, 400 00:28:40.359 --> 00:28:41.519 I want to tinker with the log in this way, and I want 401 00:28:41.519 --> 00:28:45.519 to deal with this thing that way, and like there's a bunch of tweaking 402 00:28:45.519 --> 00:28:48.799 you do. But at least you're starting with a template. And guys, 403 00:28:48.799 --> 00:28:52.519 hold that thought for this very important pause, for these very important messages. 404 00:28:52.720 --> 00:29:00.559 We'll be right back. Hey, guess what, it's Dot at Rocks. 405 00:29:00.960 --> 00:29:03.400 I'm Carl Franklin. That's my friend Richard Campbell. Hey, and we're talking 406 00:29:03.440 --> 00:29:10.799 to Eli here about Cyprus. And my next question, if you haven't guessed, 407 00:29:10.960 --> 00:29:17.119 is any plans to support Blazer oh man, so web assembly all up, 408 00:29:17.279 --> 00:29:18.799 Like, how do you support testing and web assembly? Yeah, or 409 00:29:18.839 --> 00:29:23.519 even Blazer components server components. Yeah. So it's a multi multi faceted questions. 410 00:29:23.559 --> 00:29:26.039 So on the one end, with end in testing, Cyprus can testing 411 00:29:26.039 --> 00:29:30.559 anything that runs inside of the browser. Sure, And so if you fire 412 00:29:30.599 --> 00:29:34.359 up a development server and you hit a Blazer web app, and even if 413 00:29:34.400 --> 00:29:38.839 it's running web assembly, it's going to run inside of the browser and you'll 414 00:29:38.880 --> 00:29:44.839 be able to do it that way. The more interesting question is doing component 415 00:29:44.880 --> 00:29:49.160 testing web Blazer, because typically what we will do is we will load up 416 00:29:49.160 --> 00:29:56.920 the component inside along with our test code and mount to component directly, and 417 00:29:56.960 --> 00:30:00.680 then you can modify any of the properties or inputs that are going into the 418 00:30:00.680 --> 00:30:04.680 component and mess around with its API directly, which could be a challenge a 419 00:30:04.799 --> 00:30:10.799 Blazer like we could probably figure it out. We haven't heard a whole a 420 00:30:10.799 --> 00:30:15.640 lot of interest with that yet, but I have definitely thought about it, 421 00:30:15.079 --> 00:30:19.759 um and the and the more interesting challenge might be if it's just a flat 422 00:30:19.759 --> 00:30:26.079 out server based Blazer app, right, or everything's rendered Yeah, an server, 423 00:30:26.359 --> 00:30:30.160 Yeah, exactly. That That's that's an interesting dilemma, isn't it, 424 00:30:30.240 --> 00:30:33.839 Because there are some testing frameworks for Blazer, but they're like b unit is 425 00:30:33.880 --> 00:30:38.400 a unit testing framework Blaze. Yeah, end to end tasting of a Blazer 426 00:30:38.440 --> 00:30:42.200 app. That's an interesting problem needs to be done. Just a question of 427 00:30:42.200 --> 00:30:47.279 what you know, what can you hook to snapshot testing? You know Simon 428 00:30:47.319 --> 00:30:51.599 crops tools good for that, Verify right, just comparing code. But and 429 00:30:51.599 --> 00:30:56.640 and Richard's observation about web assembly, does that throw a monkey wrench in your 430 00:30:56.960 --> 00:31:02.440 plans? I No, I don't think so, because we we use real 431 00:31:02.519 --> 00:31:06.480 browsers to run our tests with, and so there are browsers that are installed 432 00:31:06.480 --> 00:31:08.880 locally on on the system that you're using to test it. One of the 433 00:31:10.039 --> 00:31:11.839 one of the very first questions you get as you're firing upside press is like, 434 00:31:11.880 --> 00:31:14.960 hey, what browser do you want to test in? Right? And 435 00:31:15.000 --> 00:31:19.960 so we have support for all the Chromian based browsers, so Chrome and Chrome 436 00:31:21.039 --> 00:31:26.960 and Edge, mainly support for Firefox, and then recently here recently we also 437 00:31:26.039 --> 00:31:30.400 have experimental support for safari um, so that that's another flag that you have 438 00:31:30.440 --> 00:31:33.759 to turn on to be able to use it. That was another feature that 439 00:31:33.799 --> 00:31:37.559 Redness knows it needs to be testing. It's waiting for that comment. Yeah, 440 00:31:37.880 --> 00:31:41.200 so as he said, Safari Richard's brow furrow did and he was like, 441 00:31:41.319 --> 00:31:47.039 oh, dang it. But anyway, Yeah, so but web assembly 442 00:31:47.119 --> 00:31:51.319 is interesting because you know, the code's running in that little sandbox, and 443 00:31:51.680 --> 00:31:57.079 the only JavaScript that you can look at is what's outside the sandbox, and 444 00:31:57.400 --> 00:32:01.240 uh, you know who knows what it's written in. Yeah, and for 445 00:32:01.319 --> 00:32:05.680 that it should be probably into intesting is going to be the best of it, 446 00:32:05.839 --> 00:32:08.680 because then the Cypress tool is just going to interact with the HTMLA that 447 00:32:08.720 --> 00:32:14.480 gets outputted from the Blazer app however, directly, which is easier in some 448 00:32:14.799 --> 00:32:19.000 senses. Yeah, so testing the Cypress is very black box like. Cypress 449 00:32:19.000 --> 00:32:22.680 really should not know a whole lot about the internals that's going on. It's 450 00:32:22.720 --> 00:32:27.359 a proper point of abstraction. I don't want to know it's all implementation details. 451 00:32:27.400 --> 00:32:30.000 You should be testing your application just like your user or would actually use 452 00:32:30.039 --> 00:32:32.920 it. Right order. That starts to break down a little bit as with 453 00:32:32.960 --> 00:32:37.079 component testing, because with component testing, you need to know a little bit 454 00:32:37.119 --> 00:32:40.160 about how your application works. You need to know like what framework it's written 455 00:32:40.200 --> 00:32:44.200 in, how to pass in properties to the components and whatnot. But really, 456 00:32:44.240 --> 00:32:45.960 as soon as you haven't mounted. It's just like an into intest. 457 00:32:46.000 --> 00:32:51.119 It gets rendered inside of the browser and then you can start. It's the 458 00:32:51.200 --> 00:32:55.680 plumbing of forcing a rendering so that you can test it. It's crossing into 459 00:32:55.720 --> 00:33:00.240 the line, poking underneath the cupboards a little bit to say, yeah, 460 00:33:00.240 --> 00:33:01.119 I need to I need you to make one of these for me so I 461 00:33:01.160 --> 00:33:06.039 can beat on it. That's a bit more specific. I mean you almost 462 00:33:06.119 --> 00:33:12.119 wonder if web assembly the standard is going to evolve to provide for capabilities, 463 00:33:12.119 --> 00:33:15.640 for more testability and so forth, and in that level, I mean, 464 00:33:15.680 --> 00:33:19.039 it's not there yet, but I can see that being the path because I 465 00:33:19.039 --> 00:33:25.640 think WA has particular application in like internal apps and things like that where they 466 00:33:25.720 --> 00:33:30.559 want they want to developers to work in the environment they know, and they 467 00:33:30.559 --> 00:33:34.039 want that code to be well tested. So I imagine it's going it's going 468 00:33:34.079 --> 00:33:36.440 to continue evolve. That's a lot of moving parts. I mean, how 469 00:33:36.519 --> 00:33:39.200 much how much impact do you have when a browser does an update, Like 470 00:33:39.200 --> 00:33:45.519 how does that affect Cyprus? Um? Not a whole lot, especially with 471 00:33:45.559 --> 00:33:50.359 how frequently they all come out with newer versions nowadays. Um, it's pretty 472 00:33:50.440 --> 00:33:53.240 rare. That will be like, oh, now browser came out and broke 473 00:33:53.680 --> 00:34:00.799 everybody's tests that we're using that browser. That's a bad day that that is 474 00:34:00.839 --> 00:34:04.359 something on your desktop. It's a little bit harder to control your browser versions 475 00:34:04.400 --> 00:34:07.800 or whatnot. But if you're running your tests in like cic D, yeah, 476 00:34:07.800 --> 00:34:13.920 we actually Cypress actually provides Docker images that you can use along with your 477 00:34:13.960 --> 00:34:16.800 CSD that has browsers included with it, and so if you needed to set 478 00:34:16.840 --> 00:34:21.880 like a browser or a certain version, you can just use that darker image 479 00:34:21.920 --> 00:34:25.400 for it and nice. So one of the gotchas of modern web programming, 480 00:34:27.000 --> 00:34:31.840 especially with spas, right with single page applications, is that elements just come 481 00:34:31.880 --> 00:34:36.280 and go. You know they're there, and then they're not there, and 482 00:34:36.440 --> 00:34:38.599 when you create them, they're not there. You have to wait before they 483 00:34:38.639 --> 00:34:45.039 render, before they show up. So does Cypress have any issues with spas 484 00:34:45.280 --> 00:34:51.000 in particular? You know, what if the IDs are dynamically generated? God 485 00:34:51.039 --> 00:34:52.960 forbid? I mean, I don't know who would do that, but you 486 00:34:53.000 --> 00:34:57.760 know I can think of evil ways to to to throw a monkey wrench in 487 00:34:57.840 --> 00:35:02.559 there. Um, do we you have to add specific attributes to things in 488 00:35:02.679 --> 00:35:06.840 order to find elements and what happens if they're not there? I mean how 489 00:35:06.880 --> 00:35:08.719 do you handle those things? Yep, okay, yeah, So I'll tackle 490 00:35:08.800 --> 00:35:12.360 that in two parts. I would say the first part, like how how 491 00:35:12.400 --> 00:35:15.239 to handle things when they're not there? Might be like one of the virginal 492 00:35:15.320 --> 00:35:24.800 reasons why Cyprus was invented. I like that because because for Cyprus UM and 493 00:35:24.920 --> 00:35:29.960 the and the testing solutions that were out there, this was like one of 494 00:35:29.960 --> 00:35:31.840 the very big problems. You try to select something wasn't there, and then 495 00:35:31.840 --> 00:35:35.199 all of a sudden your tests it feel and so you'd have to put in 496 00:35:35.280 --> 00:35:37.920 these weights into your code. Ye be like, hey, I did the 497 00:35:37.960 --> 00:35:40.760 API request, Let's wait a second for everything to show up. Oh it's 498 00:35:40.760 --> 00:35:45.039 not there yet. Let's wait another second. Set time out ten milliseconds, 499 00:35:45.079 --> 00:35:50.960 call myself, yeah, like you millisecond optimism, right, Like you know, 500 00:35:51.000 --> 00:35:52.760 maybe it might be a minute. You got to go and actually render 501 00:35:52.800 --> 00:35:57.679 the page. And so this may this made the reading or writing and reading 502 00:35:57.679 --> 00:36:00.679 the code more complex than what it needs to be. And then also just 503 00:36:00.800 --> 00:36:05.199 introduce this level of flakiness to the test, like sometimes it's going to work, 504 00:36:05.239 --> 00:36:09.239 sometimes it's not going to work. Cyprus with its API has built in 505 00:36:10.039 --> 00:36:15.400 waiting and retriability, right, nice, And what I mean by that is, 506 00:36:15.440 --> 00:36:17.760 if you say hey, using the CYPRESKIP method, if you say hey, 507 00:36:17.760 --> 00:36:22.480 go get me a button with like maybe some particular text like loggin. 508 00:36:23.320 --> 00:36:29.719 If that doesn't exist yet, Cyprus is going to wait up to four seconds 509 00:36:30.400 --> 00:36:34.840 for that to actually pass. That's enough time, and so that gives yeah, 510 00:36:34.920 --> 00:36:37.840 that's usually enough. And that's completely configurable too. You can do it 511 00:36:37.960 --> 00:36:39.440 at a global level, you can do it at a test level, but 512 00:36:39.440 --> 00:36:43.599 one would argue if it's more than four seconds, it's not going to happen. 513 00:36:43.840 --> 00:36:50.000 The customer left anyway, nobody cares about your rendering. But along with 514 00:36:50.039 --> 00:36:52.840 that, we also have built in retriability, and so let's let's say we 515 00:36:52.880 --> 00:36:57.360 have a scenario where we're looking and at a list of users and we go 516 00:36:57.400 --> 00:37:00.960 to delete one of the users. So we delete the user, we hit 517 00:37:00.960 --> 00:37:04.880 the delete button, and now we're waiting for the road to disappear. And 518 00:37:04.960 --> 00:37:07.599 so we're going to write a test that says, hey, get me this 519 00:37:07.719 --> 00:37:10.920 row and it should not exist anymore. Right, well, initially it might 520 00:37:10.960 --> 00:37:15.800 still exist, sure, but we're going to notice that, and we're going 521 00:37:15.880 --> 00:37:22.400 to wait and then retry the assertion again up to four seconds. And for 522 00:37:22.440 --> 00:37:28.400 some reason yeah, and for some reason, that dam element is still there 523 00:37:28.639 --> 00:37:30.000 after four seconds and we failed to test to be like, yeah, you 524 00:37:30.360 --> 00:37:32.880 said you're going to delete this record, but the team actually get deleted, 525 00:37:34.000 --> 00:37:37.039 right, But it did eventually, lead just took a ten seconds to know 526 00:37:37.079 --> 00:37:42.119 how to rerender it has gone. That's that's very very cool, and you 527 00:37:42.199 --> 00:37:45.199 need that kind of stuff because spas man, they're just a whole different beast 528 00:37:45.239 --> 00:37:50.360 than your standing a lot of latency in them. Yeah, and just like 529 00:37:50.400 --> 00:37:52.199 the dynamic nature of them things, they're there and then they're not there, 530 00:37:52.199 --> 00:37:58.760 and then they're there again. Yeah, and then their ideas changed. Okay. 531 00:37:58.800 --> 00:38:01.639 Yeah. In the second the second part was about IDs and how do 532 00:38:01.679 --> 00:38:08.000 you actually find your elements. So what we actually recommend is you don't use 533 00:38:08.079 --> 00:38:15.920 constructs like IDs or class names to find the elements if your application. I 534 00:38:15.000 --> 00:38:19.159 have two schools of thought. I have the official Cypress best Practices guide, 535 00:38:19.159 --> 00:38:21.599 and then I have what I think is best practices. Not give you the 536 00:38:21.639 --> 00:38:25.320 Cypress version first. Okay, the Cypress version is to use a special attribute 537 00:38:25.679 --> 00:38:31.920 data attribute like data dash test ID to go and find the particular elements that 538 00:38:31.960 --> 00:38:36.480 you're looking for. That's great. It doesn't exist for any other reason yet 539 00:38:36.599 --> 00:38:38.679 exactly right, hide away from the rest of the system. I like that. 540 00:38:38.760 --> 00:38:44.159 Yeah. And the problems with using something like ID is that a developer, 541 00:38:44.679 --> 00:38:46.960 sometimes a developer and a tester or two different people. Developer may not 542 00:38:47.039 --> 00:38:50.920 necessarily know this idea is being used for something. They might change it. 543 00:38:51.159 --> 00:38:55.079 And then also the test break. Then also you have class names have the 544 00:38:55.119 --> 00:39:01.199 exact same problem. But then a lot of the times with our JavaScript libraries, 545 00:39:01.239 --> 00:39:05.639 those class names are being dynamically generated and have like goods at the end 546 00:39:05.639 --> 00:39:07.440 of them stuff like that, So those aren't reliable to use either. And 547 00:39:07.480 --> 00:39:15.639 also we moved from Bootstrap you know, point zero to Strap seven and all 548 00:39:15.639 --> 00:39:19.760 the class names have changed. Yeah everything boom, yep. Yeah, so 549 00:39:19.920 --> 00:39:22.800 I get I love it. I mean you're basically saying this attribute is for 550 00:39:22.840 --> 00:39:28.880 this purpose only and that's it. We're not going to share any other attribute 551 00:39:28.920 --> 00:39:32.360 or construct with anyone else, right, makes sense? Yeah? And so 552 00:39:32.440 --> 00:39:38.400 in the React ecosystem, the most popular way to test React components until Cyprus 553 00:39:38.440 --> 00:39:45.159 takes over, is called React Testing Library. I don't know if you've caught 554 00:39:45.199 --> 00:39:52.119 that. Listeners thought a mid drink. I almost did a spittake until becoming 555 00:39:52.199 --> 00:39:58.840 revolution dot dot dot. Just let that one hang in there, all right. 556 00:39:59.280 --> 00:40:05.760 The Yeah, React testing library, they have a philosophy that the way 557 00:40:05.800 --> 00:40:10.039 that you select elements should be around the same way that a real user would 558 00:40:10.039 --> 00:40:14.800 find an element on the screen, and a real user could at the same 559 00:40:14.840 --> 00:40:20.119 time be something like a screen reader. And so because of that, instead 560 00:40:20.159 --> 00:40:22.760 of using something like a data dash attribute like I just said, you might 561 00:40:22.880 --> 00:40:29.360 use something like the role that the attribute, the ARIA role that the attribute 562 00:40:29.440 --> 00:40:31.760 plays, and so like button and so you could say like, hey, 563 00:40:31.960 --> 00:40:37.360 get by a roll button versus like get me a button element directly, because 564 00:40:37.440 --> 00:40:39.639 your button may not actually be a button element. It might be an anchor 565 00:40:39.639 --> 00:40:43.119 tag, or it might be a customed divtag that's made to look like an 566 00:40:43.159 --> 00:40:45.880 holement or something like that. Role. Yeah, but if but if you 567 00:40:45.880 --> 00:40:51.360 set up your ARIA attributes correctly, you would have given that divtag an aria 568 00:40:51.440 --> 00:40:57.360 dash roll button. And then there's an advantage that you get to writing your 569 00:40:58.119 --> 00:41:00.840 writing your test with this philosophy, and that is that you kind of like 570 00:41:00.920 --> 00:41:06.840 have built in accessibility as well, right sure, Um, So there is 571 00:41:06.880 --> 00:41:13.679 another library called Cypress Testing Library that takes the testing library methods and makes them 572 00:41:13.679 --> 00:41:22.599 available inside of the Cypress apium attation to the SI dot whatever fluent interface and 573 00:41:22.960 --> 00:41:30.079 that is what I like. Okay, that's the ELI test uh philosophy. 574 00:41:30.519 --> 00:41:35.039 Yeah, and who makes the cypers testing library? Um, it's an open 575 00:41:35.039 --> 00:41:39.119 source community. UM so it's actually a part. So the testing library is 576 00:41:39.360 --> 00:41:47.039 a larger organization that kind of exists over the smaller libraries. So like React 577 00:41:47.079 --> 00:41:51.719 Testing library, Cypress Testing library, or is an Angular testing library or view 578 00:41:51.760 --> 00:41:58.960 testing library, all these libraries that um subscribe to the API live under testing 579 00:41:59.000 --> 00:42:04.760 library. Yeah. Yeah. Can we test features that involve things outside the 580 00:42:04.800 --> 00:42:07.239 browser, Like what if we're doing some signal our stuff and going browser to 581 00:42:07.280 --> 00:42:14.159 browser and you know, what if we're doing something that accesses the local system 582 00:42:14.400 --> 00:42:16.360 that you know, download the file or something like that. Um ye, 583 00:42:16.599 --> 00:42:20.639 is there any way to do that? I mean anything that the browser does, 584 00:42:20.920 --> 00:42:23.639 Um, you should be able to do inside of Cyprus. So what 585 00:42:23.840 --> 00:42:27.840 about two browsers. What I'm saying, what if you've got some to two 586 00:42:27.880 --> 00:42:30.639 browsers at the same time is going to be more difficult just because we only 587 00:42:30.679 --> 00:42:36.119 load up inside of one browser. Okay, So but something that you can 588 00:42:36.159 --> 00:42:43.079 do to perhaps get around that is we have some network mocking and intercepting built 589 00:42:43.119 --> 00:42:49.159 in, and so it's kind of like a like a stubbing library, okay, 590 00:42:49.239 --> 00:42:52.880 where you can stub out network requests, and so if you're making a 591 00:42:52.920 --> 00:42:59.480 web soccer requests, you can stub that out and provide values for it instead 592 00:42:59.519 --> 00:43:04.039 of it actually talking to a second browser for real. Okay, But there's 593 00:43:04.159 --> 00:43:07.960 any way that I can you know, open one browser and then do something 594 00:43:08.000 --> 00:43:13.800 and then open another browser, get the result of that, and orchestrate both 595 00:43:13.800 --> 00:43:16.920 of those things under one test. I mean, there's probably a way. 596 00:43:17.119 --> 00:43:22.760 I think the challenge would be to be able to orchestrate that workflow and get 597 00:43:22.800 --> 00:43:25.880 it to like give you like reliable results, right, make it reliable. 598 00:43:27.039 --> 00:43:30.199 That's what I would be already about. That sounds like a challenge for a 599 00:43:30.199 --> 00:43:34.800 similar listener who wants to do a pull request. That's what I'm thinking. 600 00:43:35.159 --> 00:43:38.599 Make a contribution, Make a contribution, yeah, because you are taking contributions. 601 00:43:38.920 --> 00:43:43.760 Yeah, And speaking of that, where do we go to take contributions? 602 00:43:43.840 --> 00:43:45.719 Here? Where's the what's the website? Where's the GitHub repo or whatever? 603 00:43:45.960 --> 00:43:52.000 For the Cypress Yeah, for the Cypress open source or just Cyprus in 604 00:43:52.039 --> 00:43:55.239 general. Yeah, the Cypress open source Okay, So we're at GitHub, 605 00:43:55.559 --> 00:44:00.280 so gethub dot com, slash Cypress dash io couldn't be easier. And there 606 00:44:00.320 --> 00:44:08.760 you can find the main Cypress project and tons of example applications and the documentation. 607 00:44:09.519 --> 00:44:13.039 Okay, well pretty much all this stuff that we do is open source 608 00:44:13.239 --> 00:44:16.360 and including the docs. And so if you notice something like in our doc 609 00:44:16.400 --> 00:44:20.559 set roun like, you can go in and open up a pr and help 610 00:44:20.599 --> 00:44:23.000 fix up the docks as well, make submit it to the docs, prove 611 00:44:23.039 --> 00:44:28.599 great explanations. That's great. So what about large scale testing? So I 612 00:44:28.760 --> 00:44:31.719 built up a big test suite Now it takes hours to run. Is there 613 00:44:31.719 --> 00:44:36.239 tooling to allow me to spread this across multiple workloads and try and speed things 614 00:44:36.320 --> 00:44:39.800 up. So the Cyprus app itself, like I said, it is free. 615 00:44:39.800 --> 00:44:43.239 It's open source, it always will be free. You can take it 616 00:44:43.400 --> 00:44:46.639 and use it to your hearts extent. We do have our commercial service how 617 00:44:46.639 --> 00:44:52.239 we make money. It's called Cyprus Cloud and it's for larger projects that are 618 00:44:52.320 --> 00:44:57.119 growing, and it's to help you scale and give you analytics into your testing 619 00:44:57.159 --> 00:45:00.159 suite. Okay, and a few a few of the things that it as 620 00:45:00.239 --> 00:45:04.480 is what you're just saying, Richard, is you can use cypress cloud to 621 00:45:04.760 --> 00:45:09.360 scale out you're testing across multiple instances to get parallel into your tests. Yeah, 622 00:45:09.400 --> 00:45:13.159 it's strangely. We were always big on the being able to run the 623 00:45:13.280 --> 00:45:17.039 entire test back in fifteen minutes because give enough time to the developer to stretch, 624 00:45:19.360 --> 00:45:22.880 declare they are a god, and this god needs coffee, Go get 625 00:45:22.880 --> 00:45:27.800 coffee, and by the time they got back from coffee, the test results 626 00:45:27.800 --> 00:45:30.320 are in and they were not a god after all. But the point being, 627 00:45:31.199 --> 00:45:37.000 the code still in their head when they get the testing report back, 628 00:45:37.719 --> 00:45:40.639 rather than having to figure out like why did this fail? It's current enough. 629 00:45:40.719 --> 00:45:44.480 Like we at one point, I think our test week was running over 630 00:45:44.559 --> 00:45:46.840 a weekend, and so by the time you've got your test results it was 631 00:45:46.960 --> 00:45:51.440 Monday, and anybody could have written that code on Friday. You have no 632 00:45:51.519 --> 00:45:57.280 clue. So it's I really appreciate that the power of when we can rapidly 633 00:45:57.360 --> 00:46:00.679 do the tests and get it into the hands of the developer, that they 634 00:46:00.719 --> 00:46:04.440 can they while the coast on their head. They respond fast. Yeah. 635 00:46:04.519 --> 00:46:08.360 Yeah, that's the whole purpose of setis Cloud. It's about optimizing human time 636 00:46:08.559 --> 00:46:14.159 versus machine time, right, and so we do that sometimes by optimizing machine 637 00:46:14.159 --> 00:46:19.639 time, like spreading the workload over or we have a feature called smart Orchestration 638 00:46:19.880 --> 00:46:24.280 that will run your tests in a in a manner that makes more sense. 639 00:46:24.400 --> 00:46:29.320 Like, for instance, if for some reason you had a failure and then 640 00:46:29.400 --> 00:46:31.559 you make a change and then you upload it. With smart Orchestration, it 641 00:46:31.599 --> 00:46:37.639 will actually run that failure first to make sure if passes, versus you having 642 00:46:37.639 --> 00:46:39.760 to wait till like if it was like test nine nine a thousand that failed, 643 00:46:39.800 --> 00:46:43.480 you don't have to kill the entire suite to go through again. Yeah, 644 00:46:43.599 --> 00:46:46.480 so some smart Yeah, it's smart things to put the problems should up 645 00:46:46.480 --> 00:46:50.719 front, keep that cycle time down. Yeah. And I'm looking at the 646 00:46:50.760 --> 00:46:55.679 pricing like that's pretty reasonable. You consider how much the test edition of Studio 647 00:46:55.880 --> 00:47:01.039 costs back in the day for the business, this product being three thousand dollars 648 00:47:01.039 --> 00:47:06.360 a year for forty devs. That I'm not going to argue with that. 649 00:47:06.360 --> 00:47:12.960 That's pretty powerful stuff. And you only have to beat down one bad bug 650 00:47:13.079 --> 00:47:15.679 and you paid for your test suite for the year. Gay, you know 651 00:47:15.719 --> 00:47:19.800 that that's I look at that number and go you can burn that in a 652 00:47:19.840 --> 00:47:23.320 weekend with four davs tearing their hairs out trying to fix a problem, right, 653 00:47:23.400 --> 00:47:27.199 Like, if the tool can nail that down, at least let your 654 00:47:27.280 --> 00:47:30.119 roll back so you keep your weekend and you'll figure it out on Monday, 655 00:47:30.639 --> 00:47:35.079 or can actually get it too fixed so that they don't they don't spend the 656 00:47:35.079 --> 00:47:37.800 whole weekend of fighting it. I'm all for that, yep. Indeed awesome. 657 00:47:38.199 --> 00:47:44.639 So what's next? What's on the horizon for you? Cyprus thirteen? 658 00:47:45.480 --> 00:47:51.239 Cyprus thirteen yep. So right now, we're definitely looking at ways to make 659 00:47:51.280 --> 00:47:54.960 the developer experience of Cyprus better, and so that's a big focus of upcoming 660 00:47:54.960 --> 00:47:58.840 thirteen release, which is probably gonna be slated for the fall sometime. So 661 00:47:58.880 --> 00:48:04.880 we're looking a lot of API changes for stuff that the community is looking for. 662 00:48:05.639 --> 00:48:12.639 But only one major version every year, how slack? Yeah your reputation, 663 00:48:13.559 --> 00:48:16.239 Yeah, well your marketing people do only once that logos to make. 664 00:48:17.159 --> 00:48:23.159 But yeah, also continuing like to make the developer experience of component testing better, 665 00:48:23.239 --> 00:48:27.199 because that's one thing that people originally fell in love with the Cyprus is 666 00:48:27.239 --> 00:48:30.840 that the developer experience, like writing test before was kind of painful, not 667 00:48:30.920 --> 00:48:34.360 really all that fun. You can get up and running testing with Cyprus in 668 00:48:34.440 --> 00:48:37.840 like minutes, and it's a little relaxing to sit there and be able to 669 00:48:37.840 --> 00:48:42.559 write like tests over and over that aren't like stressing you mentally that are passing 670 00:48:42.639 --> 00:48:45.840 and all that kind of fun stuff. And so that's we're kind of really 671 00:48:45.920 --> 00:48:51.239 die hard at just making it as simple as possible to write tests. Very 672 00:48:51.280 --> 00:48:54.360 good, all right, Anything that we missed that you want to mention any 673 00:48:54.360 --> 00:48:59.599 shout outsh no, I don't think so, Okay, Yeah, awesome, 674 00:49:00.119 --> 00:49:02.440 Eli, Thanks thanks a lot. This is good stuff and great and thanks 675 00:49:02.480 --> 00:49:07.280 for answering our questions and it sounds like a great product again. Absolutely, 676 00:49:07.280 --> 00:49:09.760 guys, my pleasure, all right, and we'll talk to you next time 677 00:49:10.159 --> 00:49:36.960 on dot net rocks. Dot net Rocks is brought to you by Franklin's Net 678 00:49:37.159 --> 00:49:42.119 and produced by Pop Studios, a full service audio, video and post production 679 00:49:42.159 --> 00:49:45.800 facility located physically in New London, Connecticut, and of course in the cloud 680 00:49:46.440 --> 00:49:52.360 online at pwop dot com. This is our website at d O t n 681 00:49:52.400 --> 00:49:58.480 et r ocks dot com for RSS feeds, downloads, mobile apps, comments, 682 00:49:58.760 --> 00:50:01.920 and access to the full archives going back to show number one, recorded 683 00:50:01.920 --> 00:50:06.880 in September two thousand and two. And make sure you check out our sponsors. 684 00:50:07.000 --> 00:50:09.639 They keep us in business. Now go write some code. See you 685 00:50:09.719 --> 00:50:13.639 next time you got a chad metal band.