GitLab Pair Programming - Frontend, 23 Jul 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Frontend Pairing - Discovering missing JSDOM APIs that didn’t allow to test Toast UI in jest

Description

In this frontend pairs session, we investigate why writing tests that use the Toast UI dependency fail in jest. We discovered that we could remove some DOM API stubs because JSDOM already provides those APIs in the currrent version. We also had to stub others like some methods in the DOMRange class.

A

Already- uh and I I did just close all of my browser tabs- um so I've lost it uh and firefox is not starting for me. Oh no, it's all the way over here. All right. I was doing something else, um so let me find. Is it assigned to me that, mr oh? No, let me send you the link.

A

B

um Do you want me to place it in the zoom chat or on a slack and.

A

This and this and the thread would be cool, cool, cool, um derek and chad. Are you familiar with the uh with the situation.

C

Kind of uh basically I've been working on a lot of the custom renders not gonna think so, I'm familiar with the code itself, but from the testing perspective, that's basically what I'm here is just kind of be a fly on the wall. Okay, my goal.

D

C

A

D

Here I'm just watching.

A

Yeah um so the goal, because um and and the mr noticed that we had to kind of extend one of toast ui's like core classes for rendering stuff and were a little bit coupled to some of their implementation behavior. So it's like okay, let's just do a different level of testing coverage and get some actual like input output coverage of like given this markdown or it's given this html input. What's what do we expect the markdown output to be?

A

um And so uh um this is the oh yeah, we're just testing the the renderer itself right now: cool yeah.

B

But basically, what we're doing now is um we are. We are testing specifically the html to mark the frame markdown renderer. uh So the idea is that uh we created some custom renderers that are changing the way that we are generating markdown for list for some formatting preferences, like stronger emphasis, and that that test is, you know attaching that service, that those custom renders to the actual toast, ui editor and then using the they said, html method to say the html and get the get markdown method to get the generated. Markdown.

A

Yep yeah, and so what I love about these kind of tests is, you could see, you could feel how this can just be easily parameterized and you can just and then it's almost like you know, in a larger company, you can have like a requirements engineer that just adds new input, output specs for this and yeah. This is this is really looking really nice, um okay, but it doesn't work and that's what we're doing um so.

A

Let me open up the thing and check out the branch um and it doesn't work because uh do you want to share why it's why it's failing in regain.

B

Yes, when, when we run the test in guest, uh apparently there is uh either toss ui or one of the dependencies for optos ui.

B

um First explain what toast ui is, so those ui is a it's a layer on top of two editors uh code, meter and square, that is, average content editor and what those ui does is creating a bridge between converting pretty much between converting uh the html from a rich contaminator to the raw markdown that is displayed in code mirror, and this is the use case that we are using right now from that tool.

B

uh When we run the test in ingest either of those parts is failing the failure, if you from the test you will see, that is that it is trying to get a property that is called no type from an object that doesn't doesn't exist.

B

I don't know exactly why that is happening and where is happening right now,.

A

Yeah and I think we're going to be spelunking and the in toast ui's code a little bit so this will be. um This will be interesting, um yeah, so.

D

Clarify is this uh a test of our extension uh code or it's intended to be more of an integration test of the the hold host behavior. It seems like it's the first one.

B

uh It is an integration test of our custom, rendering code uh used within those ui.

D

So it's going to exercise the whole of toast ui, not just like directly call our extension and okay.

A

Cool uh yeah, so it's failing um and yeah. You could even promote this integration up a few levels too and like test at our ui level, like when the user inserts this html. What do we do and but I think right now- this is this- is a pretty good. um This is a pretty good level, um so yeah, let's just un-ops funkate this I'm joking, that's going to be ridiculous, uh looks like we have save range to bookmark.

A

um So, let's check out here's this distributable, um let's check out their actual code.

A

uh uh And I I was looking this up too over here. There's someone creating an issue here um about getting toast ui to work. um This looks like it's an maybe for a different issue, but someone mentioned something about range. It looks like range, doesn't have support and js dom, but it doesn't mean we can't like make our own mock range thing and that's the kind of thing I would.

A

I think we're going to end up doing um and given that we're doing something like save range to bookmark, I think that's kind of what is going on, um but I want to really spelunk in the toast ui code itself. um What do you? What do you all think of that.

E

Yeah, so that's something that I I: how do I get to toast ui.

D

That's what I tend to do and like if I'm, if I know, I'm going to be really going deep, I'll, even try to use in my ide the the uh uncompressed just original source version, and then you can separate points and everything and step through it too.

A

You know it's it's it's funny. How uh helpful um source code is like it's even more helpful than documentation, sometimes.

D

Right, that's what I had to do like uh figure out how to do the monorepo for the middleman, just get their source code and debug through it for hours to figure out what was going on.

A

Yeah, um okay, so all right. So this is the same. This is the right thing and we can also just check that we're on the right version too, but um and that might be a good idea- uh toast ui enter 2.2 2.2. Oh that's like the latest version. Oh man, okay, uh all right! So then I'm gonna search for this um save range to bookmark thing.

F

A

A

Well, it sounds like this might be a different kind of thing.

A

Save squire x that might actually be part of squire yeah. That's sounds like it.

A

Oh, here's a range thing what's going on here, get note after insert note at range. It's a range is this does does toast ui actually? Is this squire their thing.

B

No, uh but apparently they have a copy of the source code in the repository or is it uh we can go to there. It is an independent package. You can find uh you can type in google um esquire rich editor and you can find.

A

It different, so I think I think to get where this is maybe happening. I think I want to maybe start from the bottom of the stack trace to get to the source code and follow that a little bit.

A

But then, if I'm not finding anything, then we'll figure it out. uh Oh yeah, this is a malt. This is a. um This is a mono repo. So here is oh yeah. They have this two mark thing. I'm not even seeing the editor, though, where does that come from.

B

I think that I found the the squire extension uh file. I pasted the link on on okay.

F

A

Oh yeah yeah great great great. Does this? Have the save frank? No, it doesn't. Okay.

A

um But it looks like with squire. The first thing we hit is we do a new squire thing? uh Do we know what squire's supposed to do.

B

um The squad square is the the rich content. Editor, that's what that's where the user types the or creates a rich content, and it converts it to html.

A

Okay, cool um yeah, let's check out squire, it looks like that's the bit that we actually don't have support for. Let's check that out.

A

What what's wrong with you.

B

Oh, it is a different project. It doesn't belong to the organization.

B

Let me I'm gonna find the link to the project.

A

So what is, how are they importing it? Then?

A

I think it is it and I'm guessing it's this, uh I'm guessing. It has to do with this mono repo thing.

C

All right, I think it's just a dependency I mean like it, has the at symbol to suggest that it would come from node modules or something.

A

Yeah, that's what it seems like, um but when I look up when I look up the package.

G

I'm not getting anything, I'm pretty sure. Squire was second uh to the bottom of the last package.

A

File, you looked at yeah and I saw that um on the when we were here, we went to libs, I saw squire and I think I think this might be related to it. But let's see is this the same thing. This is yeah. They have a whole copy of the man, so much code out there all right.

A

This is like a whole copy of the squier. So this is not oh and what I might have made a mistake by actually going to the specific tag, because maybe this contains like some of their. You know, maybe.

B

A

Maybe they copied some of their dependencies down or something so yeah. That was a mistake, uh but this is squire cool and we are interested in um because it looks like there's a class that you can extend. That's what they're doing over here um in the squire extension- um and this is the bit that I'm really interested in is this class.

A

A

Man that was helpful. Maybe this is it cool, that's doing something.

A

Okay, uh so I've created it, we start doing um some wysiwyg editor init thing: um oh yeah, then we call set html here.

A

But it looks like.

A

And save range to bookmark. Is that a thing? Oh.

F

A

Yes, okay, great.

A

Insert node and range okay. So what is save range to bookmark.

A

So what might what I'm, anticipating at the end of all this, we're going to note that there's something missing in our jstelm environment? I want to see what is exactly that's missing there, so this thing can work.

A

Record undo state, so I'm seeing okay what what like class or native function are we calling that isn't doing what we actually expected to do? um Oh, we do this save undo state. Oh gosh! I keep going full screen uh undo, state. Okay, this dot get selection is where we get the range.

A

Maybe we call this yeah, we call this a couple of other times. We call it once in set html. Is this set html? It is set html and where is the range coming from get range and remove bookmark or create range? Oh we're getting we're getting.

E

Close win.range create range. Is this just a thing? Yes, that's a dome api.

A

I'm doing all this, I'm learning stuff on the fly and enrique's like oh yeah. Here's what ranges are.

B

No, I you know I well I I I did also documentation. I couldn't find the problem, probably.

A

Yeah, okay, so range is a range, is a thing um cool and it looks like then we can also clone a range. I guess. Okay, all that makes sense. So why would then, if we have a range, why would we not be getting a um like a node type? uh So if I go to my, if I go back to my oh gosh, save range to bookmark, oops.

A

We're creating some elements.

A

I would expect calling- oh maybe create elements isn't doing its thing.

A

Insert node in range.

A

Yeah I wish I knew what this what this function was, and it's really hard to tell what's going on here.

A

Oh we're doing something for all of our child nodes. um So I wonder if it is insert node and range where we're doing oh yeah.

B

Is this a thing this looks like a thing: perhaps we can find where no type is referenced.

A

I think it's going to be referenced a lot. I see it like reference.

G

A

uh Arrange that start container- oh yeah, all right and yeah- there's no way this jsdom has any idea what to do with this. uh I think um so, let's see when I, when I just ran it here and I had a range I think that was actually over here um uh yeah. It was a real thing um just for fun. Let's see what happens when I do it over here before actually doing anything.

A

Equals document create range range, we were doing something like start.

F

F

Oh okay, sorry about.

A

H

Oh, I probably should just comment to this one.

H

I don't know if line 20 has.

C

A type or not fit versus it, maybe.

A

Yeah, so I did fit so that we were just running this one, um because it's force f is short for force, this specific test um and yeah, it's undefined, uh which is not what happens when I just create one in a real browser environment. So this is we've discovered. Jsdom does not have proper range support, and that might either be because we started implementing our own range support uh and hopefully that's not the case or- and we didn't you know finish all of it. um Let's see if we ever call this create range.

A

Oh, what's this whoa.

F

Oh, we are we're doing our own stuff.

A

Maybe it's already there: let's see what happens.

A

Yeah great range by itself is probably gonna. Oh no. It works now.

B

Yeah now this is like a completely different problem. Maybe we just have to comment the build editor code.

A

What do you mean.

B

Oh, this one does function, yeah.

A

Oh this one yeah, I think I think we might be it might be set. This might be it.

A

Nope that wasn't it take records, oh we're so close, though I can feel it uh at modify document take records. um So this is another squire thing, so another approach here would be like. If we feel like squire by itself is the is the complication, maybe there's a we can mock it at the squire level.

A

um If it's very clear what that, if that responsibility is auxiliary and like we don't really need it for this case or if it's very clear what we can replace it with, but I don't I mean I'm looking at squire right now. It looks like a lot of stuff, uh so I don't really know what I'm, what I'm doing, um here's the squire extension and modified document. I keep.

D

Nope, oh gosh,.

A

Let me see, modify document.

D

So I followed that comment about jsdom, not supporting it and ended up at uh a request that says: they've implemented the range and selection apis. So maybe we're in.

G

D

As of december 7th, so maybe we're just not using uh the latest version yeah. I can link that.

A

Yeah we're using something really weird um so we're using the issue I found. Do you know what version it's that's supposed to be because we are using.

D

This the merge was december 7th 2019. I don't know what version it went into.

A

So we're using this like third party, that does because I think, just by itself, packages an outdated version of jsdom, and so this is a third-party library that it's like, okay, here's how you can get just and this new version of jsdom working and so we'll use this third-party open source package for just environment jsdom16.

A

You see it's hardcoded 16., um so I don't know if we knew what version we need to bump to that would be cool, but then we also run into if we bump. You know if.

B

A

Bump, if the answer is a bump this, which we should, which we should do more regularly.

B

A

Other issues are going to be introducing across the whole code base too.

D

A

Specify since the.

D

Test library and the test doesn't fail, then you're good right.

A

Yeah, that's that's true. That's I love reviewing test, mrs because I don't have to test it manually because it's just like it passed like it's good.

D

I mean if it should have failed and it didn't it's a bad test.

A

That's true, that's the hard part you're right.

B

um By the way, paul probably something that we also could do is evaluate that custom environment class. So we have, if we perhaps implemented the custom range uh fake object that we have there. We.

G

B

Others that we don't need anymore, because you know newer version of jsdom- has those apis.

A

Yeah, um we should there's a lot of cleanup that needs to happen to this class um because we're doing tests we have tests set up here. We have another file called test setup where we do more test setup, um and I think we really should be environments are the way we're supposed to be doing stuff.

A

I think use just this environment thing is way more configurable than our like global test setup thing, so we really need we're not taking as much advantage of um some of this as we could be, uh which we do need to do. um One thing I discovered too, with all this while we're talking about it, um so this is a uh this is something that I added a handful of days ago, but like anytime, we have a component, that's like based on our window.location.

A

We always do this like really every test. Does this like? Okay, I gotta create a property on window.location to return specific props, because you can't just assign to window.location, um but jazzdom actually has baked into it like ways to do this.

A

You do this like dom that reconfigure and you say oh we're at this url and it automatically sets up all your window, location and every other kind of js.

A

You know native.js um properties that you need, so we have not been taking as much advantage of this environment and js dom as we really could be and yeah one one thing to do. That is, if you find yourself mocking window.location, specifically consider using global dot, dom dot, reconfigure and it'll it'll set up all those props for you, and it's really it's.

A

This is how they recommend doing it.

B

That's cool, I think that maybe we can share that in the different channel or the weekly call or even.

A

B

Small bit of documentation.

A

So yeah we totally should um yeah. You keep bringing up good points enrique.

D

um To answer your question, it looks like they were using the 16.2, something and in their change log 16.2.2 was four months ago, so it this may not be in the version.

B

So we might be.

D

If we bump to use, if possible, the latest version of js dom, it might just work.

A

But if we is this using this, oh you're saying this is using 16.2, but the latest one is 16.2.2 yeah that.

D

The library just dash environment dashjs looks like it's using 1621, which was uh um like five months ago and this hit in december. It's like it's likely that maybe it didn't make it in it. I don't know.

A

Well, now, five months ago, it's already it's almost august man, yeah.

D

They didn't mention it in the change log, so it's hard to tell for sure. I don't know.

A

Yeah um well, I was surprised I think, something's changed like the fact that we were mocking this and then removing it. And now it's just working. I feel like something is something's bumped up and we now have more support than we thought we did, um which is good, but I I'm not sure what this take records thing is coming from. um It might be the same thing and if it seems like it's more dummy stuff, then maybe we need to consider boosting this even more. um This isn't really a huge library like we need to.

A

If we wanted to just do this ourselves um and make it a very specific tweak to it, we could as well um yeah. Let me see what let me see if I can find would take records or if anyone else wants to where that's coming from it's coming. When we call modified document- um and I guess that comes from the squire stuff- I lost the squire stuff. Oh no,.

F

It's over here.

A

I'm thinking oh wait. I can use github code thing. No, I can't oh no okay.

A

What did we call it modified document.

A

Oh man, it does something.

B

I found a reference, but in the order you know it's quite repro. uh I guess it should be also in those ui, because it is a copy.

C

I basically assume um line 193 is where your take records is happening.

A

193, oh yeah, you're right so we're saying take records is not a function because mutation is this observable stuff.

A

It is a mutation observer, no okay, yeah, that's another thing that we're mocking as well.

D

So yes, it does look like it's in the version that I think we're using for what that's worth.

A

Do you know if there's a version that supports mutation, observer.

D

C

D

The source there's dot.

C

One behind so that's the easiest test right is running against that.

A

You mean running up against a later js, dom version correct it might be. I don't know how to I don't. I don't know how to do it since that technically our js dom version is wrapped around another library, and I don't know how to just do a quick bump, um gotcha.

D

Does mutation observer run window it would be in window js and js done yeah. It is.

A

Power of window as well, it looks like there's a thing where we can test if we can observe mutations or not so like I'd like to almost make this value false.

A

um But this is like a global. Is this actually like.

A

Imagine that that's.

B

uh Checking if there is multiple server support, so I guess that it is recognizing that there is support, because we have a mock of that object right, but it is an incomplete api.

D

Okay, 13.2 add support for mutation, it's in their change, log of js, dom and 13.

A

D

A

All right, so, let's, let's see something: let's do something right: yeah, let's, let's set it to null yeah.

A

All this and enrique is like: are you sure you don't want to leave this in karma, paul.

A

Oh gosh, what's wrong with you, oh because it probably is already detected if I can or can't.

B

ah It is affecting that very importantly, pregnancy.

A

Right, I might be able to, we might be able to do it like just here, uh but that's going to cause issues for other people.

H

Does js have a hash being important.

A

I really need you to do this, um so the other. The other thing is it's: it's failing, because we don't have take records all right, and so we have a mock for mutation observer um and I think we just haven't implemented, take records for it.

A

um Yeah, um where is our mock for mutations over? Oh man? I wonder: if do we is, I didn't think json actually gave us one. um So now I'm really curious where that's coming from. Oh, you said, though they did one in like 13 or something so.

A

Mutation observer stub, that sounds like something that mutation observer.

D

Impul is what it is in jsp.

A

This is something that um we have done uh so, let's what is? We have not fully done our stuff. um I think I'm gonna, because we actually have a- and this came up I think recently in the mr review. We have a real stub.

H

In js, dom 13 2 can't we just comment this out and we already know that uh you bring up a good point: you're, probably right. Let's just try that out I'll.

A

Try just commenting out this thing.

F

Wow we're so close.

D

That guy is past that error. It did.

A

D

That stab okay, so I don't think we even need this stub right, because it's already there it means the bnjs. I mean if something breaks, it was depending upon the stepped behavior, which was probably a really bad thing anyway.

A

Yeah- and we have one that like like, we have one that creates a mock like more than a stub where you can actually like control and stuff. So I don't think we really need this. I'm gonna move it to the trash. Okay, I think uh we have another yeah. I know we were gonna be upset about that.

A

um Where are we importing this.

A

Oh, there are dom shims.

A

Cool so then oh wait what's wrong with you. You were just working a second ago.

A

I thought we just did this. Oh wait. Did I bring some of this back? No.

A

A

Okay, we're back all right.

A

That was scary, um so we're finding that range that get bound in client rect is not function.

D

uh So what is the range we have now? Is it a real range or is it a.

A

Mock range that this is talking about, this is going to be the js dom range. I think that's dealing with right now, um but what's another strange thing that's happening here? Is this isn't necessarily a range like? This is a function? uh We don't really know what the return type of this is.

A

I know we could talk about typescript.

A

And I don't think anywhere, I don't think I don't think we have implemented anywhere, get bounding, client wrecked and jstop. um So that's, I don't think that's part of range. I think that's part of a um like just any element. We don't have that support in jstop.

A

Let me let me double check if that's a part of range or not here, so I go document.

A

Oh no, it is part of range. Okay. Is that part of range when we only create one here, let's see.

A

um Yeah, so for us to do all this testing of stuff, I'm gonna create one.

B

Something very interesting is that we are not dealing with a queen with a squire anymore. It is with cold mirror.

A

Yep yep the plot thickens uh you're, totally right and that's a little concerning um for sure uh and all of it really sounds like we want to have a nice browser environment, but there's a huge tradeoff with that, and that's that tests get slow and because they're slow, we don't actually sandbox each test and those are all the issues we try to get away from karma, and so what would be nice when we need to do these integrations?

A

Okay, yeah having a full browser thing would be nice, but then we also have to really make sure we get enough bang for our buck with each integration desk like we don't want to just do a whole bunch of them, because um if, if they're slow, uh which is interesting, um do we skip something here?

A

It doesn't like my doesn't like this thing. I just tried to add: oh because I didn't actually name anything.

D

So it what it looks like is it bounding, client rec can be called on a range or an element, and maybe dom has only implemented it on the element based on searching their source code really.

A

Okay, that's good to know, so I just tried to check that out here. It looks like it's not a function for our range, which is unfortunate um and if we go to uh create an element, is this: how you create an element.

D

F

D

D

Well, that's going to fail or.

A

It doesn't have any expectations. Okay, so we do have it for elements, but we don't have it for ranges.

D

Think vietnam hasn't implemented. It.

A

Yeah, I think this is one of our manual shiny things.

A

uh It is, I don't know why I called it get client rex.

D

That's a different method: that's different than get bound in client rex get client rex is different. Yes, okay, they're different occasions.

A

So um what we could do- and let's just do it here for fun.

A

Let me go back to where we were doing the um dom shams get client wrecks, uh we're gonna. Do this kind of thing.

A

For range is that the is that the type is it? Is it a range? Yes,.

A

Get bounding client right man, this.

D

Thing's called the dom wrecked, it returns. The dominic.

A

Yeah, you know.

A

This is why I don't like types: your job is wrecked. I'm gonna try to just return object, but if we have to return a dom rex, we'll figure out how to do that.

B

I think that we can build one just call, you know new, don't break if that type exists.

A

Oh, that's what you're saying not not like: we gotta, we gotta, we gotta shim. Another thing: it's like! Oh yeah, yeah, that's a rocky tool! Yeah! um Oh! I called this get client rex because I copied it.

B

The fun thing is that perhaps we will end up uh mocking code meteor and squire and we will be again doing a unique test.

A

I don't really know what squire does and so that that really might be the best thing to do, because it seems like that might be the layer between the dom and the real bit we're interested in, um and that's that's where usually it's nice to mock those architectural layers stuff, um those like um boundary points but all right. These are both functions now, so I'm gonna say that I think we're good.

F

See what happens.

A

D

Can you say that one already existed somewhere that we're not using that mark that it was on so it exists for.

A

Element nut range for elements yeah and the here's some interesting comments of why it exists.

A

We have a matcher called to be visible um like because we we, we inherited a lot of our old jquery matchers when we did this jessica stuff.

A

Some of those matches don't actually do anything, so I'd suggest not to you, not you using them too much. um One of them that didn't really do anything was to be visible, like it was always false, and so, when someone's like testing. Oh, is this visible or not like it's like we're, not actually testing anything here, and that was concerning.

A

um So this was trying to make it work, but in reality we probably should just get rid of the matcher, because we're trying you see we're like we're like this is what 2b visible uses under the hood and we're seeing like hey do we have are we do we have like display none or some sort of hidden style up my chain, um so we can actually use this matcher somehow, uh but in retrospect we probably should just disable the matcher rather than implementing our own thing. um So we can't necessarily just copy this.

A

Maybe we could, um but I don't think we want to just copy this thing. I think we want to just. I think it's I think we just want it's just wrapping the parent in an array like. I think it's just this thing, but with an array, so I'm gonna do I don't really know what I'm doing, but I'm gonna do this um or let me tell let me see what you guys think of this um calling return.

A

This get bound and claim.

F

A

Yes, that's it all right, they're all going to pass without problems guaranteed, put your life on it.

F

A

It's a timeout, oh man, that was a thing that ended. You know, ended paul's career. He bet his whole life on his test, not timing, him wait. Why.

B

We can't remove the the css import that I'm.

A

Oh yeah yeah yeah. Let's try that out great idea.

A

Okay, that's great, um and so we debug some things and wow. It was really lucky that we found that we were manually overwriting range and it was really lucky that we're technically already supporting that. So that was that was a good thing we stumbled upon uh and then.

D

It turns out we are using the latest and greatest js dom. We just need to not blow its functionality away with our own custom box.

A

You know I hear what you're saying chad that makes a lot of sense yeah, maybe with some of these shims. Maybe we should like consider contributing upstream or like really really reevaluating some of this, especially if we do it, and so we have so one interesting thing. Enrique you we have some dependency bump uh like you set up like hey, we need to check before we do these dependency bumps or something oh blocked dependencies.

A

uh It would be neat to be like hey if we're bumping this dependency, let's double check the change log and see if we can remove like if we had when renovate bot creates something and says like. Oh here's, the new package, for you know just environment.js.16.

A

If that included instructions for hey, you know check the change log. Can we get rid of any of our manual shims? That would be really cool.

B

Yeah, I could open a mesh request to the friend of it and then I guess that it should have like some the dri right. I know I could talk myself and I could do some. I know testing and I don't know if you want to be it as well.

A

A dri for for yeah, I think we could. I I kind of hope, wonder if, like for some very specific stuff, I could see it being really helpful if, like we could give maintainers instructions for like before we do. This very specific thing like check this and that could land on our handbook, but it'd also be really cool if it was created in the mr uh and like so, we could automate part of renovatebot for this specific package like check check the change log see if we can remove these dom shim stuff.

A

um That could also be be an avenue for us doing something like hey for this specific gitlab ui bump. You know check, we can write instructions for check this usage and here's how you can migrate stuff, um I'm just thinking pie in the sky. This kind of thing would be nice. I don't really know what it what it looks like. Do you get? What do you guys have any thoughts of? Have you guys, chat or derek?

A

Have you checked out, like renovatebot and just how some of the packages get get some of those mrs get created automatically.

D

I know the concept of it, uh but I haven't looked at how ours specifically works, but the one thing I was thinking like pie in the sky, for example, js dom it's gotten at types typescript manifest that says what it implements like. Theoretically, some aspect-oriented-ish programming thing like say: look at that and somehow detect. If we are implementing something that's in there and if so, we shouldn't be.

D

That's a really.

A

Good idea, yeah, we can make a script for that. I think that's a great idea and then that could be our instruction for our maintainers. Hey. Are we bumping this? Let's run this script or if we were like really fancy we could we could do like hey dangerbot. Are we bumping this run? The script like that would be.

A

That may be too much automation.

D

We may lose our jobs then, um but as as far as like, you can't really rely on the change log because, like we just saw here this one thing wasn't even in the changelog but looking at the types and somehow saying like, is this thing used or not?.

A

I think that's a really really good point. um I I like that a lot um can you share just that that types that you're looking at right now, so we can look at it well,.

D

No, I mean just the standard at types that comes with most.

A

Libraries now and just like the typescript.

D

Manifest, I don't know.

A

What you call it yeah and that makes sense for jsdom to support that and so yeah we could just check. I wonder how I would tie like our specific, dom shim stuff, yeah yeah. They could just.

A

I wonder how it could somehow parse this to know like we're overwriting, something here which maybe we don't need to do like.

D

Right, I think that, like in ruby and other languages that have like aspect oriented approach, you can say like actually instrument this method. You know to do something like set a bit if it's overwritten or extended somewhere or never called or called, but yes seems that's harder to do in javascript, because you don't have that. uh You know metadata about methods.

B

If we create a function uh like we are here, we are just assigning a property to a window object right by the way we have proxies. We could, like you, know, create a proxy in the window, object and just check if that a property or exist, but a simpler way of doing it is creating a function that says that it could be called override window property and it checks if the property exists already before.

A

B

To assign a new value.

A

That's a good idea and then you can even- and I would say it should even just blow up if, if we're trying to do it so that we remove it yeah, that's a really good idea, like it blows up by default and if you have to override it for some reason you have to sort of opt into that yeah. That's I think, that's the solution is these shims aren't actually shims because they're not doing any checking they're just overwriting.

A

We should do checking and then, rather than I would say, maybe they're making a graceful show make it a shiv so that it just blows up uh stubs, not much yeah, so that we can even remove this file. If it's there like, because then we don't need any of this code. um Yeah, that's a good point yeah. I should do that for all these gems.

A

Cool well, hey! I think we solved it in an hour, so I'm gonna, I'm gonna, push this up. I think, though um this is we'll move this to a dom shim, like that's kind of been our our style, but what we'll do based on our conversation just now? Let's do it. Do you guys have two more minutes.

A

You do have two more minutes.

A

Yes, okay, um so I'm gonna create one called range yeah and I'm going to move this stuff into there um and what I'm going to do is something a little weird.

A

Let me know what you think of it, but I'm going to say hey if this already exists, uh then blow up.

A

A

What do you think of that?

A

So then, when we do updates it'll blow up and we're like already exists.

F

A

And do the same thing for.

A

And yeah we could totally um find a way to get rid of some duplication here, but and if what do you guys all think of single one? This.

D

Could possibly not work because of load order, like you have to you kind of have to ensure these are loaded after everything else, they are actually and you're.

A

D

A

After these, and that's that's one thing about the the test environment and this test setup, if you go to like our jets, config.

A

Nope not that one uh based.

A

Test environment gets.

B

Run first does.

A

A whole bunch of setups of like global and window and jsdom, and then you have our.

A

Set up files after ends, so then these are set up next, so that's technically, and this makes sense. This is where we would do our shimming um cool, so we already do that yeah.

A

uh But what do you guys think of these errors? Do you think that that's maybe now that put in multiple lines? That's not cool! Nobody likes that all right.

A

um Do you think that these are helpful, or do you think that they'll end up biting us.

B

I think they are helpful, um yeah, just that's just like in in another iteration. We can create that utility for the uh for the rest of the machines.

A

Yeah, I think I think I I think I like it too cool. I think I think I think this is it I'll push the commit up um thanks. Thank you.

B

A

Thank you really yeah. This was this is good. I'm glad I'm glad we got to problem solve this, um and this was one of the. This is one of the times when pair programming is successful, it's always successful, just sometimes it's sweeter than others, um but I'll. Let you all go and I'll push this commit up. You guys have a great rest of the day. You too cool.

G