GitLab Frontend Skillsharing, 13 Apr 2022

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Contributing to "Convert GitLab Frontend tests to @vue/test-utils"

Description

In this session we learn how to contribute to this epic, about converting old Frontend tests to use @vue/test-utils.

https://gitlab.com/groups/gitlab-org/-/epics/2445

We also go over this set up, about contributing just to Frontend tests, avoiding the whole GDK setup:

https://gitlab.com/-/snippets/2293410

Here's the resulting MR we made during this session:

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/85145

A

Alrighty, I am going to show you all how to run front-end tests contributing to git lab. If you don't want to run the whole gdk, which sometimes your machine may not be able to do, but you would still like to contribute to big epics such as this one, where we are trying to convert our just specs to use view test details which we do for like 90 of the js specs.

A

But there are some very old ones which are not doing that and use things such as the view mount component, helper and um yeah, so we'll just walk through um running tests locally and making this change and seeing what happens. So. um I picked an issue for us from this epic.

A

So I went down to this list of issues in the epics and I picked this one so I'll just open that one up all right, like any good open source contributor. I should probably say that I'm going to take a look at this.

A

All right, so I have cloned the get lab the main gitlab project I forked and I cloned my fork locally.

A

So if I look at my remotes, my fork is the origin. The main git lab repo is upstream. I wrote a little snippet that walks through setting this up, including installing the prerequisites which are node and yarn and forking and cloning and creating branch for us to work on um I've already forked. So, let's create a branch for us to work on.

A

uh I am going to go back to my project. You notice I'm at my project directory.

A

I can run branch dash v to see what branch I'm on and I'm just on the master branch. um So let's go ahead and check out a new branch. um It's kind of nice when we put our the relevant issue number in the branch name because then git lab can automatically associate things.

A

So I'm going to just copy this issue id into my branch name and I'll, go ahead and put my initials and say something about what I'm doing: uh convert js to beta.

A

Yeah sure, all right great now, whenever I do this, I should probably make sure that I'm on top of the most recent master in the main project, not my fork, because my fork may not be relevant and updated so I'll go ahead and also fetch upstream master.

A

Hopefully that works without taking that long and I'm going to try to drag out my sentences right now, so that okay, awesome cool, so I've got upstream master I'll, go ahead and reset my new branch to upstream master great. So I can check out branch v, I'm on my new branch, I'm on the latest upstream master. That's great um I'll! Go ahead and push my new branch up.

A

It's not ready yet, obviously, because I haven't done anything but I'll push it up so that the upstream relationship is set- and I can just push commits when I remember whenever I'm ready and I can create a merge request right here from the terminal. So that's great! Okay! Let me go and clear these up and let me open this in vs code I like to use vs code to edit things so going back to this instruction set, which I'll include in the youtube description descriptions.

A

The very first thing you want to make sure you have is node.js and yarn installed. If you have asdf. This is very easy. You can just run asdf install at your project directory. um I already have ascf installed. I have all these things already installed, so that's the option I went with um or you can choose to do this manually, which is going to be really dependent on your system on all sorts of things. So good luck! I know you can do it.

A

um We've already created branch to work on great, so let's run the specs. All we have to do is call yarn run jest and the path is back great. Now, if I do this.

A

Let's go ahead and copy this one. If I do this boom see if it works, it's working, that's awesome. Okay, there's one step missing from this, which is you might not have the node modules downloaded, and so, if I try to run yarn run, just it kind of will blow up because it says: hey things that are in node modules. Aren't up to date, probably need to run yarn. Install my dependencies, probably don't match the yarn lock file. Please run yarn, install.

A

Hopefully, yarn has things cached and it's not having to build everything from scratch, um but thankfully yeah yarn, it's pretty fast, um the second time, the first time you run this might be a little bit slower, but now I run yarn run just I just pressed up on my keyboard to get back to the um that command. I just ran.

A

And boom we're running tests great. So let's go back to the issue that we want to contribute to. I want to convert these tests, these folders away from the old style, so they use view test utils. Let's look at the epic again, so the old style, so we can search for specs that import yeah. We want to update specs using the deprecated helpers to use the view to test utils helpers like shallow mount or mount cool. So let's look at this one.

A

I just copied that path. I am hitting um control p uh to do fuzzy file search. I found file. Oh there's the file, let's run it oh, but I also see it's already using the latest view test details. Well, that's great. It sounds like that one's already done.

A

Let's see if it works, that's great! It works well so that one's already done. Let's see these other ones here in the directory that one's using view details that one's already done and that one's using v-test tools, man. This is making my job easy, this one's already done, and so is this one great, ah but these ones are not okay.

A

These ones are not okay, but it looks like these ones are. um Since I'm a member of this project, I could probably already check these off, um but you may not be able to, and also you can see that some of these files may not even exist anymore, because some of these issues were created a long time ago, things kind of changed since then we can already see, but there are some that we will need to address.

A

um So, let's first get a test running before we start changing things. So let me copy I'm copying the relative path for this file, which is not using v-tests tails, and I'm going to yarn run just paste that path in, let's see what happens.

A

Oh man, we get a failure and it's a failure.

A

Let's see if we can understand what's going on here, cannot locate module test fixtures, epic, mock meta, dot, json mapped as this path. Temp test front, end fixtures.

A

Well, let's see what's inside this directory, I'm already in the gitlab folder, let's see what's inside this directory wow, that directory doesn't even exist. Well, this isn't a huge surprise if you're familiar with what these are. um So some of our front-end tests will take as an input data generated from the back, because we want to avoid setting up the whole backup.

A

How do we get this data generated from the back end? Well, there's a little trick that we can use. We can steal these fixtures from the main gitlab repo, so rather than generating them locally, I'm actually going to steal them and stealing isn't quotes. I don't endorse stealing, but uh I do endorse sometimes not running the fixtures.

A

So what we're going to do? This is a bit of a wordy instructions um to figure out how to run specs that need these front-end fixtures. What we're basically going to look for are jobs, these front-end fixture jobs that ran on the main gitlab repo, we're going to try to find a job that generated the fixture that we're looking for and we're going to download that locally and extract it and copy those contents and then we'll be good to go.

A

So, let's go to the main gitlab commits page, and let's look for oh look there. I am: uh let's look for a pipeline that passed which had a fixture stage.

A

This one did not have a fixer stage, so we will not look at that. One. Let's see if this is one that has a fix there. We go awesome, yes, and we could see these.

A

How many is that five jobs for these fixtures, so I'm gonna go ahead and middle click on each one of those to open them all up we're looking for the job that has epic mock meta, json, all right. Let me close these other tabs, so let's just go ahead and start here. Oh look! It's already telling us what got printed up. um No, these are just actually the names of the specs.

A

Let's go ahead and look at the artifacts that may be helpful, so I'm going to go to browse the job artifacts, I'm going to hit temp tests front end fixtures, ee, all right, we're looking for epic there's no epic here. So this isn't the job. Let's look for the next job, so I'm actually going to just copy this job id pop paste it into my url.

A

All right do we see epic nope, okay, I'll close, that let's copy this job id paste it into my url see. Do we see epic nope? That's all right. Let's close it out, I'm starting to get a little nervous, but I think it's going to be okay paste it into here.

A

ah There's epic! Yes, boom! That's the one! We want okay, so these are the artifacts. We want, I'm gonna download, artifacts archive awesome and they showed up in my downloads, so I'm gonna go ahead and go back to my terminal and I will go to my downloads.

A

uh Well, actually let me just do let me just copy them here into uh I'm gonna call this temp fe I'll, call it temp downloads, so I'm making a directory called temp downloads I'll see the intent downloads I'm going to move.

A

My front end fixtures that I got from here. Yeah I'll move these into this directory awesome, and so then I'm going to unzip my front-end pictures boom. So now you see, I have all the artifacts.

A

Here, including my epic ones, awesome, okay, so what I want to do, then, is: I want to make therapy, and I have these instructions here, so I'm going to make derpy temp test front and fixtures ee locally.

A

This is going to make that fixtures ee directory that we're looking for on the main project.

A

You'll notice that this directory, when I move these files and I clean up my temporary directory, not temp attempt downloads, you notice that this is all get ignored. So this is why I had to pull our artifacts from the pipeline they're not going to be in source control because they're computed and derived, so we don't check them into source control, which is why I have to create this directory.

A

So I've created that directory, but now I want to copy into there recursively. So I did dash r. Let me go to the downloads temp test front. End fixtures d, e, all of the directories on there. I want to copy them into temp test front end fixtures, ee boom. All right. Let me go ahead and remove temp downloads.

A

All right and so now that I cleaned up my temp downloads directory notice, there's no changes, but now.

A

Fixtures I've got some pictures, I got the ones I'm needing, so I am going to run yarn run just uh here. We go.

A

Nice now it's passing that's great. What was I doing here? Oh yeah. I needed to convert this to view tests. You tell us, so we were just extending this and calling mount component with store. We don't need to do that. We can use view test details so if you're not familiar with futasi tills, um this is all pretty much the same, but I was really hoping to find an example, but I think I closed it out. uh Let's see if I can get back to it uh by searching for vtu.

A

Yes, yes, yes, awesome.

A

All right, let's see if you can see an example, okay, here's an example of your test skills being being done. You see, we have some create component function, let's see if we have that kind of helper, so it looks like we don't have that kind of helper we're just doing this in a before each that's fine.

A

But one of the things that's sticking out is you notice that this option we pass to the mount is actually called props data? Not just props, pretty sure store is going to be called the same thing. I can actually just look up view test details. They have pretty good documentation, so I can just look up view test details and see what gets passed to this mounter.

A

And it looks like.

A

We can pass props data and anything else that we would normally pass to there. um I'm not sure where store would go to, but I'm pretty sure that's I'm pretty sure it would go there as well, but we might need to do something like view use view x, so we'll see what happens there, um but let's just play around and see. Let's see what happens so I I am actually going to remove this and I'm going to remove this because we want to get rid of those and I like resulting just resolving errors.

A

So I've noticed in the epic it says we would prefer shallow mount. So, let's see if we can do that and import this from git lab, not git lab. It's view test details, awesome, okay,.

A

So the thing about view test utils is they actually create? Instead of getting access to the view view model, it creates a view test, utils wrapper.

A

So that's why you see throughout a lot of our test code. We have wrapper emphasizing this is the view tess utils, rapper.

A

So we're gonna, I'm gonna go ahead and rename that to rapper we don't need that we will create a wrapper by calling shallow mount and instead of the component, we don't need to do any kind of extending. We can just pass this directly through there and remember. This was called props data.

A

Okay and these dollar sign functions. This is a view. View model thing when I say view view model, I'm saying view.

A

What we're actually looking for is rapper dot, destroy okie dokie.

A

So then, instead of using accessing the direct view model, we want to use the um wrapper elements, so we can use classes to determine if a class exists or not. So let's use that instead of accessing this class list, then so we can do wrapper classes block.

A

Look at how much prettier that was, and we could do this- we could do wrapper classes there. We go now for this, which is looking for a child. We can use, find and then dot exists.

A

So we can use, find and do any kind of query selector here and that's going to give us another view test details wrapper um we can see if this is gonna exist. Now, because we're finding for a button, something tells me we might need to actually full mount. This shallow mount is going to not expand whatever other components it sees. So it's going to stub out all the components, so this button happens to not necessarily be this component's child, but a child components, child component child we won't find. So if this test fails.

A

My next thought is that we want to use mount instead of shallow mount. So, let's see if that happens, but I'm going to go ahead and do wrapper find- and this will always be not null because it's going to return a mutations rapidly. So what we actually do is say it exists.

A

To be true, we want to say this has got to exist even if it's empty, even if it doesn't find this. It's always going to give us a view test, details, wrapper and so there's such a thing as like an empty v-test details wrapper of something that doesn't exist, so that in that case, would be false.

A

All right, let's see if this passes.

A

Awesome all right, it's awesome and as I was, I was expecting this one actually fails and that's because this sidebar action is probably within a grandchild component. um So I'm actually- and I can- I can confirm that by let's just look at this file.

A

Oh no problem, but let's look at that file. Yeah. You see the button isn't in this immediate template, it's in this child. uh So that's why we'll need to do a full mount or we could change our tests, but that's kind of outscoped out of the scope of what we're trying to do here.

A

So let's try this out again.

A

Awesome we passed, we converted this to view tests, details per the instructions all right, let's see if we can do one more ah man this got. I think this has the same number of tests. Okay, but we're masters at this now um we can go ahead and use next tick. That's fine! We don't need the view and the view extend, and we don't need this helpers thing. um This one is coming view mount component helper. We don't want that.

A

The scope of the issue is: let's try to shallow mount this from you test details, great okay! I don't need this.

A

I okay and instead of vm we're going to call this wrapper, so this is wrapper and instead of a dollar sign method, it's actually just destroy great. Oh no. This is doing a not so great thing which is directly setting the state of a viewmodel.

A

um We don't want to mutate our view model in a test, but rapper has a cool method for um doing this. Yes, yes, yes, uh yes, where we can actually update the props and see what will happen so we can actually call this. We can call rapper dot, set props sidebar collapse. I hope this works. If it doesn't, I know what another thing we can do.

A

um What this is basically confirming is that we can be reactive to this, uh because the wrapper has already been set up, and so we're going to update one of its props and all the things reacting to it are going to update which we're waiting for with this next tick, and then we could do our confirmations here. So we'll do wrapper uh classes.

A

Bomb wrapper classes so we're just trying to confirm that we have these classes.

A

Yes, that's right, um oops, all right.

A

So now here we are trying to find um a child. Something is telling me that we might not be able to shallow mount this, but that's fine, that's kind of out of scope with what we're trying to do here, but let's see if find works, and this is going to give us a wrapper, not an element. So we want to say this is going to exist to be true.

A

But this returns, whether it's found or not, it's always going to be not known, always gives us a wrapper. So all of these null or not null checks actually need to be converted to these exist to be true checks, and then to get these properties, we can use the attributes method to get um see what data attributes they are. So what I'm really interest? What I'm kind of interested in doing would be something like, let's say, attributes.

A

um And let's see what we get, let's just throw this in there. I think it's gonna fail uh hopefully well and we'll see what we get. Okay, we don't have any red squigglies, because we updated all of the references we got rid of that's great. So, let's copy this, I probably should run this first before updating it.

A

Okay yep, as expected: it's not finding this one, because I used shallow mounts after the sidebar. This is probably a more nested button and that's fine we're not we're not really looking to change this too much.

A

So, let's just um that might be a nice thing to do, but it's outside the scope of just converting it to the test details, great awesome, cool, and so I was expecting this failure, because, rather than actually asserting on the elements, data set and stuff which we could totally do and we can always access the underlying element by dot elements from the utas details wrapper exposes that attribute.

A

But we try to use the view test details, wrappers methods as much as possible, and here we can, rather than creating diff separate expectations for each one of these things. Let's just create one expectation for these two properties, so I'm not super concerned about type class or aria label.

A

um Maybe maybe it'd be nice to be concerned about aria label so, but to only match on some properties uh instead of doing two equal for this whole attributes. That's giving me this whole object of five different properties.

A

um I'm gonna do two match objects, and so I'm going to pass into here aria label add a to do and I'll just copy. These I'll have to get rid of the oh gosh. I have to get rid of the plus, but that's fine.

A

Awesome, let's see what happens.

A

Boom, okay: I can run this whole directory now and see if we're good.

A

Awesome: okay, I think we're ready to go so. I'm gonna go ahead and commit my changes and I'm going to say what did I do? Update epic or ee epic.

A

Sidebar items tests to btus- I guess the acronym we're using for view test details I'll, add a link to.

A

This epic, that's great, that's all! I really need to do. That's fine, so I'll commit this.

A

And I'll push this remember, we already did the whole branch checking out. So I can push up to this. I know where it's going. I haven't changed that there's the branch I'm gonna go ahead and click on this to create a merge request.

A

So I clicked on this and it's trying to create the merge requests within my fork. I want to create it from my fork to the forked projects, master branch. So let's go ahead and change that. So I want to go from my fork to I want to go to the main project.

A

There's the main projects, master branch- that is the goal.

A

Oh, that's why I reviewed the target project for um okay. I guess I had mine set as private um to test things out at some earlier date, which is why it defaulted to the previous behavior. um I should go ahead and set mine to public, because there's no reason for it to be private, um and that would be just fine.

A

So I'll go ahead and add a description.

A

This, mr resolves I'll, go ahead and add a link to this issue by moving the remaining um non vtu specs to vt.

A

Okedokey and I'll assign this to me I'll hit, create merge, quests.

A

We'll let it go it's creating the merger plus.

A

And after this merge request is created, the gitlab bot and other things will um should pick it up and help triage it to certain reviewers so that they can review it and hopefully, in a matter of a day or two, you should have a mr emerged um yeah. So thanks for watching glad this was successful and have fun contributing to gitlab.