Coding Integration Tests

[00:00:00]
>> Marcy Sutton: So, I'm gonna spend a little bit of time writing some integration tests in Cyprus. So the convention for this, and Cyprus kind of sets this up for you by default. Close this components directory and the example. So when you run Cyprus, it will add this cyprus directory for you.

[00:00:19]
I think you can configure it. You can add fixtures in here and plugins and things. The commands, it adds this file by default and to use Cyprus Axe, which is a binding for the Axe accessibility testing API for Cyprus. I just import the commands in this commands JS file in the support directory.

[00:00:42]
And then I've got the integration test directory is where my tests would go. And so, this is pulling in those Cyprus bindings for the underlying API. So I'm just gonna start writing some tests. So let's do some accessibility tests. Can give it whatever name I want. I am going to, I'm just gonna write my first assertion.

[00:01:08]
Let's see, what am I gonna test? That's probably a better thing to look at. So we've got our application here. Yeah, I was going to test the client side routing that I added with this little skip link thing that we created earlier in the day. So, from an interaction.

[00:01:26]
I mean, I think about the testing in terms of, what am I trying to mimic that a user would do? And for this, I want to reach one of the items that is actually going to execute this skip link behavior. So I want to go onto a link.

[00:01:41]
I want to click it. I went back, I hit it twice. I want to assert that the focus is sent to a skip link. Seems pretty straightforward. I am gonna pull up the cyber stocks. So it's cyprus.io. I like to have the the docs for whatever API I'm working on because especially when you're kind of going back and forth.

[00:02:05]
Let's see, guides. API is probably where I want to go. So there's assertions here. I think commands might be the way to go. Commands, yes. So there's things like click. So side.click if I was or side.get, whatever you're trying to get and then click on it. This is where that focused API comes in handy.

[00:02:36]
Okay, so that helps me, I'm going to get this in here. So I'm going to say it should
>> Marcy Sutton: It should send focus to a skip link. Let's see, let's think about this. So.
>> Marcy Sutton: It should.
>> Marcy Sutton: Take the user's focus [LAUGH] But keep it the way it was.

[00:03:04]
It should send focus to a skip link. When the route changes. So that's mostly just indicating that I'm going to test the mechanics of sending it, focuses skip link. It's not really talking about the the link click that I'm coming from. So I'm trying to think of a way to capture that.

[00:03:21]
It's like it should, when the route changes from a link click. This is a very long test title all of a sudden but I'm just going to leave it. I'm going to wrap text, too. I try and keep my test names short. Maybe I write, maybe these are two different tests.

[00:03:39]
I can play around with that. So the first thing I need to do is go and tell it what page I'm going to. And that API. Now let's see. We had it in our, I'm gonna cheat and go back just in the interest of time. So I'm gonna do cy.visit.

[00:04:00]
You could do it before each test. I'm just gonna do it in the test cuz I'm just gonna write the one. So I'm gonna say cy.visit and I'm gonna give it the local host, port 8000 rather than the slash for the homepage. I've just had more success with giving it the local host URL in this case.

[00:04:18]
Something that would be a nice enhancement would be to make this port more dynamic. Like go read it from node process or something, but I'm just gonna leave it for now. Cuz that way, say if I have two gatsby sites and it gets opened in 8001 or something like that, then it's nice to know that I'm on the right one.

[00:04:38]
So cy.visit, I want to cy.getByText. Maybe, is that the one I want, getByText Dropdown. Let's see, is there more than one, that seems sort of brutal. Because on homepage, there might be more than one of those, so maybe. Let's see, get. Let's go look at that API. So I can use a selector, that's probably the best, so cy.get instead of getByText.

[00:05:17]
So I'm gonna say, let's go look at this element and see what it's got on it.
>> Marcy Sutton: So I could go, maybe, add a class name to this, I could probably say, page navigation and then go get it that way. Page navigation and then the first anchor. That might return me a collection, I guess we'll just see.

[00:05:42]
So I'm gonna click it. And then I'm gonna keep going, just try and write the rest of this test. So I'm gonna expect then that cy.focused. Let's go look at that API, go back.
>> Marcy Sutton: Focused. So I think that that gives me, cy.focus should have so I can assert, I could say should have class probably.

[00:06:18]
I think that's what I'm going to do, cy.focused. And, how quickly I forget, .should have .class and it was routeSkipLink, I believe. And because that was being baked into the component, that's probably pretty stable. This get page-navigation ones, maybe not as stable but let's try it. So to run these tests, I'm gonna go kill off my server.

[00:06:46]
I'm gonna do npm run e2e. It's test:e2e. So this is going to open Cyprus. Run it, firing up my application cuz that's what it's actually gonna test against. Instead of testing a virtual in-memory snapshot, it's actually going to fire this up in a browser. And I'm gonna turn my doc on so we can see it.

[00:07:10]
Try and open. There it goes, Cyprus open, so it's opening the Cyprus application. Here it goes. Okay, so now this is the interface that took so much energy to download. So I'm gonna click this. And this is when I can actually open it in a Chrome instance. It's gonna go hit that page.

[00:07:36]
Yeah, I was right. So, that can only be called on a single element. So, if i just want to get a single element, I could probably get it from an array. Maybe? Let's see a dog first of its in a list item. So I probably want to do LI first of type.

[00:07:58]
So this will kind of leverage CSS. See if that works. Just use CSS to go and get it instead of trying to do something. Okay, so that worked. That actually, I got the first link. It was focused, I'm pretty satisfied with that. So to get out of Cypress, I'm gonna kill off the browser.

[00:08:21]
I can hit Stop or I could just close it. So I'm gonna do that and that is a test. That has inserted that feature that we added earlier today which I'm pretty psyched about. So if I were shipping that real component and I were implementing it on a site, that's when I would write an integration test for that.