GitLab Pair Programming - Frontend, 15 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: FE Pairing - 20220715 - Working on tests for canceling autocomplete pop ups

Description

In this session we continue with fixing the autocomplete cancel with "ESC" by addressing some testing concerns and fixing the issue for other types of autocomplete.

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/91829

A

Hello, everybody to this week's pairing session, it's the 15th of july, and we are kind of picking up where we stopped last week, so um for everybody who has not been around um to quickly try to try to show you what I'm currently trying to fix um in I'll be showing this on my branch, but um on on gitlab.com or in the in the main branch.

A

Currently, if you are, if you will be responding to a command in any issue or merge, request and you're gonna be interacting with this menu, which is the add to menu, which is the library that is actually rendering this thing and you're gonna, be you want to leave this menu by hitting your escape key, which I will do now for once.

A

This will close it, and if I now hit the escape key one more time, this model will appear asking me to if I really want to do this or continue editing on production. um This is currently not working and not working means. If.

B

A

The skp once the um the a2 model will be closed and this the continue editing model will be shown as well, which basically leads to a lot of frustration of users. Just hitting the the add button, because you want to mention somebody, then you don't you're gonna, be hitting the escape key and you'll be ending up in here, which is where you didn't want to go. So um this is this is what I'm currently fixing.

A

I was hoping for an easier fix, but um it is fair to say that we are dealing with some legacy code base um over here. So this is um what is rendering this menu is a jquery library that we forked many many moons ago and that we are still dependent on um with the current solution I'm looking at. I did not.

A

um The current solution does not require any changes to the library and I'm not going to invert that this will be this way, because I'm definitely not keen not keen on touching it, and so all of the changes we'll be looking at are in the in our main repository um so very quickly.

A

What this thing is doing, um the gfm autocomplete is basically the file. Let me show you this in my editor: it's basically the file where um the key event listeners that will actually then pop up the the model, and what do I search for add to.

B

A

There we go what's that.

B

He said add to I said: seven.

A

Nice um yeah, um so this is basically the the function call to the to the jquery library, and this is where the um ready event gets: um initialized the key listener. um So so far so good. um What we figured out in the last session is that the the striker recovery is actually smart enough, that it will fire two events, um which is gonna, be a hidden event and a shown event, and so this is.

A

This was working perfectly fine for the emoji um for the emoji model, and but it turns out it was not for all of the others. um Paul. Have you seen the video I put in this channel and there was that took me. It took me about half a day to discover, because I just couldn't figure out um why it would not work for any other and it turns out. There is a thing you can give. um It is an alias.

A

um I haven't looked into it too deeply why we are giving those kind of functions or while we are passing aliases. I know that these are also used to kind of identify our tests. So one more thing that I am not keen on touching, but um as I figured that whenever you're gonna be you're gonna be giving this thing an alias and the event name, the library will actually fire fire will change um and it will change to.

A

Let me quickly find it yep. It will change from hidden dot, a2 to hidden dash, alias dot attu, which, unfortunately, is not documented anyway, at least I couldn't find it so um that was that was a lucky shot to to figure that out, but um glad we're having it um so where I'm currently at or where are my questions? The good thing is. This is all working as expected. Now um the dskp does does what it should um for kinda all the instances.

A

So my two open questions on this r, as I figured um so for the ce version of this all, it's perfectly fine. um I came up with some.

A

um I came up with some tests and this is super hard to to kind of unit test against because of the interaction between between those two um but integration tests.

A

I actually um are actually doing this pretty good um super super keen on hearing your feedback about, but um this is what I thought about um how to best test this like um this is the test for if the the model actually appears like the continue editing model and this iterates through all of the the key symbols and then hitting the escape or fake, hitting the escape key and then making sure that this model is not rendered so that should that should be good to go um so fun part of this or the the open part is um we do have.

A

um This file does have an ee version as well, and the ee version includes the um the keyword dd ampersand for epics and vulnerability um manually testing this.

A

um This is code wise. This is covered. um Everything is working. All is fine.

A

The problem with the um the the unit test I came up for the integration test I came up for the ee version is that I am basically doing the exact same thing in um in ee.

A

I am stubbing the licensed feature, epics true, first problem, I'm having here it kind of doesn't make sense that this feature is called epics, but this is just a guess from my side at this point and if I run this test with the webdriver enables and a debugger. So as we can see in here, this is actually what is happening in the test. um Ee colon would open really nicely if I hit an ampersand there's just no menu opening up, so that is kind of my main problem. How do I?

A

How do I get this thing to render in here? That was a long introduction, thanks for staying with me in this I'm.

C

Impressed with how prepared you were you yeah, we only have the gdp started, but you also, I also have this live debug of this death already open. It's like wow. This is the last the least amount of waiting.

B

A

You go and she said the ampersand.

B

The epics drop down is broken like that. Was it broken by this, mr or was it? Has it always been? Okay,.

A

um No, no it's just it's just broken when I, when I kind of run it in the in the ee test, suite.

B

In the test environment.

C

Okay, yeah, I think um I think that it has to do with either it doesn't have any epics or the feature. Isn't the right feature or there's more features uh yeah. That sounds right. So, when I'm looking at the way these tests are done. These are really really good tests uh but feature specs are expensive.

C

Doing the feature spec for all the permutations, do you do we really need to do that? That's the question.

A

um It it surely, is not fast. That's for sure uh this will not speed up our pipeline.

C

Is there any way we can? Are there any unit tests covering these ee or any these dsm autocompletes? Are there any units out there.

A

Let me double check.

A

I really hope I would say so, like this fight is way too big to not have anything not.

C

Well sometimes you're too big to have tests. Oh.

A

My gosh um wow okay, so just for you like this file- oh it's not too bad. Actually e is pretty small, um so yeah. These are the existing unit. Tests on the left.

C

So like I would be fine.

C

I'd love to hear what uh anand, chad and yannick would you think I'd be fine if we had like just a couple of the feature spec permutations, but then then this unit test level, let's just mock out that function and just assert that it was called um just assert that we added that set up the on off listeners for these functions.

C

Does that make sense.

A

um I lost you, I lost you on the unit test part like um again what you're saying with assert, but if we don't have the integration test, then, where or why would I accept this.

C

um So if you go to set up autocomplete epics.

C

um I mean on the right hand, side did we add any lines of code to this function, to set up autocomplete ethics.

A

A

No, the only thing we added- um I can probably best show you this in diff.

A

um I refactored this in the in the current version of it quite a bit, but um the setup like like this, I refected this to use the c1 so never mind this, but the um the setup lifecycle um method. This is basically everything it does, or everything that that was added.

C

C

What caused the setup.

A

Or when does it get called? It gets cold um because we are dealing here- and I haven't been touching stuff like this- for a while, but um with good, good old, um good old class architecture.

A

um So the um yet the eu version just uh just extends this one, and there is so it's actually going to be cold in here.

C

ah Set up life cycle, we.

A

C

A

Yep, so this will be overwritten and just then calls the super.

C

Oh wow, look at that on mine, 149 and stuff.

A

Yeah, so we are already dealing with all kinds of event, lessons for this.

C

Okay, but those so those events, though.

C

We set up and then we show and hide helper. What calls like set up at who.

C

I'm like, like 161.,.

A

C

Oh on off focus on.

C

Yep so on some sort of focus will set all that stuff up.

C

149 is really interesting uh because you saw that there were aliases being attached which changed the names of these events, but 149 were not worrying about aliases.

C

Isn't that weird.

A

Mm-Hmm, it sure is.

C

I'm not going to pretend that I know why.

A

But I'm with you, it would be interesting to intro to investigate if, if, if it will be change.2 or change dash, alias don't actually that's the direction coming from, but.

B

Yeah, how extensive are the non-ee unit tests for for this one.

A

C

Oh man, do we only have ee.

A

uh Syria putting them to the right, so this is the ce version on the left and the tests on the right, um I would say, they're, probably decent.

A

B

A

Fair, this is quite a cru like not not necessarily a crucial feature, but a feature that is used at many places in an application.

A

But yeah a lot of tests so.

B

I don't know I'm gonna go out on a limb and I, given that it's jquery and legacy and and sort of crazy, I kind of feel that at least one ee uh integration test is justified.

C

That's a good point: okay,.

B

And I just used so extensively.

C

uh Having at least one makes sense, um can we go back to uh something didn't jump out of me um besides looking at these specs in which we can get running, that's I'm not super concerned about that. uh The show and hive helper.

A

C

C

um Pause, we'll close that.

A

And that will be called in the set up something let me see like the devil's, the in the function that we just looked at that had all the event listeners in there here you go set up life cycle.

C

And aliases is a collection of all the aliases.

A

Exactly aliases, I um yeah, I defined them as constants um above here, so we get a single source of truth, and there is also an undefined in here which is representing the default event.

C

Right, okay, so my.

C

C

Concern with this is that for every input we will be adding eventless event listeners for every aliases for every alias. Is that how we want to do it is that is, is the input? Well, I guess that's right, though, because yeah.

A

I think well well, you'll be only adding them them once per load that that will be my expectation, if not we're speaking about a buck. But that's that's what I'm like this will only like this method will only be be called once per per page load um we, but we wanna. um If we load it, we wanna register all of the event listeners for all of the aliases, because you need all those key signals to be ready.

C

Yeah I wish I could.

C

I wish we could justify getting rid of the aliases, but I don't I'm concerned that they're necessary. um That makes sense. This makes sense. The only other thing I would say is you do when we do set up the inputs, we do set them up conditionally. You see like there's the enable map.

A

C

What is on 162.

A

uh How's the enable map work- and I haven't really looked into this- well, I don't know but steve default autocomplete conflict. So where is this coming from.

C

Like it's a well.

A

It's another constant well.

C

It's actually not necessarily a constant. It's a it's an instance variable defaults to that, but that's right, the thing being when we call setup um if you go up to our setup, hide and show, I think we'll want to reconcile the aliases with the enabled map. Ideally.

C

I mean, I guess technically, there's no harm in just adding extra event. Listeners.

C

And what what do you think? What do you think anna or chad like do you think we should trim the list of aliases based on? What's actually enabled, or do you think it's fine, adding all the event listeners.

B

A

Would just get enabled.

C

That's a good question. I think something that's calling this provides.

A

This is the default.

C

A

Sorry this is the default list and you could like this is a default param, so you could just pass in something else and sending those to true, but by default they're all set to true.

C

And that's that.

A

You couldn't change it after the page loaded, so I think it.

C

Makes sense to enable it only for them.

A

C

So to have um when we're setting up the event listeners should we respect the enabled list? Is that what you're saying.

A

C

uh You you bring up the scary, I'm hoping that it doesn't change after page load because I'm pretty sure we're not. None of this is reactive as one would hope, uh but I that would be ideal.

C

A

um What's your take on this chat, I'll be coming with my opinion later on.

C

Oh no chad's present. Oh no.

A

Okay, um he's gone, he's scared. It scared him away, I'm afraid um anyhow yeah we can. We can do it like this and there's one tiny, tiny bit which I'm not a particular fan of, and just it might be ridiculous. But the thing is, this will add more complexity to the show and height helper function, given that we don't really have a chance or opportunity to test this thing, I feel a little mixed about making this more complicated um but and.

C

I mean you're exporting this function. We can test, we can unit test. This function.

A

Fair enough, we absolutely could okay yeah sweet, let's, um let's, let's keep that in mind. That's a that's a good point.

C

And with this with this legacy code, I mean the intense is to harden the code as much as possible.

C

So I really like the feature: specs. That's a really really great thing that we've done. um I think I think it's worth unit testing this function that we're exporting um yeah, so so when we given the challenge here is that this function doesn't have access to that instance variable the enabled map.

A

We can easily quite easily pass it. Can we so.

C

We could just pass it through or what, if whatever calls this function.

C

We have a function, that's something like get enabled aliases and we just use that as the second argument to show and hide helper. You know that way. We don't really have to change, show and hide helper. It's just whatever the aliases are shown height. Helper doesn't have to worry about that. Rather than having one big function, you have two two smaller functions.

A

um I'm kind of leaning towards the passing through, since we don't have too many steps, but if that's a no-no for you, then you're. Okay with that.

C

I'm I think, I'm fine uh as long as it stays uh it stays simple. uh We can. We don't have to pass it to set up lifecycle because it's um it's the instance variable in class. So we can just do fair point.

A

We can just access it. um Basically, this is all we need to do correct. Yes, um yeah yeah, yeah wow. I haven't touched classes in a long long time, but uh good good stuff.

C

So if we were gonna do that um this isn't gonna, be your favorite thing. um If we were gonna do that, we would um potentially, instead of having an array of aliases on line 25, hey james, we would have an object of aliases from the enable key to the alias.

A

But where would we do the matching in this function? Correct.

C

Yeah yeah, but then now does it we're not guaranteed that the enable map keys match the alias values right.

C

So we'll need to map them, but they might actually be the same. I don't know.

A

B

They definitely.

A

They're, definitely not like um I just checked, there's members and there's users, which is the same thing, so they probably.

C

Should be the same, but I don't want to touch this code.

A

Yeah yeah we would have to, we would have to um change the aliases and I'm not a fan of this very much. Not a fan.

C

Yeah, I just I don't know where they're all going to be referenced.

A

Yeah yeah, so that's that's, probably better better. Stick with different naming them.

C

So so we get a map of what is enabled, but that those keys don't map to the aliases. Yet so we need somehow to map the enable keys.

A

Okay, how would you do that, so I think data mingling.

C

I I have some thoughts, but I'm gonna pause, because I don't wanna.

A

um I'll definitely be having a hard time going uh doing this on my own. So what are we having the? Let me, let me lock this totally much easier.

C

Oh gosh, do we do we really need the aliases? I I don't think do you think we do? I hope I think I would probably do.

A

What I can tell you is that I don't I don't know if we really need them, but what I know is: when we remove them, it will break a bunch of tests.

A

Did you try removing them? um No, um I didn't try removing them, but what I checked is when I've been searching for those aliases and I did get a lot of matches in their specs. So I.

B

Expect my question is like the aliases thing is like a performance optimization, it's like unrelated to the actual problem we started with, which was how to test this in an integration test in ee.

A

B

Okay, so I think we're getting sidetracked with the performance, optimization that probably doesn't even involve uh belonging to smr apologies, paul.

C

Well, I I think let let's but yes, we can fix the test and e. I'm not concerned about that. I feel like that's a.

B

I mean the performance up like having too many events is a concern, but it's not a concern for this bug. That's right and.

A

Fair point: yeah yeah full stop all right.

C

Well, can I for one more thought at you, yannick, please and everybody else feel free to be like paul, just stop trying to optimize.

C

So one of the reasons that makes this challenging is, we have to know all of the aliases ahead of time and we're setting them all these events ahead of time.

C

But, as we read down the code, we see that conditionally, we don't set up some things, and so all of that knowledge we have to know ahead of time. If we're going to do this ahead of time, the other idea is rather than having one function.

C

That shows and sets up the show, hide helper for everything call this function for each one of those individual setups and we pass the alias that's needed there. Do you know what I mean.

A

I do, and that would probably solve a lot of the problems we're currently speaking about quite quite elegantly.

A

Thanks for sharing this and what, if we don't, I have one function to set it up, but.

C

That was beautifully, put okay, more or less yeah. Let's the backender wants to go to ruby land. That's.

A

That's good, I'm taking this away with me um I'll I'll think about this. Maybe just all this will just make things better. Okay! So um let's go back to um the ee spec of this. So.

B

A

If I understood you correctly um well, you said chat is like this justifies frozen for an ee test, and I do agree, but for the sake of performance, once more, there's probably no need to test it for all of the um occurrences. Yes,.

B

Agreed, like I'm, I'm saying test the existence of this file, and then it extends and like whatever that weird comment about the top about the exports and stuff yeah just make sure at least the ee version works.

A

Okay, but it would be good enough if you only test for epics, okay,.

B

Yeah like, if you look at the original or at the ee version of it, I think not the spec but the that code.

B

That would be it like, like line 12, and that comment about length 12 like that, whatever that's doing like it would be nice to have an integration test for it for stuff like that, right.

A

Okay, um so we are back to our very initial problem, and that is basically the um the ampersand in here is doing nothing.

C

Yep, let's see is, do we use the ampersand thing for? Are there any other existing tests? For this.

A

Not to my knowledge.

C

Probably not, um but we definitely want to look up where we're creating. I would try to find another task where we create epics, because that's what we'll want we'll need to do.

A

um Yep, so I would probably, how do we feel about searching for this.

C

Would be like, let that call an epic thing.

A

um Yeah sharepoint.

C

But yeah it's got a parenthesis. There yeah.

A

Is this what you're referring to.

C

A

Yeah, maybe this line could solve a.

A

um Should we just re-run it because it will take a take a second? What.

C

Is where do you have a group being set up in that spec?

C

um No, and that means a group. Yes yeah, epic, certain things, and so we probably want the project to be under the group as well.

A

So, just like that correct.

C

I think like that, or is this there's the namespace.

A

C

It says that on the left-hand side, yeah, that's right! That's right! Okay, sweet.

A

I'll give it a I'll give it a shot. Let's see how far we can take. It.

B

Sorry, I keep dropping, my internet went out and then my hot spot went out.

C

B

C

A

Okay, test is running.

C

Did I already open up that is that browser tab is that from the test.

A

Yeah, but that is the old one. Then we chose to know okay, so we don't get confused about it.

B

I was trying to look at this and find that, like a flag that enables epics, I like that, it looks like for the the feature capability is called epics, but um it doesn't appear to be enabled anywhere, which makes me think, like maybe all of the ee stuff is just enabled somewhere in the the helper.

B

You know during the ee.

A

B

Ee suite great question, which.

A

Makes me licensed, I don't know if.

B

I missed anything but leads me back to paul's uh thought that maybe there's just no epics that exist to be shown.

B

Yeah I'm having.

A

B

Talked about that, while I was dropped.

C

Oh no you're good. I'm.

A

Having a good feeling with this.

C

Oh, my gosh, I have this shirt you're right. All right, we've gotta go, look girl, say bye-bye. I do say bye-bye.

A

You have this shirt.

A

um These boots open up um because the source branch monster is missing from project. Wait, wait what.

C

I think we're super broken.

A

So we are creating a group. The group is then public. This is looking.

A

Oh, it even closed, even though it's on binding pry, what does the console say? Well.

C

Oh wait is this the webpack thing this is. This is the. What is this? The webpack thing.

A

I don't think so because let me double check that. Oh, we need to speak about this as well, because I haven't um this. This should be in place um like the webpack patch currently, so this is.

B

A

So that should be okay, um so I think there is something wrong with those those couple of lines.

C

Did we not d? Did we pretend we didn't break anything into touching the javascript files we just touched.

A

I would be if we would. I would really expect a different error, because what we just saw on the um on the browser was basically like it couldn't render an mr and you're not going to be breaking this 50g fm or the complete file, or are you?

A

I would like I'm happy to get stash and rerun this, but I would be. I would be super surprised if, like because the the error, the error message, we're just getting like this was kind of backhand generated, so.

C

Did we potentially find a bug.

A

um I think we just screwed up our setup.

C

I mean we're in feature spec land, so.

A

I I feel like like we can, let's, let's quickly look into this, I feel like we are set setting up a scenario that can't uh that is causing some issues. So we are creating a group which is public uh project group group, so that should be okay, merch request.

A

Looking good to me.

C

Let me you'll need to um you'll need to do let exclamation mark or let it be for the epic.

C

Do I okay, um because otherwise the things are only lazily initialized when you reference them and we don't actually reference that.

A

Today, I don't okay, so just like I did, this should be fun. That should be fine. Okay, let's give it a shot. um Well, that was weird what was with the error.

C

The error that that state, I hadn't seen that before that.

A

Was weird: let's, let's see if we can reproduce uh make sure to to make a screenshot this time, um while this is loading um paul another one for you like the um the um what we've been encountering in a in the last pairing session regarding the d.a sinkness like um we need to speak about what what has I? I didn't fully understand the issue you fired regarding the the missing things indeed, and.

C

Understand it, I didn't understand.

A

This is wild, but my main question is easier: like is this now fixed on our main branch.

C

It is, it was just okay on 14.9 and so okay, what's the change, the way we did merges, which, uh as a side effect fixed.

C

Fixed that issue- and it was really edge case issue, but it resulted in data. What is this? Oh okay, we haven't initialized the repository, that's it yes! Yes, just yes, uh you're moving for I'm back in our spec. We have to create the project and then do like colon repository or something. So we have project group, but we also have to do like repository.

C

uh If you go back to before we made our change you'll see that you probably had repository and we removed it with group accidentally.

A

Oh, let's see that should be here then.

B

So again I kept dropping. You might just want to look at an existing spec. Like you know, epic's issue spec, like one that's gotta, be working with epics. Currently.

A

Yeah um project.

C

Depository, yes, it's a flag, you gotta pass to the factory, and so in this way right now we just created an empty project. So we actually want to create one with a repository yep. So but it goes before or off.

A

It doesn't matter.

A

Repository that kind of makes sense, though,.

C

Yeah, that does make sense so yeah.

B

Yeah project public repositories, the other ones, have that.

A

um Yeah going going back to the um 2d, get it get bug, I don't know implementation twerk whatever it was, but I have to admit it scared me a little like the issue description you put in there, which basically said uh there was an mr and the changes in there which are not shown in the diff you'll be like well. If there's one thing, we really want to get right. That's probably.

C

So what the conclusion was was that the diff was correct, but our merging logic was wrong and the way we were doing a merge.

A

C

Because somehow in there there was like a revert of a revert to something unrelated in the master, this.

B

C

Was like trying to fix their branch and when we did the merge it just caps. This revert of these files, so from the diff it looks like merging, is just going to change some typos, but when you actually merged it merged reverting some files.

B

I looked at the links to the like the stack overflow stuff that stand linked and there's like cases where get like it, where it doesn't know what the parent is and the merge just, and it can't get it right. If you don't.

C

B

The certain option.

C

Yeah, um it looks like we did have like a something left behind when we were playing around with this, ah but we got it. Yes,.

A

Awesome yeah so.

C

A

Have some uh js issue, but that doesn't matter like that's not biggie and the good thing is. This is working and.

C

A

um Yeah, it does so hitting it once. uh Oh one more time, um opening the menu hitting it once there we go hitting it another time. This is just just working as expected, so that is the easy test. Everybody fantastic thanks. A lot for jumping in here.

B

ah Good job, it was a good session, even though I missed half of it. I had to put my phone like in the kitchen window to get my hot spot to work.

A

Good stuff, all the good stuff, so, um let's, let's quickly before we wrap this up, let's quickly, look at the difference, see what we actually changed and maybe some some to do so. um I will just revert this far. I'm joking paul um I'll, see um I'll see what I'll be doing with this, but um a lot of a lot of input on potential optimizations.

C

So uh can I share some thoughts about the different approach of having one function that sets up all the listeners versus a function. You call every time you need the listener set up.

C

um From a testing perspective having a function, you call every time you need the listener set up means we're adding something to all these different code paths and, as we saw like feature testing, is really expensive.

C

You don't want to feature test all the code paths. It would be nice to do some sort of assertion on the unit test level that we set up this and we- and we called this function, to set this thing up with it. We set this thing up. We called this function. Setting up that would be nice that need isn't totally there. If we have this one function, we called set everything up because from the coverage perspective, like you've, already passed that those lines theoretically.

B

Does that make sense unit test? Can you just assert that all of the event handlers got set up correctly? Just have one ce and one ee.

C

I think that I think we can have one yeah. I think we could do that. um I like that idea rather yeah. I I think I'd be great of just asserting that all of these um events were set up.

B

You don't have to actually test the behavior you just test, what you're changing, which is like the the registering of the events to make sure that didn't regress.

C

So we can add a um I'm pretty sure we can add a spy on to the on.

C

I'm pretty sure we can add a spy on to the that jquery on function and then just see we got to see you know what has it been called with with to have been called, or we can do something like calls dot filter with this, and we can actually just assert hey on was called with these values.

A

But just to get this right, um what they're, currently speaking about, would be an approach where we would call one function. Fourth: from, for example, the set of emoji method, yeah, the not the d1 size fits all thingy, and we would then absolutely get rid of the the method of the um like this thing.

C

We won't need. We won't need that array yeah. The enable map and stuff.

A

Like with the solution, we don't we don't care anymore about the enablement. We don't.

C

Need that, because, because now we're gonna that'll naturally happen because we're putting it in the code, that's setting that thing up so understood.

B

um It reduces the coupling between these different types of things. This largely non-cohesive uh class is doing.

C

Yeah uh and what chad was talking about too, with just testing and out of like, let's just start it and test what this thing's been called with. Technically like that test, isn't coupled to either way we did it. So that's! That's a nice one too we're not coupled to the implementation.

B

Before you change it, jquery doesn't just or you can't just introspect what events are set up and like look at the entire list and make sure it has the handlers you want. This.

C

B

C

I'm pretty sure you can't, um but.

A

I don't know, let me let me check one thing like I really, the more think about it, the better. I like this approach, because if we are calling the the show and height helper or effective version of this actually from, for example, the set of members function, um we will have this alias right at hand, so just kind of from a logical point of view. This does make more sense. um Very last thing I'll be doing.

A

Is I want to see the gfm auto complete specs, not for the ea version and search for this, which gives me zero results? Awesome.

A

B

Still think that refactor belongs in a separate. Mr though the the event, the event structure.

C

A

Like it probably like it would um yeah, I guess I'm not.

B

Necessary to fix this back.

C

B

C

Either approach you need either approach and one approach has more coupling than the other approach. If it's a big cost to do this, we still need to test it too, because we're not going to get full coverage with the future spec. So.

A

C

Don't think the cost of it's not a huge refactor and if we.

A

C

We need anyways.

A

uh Yeah I'll, you know what I'll time box this and see how it goes.

C

That's wise, yeah don't uh and feel free to not listen to me.

A

We'll we'll do so and we'll see I'm a little, what I'm a little concerned about, as I just mentioned like um as we are not having any of those tests or how do I put this the tests on the right, I consider legacy as well, and they are working and green, and this is fantastic, but I am not so keen on touching the video so.

C

um So setup is called and setup is what actually later calls all of these ones. So you see how they're calling setup labels true.

A

So this will be the end. The darren able map.

C

That's the that's. The enabled map that they're passing but we'd be able to just call just setup.

C

And assert you all of the events that were created. Do you want to try that out.

A

C

Why not exactly, let's do it all right? Let's go to the uh let's: go real fast, all right! Let's go to the bottom. We can do this all right. Let's just create a new describe.

C

Just like that yeah it looks great and we'll call it whatever I'll just call it pairing boom yep uh before each was steal, the one that was for labels had where they set up a text area and stuff like that.

A

um This is basically that would be this one correct.

C

A

C

We can get rid of um what's data sources. Where did that come from.

C

Oh, are these just urls, let's just put an empty object there. Let's just that's not, let's just put an empty object. There.

C

A

Kind of like a oh, no oopsie um kind of like that.

C

Yeah and let's const this, but let's put the text area- something that we'll use outside of this. So maybe we need to create a shared variable for the text area.

A

um I partially understood and where would that shirt.

C

Very well outside the before each we can assume. Let's go um we'll see you james and yeah. It's uh it's close to time. Getting a hop off feel free to hop off. uh We'll need to do the text the jquery selector inside the before each, but we'll just declare it outside.

A

This will make it a letter.

C

C

Yep, I will need to do it after we set up um after the auto complete and before the setup, yep yep, yep yep, and then, let's, let's get rid of the second argument to set up because then we'll use the default where everything gets set up.

C

Awesome great. So we set this thing up and now onto it. We're going to check out.

C

So right we'll check out what on has been called with. So let's just do expect.

C

Yep we'll get rid of that and we'll do something like dollar text area dot on.

C

uh And I think, let's do dot mock dot calls to equal. uh So we'll see what the though they're all going to be actually.

A

um One more time, daughter, texas area.

C

If you have a mock function, you could do so text area will do dot on so we need to mock dot on it, but on is the function we're going to check out dot on and then dot mock, so we'll need to make a mock out of this and then dot calls.

C

So we'll get a list of all the calls and then we'll say two equal and we'll just put an empty array right now,.

A

Oh okay, so we still need uh um where we put the the mock function in the before each as well.

C

um Yeah, but we'll definitely want to do it before the setup.

A

Doesn't make sense, though, um so then we would do something like text area dot on.

C

Or just that spy on text area.

A

What does this syntax like for the spy on? It's not really just.

C

Not square uh spy on yeah you just you got to use this global object. Jess, yep, yep, just a spot on texture.

A

C

And then comma and then the second parameter is the name of the function, your spine. So it's actually the text area, comma.

C

Okay with and it's a string yeah, it's the name of it.

A

ah Gotcha, oh okay, um but you you would usually put this in a vowel. Wouldn't we.

C

um Well, it mutates actually the function, so we could just keep referencing the function like we are in line 904.. We can get a value value out of it, but okay.

A

So if we don't need it, then just not do it. Let's.

C

F describe this and run it and see what happens or only that yes um yep, let's run it. Let's see what happens. This is going to work. First, try. It always works like that, I'm joking, it doesn't.

A

Start singing I'm running good to me.

C

Oh man, I'm so excited.

A

I'm not on the m1 yet just to give you just a little more of excitement. Oopsie.

A

ah Fixtures, oh no, like this takes just takes half an hour to create them.

C

Let's just let's just comment it out: let's comment it up.

A

Fair point: oh see.

A

Too many bloody nights.

C

Yeah yeah, but is it referenced anywhere that we'll need to update we'll just still update.

A

um One more time there was partner here.

C

uh Is it referenced anywhere that we need to also comment out.

A

um Hopefully not like if I'd.

C

Say looks like up there. It is actually because it'll try to parse the whole function.

A

Up there be that one.

C

Where is up, there is a real question. You scroll up like an inch.

C

There's a red dot on the scroll bar up a little bit.

A

C

C

That was a good way to talk about it. Yeah.

A

um Oh, oh, but it read something given ali is that for each is not a function. Yeah yeah.

C

Cool, but it's set up. This is set up right.

A

um Yeah, it is.

A

It is that's fantastic.

C

It's not a function because we commented out aliases. So if we go back to 25 and 34, if we uncomment out aliases on 25 and 34.

C

I need to scroll down just a little bit. I think all right. Let me let me be more specific. If you go to where show and helper is.

C

Oh yeah, let's just pass aliases in there yeah we weren't using uh yeah yeah yeah yeah. That's that's what we need um it'll still fail, because it's not going to equal an empty ray, but we'll get the results.

A

Yeah I'm having what I'm having a little bit of a hard time with, is actually thinking about what we are testing here on the right. um So we are setting this thing up with the default enabled map, so the next thing to do would be check in. If all of these event listeners are set correct and then in best there will be one test and then, in best case pass this thing one more enabled map with maybe all of the features false and we'll see.

A

Let me quickly note this, because I will not remember this in half an hour.

C

It's okay on the mr I'll I'll link you to this video of like that's how you do it did you how come it's not bigger than someone.

A

C

But that's that that would be the wisest approach like I'm even fine with just one test, but the wisest approach would be. If that enable map we pass to is different.

C

Our calls will be different uh so that that is a wise thing to do.

A

C

Did it pass or like did we get some pronoun results from the uh oh gosh it passed? I was expecting it to bail. Oh yeah, that's not.

B

Good we should have, we should have one handler.

C

So we called uh this was.

B

It an ordering thing was it: was this fine not set up soon enough? Is it like happening at like class initialization, or something weird like that? It's.

C

A really good question.

C

And we said yeah can we set this up earlier? Oh no we'd want to do it right after the html fixture and eight line. Eight. Ninety five, two eight. Ninety five needs to be.

A

Eight ninety five ah gotcha okay, so um just like here, no flipped before this fight, okay, yeah.

C

Oh ah yes, yes, no, I know what's going on, go ahead, but all right, what's going on.

A

You want to keep his voice up.

C

I was afraid of this uh if you go to um while this is running, if you go to the setup function: yeah, okay, still, pausing yeah! If you go to the setup function,.

A

On the main file, what yes.

C

149., do you see how we did this input.each.

C

And then we wrap it in the jquery object.

A

um This thing here.

C

A

What is going on here, this is jquery.

C

Man I'm online on line 894 on the right hand, side we're just spying on that. One jquery wrapper.

A

Quick question: is there a convention? I am not getting to just prefix variable names with dollar like do do these represent jquery objects in there or what's going on with those yeah.

B

I've seen that before convention, it's exactly that.

A

Okay, okay, good to know: okay, go ahead! Sorry, one more time go ahead.

C

um No, so the spy on isn't the way we want to do this. I don't know I'll have to I'll. I can we don't have to dive into it right now, because we're out of time but I'll research. How do we want to spy that a jquery event was set up?

C

uh We can't just use spy on naively, like I was suggesting, because that's that one jquery rapper but man jquery rappers, are a dime a dozen and we're rapping and unwrapping all sorts of things. So we gotta, we gotta figure out how to get the spy working.

C

Okay, I'll I'll, do a little bit of research and I'll share it on the front and pairs channel.

A

Awesome so looking forward to this so much um anyhow, this was a lot of progress being made today, thanks so much for everybody, yeah.

C

A

C

Thanks for bringing up yannick thanks for hopping on anna and chad, you guys have a lovely rest of the day and I will post something about jquery on front empire soon.

A

Looking forward to that, have a great one see you soon bye.

C