GitLab Pair Programming - Frontend, 18 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: FE Pairing - 20201118 - Converting feature specs to FE integration specs

Description

In this session we try to tackle a issue where some feature specs are taking a long time by moving them to feature integration specs.

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/282436
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/48074

A

Here we go thanks thanks for hopping on scott. uh Here is the issue at hand. um I'm gonna share my screen here uh so, and the efforts of being a good software developer citizen um uh was working on refactoring this bit and the ide uh am I even in the right thing. Oh, let me just copy.

A

This was working on refactoring this bit and the ide that changes, how we view this editor info, like what line you're at and other things and was doing some significant refactoring to the point where I'd really like some sort of safety.

A

So why not just add a whole bunch of feature specs to just you know, keep things safe and ended up adding. You know five feature specs and it takes 800 seconds to run these five feature specs.

A

A

Previously, for a long time, we had in our testing pyramid unit tests, feature specs and that was kind of it, but now we have introduced this middle layer front end integration specs. uh So the idea here is we we have taken our whole front. End chunk just the things in javascript, so not even the hammel just the things in javascript, so we want to test that chunk. um So we mock out the back end and we use fixtures for api responses, not for html and things like that. We use fixtures for api responses.

A

um We mock out the back end and we run the entry point of our thing, we're trying to test um and so we're going to try to rewrite some of these tests in the feature spec world. um What do you think? So? It's good okay, so uh um we're actually not work off master, because this is about to be merged. um This, mr that himacha, is working on which I think changes a little bit of this for the web, ide, specifically um okay, so I'm just gonna work on top of that.

A

uh um So let me check that out boom.

A

Okay, oh yeah! I was doing something silly, so let me uh let me just reset with this branch.

A

Okay and it's taking a while all right here, we go okay um and then let me check out a new branch for this issue.

A

Boom um move feature specs to fe integration, specs, brilliant, all right. So, let's, let's check it out the front-end integration. Folder. Have you seen the folder at all before um I have I haven't exported, though? Okay, um so definitely want your feedback on what you think is helpful or not. um So we have another folder for test helpers, which includes the mock server and um something fancy snapshot. Serializing stuff, um this for a long time was our only integration, spec uh and just reading it.

A

You could see that this is at a different level than our unit tests like this isn't actually creating the component. This is doing. This is mounting this thing and then uh we we create the file, and this this is a helper that encapsulates those use cases or like those user interactions. So this is doing all that it takes to create the file based on the parameters we send it like we're.

A

Looking for this element, we're going to type this into the modal like all of that cool, so the goal is we're just like trying to write these tests as if we weren't developers almost like writing it. Like here's the requirements, you know, user, creates a file with this user deletes this file we do commit, and then um we can reference our mock server and our mock server. This is a really really cool um library we're using for this mock server.

A

um It is called mirage and um it lets us express an api similar to express, but it also keeps track of this like internal database and that's what we're that's. What we're kicking off of all of our fixtures um is this.

A

uh All of these are our fixtures api responses that we get sorry so for this mock server. We initialize this sort of database that all of our mock endpoints are just going to read from and respond with, and these database is comes from test helpers fixtures and these are snapshots of api responses from the real backend.

A

Does that kind of make sense? It does okay um so like, for example, and then we register all of our routes here and so like. If I go to my repository to find a file, we're just going to implement we're going to try to keep this as small as possible, because this is the downside to this- is that we're we're having to mock out the back end, which isn't great, um especially for the ide, which makes like 15 requests?

A

We don't want to just mock each one of those requests, so we're trying to just mock the replace the back end with something that is very, very light, um but it's there's still a little bit of duplication there that isn't great, um but that's about it and I'm so stoked to show you one of the coolest things about this, though, uh and I've been talking about it for a while.

A

But let's let's see if I can show you one of the coolest things about it, so I'm going to restart the jdk here and I am actually going to um create a file called uh temp and bear with me. uh This is how I've been working with this. uh I'm gonna create a file called temp and it's gonna export a default function um and it's going to import uh from test helpers.

A

Mock server use check this out what I can do, because I'm because I'm mocking out the back end, uh I can go to my ide page and I can import my test case and I can actually see it uh run um if that kind of makes sense. So let me in.

B

A

Oh yeah, that's what's so cool about this! That's what mirage like really sells! You on is like with this fake back end. I can be working as if I had a real back end and testing things out visually and then just replace it, so you could do kind of the same thing for tasks which is really neat. um Let me see if I can. I forgot the config for oh yeah. I can go to test helpers here, so I can go to import run test from so test helpers we'll go to that test, helper directory.

A

I think I want to go to id. I think it's something like that.

A

Yeah, it's it's complaining about eslint stuff, but that's not important. So after I run all this, then I'm gonna uh run my test, so I'm changing the actual production code, which is kind of weird, but I don't know better way to do this, um but now I can say: hey running the test, uh see it when it when it's ready to go um I'll, open up the the route that this is expecting um and you'll see mirage kick in.

A

It's really helpful at um it's really helpful when you're like building the actions, so that's one way that we've kind of decided to to design this is creating these helpers. That, let me write, really simple use cases like create file, and um so this is really helpful to help me build these actions, um these actions out and then once I have the actions I need then I'll kind of switch over and just start writing the test and the front-end integration thing. um Do you have any feelings right now or.

C

Are you are you just along for the ride? um No, no, I'm just kind of like I'm trying to digest. This is a lot um I do. I am curious like we're putting so the front-end integrations. Tests are like in this middle portion of the testing pyramid, like you were saying earlier, um so for the sake of non-duplication of coverage.

C

How do you see like okay? So let's say we replace. We replace the file that we're trying to replace in the our spec right have front-end integration specs. Then? How would you think about like what integration spike would you want, because we're covering quite a few cases here? We're just mocking the back end? So then you could make the argument, like that's a that's a bit superfluous. To do the same thing just in our spec. You know.

A

Yeah you bring up a really really good point so where front-end integration specs are really valuable, is when we're really just testing front-end com interactions and behavior and for the ide that's like 95 of it. um None of these are doing any commits. It's just clicking buttons. Did the front end? Do this update um and none of it is really hidden.

A

A lot of these aren't really hitting the back end other than getting file content, which himacha actually up implemented, which is why I, um which is why I um wanted to work off this branch, um so there's not going to be any loss of coverage by moving us over to front-end integration, because this is only top only targeting front-end stuff.

A

As far as coverage goes, but on a side note of that uh one rule of thumb that I've been following, I really like following martin fowler's stuff, um and he says for test duplication in the pyramid.

A

You want to try to push tests as far down the pyramid as possible, so something is wrong if my unit tests are all green and I have a higher level test, read that's telling me, I didn't capture something at the unit level that I that I really could have it's not to.

B

A

That you, you know you need to have just unit tests, uh but it is saying you want to try to push him as far down as you can, because clearly running things at end to end is very expensive right. It's not just line coverage, but it's value coverage that we're also really interested in.

A

Do you know what I mean totally uh so let me see if I can. Let me see if uh oh yeah, this is that this is that I think okay, so this is not oh beautiful, yeah, yeah yeah.

A

So oh no, never mind!

A

Oh, it's! Not! Okay! All right! Here's downside to all this. Here's something that we gotta fix, um but uh because test fixtures are actually loaded in a module right now. um Maybe I can fix this right now, uh but because test fixtures are actually loaded in the module um you have to have all the fixtures for any of them to run because we set up the whole database. You know what I'm saying.

A

So let me let me so that's what I'm running into right now is hamachi added some fixtures. I haven't ran them locally.

A

So now I can't run anything and it's all going to blow up, um which is not great. uh So what what would be ideal is that we do some sort of defaults if the fixture isn't. If you can't find the fixture, we do some sort of default, so you can still move forward. If I'm not using that slice, um do you want to see, if that's possible, sure, okay, let's try it out? uh So what is this?

A

This is throwing a fit by saying, cannot find module test fixtures, oh because it's trying to resolve it by requiring this thing and then we're reading the file. The sync.

A

These are all doing. uh Are these all promises? Let's see, because I was kind of thinking what, if we just for every one of these.

A

These are not promises; these are actual things. I was kind of thinking how we could just uh it's a bit. That's a bit weird.

C

Though, because it requires async,.

A

That's what I thought.

C

Yeah so then it could just not be available at that point, um which.

A

So one thing I could do is I could use. I could wrap these in tries. I guess if we want to.

A

Probably the fastest thing would just be to run the fixture, um so let me go ahead and do that I'm looking for uh so this alias is a jest daly's that and it's also webpack alias. I think that looks at uh here. We go. Here's the one I need to run. um It's.

A

Back, um let's look at test fixtures real fast, while we're here.

A

Yeah, so this is a um this is a jest, alias, that's looking actually at your temp directory for what fixtures you have and it's going to try to resolve those modules, so we can just do require rather than having to do reading of files and things which causes issues and the reason this is important is.

A

I can't run this if I'm doing- and I see we're actually doing that here- where we do read file sync.

A

Ideally, we could just require it as a text, um but I see that that might not be. uh That might not be possible.

A

So here's how I'm gonna do this yeah, because all right, one of the goals with this environment is being able to run it and see it like this. um So I'm gonna do something really crazy go nuts and please stop me. uh Please stop me.

A

We're gonna do this: we're gonna create a function called with default.

A

Here's the function, here's the default value.

A

A

I don't need to get the actual exception. Do I need to have parentheses here and if I make this async, can I just like await this like this? Can I do that, even if it's not async, I think I should be able to do that.

C

uh What do you mean if it's not async.

A

Like if this isn't a promise, a weight doesn't do anything then right.

C

Yeah, I think it just executes okay.

A

C

A

Yeah, so we're going to return a weighting of that thing and then otherwise return the default value. uh Do you think with default? Do you think it's a cool function, name.

C

Always okay, this is I mean this is crazy. Go nuts, so.

D

Okay, you're right you're right, I mean.

C

You can just name it. Bananas.

D

And we'd be good bananas, I mean that's the.

A

A

Default content, bananas.

A

Oh gosh, my I'm stuck.

A

Default content.

A

With default default content.

A

um Yeah, so it's clearly not very um obvious uh that read file sync is kind of what we're we do want to try to avoid that, because technically we could run these in the webpack environment. We want to try to preserve that, but clearly.

B

A

Not obvious here because we do run them in jess, um so I'm going to think about how we want to preserve that.

A

What do you think.

C

Well, this I mean uh we can't start moving like we need this aspect, so we're okay, let's take a step back so who might choose mr introduce new fixtures? Those new fixtures are causing problems. Those problems need to be solved by doing what we're doing now.

C

So we're like we're a little bit removed from the we're a little bit removed from the integration spec right, but we need this to like run. The integration effects like check, stuff's working, correct.

A

Yeah so we could just run jess integration, the through the console and do it, but I I'm a very visual person, so I like seeing it that's.

C

Cool I just I just want to make sure I understood where.

A

C

A

So this isn't necessary at all. This is just necessary for me to be able to do this thing perfect.

B

A

But I'm I'm curious. uh I'm now running some more issues. Oh man, what's wrong with you, paul uh get. What are these? Oh, oh! These are functions with default. Oh yes, I'm not returning a function! Oh and everything's, failing abort, abort, okay,.

A

Let's try this off to a good start. I know let's try to put a pause here. um These are functions, so I want to return a function.

A

A

C

Wait wait. What do you mean with default.

A

These are functions so I want to do this. I.

A

Think, okay, um gosh and I wish I could like figure out.

C

Well, but with default isn't being called twice, it's being called once so then it would be you would want to. It would just be with the fault, equals fn default value and then try well. So then we wouldn't even be doing the try catch anymore. We would just return fn right because you're in I don't think you want to return the invocation of the function, that's being.

A

Well, we want to ask you if the function, if the invocation fails, then we want to just return the default value, so I think we do need to call it here.

C

Okay but then I'm a little lost with the the function, curry.

A

Correct it is the higher order, so.

C

Yeah, these are oh, those okay, get blob, readme is being called somewhere. So then that okay, I.

A

Mean I made it really confusing. I realized I did something. It's.

C

All good I got it, I got it now. How.

A

About how about this? um What do you we're just now we're just having fun um how about this? What if it looked like this, let me know what you think if I did with default default content.

A

And then I passed in whatever function like if I did it like that and then what do you think of that api? If it looks like this, that's weird that looks weirder. Okay, thank you for stopping.

C

It's me going to encourage you, but oh do you think it's cool? I mean, I think it's um I'm so good. It's all good! Okay, let's yeah, we can just keep moving I've.

A

Completely lost my mind now, so, let's, yes, let's please keep moving. Please! Please stop me scott before it gets really bad okay boom. Do you see we're running this test and look at mirage console logged all of these endpoints that we had so these aren't. This was not hitting the real backend uh cool um webpack. These are hitting the fake back end, which is very exciting, uh and so, if I open up readme, I should get bananas.

A

C

I'm gonna I'm gonna, clip that that excitement.

D

So that's gonna be my new gift, but do you do you feel.

A

It like this is so yeah. It's.

D

A

This is very exciting, so it's so.

D

A

So what I can do now in my tests here, I know.

D

A

I really want to assert: is this stuff? So let me go back to here and I want to open the file. I need to be able to get the status bar and I want to set be able to set the position, so I can start writing all this out, um so I'm going to import.

A

Let me check where I am in the file tree. I want to import.

A

From my specifically just my id helper.

A

uh So we're running the test and I want to.

A

uh Oh yeah, this this is probably going to be. I want to wait id helper, open file.

A

Readme.Md so now to just double check it I'm going to refresh my page and see where am I at now? Do you know what I mean? Well, you should refresh at mat you shouldn't be at readme right. You should be a roof. You are 100 correct. Thank you rails, so downside to all this. I don't really need the rails back end, but rails is I mean it's still kind of all tied to that, because we're hitting some sort of server. That's returning us these assets. I don't need that um I've.

A

I don't know what the what a good uh fix for that kind of thing is, but um that's that's a little bit. That's the only thing really contributing to the slowness. I think um can't find it what's.

C

Wrong with you no test constants, it said which might be an id helper, find test. Constants yeah. Is that that's a bit weird.

C

Helpers test cons.

A

Oh, this is a um dependency cycle. It's that's shown up here because we're um emitting the ide okay. Yes, I'm going to comment this out for right now and we will fix this later, um but that's probably why I think it wasn't showing up because the ide was importing this test helper. So I could run things and see it visually, uh but then in my helper I was importing the ide mounting thing. We don't want to do that. You're.

C

Going to get a runtime error right, because you're referencing referencing something that isn't being imported at the moment.

A

Actually, scarily, that's the run, so that is the runtime error. I think, is that it couldn't find this thing.

C

But right really like if we, because we commented in that ide- that's not going to throw an error at the bottom. It's like hey! You can't reference.

A

Oh and I see I see two, it's trying to find this thing and that's webpack doesn't know about this thing either. So we'll we'll move some of these stuff up, but clearly there's some flakiness to this environment.

C

A

Well, I know yeah, so aren't you so excited to start using it.

C

Yeah actually, actually anything we're writing specs and.

A

Boom we opened up readme.md.

C

A

Exciting so now we want to see. Can I set the editor position? Do I have a helper for doing that and that's going to be important, because we want to double check that this thing can get can get set. So let me see how I did that in my r spec helper, if I go to ide, set editor position.

A

Okay, oh flip flops. I remember this uh okay yeah this was this was a little wild. um Are you? Are you ready to go? You thought we were down the rabbit hole, but oh, oh man, scott! um So to set the editor position, we need to interface with monaco and because there's not like this easy user interaction. For me, just like hey click on this position,.

B

A

The best thing to do is just call some sort of function to monaco to do this. Okay, all of that's great, um but that's not possible, but monaco doesn't expose this test. Editor thing where, where in the world is that coming from good question scott, um so those are like completely out of scope and in a hidden scope and the only way to expose it.

B

A

Sort of scope is to create some sort of callback that lets us get like the last editor created, not great.

A

um But this is so the way that we did it here was to save this monaco editor and to always be watching for that and then use it, um and we can do that, uh so we can create in our ide helper. Here we can create something that starts saving off a monaco editor reference.

A

And start using it, we could do it, maybe in a less of a globally way, because we are in javascript where here we were in our specs, so we had to write to a global file. Maybe over here we could just expose a helper for like on editor created, and I pass a call back and I can just save it to a local scope. um Do you think that would be cool yeah?

A

I am digging your enthusiasm. uh I was not being sarcastic. uh Maybe I was being a little sarcastic.

C

So this you have all the I mean, I'm along for the ride. You have all the context. Please.

A

Help me I I clearly need help like I'm this joey. Just tell you stop, please tell me to stop. Please tell me like paul, you stopped making sense. Please do not.

C

You should just let's just delete the rspec file and call it.

A

Scott's, like you, don't run into failing or slow test if you have no test, if.

D

You don't have the test exactly.

A

Bring up a good point uh on medica monaco editor created: uh this is the magic um window. Monaco on on monaco did create editor. This is the magic we're just going to call fal fault callback.

A

And so over here in my temp world I could do something really wild like.

A

Like right, monaco editor.

A

And then do um ide helper on monaco did create editor.

A

Now all the all the functional people are going to hate me right now. uh So what do you think of that thing? Yeah, you think it's cool.

B

We go back. uh Okay, that's no! No.

B

A

So then, what we're going to do um over here? We do a uh id set out of position. So I'll add a new helper thing here for um set monaco editor position and I'll do something crazy. Where I take the editor actually and.

A

Something like that, do you think, stop me if you don't like it, I want you to like it.

C

Yeah I mean, I don't think yeah. I don't think we need to pass the depends how we use this, but I mean I was thinking like you just you just access the reference of of the editor, but we'll see how this goes.

B

This feels good, though okay.

A

I probably don't need to expand this. I was kind of doing it for like uh code intelligence's sake, expanding it like this, so I could see it like that. You know what I mean and you might be able to do like comments and stuff, but this this is also compile time happy. uh So then I was gonna. Do set monaco editor position, uh it takes oh, and this is part of my id helper thing. um It takes the current monaco editor.

A

Oh, I have a great idea. Oh man. This may not be a great idea.

C

But I'm stopping you.

B

C

A

Okay, I'll I'll tell you. uh uh Let me see if I can do this, though, or we're going to the fourth position. um Let's see if this works and then I have an interesting idea to refactor, which I think you'll actually like and you'll, be like. Oh we'll see.

C

I'm can you go back to the code, the.

C

So on mark, can you go back to on? Monica did create editor.

A

B

Definition, one monica.

C

hmm Because so, okay, so I'm a little confused because we're calling we're passing a function. That's just saying like uh assign. Oh on I don't know the the api for on did create editor. Does it? Does it give you an argument that yeah that's.

A

Like the reference, okay, okay, yes, okay, okay, yeah, never mind. I think I think what you're feeling is will be solved with this idea that I had. Can I entertain me for a second yeah. What if we.

D

A

Cool function called create monaco editor interface. That may be weird. We could think of a better word than that, but what this is going to do is encapsulate that that hidden state. So it's going to.

B

A

This thing uh let current editor equals null.

A

All right editor equals editor, yeah, okay, so that's all cool. Then it's going to have functions like set position line and.

C

Then it's going to reference.

A

C

Editor, yes, that's exactly what I was trying to say earlier good! Thank you for.

D

For for entertaining this idea, this is great. This is yeah.

A

Sometimes sometimes I have to do it messy first and then.

C

I yeah it's the best way.

A

I'm excited to see what happens.

A

Ide helper create monoco editor interface boom. We don't need you, and this is significantly looking that position.

D

What do you think beautiful.

A

D

A

uh So let me refresh this.

A

Let's see if it works, would you say the line number two two, I said like column, four uh okay, so I'm gonna make my default. Bananas have more to it. Oh, what what's going on bananas.

A

I don't think I waited long enough. That's disappointing.

B

Wait, no, it says.

A

Current editors know so I'm.

B

C

A

Position so I never got my.

A

I never got my um let's. Let's add some console logs, so we can be aware of the timing. That's happening here so uh console.log id helper.

A

I should call this adapter man anyways.

A

uh Create editor callback.

A

You know this would be a really cool thing that, for us to do more, is rather than writing these logs, removing them and all that stuff like what, if we just kept caught like kept locks, but had it in a way that they didn't show up in production like that would be really nice. I feel like that would be nice anyways.

A

Do this again, um I'm pretty sure I need to wait for something and that's why this is. um Oh, you had access to it before.

A

You had access to, but I was in our spec world and our spec does a lot of waiting. Oh, yes, you were saying I seriously okay, so let me see what happened what I was really waiting like yeah. I was waiting for a lot. I think um which is not the case here and I I think I have something I could wait for. um I just need to.

A

B

Yeah, so it's calling step position and the current editor is involved.

A

So here we go, we have on did create. Editor is getting called after. I've called set position.

A

D

Have a more crazy ideas. You enter some set time out. Oh, that's, that's that's insane ideas.

D

I mean it would.

C

It would validate something so now, but.

A

Clearly, current editor is something that's kind of deferred.

A

Okay. So what if.

A

um What if this is a.

A

What if these set position stuff, that's gonna have to be deferred. You know we're gonna we're having to wait for the editor. So clearly, this is gonna have to be asynchronous ish so, but what are we gonna wait for um is that current editor is available.

A

um And what's going to happen, if I'm kind of curious what's going to happen, if we start.

A

Maybe I need to just throw a weight for promises here. What do you think of that.

A

Well, yeah, because I kind of want to I just want to make sure I have the most recent current editor, because I what I'm seeing happen in the future. What I was thinking is like okay, what if this was a promise- and I waited- I waited for the current editor and then set its position, um but I I know I'm going to end up having more of these. You know, so I really just need, what's the most recent one, but like it's got, it's got to be ready, um so uh I have.

A

I have an idea, um maybe to just make this more explicit rep. There might be ways to make this better, uh but what, if we had a function, rather than making set position async?

A

What? If we had a function for called wait for editor.

A

Which was async.

A

And um yeah yeah and I can actually just add another one of these- that should work right.

A

And this is not to be async, but I'm going to return a promise from it. What do you think of this.

B

A

This might be the easiest way right now, um then it does bring the question like. Why am I keeping track of the state thing, but it might end up being nice. I don't know, let's try it out um await editor, wait for editor.

D

A

Then I can just set its position. What do you think? Okay, let's try it out, I'm still in reading.

A

A

Boom boom one four woohoo, so it should kind of work kind of uh so we should be able to write a whole test case for that um which is exciting. So that's one, that's all the actions, and so the reason I use this visual thing. Just to reiterate, um I don't do expectations here because that's not going to be exposed in webpack world. That's just a just thing, but I use it to make sure are my actions. Do they do what I think they are going to do?

A

You know what I mean um so for this case, I've done all my actions. I've opened the file. I set the editor position. um uh Let me see if I can do the rename file now, because that's another action that's over here, so I'm just working on this temp file just double checking. I could do these actions and I can just write my tests. um Does that seem helpful or does it seem crazy to you very helpful uh helper?

A

Do I? Oh I don't have rename file see. This is why we do it.

A

I have delete file now I don't. I don't have rename file all right here. We go.

A

It's lunchtime over here, I've got some delicious. My wife just lovingly made some delicious looking soup and sandwiches whoa. I know I haven't.

C

Had breakfast yet I'm hungry.

A

Do you know, um do you know you haven't had breakfast yet no ma'am, do you know whole30?

A

uh Have you ever done it uh no.

C

A

My I've done it once and my wife has done it a couple of times. um She just finished the whole 30.. um Oh nice and she's done it. She kind of already knows what she's sensitive to she kind of. Does it to just reset uh herself, um but something tells me she's, she's, eager about making all these delicious sandwiches. Now that.

C

No, it's true, though, you're just like what have I not gotten to eat.

A

For 30 days, she's uh she's really disciplined, so it's not like she goes overboard, but uh um I know if I was in her shoes, I'm the kind of person. That's like okay, I've been eating good. I guess that means it's pizza and ice cream day.

A

100 all right we're here. We need to rename a file.

C

So, like renaming so then you have like uh you: have the mock server has like a post or something that you're just gonna, be like uh I'm gonna pass, I'm gonna pass the new name to the thing, and then it's gonna return that name right. It's like.

A

um Yeah, so we could do that, um but just keep in mind too there's a lot of context here with the ide there's like no calls to the back end. When I rename a file, the only call the backing that happens is when I finally do my commit, but there's so much fun and stuff, so that these front-end integrations tests are so valuable.

A

Do you know what I'm saying oh interesting like when you.

C

A

C

You rename a file when.

A

You read it, it's nothing happens like it's.

C

I've renamed it locally. Well, oh, and then you can and then you commit and then it's like okay got it not sure why it's.

A

C

But it's okay, we'll look the other way right now! Yeah! Please do.

A

Hopefully, it's not a real bug and it could be. That would be unfortunate um yeah. It could be a real bug. Let's see, um let's see uh we're coming close to time, but I think this is helpful, probably as it was, but we want to rename a file. um We're gonna have a path and a new path.

A

um We can follow a little bit along to how we were deleting a file which meant we were clicking the a certain file row action after traversing to it. So I think we can kind of do the same thing, so I can do.

A

Let me let me put this close to delete file since it's very similar. This glorious helper file is not getting very organized, but I don't I don't know what to do be organized later.

A

Yeah classes are not the answer uh that I do know.

C

D

C

Your functional fans back.

A

C

D

Know your fans.

B

A

So I think you can hit rename move.

A

Let's see if this works um so like you see how uh what a clickfunnel action actually.

A

Doing how was delete work like that? Don't you I thought you had to like. I thought it warned you anyways yeah, I'm surprised, delete works um but anyways. Let's try it out, let's see if it actually clicks rename file readme.

A

So this is the next. This is for this test after you do a rename. um This is the behavior that it does for the editor, so we're just preserving that readme's.

A

Okay um and let's, let's redo this, I'm really concerned about the console air that showed up, though, that that made me nervous.

C

um Numero check it out.

A

Locally, I mean you can see if it, if dot com has an error. When you open.

B

Up a file and rename.

A

A

Boom look at that it opened up the modal.

A

So I think then it's very much the same as our create file. Modal we're finding and setting find and set file name.

A

Yeah, it's very much the same as this thing find by test id file name field.

A

Is that yeah yay, okay.

A

Yeah, so here's the value so maybe instead of find and set file name. Maybe we should call this. uh What do you think of calling it fill file? Name.

D

A

Or submit maybe submit file, name modal, we get a value.

C

But we have, there should probably be a fill. You think. A fill is good and a submit right because then, like we're gonna have to for future stuff in the id we're gonna have to fill other fields. We're gonna have to submit other things, and then you can just pass like uh like a reference to the button or whatever or like.

A

C

I want you to update this. That might be oh.

A

You're thinking of having two of them, maybe.

C

um Yeah, I would do one see what happens I'll.

A

Call it I'll call it phil um I'll call. It filf right now uh create file, because what what the only thing different between the our old create modal is the submit text and I'm going to get rid of this thing and now I'm getting some errors, because this is now called fill file. Name modal.

A

I think that's the only place I was used cool, but now I can use it over in rename file.

A

Fill file name modal with the new path, and it is called the submit text called rename file, probably makes sense being not just one function. I agree um you. I think you make a good point there. um Let's see what happens here so just.

C

Check the web id um it lets you delete, the file, doesn't throw an error, but it doesn't warn you it just lets. You delete the file. Oh.

A

Really I thought it would warrant, but I.

C

A

C

I thought it would too. Oh.

A

We're doing stuff nice something must not have gotten submitted.

A

Found multiple elements with the text rename.

A

File, that's the thing with this testing library. You know this testing library thing.

A

I'm clearly talking about this one.

A

Come on testing library.

A

What's what's your beef.

A

uh Maybe I can uh oh gosh, I don't know um so it's clarify it's throwing an error, not letting me submit that because um testing library, you have to uniquely identify an element which is good like that's. I accept it.

C

So so for our spec, we have: uh what is it data qa, selector.

A

Well, we'll use so the qa selector should only be used for qa tests, um but we'll use like- and I could use a test id here, but it's kind of nice looking at the by the text name, but I could use a test id. I was kind of thinking of um passing this thing. This ide new entry, like looking for that and passing that as like the container.

C

With these different.

A

Calls and then just looking inside of there, yes, because right now, I'm looking at the entire screen, which isn't good.

B

A

um So let me see if I can do that. Let me see if I can do something like modal equals.

A

And it's the ide something like that. I'm obviously wanting to clean this up later, but here we are gonna find by test id.

A

So I can only do screen stuff if I'm looking at the entire screen, but otherwise I guess I need to find my test id and then.

A

Get by text and that allows me to pass in uh a parent find by test id yeah, so I can do from the modal here we go and then get by text from the modal. Here we go. Let me try. Let's try that out, um and then I know that it's I know that it's time, but I think we might have created all our actions. So then I just just like writing. Regular just specs.

A

I just start running it and composing the actions and with assertions um you do assertions on the dom yeah yeah, so use yep, we'll use, um and I can show what some of those look like, and I think uh oh gosh should not work again. What's wrong with you expect the container to be an element got no.

A

A

What what what oh? It's? Probably because it's like all.

C

A

Is a sick, it's like so asynchronous.

C

Wait wait, wait, um query selector, query, selector should be live right. There's like um yeah.

A

So this is gonna and what I think is happening is the modal hasn't opened yet so we're looking for this, but it's not there yet before it would work, because we because find on testing library actually waits like it'll. Do this polling thing?

A

um This is probably my own fault for not quite really quite using the the library. um But if I, if I make this a with a test id, I could then use.

A

Oh wait find my test id ide new entry or something see if it works and then that'll work. um So let's try that out and then we can. We can evaluate whether this was successful or or not.

A

What are your, what are your feelings about about this? What are some things you think uh could be better or some low-hanging fruit.

C

um I thought it was great, I think it's really. I think it's really awesome. um I have I'm like I said I'm along for the ride.

A

C

I don't really have any. I don't have much feedback right now. I it would be. I mean I'd like to use it more.

A

Yeah my gosh what's wrong with this thing, I'm a expected container to be an element like am I not doing this right.

B

Console.Log model: let's see what model is.

A

Oh, oh, this has to be screened uh because I'm looking for the whole screen. Otherwise I have to pass in a container and it wasn't doing this because it was blowing up here, because the first argument has to be a container unless I say screen.

A

um I wish I wish it was flipped like I wish it just. Let me pass in the container as the second argument so that but anyways I'm now getting picky asking for too much scott.

A

Oh gosh come on come on boom open the readme, so this is why I like doing this thing visually because doing this in the console. Really, I find really difficult. It's still finding multiple! Oh my gosh. Are you serious?

A

ah It's finding multiple elements with the text button because editor is also called rename file. Oh, come on.

A

I'm not um I'm not gonna, let it get to me. uh So I can actually do this. I think um you can get by text modal submit text uh and then you can say that it has to match.

A

Have you used? um Have you used the testing library, a lot which one you can say that it has to match a button like.

B

A

It's it's. It's super fancy.

A

Here we go, this, is it.

C

Boom, oh, we got an error, but arena. It looks like you renamed the file. It did. Oh you're right. Oh this is the.

A

That's the same.

C

Error yeah, but I didn't see that in production so.

A

Wow, why is it? Why is it so? Why is it so scary, what's happening there set timeout on set value? Is all webpack internal stuff?

A

Oh here we go all right. So some sort of thing happened. Id helper fill file.

A

Name, I'm gonna have to dive into it. um Hopefully this this could be a production issue um or not.

A

I kind of wonder if we're like pulling for something now for some reason, and this is causing something to blow up so and maybe that's just something: we've added just to our test environment uh want to dive into it. um If you want to dive into it with me, I'm happy to do that or if you I actually have to run there, you go uh thanks. Scott appreciate hopping on, I think always 50. There awesome. I appreciate it ma'am I'll catch. You later, man see ya bye.