GitLab Pair Programming - Frontend, 15 May 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Pair Programming - Jestodus #7 (monitoring and lib/utils)

Description

**Result:**
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/32086
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/32336

**Highlights:**
- 3:00 Debugging differences between Karma environment and Jest environment
- 28:10 Lets keep this spec in Karma since it seems dependent on browser environment
- 33:20 We start on a new task of finishing up migrating lib/utils directory

A

Do you wanna drive, Neto yeah sure so I can describe the situation. I start screen, sharing, there's one yes, correct, I'm, always terrified to share the wrong one? Okay. So there we have this issue and I told well it's one test and the mock day that this is going to be easy right. But what can go wrong? Yes, what can go resize?

A

So this is an integration in the integration test and I told. Maybe we shouldn't bring this, but then it seems that all the pieces are working so with mount. We can actually replicate this ingest, so I thought. Maybe we just bring it and then there is going to be a nice day where all this integration has to leave with another test suit, that's more a doc for integration stuff.

A

So this five year it's everybody edited, but let's start from the original.

A

So basically what is doing this is mounting the monitoring, dashboard and try to resize and measure that the graph are not even resize is actually toggling the the toggle and measuring and the graphs arm. P18 consistently and I tried the Karma test. I just modified here to describe it and console.log and it works.

A

This is the test rewritten, ingest and v2.

A

Actually here it was using with you, but it was using my create local view and then extending it and then manually Mountain the component I simplified all this logic. You know, maybe I just stop it here for a second, so you you can take a look that up until here. Everything is fine, so basically I'm mounting because of the integration best shot amount, doesn't make sense, just stop in charge to people because of the rise. The bootstrap tooltip is going crazy by the way. I.

A

Don't know why your mark is not kicking in here, because we have it mocked up here. What is not kicking in, but that may be a second part to to investigate, and then there is store, Buick store creation, stop being something that just doesn't have the beautiful chrome implementation mock adapter mount the component.

A

This is a utility function that is basically taking the store and slamming in the stuff it needs to do. The fun part is that needs to be done after the component is mounted because otherwise the component on created will reset the store to his props Oh.

B

A

So this is this is our component and it will do this right so instead of passing every props in our case I'm, letting me initialize and then reset in a store, this is slow. But it's to test it's an integration test, I told ok at least: let's get it working and then we optimize it okay and then, and then, since we are rewriting the store and not expecting, the component update returned proper the end next week. So we are sure that the dummies update, okay,.

C

The trouble starts.

A

C

Question I see that our files called dashboard resize spec, but our subject is still the dashboard component. Yes,.

A

Not a dashboard resize.

C

A

Then the describe inside is response to Windows resides I, don't know, ID I left it as it was. Ok I just.

C

A

Working that ok, the dashboard spec, is here. The proper per spec is here a proper I, didn't open it, but yeah, ok, ok! So what is the issue? The issue is that the justice initialized as the karma test doesn't bring the same done now that all they create completely different graphs, yellow and and as per discovering. Why well so I was working on some back-end test and let's, um of course,.

A

And I'm completely fine, a few people say: hey look: this is an integration test, just leave it in karma and just drop it. But my it's weird that once I finished setting up the test, the produce Dom is different and it makes me suspect that the Karma test is also fragile or depending on something else, and so I just decided that it was worth to investigate a little bit but I'm happy to hear otherwise and stop suffering on this file. So what image.

C

Is not about being concerned about the Karma's back yeah be naturally, integration tests are gonna, be a little bit well.

C

But what do you mean? What can you can you explain a little bit more? What you meant by the Karma test was a little fragile well.

A

I'm not sure if the car modesties fragile itself, but I don't see why they generated Dom is different when executed in an isolated environment which is just and then you know, shared environment, which is the Karma one.

C

Oh, it will be: oh, it will for sure be different, because karma suggests is the probably the HTML that we should trust. Karma is gonna. They don't clean themselves out. What is this I.

A

See what you're saying wait? A sec I just moved the console to log base.

A

C

No in in in karma, because tests don't clean themselves up, it's like a very common thing, for we have some old tests there that that have just left something in the HTML or even we have like old Watchers that are just watching for HTML that never.

A

Cleaned up order exactly so that's why I'm concerned listen if it's possible to rewrite it in jest, so that design is like the environment and it's testing what it needs to test. I will be more especially because this is a very big component. 3 yeah.

C

We should feel we should have some confidence if we just run it in isolation like you are and if it passes like we should have some confidence that it's it's doing all right. Some things I could keep it. So, just knowing that there's the context here of doing something with resizing so things that could keep it like. It's just not gonna work in the Jets environment is, if we're doing some sort of like resize observer or.

A

Like the the funny thing is that so this is loading this dashboard right and I got bit fast, because that song it's a lot of markup and before and we've to process. So basically it's generating a panel and every panel is a graph group right and and then we go inside this graph row, and we basically talk about this, and so basically it's acting on this be show and I. Don't see why this should be different.

B

A

And the fun part is that so you see this, there is some walk around there, but you see this is the graph that the Karma test is going to pick up right, which is a very teeny, tiny graph and and look at this vector here. So the selector goes position:relative SVG. This is not the most precise selector in the universe, right and and and and- and you know this- there are icons in this component tree that are made of SVG and they have position:relative.

B

A

This chart doesn't exist at all when I run the test, just it generates a completely different Earth.

C

Wanna see yeah, let's do it so so, even though it's called like dashboard resize, there's we're not like having to do we're not reacting to resizing of elements or like that's not what we're. Actually. Oh.

A

It it says expanding chart on the group after resides display the chart, so this is I.

A

Think the resize is meant like clicking this toggle. That's what this test means: okay, yeah, so from panel I'll go! This is a good console.log.

A

Maybe maybe that we do like this yeah, let's, let's.

C

From the yeah, let's run the just test that we call just see: yeah I'll just bring this the sec.

A

You can do this like this. A big monitor, um let's see them same side to side no I hate it karma is so difficult just to.

C

You can run just a single file in karma.

A

Argument, but this and everyone all it's like the f.

C

You do like yarn run, karma f, then you'll run just a single file or F. Whatever your path is so it'll help with your log a little bit, but you want to do this.

A

While this run, I can check.

A

Single yep, yeah, okay, so teeny-tiny SVG is not there and it should be here so this throat hood here. Sorry I can't pronounce that word here. It says no data to display. This means that the export panel appear decided that for this specific chart, if it has no result.

D

A

So decided not to print that, but all the autograph are printed down okay, so this is the SVG, and this SVG is absolutely not present here, but other graph art. So this is a graph that is printed down there. Okay, so.

A

C

A big applause I see.

A

I see there is position:relative yeah all the graph starts with position:relative. The integration test is using the fact that quite a selector pick up the first I guess right.

C

But we're we're saying that this one is not the same one. No, no. It should be under to the.

A

Throat booth here can we.

C

You want to specialize. Can we update our selector in karma just to double check that we're doing the right thing? Can we update it? Yes,.

C

Or like or not, there's Prometheus graph, that's what I was thinking. If we do today.

D

C

All are like this. Oh right, you know we can add a base. Id and Carman.

A

This, yes, that are yeah something, but we need to nail it down process properly. With the let's talk, let's add with the name of the graph. Maybe so this is the container deep, I guess mm-hmm. This is the contain. Indeed, let's try it close it geez, okay, yeah, it's this one I guess!

A

So! If I do as ID equal.

A

Title right, so this is going to pick up this title, so we we can match them from the test.

A

So chart now we we can say we leave.

D

A

Pg and we do data study, equal comes sorry and I wouldn't be able to you get out at that word. Otherwise,.

B

A

C

So this is interesting when, when doing these migrations yeah, if we okay, I, think it's gonna help us I think it's gonna help us if we kind of reshape, what's our what's the best source of truth that we're trying to migrate. If we reshape that I think it's gonna enlighten what our chest it might be missing or should look at what.

A

If we look at this drawn group here, first per second John, this should be the container. This is the same thing that I'm printing on just funny that I updated the Karma test and, oh, maybe.

C

That's why it's failing is because we're doing the query selector on the group, which should have that test ad already.

A

So this is right.

B

C

We add yes, it is do.

B

You see the test ID, yes, I, don't.

C

B

C

Wait, oh there's the test, ID.

C

But this is helpful because maybe it looks like is matching a different SVG for sure than what we thought it was I.

A

Don't you see that they say do please any question.

C

You know well we're learning so much about our monitoring. Codebase.

A

It's funny it's the same on this.

C

Side, it sounds like that throughput bit, so this is really interesting. We were looking for an SVG. We were thinking that it had to come from us.

D

C

Throughput seems to be special. If we go back to our component, why is it special? Where does that come from so.

A

This is like to loop inside the other like and oh by here, so it we need to start to look at out the data inside to look at that. So actually, actually this is consistent, because so there is this log that says that truth put is not part. I modified either with the search on the mount that just remote stuff as I was going nuts.

A

So it says that truth put, has no data and that's correct, but latency should have, and so latency should have a chart in sight and they're evil.

C

A

C

We have one over here and just for latency I.

A

Don't know this look like a graph and yes, we do actually is it the same, then I don't know it's not easy to read this thing all right. What do it is SP.

C

C-Span, if we go back to what were we trying to actually capture there, so we we have our QA selector here, which is Prometheus graph widgets, but I, see like our throughput is what we were capturing in karma places, Kozma right, but we were you're saying we were selecting this SVG that was under throughput, and so there.

A

C

A

Maybe that that.

C

A

Mistake because the selector is speaking, the first SVG, the original selector right right, and so it.

C

Looks like maybe this test isn't doing what we think it's doing.

C

Right yeah, so then I would suggest unintended.

C

We need to try to decipher what's the intention here well,.

A

If we were to trust the description of the ID of the test cases, it if try first to find the graph assert that this is visible, that is expanded, so the style display is not Eden and it hasn't reached. So it's there right positive, a certain and then he clicks on the toggle. Then you expect it to disappear right now and then somehow is resetting the width to expand and probably for for the best afterwards, because karma is done for.

B

A

D

A

And they expect they wish to be big yeah. Oh.

C

Maybe it is some sort of resizing thing, though they're like I, don't know okay, so if we just ignore this chart stuff, does it work if we ingest, because I see that we haven't expected, unlike prom group, that it that this one? Yes, this lining works? Yes, so that works.

A

As we don't we're not worried about this chart stuff yeah and it finds a chart somewhere, because there are other chart in that in the page and they are all waiting actually, and so it fails to greater than zero. Because it's not the chart that the test is intended to look at.

A

A

I'll, try to run it and see if we can pick up this SVG and if it look like if the test is going to pass now. So at least we know that that's the the piece that we are looking at.

A

Yes, so they are passing okay yeah, but this SVG is not a graph right. This is the icon.

B

A

So why went that? The thing was position:relative SVG here me meant and comment and say.

C

Well, what we could do is yeah we could, we could add the position:relative after.

D

That that data.

A

C

Select your thing yeah a.

A

Selector I ever written.

A

You see actually the the first line it goes in and fails of the sake of the Jeff one as I was saying.

A

Now we're not finding it like that.

A

So this is the HTML. This is the graph right first position relative here.

C

So previously, if you go back to our karma test, I want to understand something else. We were picking just position relative of prom group yeah correct. Can you show me, can you show me what Prometheus graft group where that class is said? Yeah, that's here all.

A

The way to somewhere else um is it anywhere else. You think it's here, it's in the same file. It's bring the two times, because there is a way where, like this collapsing attribute, is not there, okay, but it's not in the main.

C

Dashboard component, it's just here right, yeah,.

A

C

C

Okay, okay, so we were looking for one of those groups. We.

A

Were loved you see, this group is just up basically a pass-through for the slots, yep yep, and so we go one back to dashboard right and there is view draggable, it's okay and then graph group it passed inside you draggable, and then there is this and then there is dashboard panel, which is actually the the owner of this information.

A

C

A

Interesting stuff from oh yeah, so if I restore this like this, I want to do above some root of TNT and copy paste of the chart, HTML and then print the whole thing and just find it right in karma. If I run it two times, it should run right. So at least we can find a selector. That makes more sense. So if this is our chart right and if this chart is inside wrong route, I'm sorry I know this is not the most exciting stuff to deal.

B

With maybe we can.

A

Learn stuff yeah.

B

Now this is, this is good I.

C

Kind of wanted, but I kind of get nervous, looking at large blocks of HTML.

A

Look at this, it is out of there through boots I.

C

Kind of wonder if we need to just iteratively make sure like for each one of those lines or picking the right thing that we think it's doing.

C

Is that under three through putters throughput see it's hard because it's not even like formatted yeah.

A

C

A

Is draggable panel graph, title correct and now the graph is printed.

C

Here's the thing is: I, don't see a Prometheus graph group thing here: oh there, it is on the first log prometheus graph group.

A

So I think I think that is this. Svg is not the graph. Maybe this is for. Let's see what this is vo draggable dinky, because then, after where it says no display at.

C

I guess so we could try running it and seeing it, but we could like.

A

No, you need that. We.

C

A

Say that who learned that.

C

Cross file and like opening your browser, to see what it looks like. But it does not seem like a graph because it does not seem like a whole lot of.

C

So I I understand that this might not be a graph. Maybe it is.

A

You know if you look at the source right, if it's a graph that can't be empty chart, which is this right.

C

But let's, if we also go back, there's gonna be some issues that I think something stood out to me when we were looking at a graph group.

C

If you go back in the best, oh did the code graph group that view mmm yes, no, it wasn't here. Maybe a dashboard panel yeah there's place, we were setting the width and I could I saw it. I don't see it anymore, can you'd like it. Maybe a search for width for.

A

C

A dashboard, a viewer, oh.

C

Wait wait. Oh wait, wait go back! Oh yes, oh sorry, no I did see it in the HTML. If you go back to I might just be saying things: I haven't gotten a lot of sleep lately yeah here it was here so check this out, see what we're setting okay looks like. We do have a width there. I was looking at I, saw this height I thought. Maybe we're setting the width outside of this specific component and in a karma test. Karma runs in a browser.

C

So it's gonna work like if my parent width is different, like all of that is gonna, be adjusted when I do like an assertion on width, but in Jamestown we just can't. We could try to mock all that, but it's not there. It doesn't exist in just in our thumb ingest. This doesn't exist, but our route, this route is different. You see here we're printing out Prometheus panel I went here, where's our Prometheus graph group. Well, there it is through play.

C

Okay- and here you.

A

See here is like, if you eat, that is not printing stuff yeah.

C

Oh, but you know what you know why? Because it looks like we use it, we're using view draggable we're using some sort of third-party library. It could be have to do with how tests are mock our time. I'm. Sorry time is mock down like they could be inserting some of these on a timeout or something you were never on old. mmm A lot of me feels like I. Don't want to migrate.

C

Or at least it needs to have a real, it's an integration, spec and it's we're gonna have in our in our very unit st environment and just it's. It might be more pain to maintain.

A

Than it's worth can I do a step more he's the best actually testing something real I. Think no I would.

C

This is a good you know, search through the good blame and think somebody about it, but I would honestly if I was doing this and I saw something. Resize and I saw okay, yeah we're using something like view, draggable I think it's a good call to let's move it to, because we have a process for these. These browsers.

A

C

We yeah I think we have an integration folder and we have it I think we call it route that has to ended browser spec. Is we leave it in karma? We can name it browser spec, something.

B

That's fully so what do you say well.

A

Let's move it I think, and maybe we can make a pink on the mr and ask the older for folders for clarification. It's everybody it does. Everybody agree that this that this is a good candidate for integration test and leave it there. Oh.

C

Poor silence I will I take that silence as a yes.

D

C

A

Yeah but see us for me: okay,.

C

Yeah thanks for thanks for wrestling with it.

A

So this is the original s just running out of being sure. Yeah I had a feeling that this will be a good candidate, I told the consensus of the group was important there. No.

C

No, that's that's good, and but it was also good wrestling. I. Think I think we get better when we wrestle with these kind of things I so really exciting. This I have an M are open to that, takes steps forward to setting up a front end integration test, environment and just so we'll actually have to jest. Configs will have a unit test config and an integration today.

D

C

It's foreseeable that even for these integration tests, eventually, we could go all just and.

A

That will be better because of the isolation, so.

C

What is the full dirt here? um If you do a search for browser underscore speck you'll see a pattern.

C

It's fun label deal. Let's maybe do that ones! Yeah, that's if there's another. One too I think was that the only one oh yeah, the one this is, and it could I think it could be anywhere just as long as it ends and underscore browser. Spec is okay, so we are naming basically this yeah.

B

Two rows: our spec there you go.

B

A

C

Yeah, that's a good one.

A

And well maybe we should be something else. Yeah.

C

Let's do it should I Drive ready? Does he have any other justice issues or even test related issues that they're interested in bringing up.

A

We can go, buy lists otherwise Oh.

A

Something something happened, this is looks, this is new and it's not as easy to scan as before before you at the icon of whoever did it here. So you would go this. One now is e I see that okay, okay, so this is this is gonna, be a problem yeah, let's, let's avoid Java.

C

Skiddly is assigned to you. We should probably finish that one okay, what.

A

Is good is missing.

C

Is anyone yeah, do you and.

A

C

Branch open: we have.

A

C

Branch for it, so I would love it. If we could finish it. That would be amazing. Yeah I mean you. If you want you guys creature, it's easier I could do that. um I haven't touched it in a long time. So, let's see what happens, let me figure out a way to.

A

When you open the file, I'm just gonna go with the standard disclaimer me and both talked about so please talk above us interrupt us. Otherwise, we just go on on on.

D

Yeah, please say it's: it's good watching you, okay, do it I.

C

Am gonna figure out how to do this? Am I sharing my screen? Yes, you see me or Google.

B

C

Let me go to my is that I have authored.

C

D

C

I just want the branch come on.

A

Days on the right look: sweetie! No, no, no I.

C

Don't think that's the issue right yeah or it's like a reference for like hopping in comments. Look how many commits behind it is. This is embarrassing. Okay, my.

A

D

Just respectable, but.

C

Let's, let's see if it'll read this oh yeah and it has merge conflicts I, don't we're gonna, just restart it yeah, so we can showcase jester, deuce and stuff. They go.

B

So I'm gonna start on master. It's.

C

Not like you're, up-to-date, the master, either. No, no, no I and I. Think I. Think people have already migrated some parts of it too. So there might not be any good left.

C

Okay, so let's go to the Karma file. Spec Java scripts live all right. We already have a lovely browser spec here. Yes,.

A

C

A here's, a comment that I think we've been adding to the top of these browser: specs, hey.

A

Eddie today, either one as well.

C

Okay, so the goal is I thought my head. I know: there's gonna be some things that are probably gonna need to go here, but I think there's gonna be a lot that doesn't need to, but we're gonna see some lovely specs like some that are using this Jasmine style. This base has contacts you see. We only have aerial functions. Kind of going on so will migrate these except the browser spec so way that I've I started following this pattern from.

C

Lucas IP, where he copies of the directory, that we're gonna move things over to front end and then, but doesn't doesn't merge it. Yet he just does copies it over to a new directory, and that seems to be pretty good. So.

C

Over here in front end, we have our new.

A

Live so any time you feel that the Ammar is too big. You can just stop. There commit okay, create a modern one right, yeah yeah.

C

It's it's I think it's! It's helps, keep it a little organized of what's to do when what's not to do. Okay, rather than manually, updating all this there's really cool. Just justice. Codemod I mean pull something from there. So I just see deed to that directory. I, don't think I'm. My master.

C

So I'm not in my get lab directory anymore I'm in the jessica's codemod, and if you look at the readme there's instructions for how to run this. It's important that you run it from the codemod directory so that it uses this node modules, not the node modules of get lab because they'll be conflicts there. And then these are the arguments you pass to it. You got a pass parser babylon and you pass in this local file, which is the transformer and then the path to the directory that you're gonna shift.

C

So the file or file yep, so I'm gonna copy this and we're doing I have an under.

C

Spec front-end Liddy utils new.

C

All right, okay, so handful were unmodified, which is alright, probably mark data. Oh and here's. Another lovely thing that I'm happy to this came across. I ran this. You see some changes like we're now using arrow functions, but we're still using the this context thing which is going to blow up if we try to run this in jets.

C

That's because, in our code, mod.

A

Oh you're gonna see that what do you.

C

A

C

Sometimes I do really weird things like I'll, edit, a file in them inside of the S code and I totally forget like that I'm inside of es code for a long time, I'll just like start opening up more of them, tabs and stuff. Like oh wait. I should just do this in, but we have this.

C

This has to be commented out like it'd, be nice, it's possible if we can update our transform it to accept like a parameter or something, but we actually have to comment this out to transform that this stuff, because it blows up unless it sees this we're using the third-party library. So it's a little flaky, but it's really nice when it will automatically works. So I just uncomment this out and then I'm gonna rerun. It.

C

You see how it blew up on some of the tests, but on the one that it it was supposed to work. It worked so probably something smart. We could do there too, or maybe an upstream contribution, but right.

B

C

C

The problem with I think the way we're doing this transfer, and this is probably a problem with the way I've organized it. You see when you do code shift, you only pass one transformer, so it's almost expected that, like rather than having one file that combines everything you do this from like the bash level of like of doing multiple passes through a number of files and stuff, so I think there's some optimizations to be made.

C

If you have any cool ideas check it out, it's pretty easy to contribute to its in our front end playground project, but anyways now we're here. Let's run this and see what happens? Oh I'm, not inside I'm, aside that anymore, okay,.

B

A

Like every every pairing session, that's the thing.

C

Well, I guess we do. We have our renovate, but I was like. We must update dependencies cuz. It's like every time. I check out a branch I need to run yarn, which makes sense, but it's the same time. It's like how many dependencies are we adding and bumping every day so.

B

May dependencies yeah.

C

Alright, okay, alright, so we are getting something boom. Oh yes, I. Remember this yeah! This is a good thing, so.

C

Yeah so when it is in the DOM and when it is not in the Dom, we expect it to be null, but it is not clearing itself out. So, let's check that out is it set to fix sure doing an append? Oh, maybe let's, oh I, wonder what happens if he just runs it just this one. Maybe that's is it oh.

C

Man well, is it let's double check if I run console or let me just rent it? Let me log something from here inside we had little details, CSRF.

B

B

Here I am inside of CSRF all.

C

Right, let's see.

C

Well, that's not what I really wanted to see.

A

C

C

We're closed well, the Internet Jamel I guess is gonna, be isn't gonna, be anything. Maybe I just want to do document. What's my document look like come in. Do document enter HTML, OD body.

C

These meta tags actually should be in the head. Edie right.

C

I'm not doing something right, but we get attributed content. Okay, so what's happening those we're still finding this we have name's Sierra CSRF token we're still finding it and I think you're right, I! Think when we do set fixtures I, don't think, is cleaning up after itself.

A

Well, we should update sex make sure to a place to get a property like clean up. It.

C

Should, though, we didn't have a set HTML fixtures, which does this I think I think these are aliases for each other? It's really I'm not isn't.

A

C

Html, maybe it's not fixed jib, maybe is fixed yeah.

C

Where's fixtures so I'm gonna just import this, because when we do set we're supposed to be automatically doing this reset hook for it, but I wonder if it is problematic that we're doing this meta tag which really belongs in the head.

A

Without their beef, for each order is that correct.

A

The like there is a book the rosetta release, running like after each right, yeah.

C

Shitty and it's supposed to reset everything.

C

Let's, instead of doing the set fixtures, I'm gonna try to use this one I there shouldn't be any difference, but I'm not entirely sure I.

B

Just call the picture I think.

B

Yes, there is no difference here. I.

C

Need token Oh parents node in our HTML does that work like that.

C

Not gonna like it. Oh yes, always hoping to do. Okay, I'm gonna get its parent again.

A

All right, oh so,.

C

It's not cleaning.

A

Up after itself, a code right, every time you run the test is adding anyone.

C

You are right, it.

D

Certainly should be the problem, the problem should be with the preset picture right. It looks.

C

Like it look at this.

D

It's pending each time, yeah, it adds.

C

A new head: why do we have two heads.

D

Not a human literally.

D

A

Is maybe is maybe because we are doing body outer HTML and then we start to it. Add.

C

Yep, you know: do you think this kind of thing would be doing, but but now we have two heads I.

C

Don't like having two heads: no.

A

And actually even more.

C

We have more heads, no yeah, it's still just that's what we keep right. Oh no, you're right what.

B

C

No I think it does wait. Sorry I think that we've identified that there's a an issue with maybe J estan when I just do something like.

C

Where do we do? This I bet J estan, because because technically MIT said HTML fixture, I'm trying to said here's our. Why am I doing out of H demolish I? Do inner HTML because in the fixture maybe.

A

You should post that no, it doesn't really make sense. I.

C

Think yeah I think the solution is gonna, be rather than doing set HTML fixture, which is only gonna work, I think for the body, probably for jeaious Tom. We could try to massage it, but then we're gonna have to be concerned about all our other uses of this function. I think, rather than using set HTML fixture, I'm just gonna manually write to your document head and then and then clean it up. Just in this back, I might be able to do.

C

Maybe maybe we can do a cool helper function like set IDI or HTML head fixture. What do you think of that? So.

A

The thing is when you do document.body out there: HTML, like you, are replacing the body itself right. Thank you right and if you don't pass body, I think you're having like a mistake in HTML and every relation is, is trying to fix it up right now. We never do that either. So I think you're.

C

Right here as well, oh look whoops! Oh thanks, bro! Well that worked! Yeah I wanted you to be out or each mile along. Let's just try a random random one. Like this one, that's doing! Studies to Malchus you I was a good catch.

A

I mean we. If we want to be sure we could say if the thing starts with body right then do outer HTML, but we don't I. I am.

C

I am 90% certain, we don't have body at all and our expected folders yeah tell yeah yeah nothing J's file, yeah yeah. This was a good color. Do you think we need to do this head in.

A

The reset as well as so now we are putting this metal thing inside the body and I think for the test purpose. It's fine! It's just a string for the desperate, especially ingest, right, yeah,.

C

Yeah I think I think it's fine. We could put it in the head and I. Think I'm gonna leave this head recently sitting here, because there's this is gonna, do no damage and at least it opens up. That's fixing that up if we needed to look cool, it looks like this is done. Right did I leave anything behind, I might have uh some of mine, but you have there. Jess in the wrong file, now run Inc, oh right, yeah I!

C

Think it's good I'll go ahead and run it, but that's good to know and then I'll go ahead and move it to. We can remove the other one and update our our behalf. Oh cool works for me.

C

So let's do that and then let's remove spec Java scripts.

A

Oh one good yeah, we got one. Let's hope that the pipeline doesn't feel horribly because of that out. Html change, I do.

C

Mean this bash thing right.

A

No idea: well, why are you doing that with a curly bracket, see.

C

Oh, it's in front end: it's because I need to move it from Utah utils new yeah.

D

B

A

Is a shortcut for moving.

C

A

C

It basically expands it out and I think it's bash level. It'll expand it out to two arguments of Wow.

C

Today, I learned yeah, it's pretty it's pretty handy all right. We don't need mock mock data, we don't need it all. Cuz, that's already been moved over a.

C

Dependency only this is our navigation utility. Oh yeah. This is a great one to do. Let me go and commit this.

C

T Raj, have you have you? Have you migrating spy on dependency thing before.

D

Last time, I did you help me with that? So, okay.

C

No I wasn't sure if I'm in, if you guys, probably already super familiar with this, but for anyone- that's potentially not here but is watching.

D

C

Spy on dependency there's something really helpful, but it's also kind of weird how it works. It looks for the import name, you pass in the default export of a module and it's it creates a mock based on the import name. So the way to move this over to jess is really easy. It would be amazing to have a you know. This kind of automated and a coach thing is find this important name, URL utility and mock that so.

C

D

I think I've seen it many places, I think walking out jQuery functions and oh.

C

Yeah I had written before we started doing J's code shift for it. Some of this automatic migration stuff I had written like the utility to automatically you know, parse through using babel to spy on dependency and make all this, but it with J's code shift has a lot more benefits to the previous solution we have, but I should be able to now just delete these. The only thing is I need to now import it because we are. We are I, think it's a named employee.

C

You are asserting on it.

C

Alright, here we go.

A

If you need by any chance to retain the utility behavior in that case, you don't you smoke and you spy on them one by one.

C

That's a good name.

A

C

Other utilities here as well so when I do mock, it's gonna mock every single utility, which is a good point that that might not be actually what we want to do and I can get really gnarly to debug when there's like transitive nested modules depending on other utilities. So we don't want locked.

C

Do you think I should do that here? Since you know, okay, I think I think simplicity. It's the first thing right, yep sounds good simple. So this works. Let's do our cool ash scripting.

B

C

Wish that I could click on my turn? Okay,.

C

Well, I'm moving, oh yeah, all right, sweet.

C

Got four changes there.

C

All right, my great vacation.

C

I'll, probably squash these like sticky, which one do you think, would be more interesting. We have one minute left, I.

A

Wonder if any of these will just work, let's write up that document body now, HTML, look like a good candidate for sex. If except fixture, yeah.

C

That might be all we need. This has significantly less specs than when I first started so I'm glad it sounds like we've already migrated. Some of these.

C

Yeah that was not working, it might be because of the set fixture thing. Cuz I, don't see us we're, not cleaning that up at all I'm, just I'm really curious to see. If that will help, do you need to import it or it's a? Is it a global? It isn't a global, so I probably don't need to import it you're right.

C

That's a weird way for prettier to interpret that.

C

Okay, that's gonna be its own problem. Let's see if this one works out of the box. Oh man, what's this? Oh man, something tells me it's not gonna work out of the box. No.

A

Especially with those locals mmm yeah.

C

Usually they they require well.

A

C

Do we have a real timers or we have RIF yeah.

C

Time we use fake timers by default, so sometimes our our migration tool doesn't know that, and so it just starts putting timer zone or starts faking it out when it's thinks that it needs to. But we already do that by people see if this one works. For the sake of time, we can also I think.

A

This is the pole spec, so probably timers need to actually buy part of the tape. Okay,.

C

Well looks like ol.

B

C

Which isn't necessarily a bad thing?

C

Wonderful, yeah, anytime, there's access to these calls.

A

C

Callbacks yeah.

C

This is yeah migration, specters and also doesn't migrate. Some of the mock API correctly yeah up.

A

There you have um I'm cool, fake I'll, go pick up, Oh.

C

Yep no yeah you're right when it when it's helped when it doesn't know if we're doing like a Jess spy on it really kind of freaks out. But it looks like this might just be a matter of updating this.

A

Is I this mock service called should be just to replace it disease with provides resolved rockers. Returning that resolve barely a mock, rejected, baby I, guess, I think you're right.

A

It's not the first time that I migrated about them like this, so I've been yeah is yeah.

C

I'm gonna yeah, that's a good point yeah. This probably should be cleaned up. Well it's it's time, though, thanks for hopping on and checking out a couple of justice problems, I'm gonna try to spend five minutes getting these to pass and then I'll pin you all on the mr yeah I appreciate everyone taking the time to to sync up on some of these Jessica's stuff.

C

Thank you, alright. Well, you all have a great rest of the day and good evening see you bye.