GitLab Pair Programming - Frontend, 12 Aug 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: FE Pairing - 20220812 - Writing capybara tests for a button

Description

In this short FE pairing session, we pair up on a task around writing capybara tests for a button.

A

All right, thanks for hopping on vyanik, uh so I was this- is the mr. I brought up on the um code review weekly workshop um and what was concerning me with this. Mr now, um so we implemented the new change where we're keeping button component as a single state, single source of truth for rendering a button under different states, but you're, basically toggling whether it's displayed or not, is what this vanilla javascript code is doing.

A

Do we load the disabled view or the loading view of it? It's not great, but it's better than the alternative. uh When it comes to these vanilla, js, older parts of the code base, that is.

B

Some stuff, I suppose, okay.

A

I, like jquery, I really do.

B

Okay, so we are adding the de-toggling yeah yeah.

A

B

A

So um this is nice, but usually when we've done any kind of code change like to test it right, we want to test the code change, so this is now currently void of tests, which isn't great, so I'm going to set a timer period, I'm going to set a timer for five minutes, see if we can get a test working in five minutes. ah Sweet.

A

A

Let me win all right. I had this running earlier, where I added this, I was really trying to get it to show, but this kept happening.

A

So this is what I ran into was.

A

You hit this button and this is actually a forum post like so it triggers what reloading the page.

A

So for capybara, it's really hard to validate.

B

Deal with the readout.

A

Yeah I'm trying to prevent the load so that I can validate the button is loading now.

B

I was just well to say just place a debugger statement in there, but it's probably not the best solution. We can find um yep.

A

So all right, it's coming back to my mind like doing a feature spec. This is not the place to do a feature. Spec, that's.

A

Like we're testing all front end code, I'm having a hard time doing this in feature spec, because the feature is trying to load this thing. So we can't find the button.

B

um Partially understood.

A

Okay, so like, if you look at the screenshot, it's after we've already submitted.

B

A

So I don't think I can use a feature spec for this. Well, I can't figure out a copy bar way to just say: stop loading pages.

B

I don't have it on the top of my head as well. um We would we would need to to check the documentation maybe to to intercept the the network request kind of something around those lines. Yeah.

A

So then the other yeah, so then the other thing is well. Maybe we could you know just.

B

Unit test this.

A

A

It has no units house.

A

B

That doesn't matter um what was happening so I'm currently looking into the um mr as well adding loading state to commit changes button. What was happening before that there was just no spinner and you've been waiting for the page to reload or yes, just oh.

A

B

Because it just wouldn't let you.

A

Do it like the form, is now loading.

B

I understood, and where is the the spinner on the button coming from that is render pajamas button component new loading. True.

A

B

Yeah can't we just come up with a test that is checking if the the loading param is set on the button component.

A

Well, I mean there's there's functionality of here's the thing of like if I didn't have this line, my 93.

A

It would look really weird, so it's testing it's testing this initial setup. This is the goal, would be to test this initial setup and test this behavior that we're toggling one is hidden one's not hidden like.

B

Okay, but for the free stuff in the the commit button hammer that would probably we could just go for the for the property to be set yeah um so that that should be covered for the blob bundle.

B

um Just thinking out loud here do the actual need. Well, we could do this. We would need to trigger the uh the click event. I don't see a proper way around it probably, but we should be able to just ingest shouldn't. We.

A

Yeah, so I would almost think like. Ideally, this could be a fixture that we load ingest. We load our blob bundle and we trigger.

B

A

Is up um so yeah? We can create a fixture of this thing and load it, and all of that.

A

So I'm now needing to weigh off way out trade-offs of.

A

How how can I communicate this to offload it to the contributor or even delegates to someone.

A

Let me try this out.

B

It's uh it's a great example and a tricky path like especially since this is a community contribution we want to be. We want to rather over explain and underexplain, um but also hopefully not solve it ourselves like we're like that's, that's, not not the intention to come up with a diff like here's all the tests. Please go ahead.

A

Yep yep, so let me let me do this, then let me try to just run. Let me run this without my respect. Looks like a spring. How does this work again?

A

Yep? Looking good? Oh! No! Let me um specify this 105., that's the new test. I was going to propose and if I add this like we'll need to get it reviewed by a test person, um what is really cool? Oh, it doesn't like it because I haven't started gdk.

A

Copy bar is really cool like so we already get under baked into these feature specs the facts that only one commit changes button shows because will blow up if it finds multiple matches, which is a really cool feature of it. uh So that's really nice um so like this would give us all the coverage we need.

A

That would be really cool, but I just can't get capybara to stop stop doing its job.

B

um Yep, let me quickly understand: what's going on so.

B

I click click button and 100 113. Okay, I see yeah, that's the.

A

B

And we don't have to care about um the um the aftermath of it, because the end will be set by a page reload in this case, like we don't care about successful request and then, despite not showing anymore like this, is just a freshly loaded. Okay, yeah.

A

Because and that's already that's already uh handled in other tests sweet, so this test is looking will be great, but it fails because copy borrow starts reloading pages immediately.

A

So you can't find the button because after you click it, it starts floating the page and it's like click, happy bars. This is obviously a huge race condition and I want to stop it from doing its thing, so I think I could do. I think I can do this.

A

I think I can.

B

A

um Doing what disabling the form so that clicking the button will still do it, but it won't send any it won't actually work. uh Can I try.

B

That real, fast.

A

Sure um I guess I have the gdk running now.

A

I'm gonna set another five minute timer before I, so I don't spend too much time.

A

Thanks for coming to the code review weekly workshop.

B

It was a blast I feel like that was super. There's a lot to learn in there.

A

So especially, I feel like we just scratched the surface of possible things to talk about. You know.

B

All right, absolutely absolutely what I really liked is: um the attendance was super high, and that was people being engaged in. That topic is fantastic to see.

A

All right, so what I'm thinking I can do actually is.

A

I mean this isn't great. I just want to give. I just want to give like a helpful suggestion um forum yep. What were you saying.

B

I'm in the meantime, just googling if there is a way um to not submit a form in capri.

A

A

B

B

um Super hacky idea, maybe too hecky um do we have javascript really when capable of yes.

A

Yes, yes, yes prevent default. Yes, let's do it.

B

It's super hacky.

A

Yes, I love it, I love it all right. So.

B

I wasn't yeah, I wasn't even thinking about prevent default. My intention was to kind of remove the event handler something, but both should do it.

A

That's it that's the magic.

B

B

A

I'm so glad you're here, but that's hacky. Oh no! It's not! Okay! Okay!

A

um I forgot how to do this in um spec files using execute script.

A

Yes, execute script, uh yes, execute script.

A

um I'll just do this.

B

The example I'm seeing does page.executescript but that yes,.

A

We can do that either one would work. I think okay uh so shows loader on commits changes. I'm gonna say why so I've been prefixing. My comments with what and why and like I've, been I've been prefixing. My comments, I like that, so why um we don't want the form to actually submit so that we can assert the uh buttons and.

B

Do we want to replace the query selector with a jquery selector just to stay uh just for the consistency? No.

A

Not in the test, you're just messing with me.

A

Maybe um I wish I could move move this to just one assertion like I tried doing half button um and you could do commit changes disabled through, but I couldn't figure out how to in happy bar I'll get that um selector in there, because I really wanted to get oh, I really wanted to get my um that loading selector in there. Okay, this loading button.

B

Does this have any other benefit other than saving a line.

B

No okay, then I'm I'm for the two lines. I am yeah, I'm uh I'm a readability kind of guy. So.

A

I sometimes one-liners are, you know, sometimes they're cool. That reminds me.

B

A

I need to update my setting to have like a ruler, uh okay, uh since this is how they call it. Yes,.

A

A

All right, oh no, my timer is off. ah There's there's my there's my ruler, yay. uh What.

B

A

Do you see a little gray line there.

B

Yeah, this fail, oh for the three line length, that's cool.

A

Can I read properties of.

A

What is your problem.

B

The thing is, this will probably run.

A

Has it loaded yet has it have you loaded? Your changes have been successfully. Oh, no. I did in the wrong place. Oh no!

A

B

ah Yeah well yeah best to first prevent default and then click otherwise that they'll be like putting a handle on after the crash. That's not a good time.

A

Yep yep yep, I love our spec capybara art. Just give me our spec capybara and jquery.

B

I'll be the most vegan company of this.

A

um So this is fine. I don't think I need to do this, so I I kind of copy this from some of these other ones.

A

I don't know if I need this.

B

What is it I don't.

A

It's just finding is this asserting that we can find something. I guess I don't think I need that.

B

Yeah and 114 does not make a lot of sense to me either.

A

Expected to find oh, it's not checking itself to have css. ah Capybara search element has class pecking for this of the found. Yes, yes, yes, yes, yes does not. Work have checked with being inside the element. Yes,.

A

A

Gosh is that really the only gosh is that.

B

What are we going to check for two classes of sd classes on the element.

A

I really want to do my one liner.

B

Then go for it.

A

I don't have it though wow I don't. I don't understand.

A

So like, if I go to have button and methods.

B

Me quickly slack your stack overflow link, because maybe I am mistaken, but that seems kind of what we looking for.

A

A

And then selector and options, what are options, options, parameters.

B

A

Yes? Yes, yes, yes class! Yes, only with.

B

A

Class, yes, okay, all right, uh I could do this. We could do this, um I'm going to try this and then I'll check the thing that you said, but this should be it.

B

Yeah just see one of your phones looks better. So, okay, don't you really.

A

Meant changes disabled class. I lost my class. Why do I do this? Oh here it is.

A

See isn't that so pretty it's so pretty.

B

A

It crosses my my ruler, but it'd be okay.

A

I don't know, do you feel, like 72 seems a little harsh for the ruler like 72 characters.

B

That's that's an early land break for sure.

B

Is that something you set yourself, because we, I think we do lint for line length. Don't we.

A

Prettier will on like our front end files.

A

Did we not do this right on line 118? This.

A

Did I not say this.

B

And let's see ever excuse this.

A

Oh here we go to respond to you.

A

Oh, do I not need a question mark here for half button? How do you write? I guess I don't look at that. He it converted it already trying to add a question mark to it.

A

Try and be smart.

A

I don't know why you would want to put question marks in function. Names.

B

I have stopped asking those questions.

B

Like uh syntax-wise, there are some yes.

A

Yes, this is very good so much better than I thought it would be. Thanks. That's helpful.

B

Melbourne is, and we are just on time, just wow perfect- that is, that is pretty pretty amazing. Sweet um have a great weekend, even though there's some work involved, but um yeah looking forward to speak to you next week and see you soon see ya. Bye,.