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.