 Hello, how's everything going? So I just Just want to run so you're gonna get to see my hair grow in just a second. There's nothing in it So that's gonna be super exciting for you. Um, yeah, so we're starting just oh, it's 10. Let's do it Okay, so this is what I am on today Um So in the first video in this series, we just set up a learn a monoripo. I have my questions here And we set up one package in here, which is the avatar package now there are tests There's a test set up in here, but it's not It's not doing anything yet. It doesn't even like require any test packages or anything So this is all set up by learn a create So what I want to do today is I actually want to get Just one test going and I communicated earlier that I want to try and use Cypress for this because I'd like to use real browsers The reason for that is just because all this stuff is visual visual Elements, and I don't really want to take a chance. So I Want to be able to test in real browsers This seems like the tool that people like to do that with so I thought I'd give it a try I have played with it, but it was already set up. So I've never set it up personally So we're gonna do that. We are gonna do that So let's see what we got going on Okay, so nope don't watch that video Okay, so first we need to get started So how it works? Docs so first we install it and as we've done with All of our stuff so far that's gonna be in the root of the project where I'm at here right now so You know installs like press Cypress I am Cypress Okay, we're gonna install cypress. See who yet. It's already growing. It's growing out this way Get all of this internal or this VS code Terminal it's super handy Love it. I haven't really built a workflow around it yet, but it is nice in demonstrations like this Hold on just a second. Well, first thing I'm learning is that this takes a good while to get set up So that's exciting Yeah, okay, cool. So we got version 3.1.1 set up. Let's see root requires a peer of react 16.6.3, but none installed you must install peer dependencies yourself Okay, so we're in the root project. I was I'm pretty sure See package Jason in the root. Oh, so we have it Installed as a peer dependency, but we also need to install it as a dependence a dev dependency Huh, interesting. Okay Let's see if we can get away with it for now and Then if we have if we have a problem, we'll we'll come back to that. Okay, cool So we have all that everything's unzipped and installed now. How do we start using it? So In a nutshell next generation front-end testing tooling built for the modern web. We rest the key pain points Developers and QA engineers face when testing modern applications. So set up tests for a test run tests And debug tests. Okay, so set up tests Save Cypress. Oh, I didn't save it as a dev dependency. I always do that. Sorry. I'll fix it in a little bit so it's Showing us a video about exactly what we just did Okay, plus more and missed it because I was saying that we already did this I can Open Cypress by running node modules bin Cypress open. Okay. Oops. This is cool How do you get started we've added some folders an example test your project try running the tests in the examples folder or Add your own test file and Cypress slash integration Okay, okay, so it looks like maybe it added it here. Oh Okay, cool Cypress right there Okay, so it added a bunch of tests we'll see how this works with the setup that I have now Looks like they may be kind of like external to the project so That'll be that'll be interesting to kind of figure out. Maybe we'll just leave them there Maybe they stay there and we'll figure the rest out Or just kind of import them from the packages directly. Um, I don't know. We'll see. Okay, so What do we have here? So we have the name of our project which got inferred Log in. I'm assuming that's like the paid stuff See we have tests Runs you have no recorded runs. Okay, cool. So it'll record and some Runs of this for me. We have some configuration Though you can change Lovely and then different environments, I'm sure that there's a way to customize that via config file or something So let's see. So these are the specs Let's just run all let's see because they give us a bunch of examples. We're gonna see what what happens rescue oh Totally unrelated to anything we're doing here. All right, so it looks like it's going through a bunch of actions I'm just validating that they all happened Really cool. So we don't have any failing yet. So it seems like maybe Maybe we don't need to react stuff Yet, I don't know. We'll see Man, this is like super elaborate It's honestly when I When I install stuff like this, I feel a little bit overwhelmed when it sets up so much stuff for me Because it feels like it's already a thing and sometimes I have hard a hard time coming into a project It's already like super established and set up I'm assuming that all of these can just go away. I'm gonna let this finish running though It might take a second. I'm a saline. Yes Kind of freaked out here. Oh, maybe it's testing something By freaking out Always hard to know Okay, so I can see in my terminal it's running all these tests so I can see them That they're running in the background and passing which is great Let's look at how some of these are set up. So in fixtures. We have examples. This is just an object data We have a profile objects. These are just things that we can use To set up some of our tests reusable data integration Okay, examples, so it looks like these are the actual tests that are being run. Let me look at the other folders first Plugins we don't have any plugins right now But nice to know that they're available. We can go to plugins guide cypress.io plugins guide We don't have any in there right now, so I don't have to worry about that all specs My image. I'm not sure what that is. So that's an open question for me Support commands This example commands that js shows you how to create various custom commands import commands.js using ES 25. Okay, cool Okay, so it doesn't really look like there's anything in here for us the bulk of what we're looking at is this this bad boy right here I don't know if you can hear my kids screaming in the background, but It's exciting. Um Okay, let's see what we got. Okay, that whole thing ran. I don't know if Okay, can I show it to snapshots while tests are running? I Think that that's Good, okay, so I assume we can close this I'm assuming that we'll have one run in tests now. No It's like maybe it's still going Of that last one is is is super long apparently and I probably interrupted it Okay Clients I disconnected cannot continue running tests. Okay, that's fine Okay, cool. So let's see so actions I just want to see what the shape of these tests kind of look like so context is like the big Sorry, I still got that cough going on Context is that big block? In which we would run all of these tests so context so before each we're going to visit Looks like this is the big object where all of these functions get called through Visit and we're gonna visit this URL That's really nice. They have this handy document for Directing with elements It's really nice that they they link you directly to Where you would need to go to understand all that I'm feeling a little bit better about the fact that they have so many damn tests set up Already Okay Okay Might be a little in over my head, but that's not news to you So, um, let's see what we Can do Where is this set up? I'm wondering is this just something that we get? Okay, so it's navigating to this page which is not in our project That's helpful information. So I guess I could navigate it to Local hosts or something like that for my local setup Okay, cool. Now I'm now I'm tracking a little bit key differences installing Cypress writing your first test that is Exactly where I'm at right now. Let's fix that dev dependency thing Well, we are at it Okay, so Okay, so we installed Cypress and we saw this now where it's testing The that integration test stuff on Cypress. So we got that Still yarn add, okay direct download not worry about that. Okay, so I think we're fine Isn't npm been okay Adding npm scripts. Yeah, sure. Let's let's open. Let's do this. So I don't have to do I always I always forget how to do this so Let's add a nice script for it Oh My gosh cannot type today Okay, so if I kill this I should be able to say npm run Cypress open and I can call that command whatever it is that I would like to Cool, perfect. I wonder so it looks like I can run these Just a small set of these tests Perfect, this is really cool. Okay, I'm gonna let that go Okay, so see all I tools Advanced definitely not advanced. So I'm not going to think about that installing binaries Okay I'm done with installing writing your first test How to start testing a new project in Cypress what passing and feeling tests look like testing web Navigation Dom courying and writing assertions. Okay, cool. Perfect. Um, I Don't know if this audio is gonna come through for you Okay, I'm going to assume that all this is echoed down here, so I don't want to watch a video So create a sample JS file. Okay, so now that we know that we can run individual tests We can make a new file for this Create or watch Cypress update our list of specs. Okay Okay, so I got Cypress over here I'm going to take this and I'm gonna move it over here Now it said What did it say? Okay, so I'm gonna put this in Cypress integration Okay, so it has examples. I'm gonna put it right in the root of this Perfect, okay Once we've created that file we should see that Cypress see the Cypress test runner immediately display it in the list of integration tests Oh Fancy awesome Very cool. This is amazing Okay, so no tests were found This is the default blank page test your web application Start your app server see why visit Your app begin with tests So now this is a little bit of a bummer because I don't actually have a server set up for my tests for my For my code yet. So this might be where we end up spending a bulk of our time. It's all right So let's see see why visit man. They're really nailing it Oh my gosh nailing with the documentation Okay, cool. So visit a remote URL and yes, we can use localhost excellent Okay, no, I just want to try I just want to get my hands dirty with this a little bit So We're gonna just put this in here see what happens. Whoa cool ran it again URL is not defined. Okay, cool outside Uncaught cypress error cannot call see why visit outside a running test It usually happens when you accidentally write commands outside of an it cool. Let's open up one of these examples So this is an it okay excellent All right now I didn't capture that it just seemed to visit the URL so I'm not really sure Okay, cool. Let's let's go back to the docs Once we visited that file, we should see that cypress test were immediately displayed as a list of integration tests Cypress monitors our spec files for any changes automatically. Okay. Cool. Cool. Cool Cypress opens the test in a browser. It's Cool. Okay. We have this experience. I should not jump ahead. Oh Hold on a second one second Okay So Sorry about that real life happening right now We're a simple test now. It's time to write our first test. We're going to write our first passing tests Great save Okay, cool. We did see it auto loading in real time. Let's uh Just copy and paste with the guy. I ain't too proud to do that. What I do here does not do much my first test Okay, so in terms of like what it looks like so we have a describe block and that gives it this That that is the drop-down. So we've got the drop-down as described In each one we have a test does not do much. No commands were issued for this test. Okay. Cool. No problem Cool, so we got that going once you save the file, you should see the browser reload although it doesn't do anything useful As our first passing test now, I don't see the passing part of that. So I'm not sure why Fluke accident displays a message about being the default page on the right-hand side. Okay Now let's write our first failing test. Okay. Um, that should be pretty easy. I don't need to copy and paste that I'm just going to change this to false and Okay, cool Awesome shows the assertions right there perfect. I think I probably get them in my console too. Uh, no Not so kind It's fine Cypress provides a nice test runner that gives you a visual structure Sweets, okay. Yep. We saw that What are you describe it and expect all of these functions come from bundled tools I'm curious what those are the cypress bakes in Describe and it come from mocha. Okay, cool expect comes from Chi great Cypress builds on these popular tools and frameworks that you hopefully already have some familiarity with knowledge up. Okay Second check out our cypress ES lint plugin Okay, so this would just help me with certain things Okay, a solid test generally covers three phases set up the application state take an action make an assertion about the resulting application state, okay Might also see the phases given given when then arrange act assert, okay Today, we'll take a narrow view of these steps and map them cleanly to cypress commands Visit a web page. Okay. That's what I was trying to do perfect Query for an element Interactor the element and assert about its content Okay, so let's copy this though. We already know generally This CY visit command is going to visit a URL in this case. They give they've given us the URL. Okay, cool So it visits great Save the file and switch back. Okay, cool. So you see that kitchen sink test is green Blue padding to show that it passed. Okay. Nice some really nice visual affordances. I'm seeing So only test you only test apps you control All this guide we are testing our example application You shouldn't test applications. You don't control. Why? Well, because why would you do that? This is brutal got a little coldness screw me up So now that we've got a page loading. We need to take some action on it. Okay? So there is a contains Command and so we can say that it should contain the word type. Okay, let's put that in there Okay, awesome. Before we add another command, let's get this back to your passing in place. Okay, um contains oh, so Saying that if you want to see it fail, you can change it to oops Which it does not. Okay, cool. Perfect. Perfect click an element so We can append a click on to that. I want to click like we found and No, this is going to be like just kind of like mimicking this might be a little bit more that I need right now But eventually I will need to kind of click Try some like Kind of hover behavior and some clicking behavior and just make sure that everything Everything works Okay, cool. So let's just let's just continue through this doc. Oh, it's gonna fail because I still have hype You type I'm gonna hide these examples because they're stressing me out Let's see So make an assertion. This is what all comes down to like if you haven't test This is this is not right. How do I reload this? Stop running run all tests again. There we go Okay, so Yes, whoa. Oh crazy So as I hover over these I can see I can see each like a snapshot of everything that's happening So clever hover over this it visits that Contains finds the thing highlights it There's a click action. I can see the page loading. We get a new URL. Yeah, that's awesome Let's make an assertion. Okay. So everything comes down to assertions like if we just do stuff and test But I want to assert anything or return failures like we're just doing nothing So it all kind of comes down to this we need to do this in the very end. So Let's make an assertion about something on the new page we clicked into perhaps We would like to make sure the new URLs is is the expected URL We can do that by looking up the URL and changing the assertion to it. We should Okay, cool. So we've got our contains and we click we click the object that we found with contains Should be new URL. So let's see. So Where's this URL command do oh Probably just fetches the URL Yeah, so see why URL grab the URL I should include This some URI Okay, so we've got the new URL. We grab the URL. I don't know if there's like a visual indication of that and then it will Show us the URL and yeah, cool. Perfect Uh, great. So that's the actual URL and then the line that we expected it to I'm curious what this pin thing does Printed output to your If I rerun this didn't do shit Tell me Tell me what I'm doing wrong Let's see Any more commands and assertions type So get an input type into it and verify that the value okay, so type Sorry, I immediately thought of like type as in like interface types, but no, this is saying Literally the verb type this Into a field Should have value. Okay, so it looks like in addition to these functions. There's also these string APIs So I'll need to look into those have value fake email address, okay Now one thing that okay, so so this all is very good I'm trying to think about what my next action step is in in terms of my application Some of the things that I need to know is it right now is I want to get some of the properties so I Want to Don't get back in my thing. Okay, so I have this component, right? And it applies this class And that class Has these stylings on it Now I would want to make sure I think if I'm thinking about this, right? I would want to basically load that up. I would want to use it I would want to render it on a page and with the CSS and I want to make sure that the output of that Was like circular looking and then obviously as I add more functionality to this You know be fine or I would test that individually, but like basically I would maybe give it a width and a height and Make sure that it is that width and height and test it Test that it's circular So I need to see if there are APIs for How I would get those like elements and actually check the styles on those Okay, so it looks to me like I need to set up testing your app Okay, so I need to set up a development server It's talking about why here I'm not gonna go into that because I know why See if it gives me any information on Okay It does not So what's gonna be the best way for me to set up a simple server for right now Okay, right now. I'm going to Just just brute force it. It's not gonna be clever. It's not gonna be sweet. It's just gonna be a thing I'm just gonna set it up so I can test I can test that it worked Let's see. So what I need is I'm gonna do this In the root of my project, I'm just going to make a new file called index dot each TML This is where all of you drop off because you're like this guy is dumb. Why am I watching my why am I watching this video? Let's see react.js.org It's got to be a Just static HTML version There we go. Okay, I'm gonna paste that here You can hear my kids playing but man, they're allowed right now I Have two very loud kids Okay, it's cool. So we got all this setup Now I'm gonna do something Oops, how do I get a new terminal in this thing? This is something you have to Google every time This is so embarrassing right now So humiliating. I hope that you're laughing. I hope that you just have like popcorn out and you're just like laughing it pointing and laughing at me Because you should be this is This is shameful. Let's see You wanted the real shit. This is the real shit. Okay, cool. So hello world Man, this is it's only gonna get worse. It is only gonna get worse Okay, so I'm gonna take the thing that I already packaged up from npm Actually Yeah, cuz I don't think that I can link to them back through from behind the server So, yeah, oh and look at look at my hair just getting stupid. This is this is the best stream yet people best stream yet See calm. All right, um, and what was it? It was consent avatar Okay, so that is our JS Okay, and then we're going to Honestly, I don't even remember how to link a style sheet. I think it's like link, right? CSS Style sheet We're gonna get our style sheet from here There we go. Cool. Perfect Actually, don't even know if this component works. Oh my gosh Avatar source Let's see Kitten placeholder Yep, we'll just grab Grab that Halt equals maybe cute cat See that works Why not? Oh and get the CGS version probably I think it's like that Okay, let's now get back out. Let's go into lib See what we have MGS UMD. I did do that hmm Okay, inline babel oh inline babel transform That's weird that they so you don't use this in production. Okay, um, but it should still work It was working a second ago Missing slash. It's always a motherfucking missing slashes Avatar is not defined lowercase Let's look at this package It's already 1040, so I'm probably gonna call it quits soon if I cannot get this thing Working export as a default You know what I probably need to give it. I probably need to configure it to have a name Okay, well, I have a CSS file It's just getting worse and worse So what it takes sometimes It's like maybe is he getting linked. Ah Yes, but I need to add the class Okay, cool perfect. So let's see in my test now Sample test, uh, I'm gonna visit the URL Change this to kit and sync So unnecessary Um, let's see. So ht. Oh, it's on the same port Whoo, really seen me struggle today folks. Um Port 8001 8001 I think I give the argument wrong I think I just give it as a Let's run this again Okay, so we get that man. It's a tough tough day today So test runs guides command module api debugging parallel stubs screenshots and videos that I want To let's see if they're Let's see if in here in our examples they have any so we have actions aliasing files cypress local storage um miscellaneous clicking things but navigation spies utilities viewport spec window Okay, I'm not totally sure Where to go from here Let's see if there's any plugins Browser fi cucumber watch See expect element to have style. So let's open up both of these I'm gonna get the element height and width is it possible to have CSS Okay, okay, so I need to remember that these are chai What chai assertions, right? So Only use assertions as we should That's documented here Gotcha, so this is where those um assertions come into place So I'm gonna say should have css. It's a little confusing, but okay. Gotcha Um You have a direct element reference. That's when you use expect Okay Yeah, huh So I can take the element Oh weird, okay Okay, best practices. Um selecting elements. Perfect. This is exactly what I need. I use data attributes to provide context. Um, okay perfect That's exactly what I wanted to do. Anyway, so I'm glad that they told me to do that. Uh, so Let me say Just data cy Data cy equals first Trouble name don't care. Um, okay, so we got our first avatar test Um, and how do we get it? So we just say get Okay, so in our sample spec, we're going to try to get that element And we don't have any assertions so nothing's gonna happen Uh, I just want to get it timed out trying to expect to find elements No no Was it first avatar test Perfect. Okay. So it got it. Uh, now I just need to um, kind of expect some of those properties on it Um I think that's where I go back I'm gonna go back to here Say have css What was it? Again, I don't know if these have to be in that css style or if I can just do them like that Or the JavaScript style or if I can just do them like that we will find out Oh my gosh. Whoa crazy. Okay. So if I change this if I remove a nine it should fail Holy shit That was exhausting. Uh, so this really isn't a huge success yet because I've just Loaded up the style sheet in a static html file and whatever. Um, but we are Moving in the right direction. Um, this is what I will be Using um to get um to to do that kind of test Um So yeah, so I'm assuming at this point that I'll probably create some type of global documentation for all of these So each component isn't going to have documentation itself. Um, maybe I don't know. Maybe I'll write the read me in the file and aggregate them all together. I'm not really sure yet but That I would have some global documentation and then I would test the global documentation with these assertions In which case it's totally fine that cypress is living it through in my project I don't need to actually go in and and test each individual thing Um, man, uh, this was rough Uh, if if you stuck around, I thank you for sticking around Um, I hope that it was at all valuable to see me struggle through all of this Um, but I learned a lot about cypress. So that is good for me Yeah, so anyway, uh, if you have any questions, uh, hit me up in uh, comments or, uh, ask me on twitter at chaintastic Uh, happy to chat with you about, um What we learned today. Anyway, thanks peace and love