GitLab Frontend group, 21 Sep 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Writing Frontend Integration Specs with MirageJS Environment

Description

Result MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/42885

A

We're gonna walk through adding a new um front-end integration spec to the ide, um so here I'm in my id integration spec. um The only thing we have is just this very trivial, simple snapshot. Matcher thing we'd like to actually test some behavior. So um ideally, what we'd have is something where I can um create a new file, delete a file um and then run commit and then ex expect that we show success plus send the right stuff to the backend.

A

um So the way we're going to do this is uh by taking advantage of this environment that the front integration specs are in.

A

Instead of using a real server, we create a mock server that picks up all of our backend ajax requests or graphql requests, and so this uses a library called mirage.js, because we have this environment available to us. We can actually load this environment in the real gdk so over here I am- um I was working on this previously, but now that I'm recording it, uh I'm just gonna start over.

A

So here I am, I'm loading the url that my test loads and what's going to happen, is because it's going to actually fail to load this, because it's trying to find this project and stuff in the real database which it doesn't exist in the real database. It only exists in the fake database.

A

So I'm going to show you how we can load the fake environment here but looks like webpack is figuring itself out, I'm showing that I expect it to fail right now, yep and it is failing because we're not actually loading the real thing. um So, let's load the real thing, uh we're gonna go to the entry point where so here you notice that our front integration specs, don't target individual components.

A

It targets the entry point, um so we're going to go there to our id index where we run. Here's where, where init id ide is defined um down here, is where we actually, the page actually calls start on it.

A

We're going to import something, though we're going to import- and this is a nice helpful, webpack, alias that's available in the development environment. We're going to import from test helpers, mock server, use and that's going to tell us hey. We can use the mock server so now, when I refresh this, this is actually going to load successfully, which is exciting.

A

Previously, I'd set up the mock server to respond and loaded it with data and stuff, so it responds successfully to the flurry of requests that gets sent here, and you can see all that in the console output here. So if something wasn't mocked, when these endpoints wasn't mocked, then I know okay, I need to set up.

A

I need to create a fixture to capture this data and set up one of these endpoints, but right now this is all working which is great, and so what we want to do is create a new file, so, let's create a nested file. What I want to do is create one under foo bar, and I want to just click on this drop down and hit new file. um Okay, so we could try to just do this. You know flying blindly, it's really nice. We can get this test environment loaded in the real gdk.

A

Why don't? We just run our real our test? Actually here as well. um So the way I'm going to do this is I'm going to create a new file here called whip and I'm going to export a function, um which is this gonna? Be our the test that we're working on um yeah, so, let's just double check that we get it all set up running locally.

A

uh Cool I'll go ahead and even add it to here we'll create a new one here, so we want to test user can commit changes and we'll import the test that we're doing at the end of all this, um I'm just going to move the test into here. Specifically, oh, I need to looks like I need to create or mount my entry point at first, so it's gonna fail because we don't have any changes that we're expecting and that's fine. I could make it look pretty by just doing expect one two one.

A

Okay, so now it'll look pretty, but if we get like any we'll get immediate feedback, if we get any, have any actual errors happening here, um cool so we're running locally and we'll see this too. When I oh, no we're actually not running this here yet okay over here in our id index, I'm gonna import.

A

I could probably access this file a number of different ways, but this is just what I'm going to do. I'm going to import run test from here, so this is in the actual production code.

A

um After I call in it ide I'm going to run my test great. So now, when I refresh this, I should also see running locally um cool, and first thing I said we want to do- is create a new file from here.

A

uh So what I kind of would like to do like that, so before we move on um what I already have existing on, this branch is a module called ide helper and highly suggest that for any kind of domain you're using for testing stuff, just encapsulating all of those common actions, you want to do in that domain into a nice helper module.

A

So I'm going to import star as id helper from ide helper and what I'd really like to run is something like, and this is definitely going to be asynchronous. I want to call something like id await id helper create file, foo bar test, lorem ipsum, dolores, so giving it the path and the content. This is kind of what I wanted to do.

A

um I'm running this here and it's going to fail yeah, because that thing doesn't exist. Let's make it exist.

A

So, let's export const uh called a create file and it's an asynchronous thing and it takes in the path and the content, very cool, okay.

A

So the first thing for this action that you notice and what I like seeing when I actually look at this visually is I had to open up the I had to traverse to the file tree and open up the parent folder or at least just get access to it doesn't necessarily have to be open, and thankfully I already have a helper for this called traverse to path, but it's for the parent one.

A

If I just pass path into here, it's going to try to traverse to test.text which doesn't exist yet um so what we're going to do first, is get the parent path and the way we're going to do that is just simply splitting on the slashes um slicing, the last one out of there and then joining on the slashes boom.

A

And now I'm gonna traverse to that path. So I'm gonna get the parent row. I'm gonna traverse the path based on the parent path. um Yeah, that's great.

A

These other options are just helpful for the recursive call, and at this point I don't necessarily need that cool. So let me save this out. This should be successful and if I rerun it at the route that it's at, I should now see foo open itself up, which would be cool. Let's double check that. So that's all successfully.

A

Great and boom foo opened itself up amazing, okay, so now what I want to do is I want to hit this drop down, and so one thing you'll notice. Oh sorry, one thing you'll notice is that I have to hover over this row and then I have to click on this thing and then I hit new file.

A

So first thing, that's good to know is traverse to path. Gives me the row that I'm looking for. So I already get my parent rail that I want to hover on.

A

So I can call a fire event, which is a testing library function, utility that they give me, and it looks like I want to call mouse over on that parent row and that's going to expose this drop down button. Let me expect that, and it looks like I can find- that drop down button by looking for this label.

A

So that's great! So then what I want to do is, um I think I already have it find by label text. Yeah uh drop down button equals await, find by label text parent row um and what was it create new file or directory? I'm just going to copy that in there beautiful so now I want to click that.

A

Okay cool, so I click that and then I want to get this button. um So I think I need to go to my parent now, which is the actual drop down. um I need to go into this drop down menu to get the actual new file button so to get the actual drop down action. I'm looking for it looks like I need to go to my parent node. I could probably use something like closest, but I'm not going to worry about that right now.

A

um Oh and I can just do find my label text again, I think, um or maybe fine by regular text. Is there a thing that says? Well, I guess I can use label text. Let's just use label text uh find my label text and then it's called create file, I think or new file new file, and I want to click on that thing.

A

Okay, so I like that I'm running my test here on the terminal, because it's going to blow up I'm going to get immediate feedback. If any of these isn't being found like if I said, create bogus file.

A

If I said create bogus file, oh, what's wrong with you, how come you work? I would expect you not to work.

A

Am I actually running you yeah, okay? Well, that was weird. uh Will you work if I run you here, let's see.

A

Yeah you blew up over here, oh, I think I know why. Oh yes! Yes! Yes! Oh yes! I know why? Okay! uh Yes, sorry about that, um because I'm not running I'm not actually waiting for my test over here now. This is going to actually give me some helpful. Oh and that's not even how you do things: okay, sorry about that boom! Yes, yes, we were not able to find, create bogus file or directory.

A

You bet we weren't able to it's called, create new file or directory, which is why it actually failed here but didn't fail over there, but now it should pass, um and I should get some information if it doesn't pass great, but it's actually working. So that's great! um So now that happens, but I don't really quite know what's going on, so let me refresh this bill. Okay, so this opened up a new modal and what I want to do is with the path that I was given.

A

I want to fill in this input and then hit this create file button. So, let's see if I have a test id here- and I do amazing- um I'm just going to add a little comma here- the modal is open now and I will definitely abstract these out and to encapsulate them in nice functions later, but I'm not going to worry about it. So the modal is open. Everybody's happy. I want to find this name field name field equals, wait, find my task id and I think I'm looking at the entire screen.

A

So you only call these individual helpers. If you have a container, you need to pass to it, but if you're looking at the entire screen, you can just easily use this screen object that automatically passes the entire document.

A

So when I say find by test id, I don't need to pass any container or anything and I'm going to do file name field great um and then I want to change its value. So I think I need to do like fire event on change for name field and knowing what it's kind of expecting. Based on how view does its modal stuff model stuff? I guess it's gonna be target value path.

A

um Okay, I'm not entirely sure if that's exactly what I want to do so, if that's exactly what's going to work, so I'm just going to rerun this and double check that visually. It's showing the stuff I expected to.

A

And it's loading okay boom boom. There's my new path awesome! Now I just want to hit this button, um so I think, uh create button equals wait screen find my text create file, and I think I just want to click on this thing.

A

Okay, oh: what's wrong with you: can I read property path of undefined aaron event handler.

A

Let's see what happens if I hit this button, are we still happy we're not happy what's wrong with you.

A

All right, let me check something out. Let me try to do it just manually and see what happens.

A

Why are you so sad.

A

I was really oh, because you're still trying to run the test. Okay, let me just try to do it like this file. Build bar foo bar test text create file. It actually worked.

A

I kind of wonder- and this is something that's weird- I kind of wonder if it's because we're listening to both change and input, I'm not entirely sure. um Let me do a quick search on what are we actually doing here. We go to file name field, yeah file, name field,.

A

We're doing something on the model uh I thought v model worked off of change, kind of what, if it just works off input, um let's see, but it looks like we also do things where we reference its input directly. Let me just double check uh default v model.

A

Oh yeah, I think it did say, input, text and text, area, use, value, property and input event. Oh okay, and I think, though, that the actual value we're not going to see a change unless I actually do change as well. I think I need to do both. This is the kind of thing it'd be nice if it just existed by itself, but I'm going to try not to worry about it. uh I think this is gonna work.

A

Cannot read property ad event listener of undefined? That was a weird thing to respond with: let's see what happens over.

A

Here, okay boom, we created it, that's great, um but I don't see a any console errors. So I wonder if maybe there's part of our dom that we're trying to add an event to, but it's we haven't mocked that out yet or something. It looks like we're throwing this over in repo editor.

A

Add event listener. Oh.

A

Is it because of this? Maybe it is because of that, let's.

A

A

Nope, that's not it.

A

Yeah, it looks like there's um some discrepancy between this mock, this js, dom environment and the real browser. This is just a warning, an error in the next tick. Do we listen to the next tick anywhere here we sure. Do um I wonder if it's over here when we actually create the editor.

A

um So what I could do is yeah. It looks like there's more um add event listeners here, but what I could do is for the sake of time, um and I definitely want to revisit this and figure out what's happening, but I can just disable our console warning um thing here. So what I'm gonna do here is just spy on console warren and just not do anything.

A

Yeah so that it stops failing when that thing gets hit, but I really want to figure out what's going on there? uh What's your oh, it says I'm unexpectedly calling console air.

A

Well, I guess I should call console air, then, okay, I should figure out what's what's going on there and I think it's because some something has changed that we're um not handling anymore on our mock, dom environment and those things will come up when we're doing these integration specs um and it's nice that they come up so that we can be aware of uh what more dom dependencies we need to mock or if we even need them, but anyways.

A

Let's keep moving on um yeah, so there's no javascript error is being thrown, which is great, which is means yeah, and I am actually creating this file, which is exciting. So now I want to fill in the content. um This uses monaco editor and thankfully I already have some helpers for that. So I'm just going to run the set editor value um helper here where I just pass in the value and whatever current monaco thing is up. That's what it's going to do so, I'm going to run weight set editor value with the content.

A

A

Cool, so we should be good great and we are um so that was step. One was, I want to create a file, and then I wanted to delete a file, so let me run delete file for foo bar and, let's just delete, git keep um okay. This is gonna blow up.

A

Yep and it blows up great as I'd expect, so let me run. Let me call delete file here. um We pass in the path okay, but I kind of want to do all of this stuff again, where I'm going to end up going to the parent row and finding opening up the drop down and running this thing.

A

So let me move that all to its own function, I'm going to call this um uh click file, row action um and it's going to take a row and the name of the action I want to run um and I'm pretty sure it's going to be async.

A

Okay boom boom and we do all this stuff. We yep, we find the drop down button, we click it. Then we run the action and instead of new file, it's going to be whatever action name. We actually are going to run cool so down here, I'm going to click file, a row, action parent row, new file, so all that should still be happening- that's great and over here I'm going to do um oh and yeah. I need to await this. I guess okay, const row equals weight, traverse the path this one, I'm fine.

A

I want to go all the way to this one. I want to get this row so I'm gonna, I don't have to do any of the parent stuff, um so I'm gonna get the row, I'm gonna click file, row action and it's called delete.

A

Oh, I gotta get the row delete cool.

A

Am I like searching for r, let's see if I can just get rid of that whatever I'm searching for? uh Why is it? uh Why am I highlighting all these r's? I don't know what's going on there?

A

Oh, I am searching for r, that's weird, all right, let's just clear you up, okay, um cool, but I get that passing. Let's double check that it looks right as I'd expect. So, let's rerun this.

A

Cool, so you see good keep is gone. We got this new files created everybody's happy. So now what I want to do is commit this, so we're gonna run await ide helper commit um so I'm gonna go click on commit.

A

Then I want to click on so over here in the left sidebar. I want to click on this commit thing. um Let me go ahead and start writing this out and we can clean it up later, but- and I think I already have a helper over here- for click on left, sidebar, tab up, perfect click on left, sidebar tab commit.

A

And then I want to click on this button. I want to do.

A

Oh wait: screen dot get by text, commit dot dot.

A

Instead of statement to variable, I'm just going to get it and then click on it um cool. I want to click on this thing commit to whatever branch it already is. So I think the way I'm gonna do that is screen get by text and you can actually pass in regex here so I'm gonna commit to, um and we could just say. However, many whatever it is: branch.

A

Okay, after I get down, I want to click on that boom and then I want to click on commit again and it should commit everything.

A

Let's see if this all.

A

Works boom, I'm gonna find an element with the text, commit dot, dot dot. uh Let's see what that's up. What else that is about looks, I can just reference this test id. That would be ideal. I think it's because this is actually the ellipsis character instead of three dots yep, that's what it looks like, um rather than coupling myself to the thing I could I don't. I could do this a number of ways, I'm just going to do this test id because it seems easiest begin, commit button, awesome, so oops get by test.

A

A

Then all right, I could not find commit to whatever branch, um maybe because I didn't like my my word thing, um but if I just do something like godstar commit to branch, will it like that? Oh, it might not also like it, because it's by text, maybe I need to do my label text or something oh, no, that worked okay, great. So that should click on that and then click commit, because I'm not entirely sure. Let's just rerun this um and see if it actually commits and that'd be exciting.

A

Boom boom boom. uh Oh we blew up. Let's see what happened. Let's see in the console.

A

Enable the fine element with the text- oh, what's wrong with you,.

A

All right: well, let's see if we can find it just by looking here. uh It might be that it has to be labeled text, I'm pretty sure. That's it. um Oh looks yeah ah because it has the whole text um yeah. I think I do need to do it by label text. um Let's just see if that doesn't get by label text. I wonder why this thing didn't fail.

A

A

Okay, let's see what happens.

A

All right, I'm gonna cheat I've already done this. I'm gonna see what I did.

A

Here we go find by label text yeah. It was. I wonder why I'm doing find instead of get.

A

Oh, does git not wait for it? Oh, I think that that I think that does have to do it. Let's double check. um If you go to uh testing library, git versus find.

A

Yeah get by cory's return node for query okay, but if you do find by returns a promise which resolves when an element is found and then there's like it wait kind of waits for it, but get by is looking right away. So you see some animation happen when I actually click this thing, that's why the thing isn't going to find it right away, which is why we're going to do find buy.

A

So if I do find buy and that's why it wasn't finding my commit ellipsis thing either, um but I could just do find by test id and I'll do find by did actually did I actually do by text. Oh, I did by label text yeah fine by label text, and I guess I didn't even I didn't even need to wait these, um but that's fine, so we're going to commit to whatever branch and then we're going to find by text cool, let it run its stuff.

A

Oh and I wonder if it works in this environment because maybe animations aren't actually running or something like that anyways boom, we ran it boom boom boom. All changes are committed.

A

Great um yeah- and I saw I saw a message- your changes have been committed. uh That sounds really nice to assert, um so it would be nice over here and this thing to expect document to have text.

A

Your changes have been committed.

A

Is that going to work? Let's see.

A

A

Gosh, oh all, changes are committed.

A

Okay, yeah anyways, we could also use. um We can also take advantage of testing library find my to assert as well um and we'll also get take advantage of their async waiting. Stuff too, did you really say all changes are committed, I'm not entirely sure. Let me double check, uh let's see what did it's actually, what is actually success message. It said it said.

A

Boom all changes are committed. Your changes have been committed commit.

A

This is the commit that it had cool. So, let's, let's go ahead and use testing library up here to do the assert as well um import screen from testing library dom and we'll move you up sure.

A

um So we're gonna uh expect await screen.

A

um Is there like a two half text for screen like that'd? Be really nice? If I could do something like that, but I think it's not. I don't think it's gonna. Let me do that. This is gonna. Let me query things or find things.

A

uh That's fine.

A

A

Yeah, I can just say I just want to wait for a screen to find by text this commit id, that's nice. I would like to see the your changes have been committed thing. um Maybe all changes are committed.

A

Yeah, let's see, let's see how it feels about this, uh it's going to be upset that I don't have an actual expectation. I could do like and expect not to thrill or something but anyways.

A

Okay, yeah, that's happy cool, so here's our success message: we've expected our success message, but I really want to double check that I sent the right stuff to the back end, um and so we can reference our mock server this way. So if I open up my mock server- and I open this up, I see some different models.

A

um One of them is going to be branches and that's you know. If we didn't have any branches, we wouldn't be able to load any of this stuff, so I can actually find a specific branch and that branch is actually going to have a reference to a commit, and I can assert that the latest commit was what we expected it to be. So I'm going to do this. I'm going to expect mock server is a global in our front end integration world, I'm going to expect mock server, db, dot branches.

A

um I think I can do let's see if I can find it mirage.js.

A

Let's see if I can find this boom db collection find by yay. Let's see if that works, my ref master. I think that's right.

A

um It's gonna have a new commit value, and I'm gonna expect this to equal and let me just put pass in this empty object. First,.

A

Oh, maybe it's name master. I bet that said I bet ref. That's not the right thing.

A

Boom, yes, awesome, cool, so yeah, I would expect it to equal here's, our new id um for the new, commit here's the new message and that I, the web id automatically generates these other information um is not being set by our mock server, so we don't really need to worry about it, but this is a bit that is being set by our mock server, just so that we can assert on what actions was taken on this commit.

A

And this is the actions this is a and so let me actually open up that mock route so over here in our mock server world nope. That's not the right place.

A

I think over here is mock server world yep over here in routes and repository, we are posting a new commit. This is the api that our api expects.

A

We are finding the branch and we update its commit on that branch that um commit pram. So this is very trivial, um but what we're also including here in this mock version of it, is the actions that were sent here. What we could do, rather than testing against this actual data we'd set here, we could actually, you know, use our mock server to see hey was this thing ever called um and that's just a different approach, but we're just gonna check out okay after running all this, what is the branch's new commit?

A

And so I expect the id well, that's the very long id uh I would expect the id. um Let's just do the short id right now. I expect the short id to be well, I don't care I'll copy it and the id oops boom boom and the message boom boom yeah. It looks like all right boom and actions, so these are some tests.

A

This is a property to help me with testing things.

A

We had a create.

A

We had a create action. We had. The content was warm, some dollar sit, it looks like it ended in a new line. um I'm just going to capture everything here. Boom file path, foo bar test text uh last commit id is empty, and then we had another action where we deleted something.

A

We had encoding of text and file path. Foo bar git keep okay great since I'm not including everything. I'm going to change this from two equal to to match, object, see if that works.

A

Cool awesome, um so now I'm finished with this with this test and I'm just going to take my body that was working on and I'm going to move it over to here. Let me go ahead and move my import because it looks like I'm not importing from the ide helpers here anymore.

A

um So in reality I don't need this file anymore.

A

Boom, I'm gonna save this out uh and then I should undo my uh could not locate. Well, I changed you, that's wrong. Oh it's! It's upset because um it's not finding this and that's fine. I need to get rid of this anyways yeah. Let's double check, I got rid of all those changes.

A

I did great boom all right, so we introduced a handful of new helper methods um and we can definitely do some more improvement on organizing some of that, uh but the end result is very pretty and we tested the way we built it was looking at it visually of um what does it actually mean to create a file? What does it mean to delete a file and commit a file?

A

uh The one thing that's left to do for me is figure out how come I need to spy on the console error and then I think that has to do with an error um or something that's changed in the ide recently so I'll dive into that. um But this has been fun walking through front-end integra writing, front-end integration specs using the mock server thanks for watching.