GitLab Group Conversation, 13 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Frontend Pairing on Jestodus - diffs/components/app_spec

Description

Here's the Jestodus epic:
- https://gitlab.com/groups/gitlab-org/-/epics/895

Here's our jestodus-codemod project:
- https://gitlab.com/gitlab-org/frontend/playground/jestodus-codemod

Here's the MR we made :)
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/27234

A

This is yeah, so I think this is the link I've been using for everything? Oh now right, but anyways. This is everything I guess everyone can do everything on it, which I guess is cool I, can't record, for example, Wow, okay, well, I'm, sorry, anyways yeah! So does anyone want to drive um I, don't mind driving? But if someone any wants to do something some driving I can we can all mob control the person or, if you know it's up to everybody, I.

B

Think Peyton's about to volunteer I know if I Drive it's gonna, be way too painful. Oh.

A

I'll Drive, but when I say driving, I really just means sharing your screen and then we all gotta yell at you. What to do but I'll share my screen and you guys should yell at me at what I should do.

A

Please does anyone have any like justice issues that they're feeling particularly passionate about or should I just pick one.

C

A

C

Anything anything in the diffs folder. If you anything it's all dirty serious.

A

D

C

My entire project, and as soon as that's not in karma I'll, be a happy person. Okay,.

A

I was gonna, take one of them.

C

You don't have to I'm being selfish.

E

C

Of the most difficult ones, yes,.

A

C

One in there that's like 1200 lines of code, yeah.

A

C

A

Gosh- let's see that one! That's that one okay.

E

Maybe we find why my commit item it's transient as a transient failure on just as well, which made me really really really said. Oh yes,.

A

Let's do that. One then is commit. I know, I.

E

Really hurt you didn't know: I did that, but he's failing in just as well I have an M are rap to fix it. So maybe we try other ones and see if these are so it's fading in jest as well, in this same way that the karma want. So it's.

A

A really good, it's a really good takeaway of sometimes we feel like it's okay, to write, flaky stuff in jest or like to do like non best practices of where tests don't clean, themself up, because tests run in a sandbox environment in jest I'm like Karma, they every test, they all share the same playground, they're all getting each other infected um and just uh I know.

A

Spec file runs in a playground, but not the individual tests, and so we still need to be careful not to write flaky stuff even in jest, but I know that one was written in karma and now we've migrated. It I've seen us really try to be as just sandbox in some cases, but yeah we can't even Jess can be flaky it's good to keep in mind, but you said you already have a fix for it. Yeah.

E

I mean they might run the park one three four times and it didn't fail. It's okay.

A

We will say: that's.

E

A pretty good sample size.

A

Yeah yeah I know what you mean so have you guys all seen as have you all see this this chart of how funny it lab is so when I look at this I'm like man, we're so close. But if you look at the number of karma files we have here, you go back to the beginning, the number of karma files, it's like. Oh, we haven't even moved 50 percent of them, so I don't need to start off on, discouraging though but I thought.

A

Looking at this, like closing of the gap, we were getting really close, but I think it's because our overall tests are growing. So the number of old karma tests percentage is decreasing, but everything.

D

A

Move some tests, but let's start with some more difficult ones, because we're recording this, let's see what happens, see list moves like just a couple and the diffs folder and see what see what happens so I'm gonna want to close this out and check out masking.

A

I'm, probably on advance doing something: okay, not anything important.

A

All right we're running here we go so, let's, let's check out this disk folder, so.

F

Spec Java scripts.

A

A

You think we can move on the store stuff, maybe.

C

hmm Be nice and I forget which one was very large. Let's.

A

We could do like a bash script, find any.

E

A

E

Needed to use this default data yeah here we go.

F

A

That used, if smart data, okay yeah, let's let's just at least okay, so what I've been doing is popping it moving it and changing it to e from Java scripts.

A

And then we have a cool utility.

A

Just status code, mine so in a different terminal, I've opened up just a tiss code mine. Let me see if I can open up the readme tips. You can check that. Does this live within the get lab project, or is this just? It is not yeah. This is in the front end playground, oh okay, so if you go to wherever we have our front-end playground project projects to see this and the readme has instructions for setting it up. We have to install this globally. There's some little quirks with this.

A

So if you haven't used this before it's really nice, but there's some quirks with this, such as it has to be run in the justices codemod directory, and you have to pass this parser Babel and thing to it.

A

This is because, if you run it in the gitlab directory, if you run it in the gitlab directory, it uses the get labs node modules which are incompatible with some of the runtime libraries use for this crypt.

A

And if you don't patch, parser Babylon to it, it has a really hard time finding our babbled and Fagin and can't really read the code. Really well so those are the reasons why, but this is all you have to do is just see DP justice codemod, you run it parser, Babylon and then I go out to my get mad worlds and they respect fun and just employments aspect right.

A

No, but that's that's the file! Sorry! That's the file I'm! Changing my transform is in this directory is in nuts. Sorry, that's what this T is. What file is your code transformers? So now it's doing its thing, it says we're. Okay, I, think we're. Okay, alright,.

F

That's it easy I, don't think it's next.

A

F

Let's see what happens.

A

Yeah so, for instance, we're gonna need to move some of the helpers, so let's go ahead and move a helper to resolve this. So it's probably, how should I do this? It's over in JavaScript, I lost my place. Oh yeah! Here we go creative store, let's open this up it. Maybe it's used yeah. So what the way anytime there's a helper like this.

A

We let just be the single source of truth and we create a little adapter here that just imports and exports it so I will, let's copy this over it's a front end, but.

E

We really want to do this in the new test question like this file, not in general, yes, but this thing that in any style yeah, maybe we want yeah I, don't mean.

A

We might not need it and you're right, we might. It might be better for us to not use this at all. I try to move these things without touching them as much as I can.

A

But if we end up that meeting it, it might be good, but I'm just gonna resolve it. Right now did.

E

I do something wrong. The folder I think.

A

No spec, you know you don't know.

D

A

In justice code.

A

That was frustrating I mean. Let me copy this.

A

Okay, so now I have a new I. Can open up create this store here? This would look like that, and this is gonna look like exploit default and the this is the. It looks like this. It's an ugly import, but we don't really care about climate and.

A

Its creators, that's how we would update that and then let's open up our this aspect, let's run this see it out.

A

So something I've done in the past you to do this. This whole process world faster, is to move large quantities of these run that transformer for, like a whole, for specifying what directories I've done or even just move these new ones just to an individual directory. So it's easy for me to select them and that transformer can run across multiple, multiple files and sometimes that's all that's needed. Unfortunately, it's like 60% of the time. That's all it's needed, 40 percent of the time it needs some sort of manual intervention.

A

The fact that we're hanging up on this now makes me feel like we are using some set timeouts.

A

E

Well, what is your strategy when you move our folder you'd then create an M R for each test or MMR for all of them? Okay,.

A

Them are if it's, if it's, if I, had to rewrite a test, I'll put that in its own thing, if it was just I'm, these are just trivial. I ran to my program. Three, maybe just updated a few lines. I'll do a whole folder yeah and that's how the issues are created and so yeah. That's not a that's, not a significant deal either the one thing so I'm gonna we're gonna pause real fast. You got me started talking about my eyes.

A

You want to watch out, for if you sometimes get labs, diff isn't really helpful, like communicating the real story here, and it can look like I've added, a new test which is using some really old practices and so make sure you just review the diff before you pass it to the maintainer, because you'd want to make it really obvious of like hey we're, not introducing any new technical debt. Just moving this to jest there's another issue for maybe cleaning it up.

A

If, if it looked like you're, adding a test that was really funky but at the same time also feel free to clean up.

A

Yes, we have lots of failures, I think they've all failed, so good news, it's probably something unlike it before each after each thing, if this, so, if they're, all failing it's better than than like just 30 of them, failing, but let's just one one of them and see if we can get some better insight. These.

E

Are ready beautiful deals? Oh yeah.

A

Let's see what's happening here mousetrap this is when Justin comes in.

A

Later on, yes, my.

C

A

Okay, so mousetrap.

C

Is incompatible Jess? Is that right or have we oh geez, you know what look for is it? Is there a keyboard spec already written? Let's see um if we're super lucky I've already fixed this and the keyboard shortcuts back people are navigators back there. You go yes, so this is using Mouse chat. It is so why? What's right? What's your beef here, it's not imported in here! I, don't know there. It is import, mastered, yeah, oh, but.

A

You're not oh, they.

C

Have to do that default.

A

Export, that's right! So here's here's a I, remember what we talked about this Jess, so you notice here it's imported like this and I later on. We ex guess! Yes, we could dive in. Are you guys curious and want to unbox this mystery? Oh, that's! The UM I think Justin I already know the import master out, but not import mousetraps from somewhere, yep yep, because here's. Why and this here's another huge difference to remember when doing this, that's between karma and jest.

A

So here's that dive didn't see the node modules mouth chat. We look at it and we see sometimes some type of export at the bottom yeah and look what it does. It just exposes it to the low objects and it might do some sort of a MZ thing. It's not even doing well thanks or module that exports. If I look for module, how there's no module that exports yeah web pack knows what you did.

A

Jess does not use webpack for performance reasons, which is a good thing, but it's a bad thing and that sometimes these things come up. I can only imagine the rabbit-hole to find this. There was yeah, there was a. It was one of those. If you ever hear me talking you're like man, Paul really doesn't trust. Third-Party libraries is because most of the time radicals lead to diving into node modules, that's not a fun rabbit hole, but I think we can just import this and call it a day. I think that's cuz.

A

It writes it to global.

A

Why is it so slow? Oh.

A

But this is gonna. This is end if sap itself- oh no. This is in app dot view. It's 140 mousetrap like this, so can I just import.

C

It without that I, don't recall, pull-up keyboard keyboard a navigator again see what it's doing. We should.

F

Just want to make any.

A

C

Trying to figure this all out again, this is what it's doing is.

A

Yeah little mouse trap.

C

A

Think that's what we have to do. The other option would be. We created just mock for mouse trap so that I can import it in anywhere it's imported. We could fix its kind of import. Do you want try that out.

A

Like we could fix all of these and add these global mouse traps everywhere or we could try to create a Jeff smock for this and then fix it for everything, because you will have the same matter.

E

Of every time you import one of those right, yeah.

A

And I'm not eager to add a bunch of these global mousetraps.

A

So if, if no one gives me a thumbs down, I think we're gonna explore creating a mock and I've just recently done this. So it's not that scary.

A

It's actually like.

E

Justin marks are very good, they're really busy. What were you saying? Did you say something.

A

G

Let's do it I'd love the mocking yeah.

A

um I recently received some interesting feedback when I created this mock that I shouldn't have, but we weren't able to get it to work any other way and the reason I shouldn't have you'll notice. We have another mocks, folder I, don't really know what this is doing other than maybe we can mock ourselves on some things.

A

I personally would not use this for mocking those stuff and we need to address our documentation because it says something weird about that, because mocking no stuff works really nicely if we just use just native mocking thing, which I don't think was was realized at the time of creating some of this. This custom mock helper, um but I'm gonna go ahead and double down on my civil disobedience and we're gonna create another mock, saying here, because it's just really easy and I know that it works.

A

Okay and let's so this is gonna affect the whenever I import mousetrap is gonna import this file. Instead, what we're gonna do is we're gonna, say Joseph, global mousetrap and I'm gonna, import and I. Think if I import from here, the real mousetrap yeah I can just do this I think it's only native.

A

Maybe I might have to do like a weird require actual thing, but I don't think.

E

They're wise, it will give you a circle of dependency. No, it.

D

E

A

Think this I think this may fix all the problems. I.

A

Made I am a chronic optimist, so it might not fix all of our problems, so that was a global marker that will be for every single test and our production environment, which is huge too. So it's a global mock any time I am importing it's gonna import through that file. First, you saw how easy was yeah, really don't get too happy with it, and there were needs to probably be a really good reason for this. So maybe we should add a comment for why we had to do this.

A

E

Don't understand they'll state idea against Jeff Manto. That's me, I even stumble on it. If.

A

You, if you look up an RFP guide, what our guide is actually just discouraging is you can drop this mocks folder anywhere even in production code, even in our root directory and people use that, and rather than like copying, the folder path, I'll just drop it to where I want to actually do it. I want to mock, like I, could have put this somewhere in an application code, and that is a little problematic because it's nice to keep all our test code in one place.

A

So that's what it's really mean towards discouraging um because we had to I. Don't know if this lets us mock I'm our application directory, so I would go ahead and use this mocks. Folder I would go ahead, use this custom box folder for any kind of CD mocking you might need to do, but for doing those stuff we should use jests out-of-the-box thing: cuz, that's just really easy and it doesn't require any custom thing at all AMD which web pack understands, but just it's not.

A

Thankfully it is civil rights to that's. We can be s65.

A

Alright, but we look at what this is a huge one and we just have one failing test left I think we can now do like a whole bunch of these marks. Current div file based on currently highlighted. Oh no, we have more than one okay.

A

Here we go. Oh it's cuz, we're using said immediate and opponent uses next pic, so we wait until that has finished. Can we just met over pulse yeah? Do you think we can just take one.

E

A

Yeah straining I'm gonna go.

F

Ahead and just.

F

A

Pony whatever rap or WN, the VM ah you're right, oh thank you. Thank you, yeah you're right. Why is it so slow? This is like a really slow test. Yeah I think. Maybe it's done like a full amount to Kerala.

A

This is another Oh.

A

E

Why is that right? Why is the finger mark is ace using three.js? Yes right, you can just mock it. I.

A

Think this is this is even worse, but let's, let's find out and see.

A

The only thing must work with them. Three.

E

A

Months, wow, that's we know.

E

A

Says it's found in DIF Sam right.

A

Daddy, have you guys or have you all sorry y'all ever run into webworker stuff with jest and karma cuz? That's what I'm thinking of going on here webpack has a really fancy web worker loader, which we can define a web worker and it creates this default export for it, and web workers are like asynchronous processes that can run on a separate thread and your browser, and you send and post messages to it. Let's see if I could even find one of our workers nope. Okay, we have like a different dress yeah.

A

So you end up writing this kind of thing, but it gets all packaged up into something I can send messages to. But when we have this underscored worker postfix web pack has a special loader which packs this up as a web worker exploit you fight.

E

Yeah, what were you saying? Yeah? You can't specify it actually um in Denmark that I assigned to you for review that I'm doing that you can. Actually you can actually use a. We have a loader to load those, and then you can attach it to the URL okay. But in.

A

Jest when I able to do anything, Marie able to do anything in jest with this or all right yeah, that was a cargo part yeah you're right. No, this may be a silly question, but before the SUBSCRIBE block, can you not just mock the tree list? I think that's a good idea, but it's weird that tree worker and that it's it's throwing and if sap I feel like this error message is really weird: I'm surprised it's tree list, but I, guess I, guess, you're right, I!

A

Guess it's gotta be tree list um we jump into tree list. Is this loading up? It's probably loading a single file tree now this is a doing its thing. It's like well we're good thing. Oh.

A

E

Don't see it Irene, but are we doing mount or Jean amount on the test.

A

Let's get questions here so, let's, let's unpack, that we are doing ship home out one.

C

A

C

Tree worker is also used in actions.

B

All you, the best expressions.

A

E

There you go three worker, but we mock the store right. We just imported the store module data for to.

C

Be marketer, we just remove him, we made mark the state, but bringing in the actual yeah I think we're bringing in the actual module and stuff.

A

Yeah, let's guess feel like doing a little Maki I think we can. We can mock something.

G

A

I'm, since it's a CD thing, I think we should do it in here.

A

So, let's explore that if you want to or okay because there's no way oh yeah, here we are our street worker. What do we actually I'm trying to get its API so that we can exposes a class which has add eventlistener and terminate postmessage?

A

Okay, it's add: eventlistener terminate postmessage, that's doable, um let's go to I, think I lost my place. I did.

D

A

um Mocks: okay I want to create a new folder inside of C II or tree worker.

A

Where is it it's in this workers tree worker? How I lost my place in it? Okay,.

A

All right new folder diffs workers, oh.

A

Now we could do something really interesting. um We could do.

A

We could go to our test setup. This is sets up all of just stuff, not a test center. We could go to a just config.

A

Yeah could add a rule to when anything is when anything has an underscore worker. We import this specific mock or something for that. um That would be me but God. You will need to API for it right right, but we would just solve all the worker problems and one fun.

A

The downside would be Oh No well, yeah I know that I might that might work just like here, you see when we import like some of these static files. We specify we're just gonna import file ma you wanna. Do worker mock.

E

So you're saying to leave like the three worker I'm, not just mock the worker part that fails because of Jess right, so they PA API of that stays the same yeah so.

A

It would look like it would look like this and we would. We would create, like a worker, mom.

A

Yeah, what are you, what are your thoughts.

A

We're not gonna end here, I'm.

E

Just afraid, if we're gonna have API collisions like two workers that have the same API, that they're supposed to do two different things, this would.

A

Be the problem so yeah, if you feel like that's something, we need to be it's better to mock each one individually. Let's, let's mock each one individually, I'm good with that too. So just wanted to bring up that. This was just an option, but I agree. It may not be the best option. I.

D

A

Place again, Julie we're gonna jump there. Okay, Tiff's workers, new file, free worker, I, guess, is what we can do: okay and we're gonna export default, a class worker.

A

This all sound right to you all and it has I guess, add event listener.

A

Would be great, we can add some spice to this, so this is stuff. Everything is that event listener terminate post message.

E

A

Why is it upset.

E

Empty because then he meant it.

A

Hey we should be able to, but oh and that's all we ask yeah, why are you upset? Oh.

A

That was silly. Oh wow.

A

What's going on here and.

E

Then little more requests.

A

What's a good thing with Cantus, are we not using mock adapter, though.

E

The movies, not the right, URL right.

A

But we saw there are tree worker problem, which is great and I. Guess it's a test ever needed to like detect how we're actually passing messages to this that one could individually. That's an interesting point that one could individually create a mock to return a specific and then create spies on that, so he can detect something.

A

So we probably would have been fine having just one global worker mock like this, and this led if an individual test needs to do some assertion on it, letting that individual one overwrite with something um but let's for the sake of iteration, will sign over think that part- and let's go back to our interesting problem here with apps back.

A

Alright, where is our test here? We go so we're not do we have oh.

A

My gosh is this: cuz we're not mocking the store.

A

Do you think we should actually just mock the store here in this in this deck I.

E

Don't know in from what the store we might break old that one that they're working go right.

A

Yeah we'd have to end up redressing a lot of these plus week. We would potentially end up losing test coverage because we can't what, if mocks yes, yeah I'm, hoping that we have that we don't okay yeah. This is mark Axios, that's the thing here when I say losing test coverage. I am NOT super optimistic about our test coverage and get lab world. So when ever doing the move from karma suggests, if you changed something from a full mount to a shallow man, there's no guarantee that those individual units are well test.

A

So technically we could lose test coverage which isn't great. If there's something I would rather not do.

A

But let's use mom Axios mock, adapter thing, I'm, sorry, so my brain started to get a little fried so I'm. Don't quite remember it told me I'm so glad when my computer tells me what today.

D

C

This here, hey, hey.

G

Hey looks like we're working on the amount of specs yeah.

A

That's usually call it I'm totally blanking on how you normally do this, so you should call it market after.

A

Mark equals I think I'm gonna go yeah, so we create the one we need to mock, God, restore it and the after each and then mock God I'm, just gonna, throw it in there.

A

On get this, this thing lost my foot and we can. We can figure out what to do. Do I have to specify a reply.

G

They are just reply over 200 lb and maybe an empty string or an empty Jason.

G

Do you think this w it's a white space, whether you want to enable white space or not.

A

It does have domain specific, oh wait. This isn't working! Oh.

A

Because I didn't pass the axial thing into it: yeah I'm really I'm really blanket. Today, oh yeah, on mark on your yeah, said details axioms.

A

Now, because this Mach adapter stuff is something that we do like in every spec, it might be interesting if we had like a global mop for handling this. Rather than doing it just that, just like a global helper to rather.

C

Than manually writing this every time, I totally agree, because we should be mocking actually us every time. Anyways, yeah, yeah,.

A

I I think so, because yeah there's no one, you ever don't want to god. I.

A

Pass Axios into there it just it doesn't like, doesn't like it everybody, maybe it's because I'm specifying HTTP I, don't think that's the case. Maybe.

G

It's because of the endpoint, because technically it's a parameter and I, don't know how the X's on get more candle. It's it Wow.

A

Well, this one words: okay, yeah.

G

Can I just do.

A

This, and would it still be okay, I, don't.

G

Know if there's like an catch-all in the mock adapters, looks like our.

A

Markets URLs are test matching, not necessarily quality.

A

Okay, all right doesn't pass. Let's see and I wonder if that's related to the others, I.

F

A

Oh man, that is.

F

So close, oh I.

A

Could feel it? Okay calls jump to 500 it's failing, because we have oh I.

A

Can now do this.

E

A

Must that's might be it I can now throw the mousetrap in there. Oh, no, it's still sad. All right, maybe I should have looked at the air before just.

F

It's getting undefined.

E

Mind sorcery sets is relying on mousetrap actually yeah, we empty we empty dated, so hmm we.

G

Emptied it why what's the spy I don't come to fire.

A

Jump to file because oh.

A

A

Mousetrap, probably isn't easy: are you saying that mousetrap probably isn't gonna work? I said word.

E

No I confused with the other multimedia that we actually bus in the full mousetrap right cool.

A

But maybe not trap isn't gonna work because it's in a just environment, so maybe now but I thought we do mousetrap trigger in the other tests right. We do.

C

Keyboard navigator uses it okay.

E

Is that they expect shouldn't, we just call like two are being last cold. Wait, please, you bring up a good point. Niko.

A

Yeah, that's probably what we should be doing: I'm, not entirely sure what is going on here. So.

G

Gallantly, apparently, it tries to trigger mousetrap for each mapping right and so it iterates over each mapping that we have to find whatever those mappings are I assume different keyboard.

A

Shortcuts, okay, so one thing we can do is we can do our spy? We could you like mark, there's a there's, an actual. This isn't the actually guy yeah. We can clear it and then check if it's been caught are you are.

G

You okay doing that yeah. In the end, it wants to check if it has been called for every thing, but to be honest, because we're checking for every mapping that it has been called to check at the end is kind of duplicated mm-hmm.

A

G

A

G

Called for one of those checks, it would fail anyway, yeah.

A

Yeah another way, if another thing is a way of doing this, is to take move. This expectation outside the trigger just do all the triggers and then do all the expecting and one go, but I think all of this is failing rather than clearing us all. I think it's family, because that transformer doesn't transform some of our our jest mocks, really well so I think it's just not even using the right API. So, let's look at just mock.

A

Function, stuff.

A

There's really in this mock functions, mock God calls that gives you the args right away. So we should I, don't know this is some of this isn't migrating well, I think all we need to do is that and we might be okay and.

E

A

That one so that one pass yeah, it was a noise yeah, I'm gonna, just not touch it. I would prefer, rather than having an expectation in a loop I prefer. Somehow we build like an expectation array that we can then do. One big expects whatever to equal. This array of things that have happened good could be change it to a describe and didn't have a table.

G

A

G

Good idea, yeah.

A

C

All the tables right, yeah.

A

Let's do the tables do.

C

You think that's my favorite Jess trick. You've taught me Paul.

E

You can do a each good, you want to go for it. Yes,.

C

Go for it! Okay, ten minutes of one failing.

A

Testy phone.

C

A

You're right, let's go for the let's go for the overkill, um so we're gonna pass in all of our mapping. Keys, yeah.

G

Yeah and we're.

A

Gonna, do we're gonna make it a little pass in our string here, okay when, but when? How do we got I, usually make tables, but this one we're just gonna. Do like an array. Do you remember like how to specify the variable.

G

If you just specify a normal array, it actually makes it into a table. So it you know, if you just give a simple array into just it will think yeah there. It is table I, do you got it and then you can just use the normal string. You can see that if you pass a 1d array of primitives internally it'll be mapped to a table. Oh wow.

A

Okay, but this one is just an array, but I could do something like percent us right.

A

Will return all this.

A

A

Okay, so we have our key mm-hmm we're gonna trigger the key, and then we expect our spy.

A

To have been called with no have been called with max key I. Don't.

F

Think it needs an array, I think.

A

That's a mock funkiness, but then, before this I'm just gonna add this expectation of we expected not to have cool. Let's see what happens.

A

Did all these ones work.

C

These don't work, it looks like white run. Everything I thought you were isolating that one test. You know.

A

I thought that.

C

E

G

E

G

If fit, each doesn't look, I thought.

A

You really did work, but.

C

You know, regardless it looks like you're, it worked. Anyways I want.

A

To make sure we're making the right test here, though, like.

A

Well, it probably needs me to pass this training something to do. This I want to make sure we're we're not just passing garbage in the air o.

A

Encountered a declaration except.

C

Oh, that's because it was still running when you saved it again. I was just really trigger.

C

Like you're, just plowing through come on, Jess get on my level hurry up. What does.

A

This mean one skipped forty-three school yeah.

G

Can you name.

A

Mappings, oh, must be empty because mappings must be an empty race. It's not creating anything. Where's, Matt, Pizza, five-o.

E

C

Quick, how is this the only thing that is iterating over mappings and is there only two keys in that array? It's four keys right, yeah.

A

We need to just I would just care there's brackets too. Let's, let's I, think that's what's going on, so let's actually now create a nice little table. That's yeah I agree. This is this is not.

A

G

A

I, don't think it's I, don't think it's being loaded and I. Think it's because we're pulling this from a variable and you can't use variables I, don't know! Oh.

G

It's wait a second, don't you need to close the bracket, so isn't it like each and then you need to close after object, keys, mappings and then your basis.

D

G

D

At the API, each.

G

We need to close after you define the table and your eyes.

A

Okay, say I always create tables with these I've, never really passed arrays to them um yeah. So it's interesting, but yeah I know you're totally right, good call, pun intended sleep. Okay, that works.

F

A

Fine with this done, yeah I.

C

Like this much better than the.

C

G

It, but still is it the only place where we call mappings now.

A

We have one other one, I've saw and I think it's the other one, that's family, no, it's not! But yeah. We have one other one and I'm just done with this test.

C

This is funny so I'd be before you came in I kind of threw this one at Paul as a joke, because it's I think the largest test inside of the diffs folder Paul, said challenge accepted and.

G

Yeah fixing it makes a real.

F

All right we're done over.

A

Yeah, so here's here's an opportunity for a transform or let me let me highlight what I'm what I'm doing here looks like our current justice code. Mod is to leave any thought args around, which it really doesn't need to. That could be an interesting addition to our adjusted as code, not under writing. Code. Mods is really easy. We could spend the last five minutes ish of this kind of dive into that. If you want to um totally yeah that's.

G

Beautiful all right now look looking at it. The docs arcs is just like used, I, don't know 10 times and the rest of the I'll really in the rest of the code is and the rest of the Karma code.

A

Bay, if you run into something that's a little more and you can justify code modding it. Let me spend just.

G

A

Me just show what some of these the transforms look like, and this thing to.

G

Be honest, I think it's always worth code modding it because then you learn how to code mod. That's a really that's a really.

C

Interesting point yeah, and if it takes less than five minutes to fix it now, I mean so there's 10 left in the codebase. You know it takes somebody five minutes to debug it ten times. You've already recouped your investment. So it's.

A

Is true it ya know. This is a really good point to sew.

C

A

Here's a really easy one, so this is suggested as code mod project.

A

One thing to highlight here: here's some things that we can immediately improve here.

A

Have you guys done? First? Have you all ever seen a Jasmine test that uses this?

A

It's a it's not a highly prevalent practice, but we have some tests that do this dot like share context variables just doesn't support it, even if it did, we shouldn't use it. This is a nice third-party transformer that transforms that, but it doesn't work unless it actually uses it.

A

So I haven't commented out, but if you ever using this for some purpose that you actually want to transform that kind of module uncomment this line and try it out, um but rather than manipulating code, it would be really cool for me to run when I was running. You know, J is coach.

A

If I think you have the option to pass options here and I could maybe pass an option like with bits or whatever, and if we can somehow figure out that flag and enable that transformer or not that'd be cool, but we don't have to worry about that. But here's, if you wanted to add a transformer, they all come from yeah. Here's where we're requiring all of our custom ones. We have a glory amounted to UM one which renamed set timeouts to set Amy, it I think um or maybe what is it doing here?

A

Yeah set time how to set immediate and so a code shift or transformers. It's gonna look like this. Where exports a single function takes in some file info, this could be a file name and I. Think this is the J's code shift API that lets you. That gives you all of these abstract syntax tree.

A

Helper functions and builders, these are those options that could be passed in and this is like our routes, abstract, syntax tree element, so what's going on here, is in our route. We're finding all call expressions we're seeing. Is this an empty set timeout and then we're replacing it with we're. Gonna create a set. This is set interval, but that's wrong. It's set immediate. So let's fix that and we're replacing it with a set immediate call and that's it so there's also a really cool, helper and I. We should add this to the readme.

A

Let me see if I can find it.

A

You can find it yes tree Explorer, yes, I! Think! Yes, have you ever seen this? Oh, it's so cool. It is really cool, um so I can drop in whatever kind of code I want to understand and how to communicate in terms of the abstract, syntax trees, like I click on this I see. Oh, here's an import decoration- and this is the API for that kind of thing. So it's really helpful. I use this just so. I know what I'm looking for, um and this should be in our readme.

A

So let's have to that as well. Paul.

C

Do you have time to actually add the arts they never talk about right now, already have to jump off. No.

A

I I. Well, that's a good question. Let me end my screen: I'm, not sharing. Let me check my I have um I have like 30 minutes me Tony. Let's do it alright that works out. If you don't mind.

F

A

Me, let's update our readme with that helper thing: why don't you specify? What's a codemod yeah, let's add a section for really what to contribute.

A

I suggest checking out some of the existing transformers and this project also use.

A

Ast Explorer.

D

A

Think of better I can't type it.

C

Better than my documentation, okay,.

A

Yeah and I'll save this up and then I'll create a mr2. A little test. Price I probably have master check that I think I can push. The master release was not fix.

C

Lead by example, here and use a branch yeah add some.

F

D

A

C

Is amazing, alright.

A

That's the classic over-engineering way to do things. Okay, I'll be missing another tab, so don't forget about alright. Let's do something more interesting. Let's add a mod we're talking about this dot, rx tank.

A

Okay. So let's do that. Let's.

A

Go to bless you! Thank you. Let's check out master yeah, that's fine or I'll check out advantage to this feat: new args transformer all right, so we want to call this remove args, I, guess, sir! Is that good or removed Mach args yeah? That sounds good? Okay, oh, but here's an interesting point.

A

Before doing that, I think that's gonna need to be done after these third parties. Do it. This Jasmine global is the whole lot and that actually I think is creating the arts.

A

So I think we need to do these post source Transformers, actually, first, but I not sure if that's gonna cause any issues, let's just call it instead of post source transformers, let's just call it third party transformers.

C

So that we don't have to call the other one post post transformers exactly.

A

And I think these ones doesn't matter when we're doing them so I think we can do this I think we can do third party transformers back to the cat and then reduce this. Is that all does that all seem? Oh, we. We can't do that because it looks like the API that we're using to call the actual transform is different.

A

Don't ask me why there's business there's probably a reason why? But there's probably not a good reason why? Let's just do this bit first and then we'll pass our source into.

A

So here is: we've called our third-party transformer first, oh.

A

This must be why you're.

C

Overloading that source variable there aren't you, you.

A

Know right right, but this must be why now I want to wrap it into this JS code shift API thing: I want to wrap our source, and this needs to be violence of my source.

A

Yep yep I think this is gonna. Work. I should probably test all this before moving forward.

A

Let's, let's just let's, let me create a new branch here from the stuff we've just done.

A

Co be Fe just status v ab.

C

A

C

Yeah, isn't it gonna great that you don't have a description because it's more than 30 lines of code, yeah I'll, do that before great damn I just.

A

Wanted to push the stuff we'll pass and then let's we could address this same one which be interesting.

A

Or let's maybe find another one that you in that args.

C

It'd be nice to use to run it against the same file just to see if we've actually just the problem. Yeah, let's get you so, let's, let's do that. Let's.

A

Check out master again, let's copy.

A

This time I'm just gonna copy it.

C

Expect JavaScript well, do you even need to copy it? Let's just run it straight against the the Carmel file directly, because we don't care to test it. That's.

A

A really good idea definitely done. Okay. Here, I am oh yeah, let's see if we can land it from here. So yes, coach shift I have to specify parser battle line, so it's indexed and then you're going to spread Java scripts. This okay is this right. I.

F

C

A

It's a component I think it's dis components. Oh.

A

Yes, because this is transponders.

A

Okay, it seems it ran, which is really encouraging. Yes, you see all the different changes in things. It does a lot, I, don't GZ. So this is the one then that we had supplied where we're transforming set timeout to set immediate because said, timeout is mocked, but be really interesting to maybe make it do like wait for promises. Instead, that would require us adding an import and other things. We.

C

Could do all of that.

A

C

It's not do that. I just want to yeah see how we fix the arcs thing right now. Yep.

A

So here we are oh and it looks like the arcs are being previously used, so yeah, let's figure out, let's figure out how to do this. This is great okay, so.

C

Let's go that's cool, so they're not being added they're, just not being removed right. um So let's go to here. I'm gonna drop.

A

In well what sometimes them doesn't copy any click? Okay, they copy.

A

So here we are we're doing lots of stuff. We've got lots of expressions going on, but boom Wow we're nesting we're looking for an identifier called args inside of a member expression.

C

A

C

A way to copy that path, probably not right now, they'd be really nice. Yeah.

A

What is this call expression? That's that whole call. What we really want to check is like, like is it args after um after a Mach is kind of what I'm really hoping to see over here is Mach.

A

Here's that member expression, yeah there's one.

A

No Caitlin, here's a member expression, that's the one that you need right, yeah. It is yeah. Okay, yeah! Let me let me get let.

E

A

Okay, let's just play around it: let's try it up file, remove my cards.

A

A

So usually we're gonna be trying to find something and I think what might be cool is. If we tried to find this, maybe we do you think doc dot. Ours is what we should be looking for. Maybe you should look for dot calls yeah and then go from there or maybe you should look for dot Mach and go from there. Yeah.

C

Cuz you only care about that args. If it's at the end of that dog calls array right, yeah,.

A

And they're trying to see what's the main distinguisher here from this is a this- is a we're trying to do this on a just mark and I think maybe this dot Mach. We should look for and then see if we're doing args at the end of both.

E

Mark ankles, because that some will always have that right, we'd.

A

Always have mark calls yeah, so.

E

A

Right right, that's what I wanted to see is like, let's look for mark and then let's see doesn't have calls and let's see, does it have done args and then we'll pull that out and remove it. It will just remove we're gonna try to remove this whole temper expression thing so yeah, let's, let's try that out. um I don't have oh, no someone's been chatting.

A

So, let's go to just copy some little steps. We're gonna find.

A

Identifier, expressions.

A

That are, they called they're, not called expression status, identifiers and we're going to look for.

A

And so we get this whole object from it. We're gonna, say: hey is name equal to rock, let's just make sure we're I'm gonna want to test this a little bit. So, let's see, if we're doing the right thing, and maybe we can call just for fun, we can call replace with and let's just see what happens if we replace it with a new identifier.

A

Just wanting to test this out sure.

F

A

Call it na keys.

A

And I've just returned with I guess.

A

All right, so, let's undo all these, let's run it: okay, oh I'm, not not even Markinson. Sorry.

G

A

Undo it I could run it again. I.

C

Like the idea of resetting that, every time.

A

I don't see monkeys.

A

We're finding identifiers.

A

Safety, actually, let's just do some logging in.

A

And if this doesn't work we could we can borrow some from some guidance from the third-party library that we're using here. Oh look, it said it was unmodified, that's cool! Oh, look. Here's.

C

C

Is it because it's nested as I was gonna, say same question.

A

What do you mean? What do you mean? Why would that be? It looks like that name isn't really doing what I think it's doing yeah. Let's try to do some more money.

E

Okay, is this helpful? Maybe it's value no.

A

We're like getting a whole bunch of stuff back we're getting a whole half. Oh, oh right, right right! Right, half node! Yes! Yes! This is what you have to look like. So.

D

A

Js code shift this API it's nice, but like everything it wraps stuff, so we get this wrapper and specify the actual node. We call. No, so I could do X dot, no name equals mark I. Think, let's see what happens there.

A

Okay, there was a modification and I bet it was. These are now ma keys, nice right.

A

No do look through some parents, we want to say, here's a mock and we want to see. Do I have a parent, that's gonna be, do I, have another, do I, have two parents, I guess.

C

Maybe I earned it. Why are you looking for parents right? No, don't you want a child? This is calls. So this is what we've selected right now. Yeah.

A

I could look for all Member expressions that have like this identifier. As of the property. That would be interesting, so maybe we can update that a little bit. um How are we gonna get those args? It comes from this huge member expression all the way up here yeah.

A

So maybe we can look for a member expression that has the property args, but then we can specify something special about the object. I think that's the way to do it all right. Okay, I case you haven't realized I'm figuring this out, but let's see what let's see what it's supposed to look like.

A

So here we are with this args and yeah. We have this members. We have this member expression here here we are. This does not have arms, we're just gonna pass that we are. It looks like what we're gonna do is promote this objects. Member expression, it's gonna, be our callers, whatever our parent is. We need to replace this thing with the object. That's the cool thing, so I think we can actually kind of do that right away.

A

So, let's find member expressions in one filter where X dot, node property, and then you could do this way more gracefully than I'm about to do it. But like we're name, I, don't think I can even do this. Oh well equals args.

A

That's gonna, give us the right number expression, but then what we want to replace with we want to replace with X dot, node dot object. We want to get rid of that bit. I think it's all! We got to do really and we could really like be a little bit more explicit here with which one were actually to make sure we're not catching something that we should be catching, but I think this is the heart of what we want to do. So, let's see what happens there? Oh it doesn't like optional chain ooh.

C

A

Man- oh no, that's not right! Oh look at that. Those are eggs are completely.

C

Gone amazing yeah, so let's reset this file before we forget yeah yeah, let's see if you can make it more explicit right, yeah I don't want to. We don't want to delete all instances of guards everywhere, because that might still be right.

A

So I want to make sure that if I look into my, if I look into my member expression, I want to make sure that the object has identifier MOC and has identifier calls, and that would be great, all right, pretty sure. There's a way to like, oh and I think we can do this. Let's listen all right check the ancestry of it somehow well, I think we can use find I think what I can use find on on this. So let's, let's try that out.

A

That's what I was when I first did this some months ago, I really liked J's code chips API way over just using raw Babel. You can't use raw babbles for this, but if there's a lot more easier to understand, let's do something like this: let's say: does it it has a mock and I think we could say X dot find- and this isn't gonna be perfect because it could be looking like inside of a call expression inside of that or whatever, but it's some sort of carry some sort. It's.

E

A

Perfect, like there's room fronted, we want to find an identifier where I know I like using single variable ones, is.

E

My no note C, don't know the name. Oh yes, you're, right, yep, that's right! Good job.

A

And then say, as are it's.

A

Okay, we could probably extract these out to functions or whatever. Yes can you change fields they're like.

E

Down do it in two steps, I mean.

A

Yes, that's interesting, yeah I think you can. This definitely seems like a chance, so I think you can um I'm gonna. Try it out this way, let's see if it does what we expect it to do. Oh yeah, that's what I was hoping wouldn't happen. Oh all right. We're gonna have to explore J's code shift, API.

A

So this is developed by Facebook.

A

Extensions, no fine, hey you're supposed to work.

E

A

You think so maybe I guess I guess, that's probably it oh.

C

No, that didn't work is X, a node that is returning I.

A

Bet it's not! No, it has to be cuz we're. No, it's not a node. It's like a like a wrapper thing closest is cool. Let's try this out, I wonder if I wrap this in using J a wonderfully lets me do that um Jake waste, oh yeah, yeah yep, and that's it's jQuery styles, that's so I guess this creates the help helper wrapper that, oh that's what must mean when it says like extensions here. This gives me some of those extension stuffs. We do yeah, which is really nice. I could look up.

A

The parents like we could do a whole lot of stuff.

A

Alright, oh we ran this and he got rid of it. Yeah the real test would be. Does it get rid of it when I don't have a Mach? And let's see, if that there so I'm gonna edit it right I need.

E

To drop, thank you guys thanks.

A

Naked leave it go, have a good one. Bye, I'm, gonna, edit it and we'll just add something silly like once a while. That's not ours does.

C

That seem like.

A

C

That should be good enough right right.

A

E

A

Jackie thanks Jay see.

A

Ya, it seems like it didn't get rid of it. Oh no, it did.

A

That's lame, oh because because I might any testing like this, this thing exists or not, I'm, just filtering it. It's probably still truthy. Oh.

C

Yeah yeah, what is filter returning I? Don't.

A

Know how do we do collections is a generic collection. It only has a generic API to access sighs is that function just.

C

Returns a new collection containing the nodes, it just says: sighs: it is a function.

C

Yeah: okay, yeah exactly.

A

It would be zero right, yep, word yeah, so let's try this and then I'll. Do you mind if I clean, em R and bring you on it Justin if you want play around fit a taller, do it out? Do you mind if I create an mr for it and I continue on it? If you want to sure an mr for what greatest thing.

C

That we're doing.

A

A

Like this yeah.

A

Okay, all right, it's still there so.

D

Far so good and.

A

The other ones are looking for. Mokpo calls are they're, still there dang it that was lame or.

C

Was late and I'm not sure I understand why I.

C

Yeah, let's figure this out I.

A

Wonder if it's a I wonder if it's a string.

C

What's that, oh, it's zero yeah.

A

C

Would be hilarious? Oh.

A

It's not finding it for anything today,.

C

F

C

Yeah there should be some throughs in there. There should be shouldn't they. Maybe that J wrapper thing is I, don't even know, I don't even know.

A

Come on disappointed, oh well,.

D

B

C

I, don't think we need to bang our heads on this any longer. This.

A

Is so this is the.

C

Kind of problems they end up yeah, but yeah. It's very, it's very informative, though it's good to know this is here yeah.

A

I wish um there's there's a whole untapped. What's slightly tapped, but I think there's a lot of improvements we can do in the industry to like help with ast, parsing and stuff. How cool would it be to something I've been dreaming up would be if I can hit record, make a change I'm like a specific thing, and then it can bike and out and do what was the actual ast.

C

Change that I made right. Here's the ASD diff. What kind of transforms would it take to make that pride.

A

C

Would be really fancy but anyways well.

A

I guess it's time to get to real work, but hey thanks.

C

A

When we moved one speck at a time, that's.

C

A big that's, a big one, I'm so pumped that you think.

A

About the big ones is that we solve lots of shared problems with them. Hopefully we solve them in a way that everyone can benefit from it. Ya know yeah all right. Why can't you leave Justin? Have you fine Hey.