GitLab Pair Programming - Frontend, 1 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: FE "Pairing" - 20220701 - (Part 2 of 2) Rewriting an old Vue spec

Description

In this session we finish rewriting an old Vue spec to use VTU and follow testing best practices.

Part 1: https://youtu.be/B_-NBSdFn6s
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/91603

A

Hey everybody, uh let's pick up where we left off, um but before I do that I'm realizing my laptop isn't plugged in just a second here we go.

A

All right we are charging, uh so let me share my screen.

A

And we are picking up this Mr, which Lee lovingly created and brought up during the pairing session, refactor IDE modal spec to view test utils. So you see that that's where we started off with the diff.

A

We were using this uh helper, which just actually manually mounts The View component completely, and we don't get to have cool features like shallow mounting or not being able to assert props and all sorts of things like that, um but now we're using our view test, utils helper we're also going to try to improve some of the testing practices happening here where we're directly mutating the component state and directly calling methods.

A

Although some of this stuff, we might not be able to uh address so, um let's check out this branch and let's push it forward, so copy the branch by pressing B I'm at the get lab project that I have checked out. Let me go ahead and open up vs code here here. We go, never mind that stuff, let's see where I'm at all right. Let me fetch the gitlab workflow extension. What's that I'll install that later.

A

Get Co I'm gonna check out the refactor ID model, spec Branch great. So now, let's open up this test that we're refactoring.

A

Let me go ahead and run yarn to install whatever dependencies. I might need.

A

B

A

Right just wait.

A

Okay, we ran just it's running on the thing: it's taking some time. Let's do it, let's do it, just oh right cool, so this past.

A

Let's see what's going on here, we have.

A

Okay, so here looks like we added this assertion to make sure that we're rendering the modal, let me go ahead and just open up the test subject. Next to this, the, um uh where is the path to it? New drop down new drop down model.view here we go boom all right.

A

So without doing anything to this component, so one side note one of the downsides of this component: is it's not totally stateful, meaning that it looks like we expect it to initialize its state by having this public method called, which methods aren't really public, but they kind of are in view land, so that's just where we're at um so we have it to do to kind of change this to maybe we can be more stateful on this, but right now it should be fine.

A

uh uh We're not what's not in scope, is really changing this underlying component too much um so here in this test context we're just mounting the component uh we're not calling that open method or anything like that, and so, let's just see what we get initially so initially we, the modal, should exist whenever I test weather components are present kind of like to double check their props, so, like just dot exists, isn't the strongest assertion.

A

So, let's see if we can check the props and see what that would look like, maybe they already uh when they were working on this, maybe there's a reason why they didn't do that. But let's see.

A

Oh, it looks like we're only running this one, so I'm actually going to X describe this one uh we'll do that described later. Maybe describe that X describe that each isn't a thing.

A

Okay, awesome! So, yes, we get. We get the cancel button. The primary button uh secondary is null. We have a dismiss label that looks like that's not being sent by us.

A

Yeah we have a title and stuff that we all initialize at so I I think we can um I think I'm going to start on some of this stuff, but I'd like to do that.

A

So I'd like to assert on we have.

A

So here I see we're referencing. This action cancel. Is that, like a computed in something, let's see what action cancel? Actually it's.

A

Yeah, this is kind of just a hardcore coded thing. uh I said: I didn't want to change this component, I kind of really want to, uh because this doesn't need to be a computed thing. This can just be um a static thing, uh but that's fine I won't worry about it, but let me pull in the internationalization. Oh here, it is oh sorry over there all right, we'll just leave it at that. Then all right action cancel has attributes.

A

Variant default.

A

X cancel cool action; primary has attributes.

A

Oh roller, what is your deal confirm? X, create file great all right action secondary is null. uh We can go ahead and well that we're not setting that. So maybe we shouldn't assert that. Maybe we should, though, now let's go and do that um we don't have any I, don't worry about the label. The dismiss label.

A

um We could insert on the modal ID that might be wise, uh I'll go ahead and add the alarm yeah I. Don't even have this I will add the model ID to there's no harm in having stricter assertions. Idol has the create new file. Title um title tag: we're not necessarily setting um cool, so I'm only doing a subset of these, because some of these I mean we could.

A

We could include all of it, um but if I did two equal and then we like added a new prop to GL model, this test is going to fail um so I'm, actually just going to do it to match object. uh Oops I have Extra Spaces here, which I did not need to have all right. Let's see if that works, so I'm going to do fit the focus this test and just run it um volar I'm, going to uninstall you. You have been disappointing uh cool awesome.

A

We are rendering the modal uh so, along with that, um we might want to show that we're rendering. Also this um we have a test previously that we're rendering this form label. We could test that we're rendering this input are we creating.

A

So all of this is without calling this open method which sorry, let me this open method, which this component is kind of expecting to be. It's quote: unquote, entry point that initializes its state and stuff.

A

um And I think that's fine uh to so what I'm thinking in my head is I, don't know, do I want to add assertions for like these inputs and stuff without calling that open and I think I'm going to just to keep it simple. Let's just assert all the interesting stuff that we're rendering here um yeah, let's go and do that all right, it renders label expect uh wrapper. That's fine label, dot text to be name.

A

All right- and maybe we can even say it- renders the name label I will see if that works, to run it. Maybe I should start a watcher.

A

That's a good idea. You can start a watcher, uh did not find it actually, and that's probably because this modal is a stub so um so like. If I do we'll go ahead and do fit here. If I did console uh uh fine GL modal.

A

Html see what else when I say stub this, because we're shallow mounting this, so it doesn't actually know what to do with modal things.

A

uh That's over here, that's okay! All right! Let's go find it.

A

Oh, oh, it's not actually yeah. Obviously it's not having any any HTML, because if I call rapper.html it's what I meant to call here yeah, let's see. Let me clear this. Let me go ahead and also start the watch there so I'm not having to keep doing anything like that see here we go.

A

Let's wrapper HTML empty, you know now, I'm thinking about a wrapper HTML would be empty because the modal doesn't exist so but I thought it would have done the modal stuff.

A

A

Instead of doing rapid HTML, let me see what happens if I do wrapper dot elements.

A

Let me just do the elements foreign.

A

There's a lot all right, I thought that we would have S anyways, I, I kind of know what I need to fix here. Oh, we are doing a full amounts here. Oh that's why it's not showing up uh okay, yes, I thought we were doing a shallow mouth. We probably changed it to a full mount for this modal thing to work, but that's not necessarily like my favorite way of handling this. It was it's a totally fine way, but you see how I'm already confused like. Why isn't this modal? Why can't I see this thing?

A

um We have a cool stub that we can use to replace modal, um so we can do shallow mounts but replace the GL modal with a test version of it. That makes testing models a little easier uh so that these things can actually be visible. um Let me see if I can find that uh stub modal.

A

As I said, is this: what I was thinking of? This might be what I'm thinking of yeah. We have a stub component helper?

A

Yes, yes, yes, yes, yes,.

A

This is helpful for studying components like GL model. Yes, yes, yes, yes, yes, yes,.

A

Component create stubbed methods, yeah create a stub, does not render any except.

A

Oh, that's so funny! uh That's a little! That's this strange little hack.

A

Yeah so I think I'm, gonna I think I'm going to take this approach of how we're testing the modal here.

A

um So we can create this and not actually show the modal, but we can assert that all of these things are here so that like showing of the modal, is something the modal takes care of on its own. We don't necessarily need to test that here in this component, so I like using a stub component thing, the stub component is overwriting the template so that all all the props and other things will be passed over, but the slot here will always be rendered and that's what we want. So, let's do that.

A

Let's go back to here.

A

um Let's call this shallow nouns extended.

A

Okay, yes, yes, yes, yes! Yes, yes, but we will add, stubs I, think that's what it's called geomodo and we have a stub component thing. Yes, and I can access it. This way or I can access it with the Alias helpers, which is right here, stub component, GL mode.

A

You're great great.

A

All right so here, I changed it to where I was I was surprised that nothing was actually being rendered, but now it will show up, which is why I wanted? Yes? Yes, yes, yes, yes, lovely, lovely, lovely, okay, so now I get my label and all the other stuff. Even the model's not shown that's okay, because this is a unit test. I want to test.

A

I'll have to test all the internals of modal that has its own tests. So let's just assert that we're rendering the label great and then let's assert that we're rendering the input I'm not worried about testing these, like bootstrappy wrapping, bootstrappy wrapper elements. That's not needed, I'm, just interested in the interesting elements it renders the input.

A

So let's do wrapper dot, find input, um and that's probably a good thing for me to add to our little helper thing here. um Find input.

A

Okay, oh, we have a test ID for it, so I can already do find by test ID file, name field cool, all right, so find input, dot, attributes Maybe to equal all right fit that boom. So we get those classes, that's fine. We have the placeholder and the type um okay and I don't know if we have the value um so I'll go ahead and let's just check out the let's just say the type is text and the placeholder is where's that place where we come from.

A

Oh that's interesting.

A

So if it's a new file versus a new directory, that's what we'll do it so the placeholder automatically is a new file. So we'll just put it like that.

A

This is a hard-coded for new files.

A

Foreign, because I'm not doing all of them, I'm just going to need to match object, cool great, so we're rendering the input correctly, uh but I want to also search the value of the imported, so I think I can do this. That's not going to be right. I know it's not right.

A

I know, what's up right, how do I do that in um it's not. Is it the it's? Not the props. Is it no? It can't be because this is just an input. um Let me look up you test. Utils.

A

A

There's no value thing here, right.

A

A

And updates the V model bound data set value, uh they're, getting the actual underlying element and doing a Dodge value. That's fine, I'm gonna die value. It's p should be initialize, something empty. Yes, yes, yes, okay, so we're rendering the input, that's great news, and so if we are creating a new file, we are also doing this thing for each one of these template types. We create all these buttons. So let's go to.

A

um How do we want to do this so I have what I like to do: yeah yeah, yeah yeah, so so yeah. Let's check that out so I like to deal with something where I'm finding by all of these buttons and I create this like object for me to make an assertion on so I'm gonna go create a helper called, find.

A

A

A

But it was what I've always struggled with. Is it's not like I'm, finding the buttons I'm I'm, creating this model for it, and so maybe I'll I'm? Creating this like object that I'm going to use to represent it.

A

Maybe I want to call it like.

A

I can't think about I'm just going to call it model, so it's like I'm finding like a model from the template, a model for me to assert against and I'll show you what I mean by that. So I'll do something like rapper. That is there any like test, IDs or something here that I can no there's not, um and that's fine, there's no other buttons here. So I'll do find all components.

A

Gmail button I think we added already. Yes, we did great great all right and then I map each one of these so I'm going to get an array.

A

And I'm going to map its uh which is I'm going to get its text. S and I will.

A

I'll also insert on the variant x, dot, attributes.

A

Variant, I think it's also I think that's a problem. Variant, Chloe, excellent products, category yeah that'd be fine, see what happens there. I'll create a a function for it.

A

Renders template buttons see what happens? Fine template buttons model to equal and we'll just have it be empty array right now and see what happens there?

A

All right? This is going to fail, because there's a lot of these here yeah look at all those template buttons. We have.

A

So, where are these coming from? I can hard code these values, but maybe there's like a constant I can just use instead. uh Oh that's a getter from the store. That's.

A

Okay, the way I'm gonna do this yeah I'm gonna. Do this by doing something like const uh actual equals, find template buttons model.

A

Actual you have.

A

Let me do links to be greater than zero and then I will expect actual 2 equal I have my store, store, Dot, gosh I haven't done view X in a long time, do it is store? Dot do I actually do getters.

A

Is that right and then I can get template pipes? Is this.

B

A

A

I guess: okay and I can map my.

A

Only done this and I'm probably wrong somewhere here so bear with me. X is going to be the.

A

Template.Name and the Varian stash.

A

I did something wrong all right. What is store.

A

I, don't these getters?

A

Oh! Is this a namespace thing? It's a namespace thing. ah It is.

A

A

A

These are wrapped Getters, wrapped Getters. Yes, I have to specify it by the name. Space. Okay, so it'd be something like this uh file templates.

A

Yeah I haven't done that in a long time- cool- that's great, so we're rendering all the buttons. So that's kind of our starting point for this. The some things that we um we'll test we'll need to test so now we're just testing how we render it but I'm noticing all these events we're not really handling um so we'll definitely want to do uh test and.

A

Modal and that's primary password model and that's cancel past when uh template type button is clicked.

A

um But for those I think I'm going, we want to let's go ahead and test it now under the context of I, just called open on thing.

A

So, let's these describes.

A

A

This dot path, look at the modal title.

A

Entry, that's interesting, okay, if we're renaming, but we're on. uh Oh that's interesting!

A

All right! Looking at all right! Let me let me make this go down.

A

Looking here at this describe thing: we're here, we're calling if we're opening it up, yeah based on these different types. You see these conditions in multiple places.

A

So this is interesting.

A

We can open this thing with a modal type of whether it being a tree or blob or rename, apparently uh I- guess that comes from constants here. Let's look up ID constants model yep tree blob rename, and if it's a read name, it looks like we make decisions based on the type that was actually the path that we're passing and the type that actually exists and our state of entries, and that is how we make a number of different uh decisions, and so some of the conditions here button title.

A

Yeah, so we can make we can we can. These conditions are based on all of those things, including like if we're creating a new.

A

And then submitting to is going to have different um Behavior looks like whether we're renaming or not.

A

And then we call create from template.

A

A

So, let's, let's deal with renaming as its own, a Zone describe entity uh I like let's create this parameterized test is nice, but let's go ahead and move it outside of the default context um and into its own thing.

A

So we'll call it when opened as that, and so we'll call create or I think we call we're going to mount our component here.

A

Yeah, so here's just the default, we have an opening thing or we're worried about anything. We're just going to assert our base expectations that we render these things.

A

And then, when we open this as a tree or a modal or whatever, then we'll set the title.

A

Oh, but here we're just I guess we don't need a path.

A

That path, I guess, is the current.

A

That's fine. uh Do we want to do that, though? Oh we might want to yeah, let's go and add that as something that will pass into there. uh This is shows file templates.

A

Yeah, we could do this all right. Here's my idea so we'll have entry type.

A

Yeah so anytime I open this we're setting this entry name to actually trigger the shell on the modal. We want to assert against that and then we call Focus input. So we want to create a video that we trigger the pain Focus.

A

If you want to verify that we triggered shelling in a modal. If you want to verify that um and entry name, is that just bound to yeah, then, when we actually submit.

A

Yeah yeah yeah. So then, when we actually.

A

Yeah, okay. So when opened as this with path equal to, let's go and set a path, because I think we're gonna want to it's worth. Testing that contact sound, we'll initialize it as empty.

A

A

So we'll say when we do that so bar with the path here.

A

Open as with path.

A

Has, and what we'll call here is um yeah shows.

A

File templates, we can use reuse our same helper here. We don't need.

A

We don't need this at all where we're setting the form label, because that doesn't ever change. So, let's just leave that um the button label.

A

Oh, this is the primary part, so foreign.

A

So to say, we set our modal props here.

A

So the ones that we would expect to change are the title and action primary will be different, so I can do to match object.

A

Idle is going to be the modal title, action primary. It was going to have attributes. It has something like a variance.

A

Confirm I could do a match, object thing in there too, but we'll just we'll do this. It's fine uh button title.

A

All right, let me just fit this thing right now and see where we're at oh man, it's adding this space. For me, what is up with that all right cool! You don't need this. One.

A

Do we show the file templates? Let's see.

A

Is creating a new file that implementation is from here, modal type equals. So if we're just creating a new file, that's where we do these file template things great.

A

So shows filed siblings templates. That's not right. Let's F! This whole section shows file templates. What we'll do is this: um how do I want to do this.

A

Because we've already asserting what those templates will be and I'm kind of wanting to reuse this thing anyways, so here's just an idea: I, don't know if we like this, but here's an idea we can do if shows file templates here it I. Don't think that's a good idea! No! No! No! It won't do that. uh I! Guess it's interesting when you parameterize things.

A

Yeah I'm not a huge fan of this, but we'll see. Oh wait. Wait! Wait! Yes! Yes! Yes! Yes! Yes! Oh yes! Yes! What we'll do is this? As filed templates equals? Oh, yes, actual equals. Fine template book dot length is greater than zero, so I expect actual so B. Yes! Yes! Yes! Yes, yes, all right great! So now we want to make sure we triggered.

A

um Oh I would like to assert inputs placeholder. Yes,.

A

A

It sets inputs.

A

Input problems, I, don't know, input contributes, that's so expect find and put so. This is already getting a little long. We want to make it longer. That's fine, I guess.

A

A

uh Yeah, let's go ahead and I, don't know what guess we make it longer? That's fine! Well, I was thinking we can. Maybe this table structure isn't the best for it, but I won't worry about it right now, so we have input.

A

um Value and put placeholder.

A

Boom, all right, let's go back yes, this is obviously not going to work.

A

Value should be input, value, we'll go ahead and put this scope too. I would expect this to be input value, but working yes, but it is failing um because when we set it to here, the input value starts out as to the bar slash.

A

Now it's working okay, expect to find input.

A

Attributes placeholder to the employ placeholder. This is going to fail so dur file name. We have dur and then slash file name for these ones.

A

Character or slash file, name underscore name. That's interesting.

A

Your final name, all right, sweet all right, so that does kind of render these.

A

Obsolete because we're already testing it ah so do I want to just get rid of it.

A

Yeah, let's go ahead and just get rid of it.

A

Okie dokie foreign, so looking at what open does we're setting all that stuff um great, but we wanted to double check that we're actually triggering focus on our input and we actually trigger showing the modal.

A

So, let's add some spies.

A

Let's Mount our component: let's add some spies. I can do just spion. First, let's do the modal showing so I'm going to do fine, GL modal.

A

um Gosh I wish there was a way to like, maybe no see it's not gonna update its prop. It's just gonna update its internal state. So the fact that we're actually calling this method I think the best way to assert that we actually opened. It is to add a spy on that public. That method that we're calling here um I wish. We could insert like a prop that it's actually open or not, but we don't seem to be working that way. I don't know if it's feasible for us to change it right now.

A

um So we'll see what happens, but if I do this dot, VM I should be able to spy on show and down here shows modal expect uh find GL modal VM ah that show to have been called.

A

Cool, so this is working, um but you know anytime, you're, actually calling something under Condition, it's nice to assert that it wasn't called um regularly.

A

So I am considering. Yes, in fact, I wanted to do this I'm going to move this spy setup. Let's actually do that here.

A

Spies to help this assertions- foreign- let's do that here so then here we can assert that it's not called it does not call, does not show modal by vehicle. That's maybe a good assertion find Geo model. Vm Dot show not to have them at least I gotta get rid of enough here.

A

A

All right so we're asserting that we're showing the model that's great. Now, let's uh trigger focus on elements.

A

So we end up calling this method when we call open, we call this Focus input, and so we want to make sure that we are focused.

A

um Yeah, we want to make sure we're focused and it looks like.

A

I'm trying to think what's, this is trying to do I guess we're setting it if we're doing a rename.

A

Input values, the holds name.

A

I think I just discovered a bug, uh uh I think it's this behavior, let's see if we can open up. uh Let me open up a smaller project. um Let's check this out boom, so I think. If I do rename, we still we use this static. uh No, let's just go here. That's fine!

A

um Yeah we'll go here. So if I do rename see how that gets highlighted, that's cool.

A

But this is interesting, I think if I renamed this directory, we cons .js.

A

And then I said, I was going to rename that that's interesting, you see how it it's just gonna find the first thing not actually the name of the because we're doing this index of thing. So there is a bug there. This only shows up when we do renaming that selection stuff.

A

uh If I just do new, that kind of stuff doesn't show up, we already said we're going to handle renaming in a different context. So let's handle that differently, but we are just doing Focus, so, let's say hey, we show it and then hey. Let's say we focus um on input.

A

All right boom expect find input and I. Don't believe. I can just say that we're focused.

A

I think I have to assert that Focus was called on this thing. So when we are setting up our spies, I'm gonna do just spy on find input.

A

And this is an element Focus.

A

Find input elements Focus to have been called.

A

Boom so then, back in our default case, we're not triggering that event. We said it does not show modal by default. It was not focus input by default.

A

Expect find and put element Focus not to having called rate.

A

Okay, so now we want to figure out what happens when.

A

Primary cancel and uh a template type button is clicked.

A

So I think those are remaining to Do's here.

A

um I'm also noticing.

A

All right so yeah we'll just say when we're submitting that we call submit form.

A

Yeah, so rename is its own piece. It'll handle that differently.

A

So we'll say when we are submitting the form.

A

Let's create, let's create some context there. You can create some features when submitting.

A

As we'll have the modal type.

A

A

So this would be after setting the input value.

A

All right so we'll say when we open this modal type, we have the name.

A

A

Yeah, so if this is a blob and we have so large, it has.

A

Tree we'll call it food or.

A

For each we are going to mount the component, we're going to call open with the.

A

Model type name or height and we'll just say the path is empty uh and we will go ahead and wave next. Do we do we already do this importing thing up next? Take that way, how do we do the next last time.

A

We did the next tick thing over here yeah. We did like that last time, all right next tick. So when we're submitting it, we want it to oh, but this is after opening it. We're then going to change the so we'll open it. We'll change the input, value and then submit it and then see what happens so we'll change the input volume.

A

Let's go wait after doing that and we'll change the input, value and then submit it, uh so we'll find the input set value to the name and then we'll trigger submitting it, which the way we do, that is we're going to emit primary.

A

Yeah so I'll just up here, we'll just say: const.

A

Ant trigger submit.

A

Find GL model we'll put these finders at the top, and then these action helpers would be us can be below that.

B

um Yeah we have to do it like this primary I think we have to do it like that.

B

A

So after we do that we'll trigger, submit and we'll see what happens so we're gonna expect when we trigger submit I'm going to expect this action of create temp entry to be called and so I think already. When we're setting up our store, we are saying to we're: creating a dispatch yeah, so I can just spy I can okay, it triggers create temp entry action.

A

Okay, I noticed. We also call this thing where we trim path components.

A

So, um looking at the previous tests, I know that that means that it's like getting rid of spaces within the paths so I'm going to say expect a name is something different so that we can distinguish between what name is going to be in our expectation and otherwise so we'll have it like. So it's going to be like this.

B

A

Okay triggers create temp and treat action, expect store the dispatch to have been called with.

A

It's called create attempt entry, yeah, we'll just leave it like that and see what happens right now.

A

All right, it does not like it, because it's actually trying to run the action, and so we will just do something like mock implementation, so it doesn't actually run the action because we don't need it to do that. All right.

A

All right, so it is actually called with the arguments alongside that.

A

So where is our dispatcher um or was that I? Don't think it was down here? Was it down here.

A

uh Yeah, that's that's old stuff, that's again um or that's coming up, so name is actually going to be expected. Name I need to pull that into context.

A

Expected name and the type will be the modal pipe.

A

Hooray, all right, that's working so we've tested submit without this rename thing. That's great uh Let's test canceling.

A

um So canceling calls this reset data where entry name is empty and path is empty.

A

This path actually used for.

A

What does path actually used for.

A

I, don't even know.

A

Like why is path, an entry name, different.

A

I guess path is like what it was. Originally we opened it under I. Guess, that's really only relevant for like a rename I guess, that's it. um Okay, so we'll say we'll just do one.

A

We can just do one when.

A

A

So we'll create a describe here called.

A

When opened as tree with path.

A

Before each, this will probably need to be a sync and we'll do very much some of the same stuff, um but this time we'll just hard code. uh This is going to be a tree, and this is Fubar an open, S tree with a path um it.

A

A

A

A

I kind of wonder: if we want to do that up here, maybe we do maybe we do when we when we're doing this stuff so like here. This is all being opened under different circumstances on maybe.

A

Maybe we want to do something like.

A

It resets when you canceled that'd, be interesting.

A

Okay, A little action thing here, trigger, cancel, find geomodo and I met, cancel.

A

B

Where was that.

A

It's down here trigger, cancel.

A

Oh, no, no I can just see the next stick all right and what we would expect to show that it's canceled as I would expect, find and put value to be empty. The inputs value is going to be empty and we went back to blob mode, so I can kind of just assert that.

A

My title is going to be the blob title. I think that it's okay, we'll do it like that cops.

A

Three sets to block mode resets Android value, to be uh what do we call that GL ow? uh No, no! No! No! It was we'll just leave it like that. Let's see what happens here, it's going to fail! It's okay! Yes, it should be create a new file. This again.

A

All right, this I didn't finish. So that's fine! We can get rid of that cool, so we did the reset great.

A

um So now, let's just assert that.

A

um Creating from the template works, cool.

A

A

All right so I'll create a nice little describe called describe. So let me go back to here. The only to do that. We're working on is remember those two days, not those ones.

A

Okay did I already get rid of those Studios I had added. Oh I did oh here they are okay. We did those describe uh when creating my separate the hype.

A

Okay, I guess. Technically we use from template.

A

So here, if we have a parent.

A

Oh yeah is this always just going to use the actual template? Name, not the name, but we Supply there.

A

A

These names are actually based on the template names. That's okay,.

A

All right, let's go ahead and say we open this uh so before each.

A

Component, oh, wait, open, uh we'll call open; it just has to be a blob type and we'll call this.

A

All right open blob, so we will await uh I guess this is this. Is.

A

We'll call it some directory.

A

Then we'll wait, the next tip for the opening things to work.

A

Creating from a template when creating from a template type.

A

Well, this is interesting, it will toggle the model. Why won't it just hide the model.

A

All right, let's go into our action here, though, when I'm creating, sometimes what time.

A

So we can go ahead and do our action here. We've opened it up. We waited for things. Let's I've been doing this. Oh wait, never mind uh find and put set value to be Sunder slash through GIS, but then we are actually going to.

A

Click a template button.

A

So I'm going to say fine template buttons.

A

Operate up find all components, scale, button.

B

A

Let's say it's fine simplifies.

A

All right and so down here when we're triggering this say, set input and Trigger button.

A

Fine template buttons at one pm and that all right can we trigger click, the yeah yeah, this GL point, so we can uh triggers no, it doesn't have to be vmmed. Okay, VM commit click, okay,.

A

A

This is a we want it to assert this thing.

A

A

It's gonna be a blog type.

A

Awesome, so this is actually the dot get ignore me so it'll be you can build that up. You can do Sumter.

A

Oh hard coded um but I'll add a comment about it.

B

A

Thank you, okay, those models.

A

I, don't know why we're not hiding the model toggle.

A

It's not seemed right to you, but that's don't know if there's any events and stuff that we can listen to other than this, uh so I'll just assert that I guess we could listen to certain events, just like assert that it was, but it's fine, uh fine, DL model and toggle to have.

A

Okay, great, let's go to where we're making sure we're not calling numbers so yeah here.

A

We're gonna make sure these are not called, uh does not bring a model, it does not dispatch.

A

A

So like earlier later on, when we were doing the store dispatch assertions, this is going to be the negative assertion that complements those cool, great all right, we're so close. So we've got this thing done all right. So now we've got this thing done when file doesn't exist.

A

When file already exists, so we have done this one and we have done this one. So we need to do when dreaming.

A

Yeah, so we need to do one when we're doing a reading.

A

Okay, I went file already exists.

A

Check create Flash, that's that's all we got left, I, think uh I, don't I think this is an old thing, so I'm gonna delete this.

A

um These are two last news and then we have migrated to scripts and it has good coverage um the concerns so pulling back.

A

Thinking about this, let me make sure I, don't even know my mic is still on all right. uh One of the one of the reasons is testing has been a little slightly. Painful is because this component is a little slightly painful and has fairly interesting.

A

Interesting is not the right word, but undesirable State patterns so like this modal type for one, just even having like a type value where we're doing conditions on is a little interesting, um but things get really weird when we're doing this rename thing and now, all of a sudden, we have to pull from our actual existing entry to know whether we were doing a directory or a blob rename, and so it's like what is this?

A

What is the truth of is modal type, where we pull whether we're a blob or a tree, or is the original state? How come it's so complicated and spread across multiple places, um and so that's kind of what's Happening here too, when we're doing a rename and yeah. This is interesting like this. This file check where we create the Flash.

A

That file check where we create the flash only happens with rename, but why doesn't that happen with the other thing too like why? If I go back to here, if I go to create a new file, creating a new file constance.js, what happened there and now I'm I'm getting this uh is.

A

Did that happen with the is that happening, because there was a rename or did that happen? I think that happened, because crepe temp entry handles that kind of flash thing as well. So there's a very messy responsibility: it's not clear when who owns what when we're doing things, and so we do it multiple times in multiple different ways: that's difficult to maintain uh all right! That's! Okay!

A

A

We're just focusing on this component now we're in rename land. Let's do the unhappy path later. So, let's try to trigger renaming a blob and renaming a um what do they call it non-blob a tree so.

A

Here's something interesting.

A

So I wonder if we can almost kind of just copy these.

A

Yeah, let's see if we can copy this but tweak it for renaming.

A

Oh gosh, where did we go okay, so the so? It should be if I go to rename yeah. Well we're a little inconsistent with folder and directory. That's okay!

A

So we're renaming this is rename folder.

A

um This isn't I, don't think, oh, no, that that should be false. All the time. That's not going to change the input value.

A

Does that initially change when we open this thing, it does we'll go ahead and the input placeholder.

A

Yeah all those placeholder.

A

Oh, that's interesting if I do a rename, no matter what ah ah the placeholders is always going to be a directory which is not true, some weird State stuff, all right, not trying to fix the problems, we're just trying to write we're trying to do test hardening right now. So.

A

I'm, not gonna worry about the placeholder thing yet uh we'll just search the input value when we're renaming.

A

um Just let's see so we got the modal title, that's doing stuff with renamed or you can just do a searching for rename the button labels doing stuff when we're renaming, uh and then these methods submit form the stuff when we're renaming uh yeah. So it should be it just button. Title modal title input, value, cool.

A

Yeah- and this could be based too based on what the existing entry.

A

Was of the and the path is going to be the previous path, and so, whatever that existing entry thing was that's going to be relevant.

A

uh Let me clean up my table thing here.

A

A

Okay, all right all right, so here we have entry. This is really original path, yeah yeah yeah. So this is the original type in the original path is how these things are related and are expected so kind of what we expect the state to be when this thing happens.

A

So if we open fubar.

A

Of the original type.

A

Whether no matter, what type it was.

A

That's going to be rename file name file.

A

Okay, uh but it does look like we have that little um selection range Bang uh when we're focusing the end part to focus just the latter part of the input.

A

And we do that.

A

This entry is entry, name happens to be set as path, so we're just trying to focus on just the latter part of the name. Okay, so we'll call this.

A

Yeah, we'll create a um I'll, create a okay test for that all right. So here we have a ridge type, a ridge path. My little title button title input value um cool. Well, since these paths aren't really changing, I think I can just make that a constant inside of here. How about that?

A

That way, we can just be like this: let's do it all right opened as.

A

When renaming and renaming and Ridge and all type.

A

A

Okay, here we go, this is gonna, be we're not using our. We haven't been using these constants here, which isn't great, let's see if we can maybe start using them. uh So these come from IDE constants.

A

So when this is going to be modal types, rename, why are you upset? Oh yeah, yeah, yeah, yeah,.

A

We'll just hard cut this little bar all right, great.

B

A

Yeah, these don't exist.

A

Not show file templates.

A

Expects template buttons model.

A

To have links zero.

A

Or really we can have template buttons. Oh I, wonder if.

A

Why can why we can have template buttons when I'm renaming a file? No, we can't look at this see. There's no template buttons. What's wrong with you, we can't have template buttons.

A

But I do this in the wrong place. No I, don't think it likes. My two have a link. Let's just say that so if I do model well, zero I think it's going to like that bad yeah and like that did not like that. Better.

A

Did I not actually open this and wait for things.

A

I'm saying I want to open as a rename right. Is that not what it's actually called? It's the modal type, a different type of thing.

B

A

All right, let's skip this thing, I, don't know. What's going on there.

A

All right, we can get rid of this resetting thing.

A

What is going on there.

A

Elements value, oh yes, this should be.

A

Or Ridge path, but are we not for some reason.

A

Why would we not be I called before each we mounted the component, we opened it with a rename.

A

This path, foreign.

A

Is the entry name? The entry name is bound to that input, value.

A

What am I missing.

A

uh uh What am I missing, what am I miss.

A

All right, it is not it's not saying that.

A

These renames are not happening correctly.

A

It's not actually opening this as a rename.

A

When I call open.

A

It's because I'm giving am I accidentally getting this undefined.

A

I would like to jump into IDE constants. Thank you.

A

All right, if I do this, are we okay with it.

A

So expected I expected these renames to be there, but they were not there. So rich type is not being used. We are opening this thing.

A

Oh cannot read.

A

Sets modal props.

A

Properties of undefined reading type- oh, no, it's not actually even running it, because I haven't set up the stage thing: okay, yes, because there's a huge assumption that the state is set up as expected, these computers aren't even getting calculated. So it's just freaking out and blowing up that's fine. What we want to do is set up the state like we said we're going to state no store state.

A

um We can just manually write to the state. We could call mutations and stuff, but uh we're in view we can. We can update. uh Reactive objects should be good, so we are going to update this.

A

Entries has the original path.

A

With gosh I know, I have helpers for this, but I have no idea where they are uh it's like. When we look at entry we use type.

A

um When you look at these entries, we use.

A

Yeah, let me see.

A

Yeah, it looks like we also use name all right. Let's look elsewhere, where we're doing state DOT entries equals I. Look at this thing.

A

Yeah, what is this? Yes? Yes? Yes, yes, yes, yes,.

A

Yeah this is some helper stuff. Let's do that, let's, let's use this helper IDE helpers. Okay, so here.

A

All right we'll put this at the top right here: I guess and we'll import file.

A

Yeah, that's where we get this thing called file, we'll create entries from paths.

A

I am yes? Yes, yes, yes, yes did I make this thing. No, maybe.

B

A

A

This is, this is all making more sense a sign. Yes, we can have these entries from paths.

A

Oh yeah yeah, so I can just create a nice little state for me to initialize the stainless. Yes, yes, yes and I won't have to worry about. That's it. I'm sold all right. Well, um yes, let's just initialize that over here.

A

Yes, all right, so we'll just create a nice little state that we can start out with uh here we go boom, create entries from Paz. That's from this thing, all right great, and so these are just paths to what are these paths to looks like.

A

A

How are we getting the type oh if it has an extension or not? Well, that's not actually the type.

A

That's fine all right. Let's, let's just use this method, that's fine, uh we'll call it parenter parent or slash so Js. Let's just leave it at that. uh Yeah we'll just create these I love. It we're good right. Oh yes, you're not happy, because I started doing other things. That's! Okay!

A

um Okay, but what's great is what we can do here. Is here's the original type, here's the original path, I'll just use, uh so we won't hard code this thing because it is going to be different. If it's a tree we have parenter, should I do a nested one, maybe I shouldn't.

A

We'll say: I create source, Source, parent or Source, parent or film. That should be fun all right. So the original path where the tree will be source parenter.

A

Okay and then for here for the blob, we'll just do Source parent. Maybe we could should do yeah.

B

A

Go ahead and do that slash?

A

Oh no, let's do the readme. Let's just do that. So, okay.

A

Okay, so we have a ridge type. We have an arrange path, we'll get rid of that. We're opening this up after a ridge path should be feeling a little better. Now, oh, no! Oh! No missing! One argument: what are you missing?

A

A

I, have your Ridge type, a ridge path.

A

Oh, do I need my input value.

A

I do seem to be invincing, something and I. Think I will have my input value.

A

I mean it should start out. As this thing.

A

Yes, a rage path is not a thing. This will be input value.

A

This is, unfortunately, always stir that issue we saw just a little bit ago.

A

A

Oh I have these do I have these in the wrong? Oh, oh! What what's going on there all right here! We go! Yes,.

A

Renaming awesome, okay,.

A

Selects input name is in there.

A

um Does not show file templates should work now.

A

I, will we won't test it since it is a bug, I, don't know we'll see uh it shows the model we are focusing on the input. It um selects name, part of the input.

A

So I wonder: can we is there such a thing as doing getting the selection range for an input? Good selection range input.

A

Method selection start selection. End I want, as are those properties that I can use here.

A

Maybe. Here's methods properties is that.

A

Set selection range.

A

Try to do a little start.

A

Object, the range of text ah get selection is that a thing I can actually do here. Let's see console.log because we're in JS Dom land. Let's see, let's see what happens here: okay, I, get this cool selection thing. That's great!.

A

A

That seems like a general selection thing.

A

I think I do have selection start and select end. So let's try that out. Let me find input. Element. Selection start see what that would be.

A

Cool. Yes, yes, yes, so that looks like that's actually doing so so I could say that the selections start.

A

A

A little title, input value and we'll call this input range. So it's going to start at.

A

A

To the end, yeah selections start yeah.

A

And this will be zero cool, all right, we're testing things, probably I, don't even think they're being tested already. So we have element.

A

Selection start and now we'll do it all right. Let me pull this into scope. Input, selection, start and put selection start.

A

All right expect.

A

Find in ah and then put that element selection start to be input. Selection start.

A

Selection end to be uh Bridge path, dot, link, I, guess.

A

A

All right, it looks like I, don't need these.

A

When renaming for a ridge path,.

A

Sweets, okay, so we're doing all this stuff on rename, which is great so now we just don't have the submit on rename happening yet um so we can do that. We can say, as an inner here enter thing.

A

uh Oh I don't have the right thing, we're so close, we're so close all right. Let's keep it up.

A

All right so here when we submit the, let me double check. That's the only other thing that I really needs to do for rename I'm, pretty sure. That's I know yeah all right.

A

So, for both of these cases we will I'm going to do the happy path, we'll rename to something we know doesn't exist yet uh all right so I'll have it described here when renames.

A

Successfully and we'll do something like it to do is matches rename entry.

A

For each pop ped, uh no, no, what we're going to do is we will find the input set. The value of it to something we know doesn't exist to our.

A

Create this thing up here: yeah that was an accident. It looks like I really did I, not be that oh uh cons, um new name equals okay, we'll call it Babar the elephant yeah that part set the value to the new name and we will trigger trigger, submit.

A

A

So when it renames successfully, it should dispatch the rename entry event.

A

Oh no I didn't do this right. You I, probably don't surround you as icon. It's probably like.

A

All right it is submitted successfully uh trigger to submit this matches would expect to store that dispatch to have been called with rename entry.

A

Half is going to be the new name on those path, the old path.

A

Must be the old path.

A

A

Parent path is not being said, uh so it looks like the parent path. Is that I guess? Maybe a name is the new name.

A

Oh parent path is empty.

A

Okey dokey all right bounce, that's good! Okay! So let's just do one test for of this thing, non-existing all right, I think we're good there. So now the only remaining thing is when the file already exists check that we created the flash all right. So we can do a cool little thing here, where we're going to run desktop lock on flash, let's go ahead and import. It still.

A

Okay, and by default it should it does not trigger Flash.

A

Expect create slash, not you have been called, and let's do that for when we've actually done a successful submission.

A

Which I guess would be here, uh let's see how that looks sweets all right. This one file out when renaming and file already exists.

A

When renaming and file already exists, it's new creates Flash all right before each amount of the component open. We are renaming this thing and the path we'll use is.

A

Yeah, let's go ahead and just pretend we're really naming Let's Pretend We're renaming to.

A

I just realized what happens if you're just renaming to itself.

A

It's not the all right. We're gonna ignore some of some of these complexities about it being deleted or not, can add.

A

Oh man, yeah, that's a that's. Gnarly um actually check the deleted flag.

A

uh We could do that.

A

I know that the old test didn't have that.

A

I'm getting hungry.

A

All right, let's do that later, but first we'll just do it when the file already exists.

A

When renaming and file exists, but it is deleted.

A

All right, so we open this thing or source parent, dare.

A

So we've opened this thing. uh We expect.

A

uh Oh, no, let's find the input.

A

Find the input set value to source.

A

Yeah I'm really curious to see what happens if I try to submit this without changing it. So if I'm doing a rename.

A

Wait you get out of there if I do a rename foreign.

A

Okay, all right, if I didn't put set value to source, so that should set to something that already exists.

A

And then we're going to trigger submit.

A

B

A

Need to wait for tick, but we won't. uh It creates Flash.

A

And it does not dispatch connect, expect stored dispatch not to have been called uh expect, create. Slash two have been called with.

A

A

Source is already taken in this directory.

A

A

All right, oh no I, have a an F described already happening.

A

A

When renaming and file has been deleted,.

A

So, let's see a story that stayed entries.

A

I'm just doing it this way, that's fine I forgot what our cool file was called. It was called Js.

A

And renaming and file has been deleted.

A

Well, let's just do that when we set up our state, so I don't have to maybe keep different types of State on.

B

A

Delete at Js yeah we'll do that and then I'll do object, assign Source State entries the leader.js.

A

A

Okay, so then I don't need this thing, and I can just open up from here and say I'm going to set it to deleted JS and we're doing all that submission stuff great.

A

um It does not create slash.

A

Flash not to have anyone called.

A

Yes, this is working hooray.

A

A

Two have been called with rename entry. uh We can make sure we're doing all the path stuff correct. You know that'd be great if I move this deleted one into Source. Let's do that. That's a great idea! I do Source deleted. Okay,.

A

To have been called with rename entry, yes name, oh we're setting it to Source deleted.

A

Oh please! Oh please! Oh please! What's wrong! No! Oh! It's because I didn't do this right! All right, we're so close! So close so close.

A

So path is Source, parent or literally Js name; the lead of Js apparent path, source.

A

Yes, yes, oh right, we are in business. This has been migrated and hardened cool.

A

uh So let's go find I think we have some unnecessary next ticks. Let's see, is this really needed.

A

It's not really needed.

A

A

Not sure why I'm not sure why it's not needed, uh maybe it's probably a good idea to leave it, but let's see other ones that are definitely not needed. I, don't think this one will be needed.

A

uh No, that is okay,.

B

A

I'm thinking these ones, these ones have to open. I would like to keep but I'm thinking these ones. I don't need yeah, the ones that were after the trigger cement. I, don't think I need those ones after open, I think I do need um so one way of handling that.

A

Okay, yeah, that's fine cool, let's Commit This, all right finished migrating um modal spec to V2 uh pardon the coverage.

A

A

Improves the coverage from scratch.

A

Cool, let's push. Thank you. That's all I've got uh adios.