GitLab Pair Programming - Frontend, 29 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: FE Pairing - 20220729 - TDD on fixing emoji autocomplete search with leading space

Description

In this session we talk about webpack bundles, fix emoji popups, and then talk about organizing feature specs.

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/93572

00:00:00 - Question about webpack bundles and MR's that remove dependencies
00:07:40 - Exploring is-this-known slack channel
00:17:40 - Fixing emoji autocomplete with leading space
00:50:45 - Question about rspecs with shared contexts

A

We are going speed, hello and welcome everybody 29th of july another week of pairing, um a question that I stumbled up on today and I've. Maybe I've even answered it for myself, but um it's still um still a funny observation as I I suppose. So um I was reviewing this merch request by ip and it is kind of trivial they're still super beneficial, because the only thing it does is check in our package, json being like okay, um there is a dependency in there that we are not using anymore.

A

Let's get rid of this cleanup work so far, so good, fantastic stuff. um What do we have over here? Another cleanup um another cleanup entry for a package.json dependency, not needed anymore, so far, so good, perfect and some things they get more interesting when you have multiple of them and similar merge requests kind of fall in that perspective, because I was like wait a second, we are removing things from our package json. What does our package json represent?

A

Well, we'll kind of be feeding webpack this thing and then we'll create a bundle if we're removing something from this. What about? What about our bundle size? And I feel like what's kind of interesting is for this, mr, we are getting at least the um the bot or the tool which is generating. This report is getting a significant reduction on four um entry points.

A

On the other hand,.

B

Sorry janet, could you just double check? Could you double check that one because I think quite often it may not be, but quite often it says that this is a complete guess and it's probably wrong. Is that a prefix there you go? We don't have exact data, so we've used data from this one, so it might be complete nonsense, but I could I'm.

A

B

How reliable that is, or fair.

A

Point um thanks for mentioning this haven't uh checked out, then.

C

It could happen if your branch is the more out of date. It is the more it could vary from the current state of master. So it's also good to do like a rebase and look at the numbers immediately after the rebase, because when.

A

Okay, especially if the mr.

C

Is not in draft mode, the merge pipeline will run against the latest master and it could be okay, delta.

A

So we so we could compare against different bases here kind of.

C

With especially what the merge uh primal enterprise requests done,.

D

To add another perspective on this too, removing a package from the package json, that's not being used- should actually not affect the bundle size at all, because webpack only follows things that are actually imported and will follow it to where they live and node modules does not read package json.

A

Fair point: I was kind of going in a similar direction. I was thinking about async imports, but you were absolutely right. That would probably be tree shaking, I suppose, those unused modules. They should not ever see our production, bundles kind of yeah.

D

A good, a good signal here with this comment too, that hey something's off, is that it says new entry points.

D

That's really weird, like we don't have any new entry points with oh yeah, so um I would- and so I would the way I would reveal this kind of mr is just looking for that keyword, that's being removed everywhere, uh because um it's like here, aws sdk, like we may not be using that in the javascript code, but maybe we're actually including something in our style sheet from this package and or um maybe we're actually static, serve something from this.

D

So there's all sorts of ore, like maybe one of our dependencies is, is depending on this, without actually having declared it.

D

uh We have linters and stuff, for um we have linters for, like direct usage of a package, needs to live in package.json in the code, but there's all sorts of indirect ways to use the package, and so, whenever a package being removed, I would just global search on the keyword like code mirror and see. Where do we reference it? If we don't really reference it anywhere, then it's probably good to.

A

Go plus the plus a queen pipeline should should help a lot as well awesome.

D

A lot of faith, you put a lot of faith in those pipelines.

A

I yet have to be convinced otherwise, but I I do see where you come from.

D

I I put I have, I have more faith in red pipelines. Red pipelines mean something good right, green pipelines. They don't mean anything.

A

Green problems might be something broken, but we don't know yet.

B

On the first push, I agree after a few, I'm not so stressed.

A

Them, okay, um yeah, it seems, like uh I maybe put uh too too much trust uh in our bundle. Analyzes two um as well, but um thanks for the clarification. So um to summarize things seem odd, but and that's for a good reason- and this is more of a very rough estimate than an actual truth. Because what would you mention paul that I'm 100 with you that um if we remove an unused dependency, webpack shouldn't have any differences.

A

But I would argue that that might be the case and we still see some weird kind of differences um in the in the bundle size. Analysis.

A

Stupid cool and yeah- that's just something I stumbled on today. So um thanks for brainstorming with me, what else do we have.

D

Yeah we can, we can jump to the is this known channel. I can. I can share my screen. We can jump there. um No one thought about it too. I said that a package could be um a week.

D

A package we immediately depend on could be using something from there, but if that was the case and we got rid of that dependency, webpack build would fail so like webpack just follows the import graph, even within node modules and all the way through.

D

So that's a good, that's a good thing, the only the other ways, though we could implicitly use it, is we sometimes these packages have more than javascript, and so we could use the css and we need to be aware of that or we could use um other kind of static assets that we're referencing somewhere. So um that's a good question. Thanks for bringing it up, that's a really good question um I'll share my screen. Let me make sure I'm not.

B

Did you have another one yeah, because it's just that one um yeah.

A

That's that's it for a moment, cool.

D

Okay, so we're going to dive into is this now? That's the topic of the day. Let's do it share the screen, I'm going to share the right screen all right: okay, oh yes, and while we were talking about diving into is a snow and I snuck my issue in here, which I was so excited to do. uh Oh, this is being addressed already.

C

D

Oh great, um so my issue was, uh and so this is a good reason why I bring it up to the business now, because I would have just created the whole issue for it. But hey it's already being worked out, but my issue had to do with when you're attaching.

D

It didn't attach, inside the table cell, it added a new line to attach uh the file which is.

B

That just because it's wrapping or no.

D

It's not is it got to be something something changed when we moved the attach file, hyperlink button thing and we moved it to this button on the toolbar. Something must have changed there and I create these image tables often, and that was really frustrating, because.

E

D

E

D

Kind of uh makes it hard to build these images.

F

D

Let's see oh look, creating an on-demand scan has an empty drop down for the scan schedule. Oh man, that is, that a drop down, or is that supposed to be a time?

D

That's interesting. I don't really know anything about on-demand scans.

B

I think you're right, it's probably meant to be a time box rather than a drop down. Isn't it yeah.

D

B

D

Doesn't look great.

A

They're a little painful to to set up and reproduce, and I'm afraid that is probably not the easy thing um that I definitely know for sure.

D

um Next sounds like it actually sounds like you: have you already have it set up.

A

Let me double check, I'm afraid. I probably with my last.

B

A

Reset it's probably gone.

D

Yeah, that's tough. um This is about deleting.

D

Okay, this is a process about deleting projects, and I know that that is gonna, be um that's gonna, be a.

E

A

uh While we're scrolling through this, I might have another idea yes to to check, um but it it involves um the the at who library. Once more. That's.

F

Cool, that's fine.

A

Everybody's free to leave now of everybody, um no, but it um it is super. It's it's super similar to the um the key listener event um that we've been we've been dealing with. If you would- and I noticed from the top of my head, if you would um press call answer on an mr comment and press colon, it would open the emoji picker and the problem with that.

A

It will now give you you might be in a situation where you want to browse possible emojis, um but it will give you a limitation from about 10 ish. Oh.

E

A

Emoji, and that is quite annoying because you'll be like what is this thing called smiley, slight smile? What what are you referring to you most likely, if you know you'll, be scrolling up all the page um to then now check for the list and copy paste and go cry for a couple of minutes afterwards,.

D

This happens to me a lot um in our teams. Retros, we have a high five section where we high fives to people and the emoji is something like hand. Splayed, and I always forget the word splayed, and so I'm like typing spalding,.

B

It can't be as bad as um I use fingers crossed quite a lot. I think I've probably shared this with you before. Unfortunately, a lot of things default when you type finger to middle finger.

F

B

Often stuck my middle finger up at people that is highly inappropriate.

F

Yeah, I wonder if we.

B

Should consider removing that from certain platforms.

A

I know that I feel I've never sent it, but it was close.

D

That's a very different message. I.

F

Hope so I hope so.

C

F

B

C

Conversation though I never use fingers crossed, I'm just like I'm an optimist, even though paul wouldn't call me when I'm a pessimist, falsetto the optimist.

F

That's funny it's.

C

Gonna work, of course, it's gonna work.

F

D

I you're uh you self-identify as a pessimist. Chad.

D

All right, um just don't just put it on me all right, let's uh get gdk running and we can figure that out.

E

C

So these are the optimus, for they have made backups.

D

Yeah and they are optimistic about their backups, the optimism has to start somewhere like it's, not pessimism, all the way down. That's so bad! It's about.

A

Yep um paul, while you set it up, maybe can we look at a merge like a random, mr and check if we can see the behavior and how we would wish for it to behave.

D

Yes, let me um pause sharing, while I log in.

D

I'm hoping sharing is doing its job. I'm really trusting.

A

Yeah, I'm not saying anything.

D

I'm really trusting zoom here.

F

It's broadcasting sharing all right, we're back.

D

um Here is uh here's a random mr.

A

um If you go down to the comment section: okay, yep colin, there we go and it's only one, two, three four five yeah and that's unfortunate. Oh look.

D

Here's fingers crossed.

D

Look at that it must it liam. I must know that you regularly use the middle finger.

B

I I think it's probably not this platform, I think it's probably um discord or.

D

Yeah um splade is that's, that's my that's the one that gets me. So are you thinking? We want to show more emojis.

A

I I would say so because, um like I would not necessarily I maybe I would not even bother with these search results like if you would say column m, then maybe that is all right, but at least for the for the very first beginning for the column. I would expect it to allow me to browse through all the emojis.

B

Yeah, that's I'd like the sound of that, because if we show the whole list like paul, just showed us when we click on the react button. Is that using the same list or are they completely different? No.

D

And maybe that's a good thing, I um that's the good thing. Well, I'm well, I'm saying maybe we should use this one like we shouldn't try to continue using ad. This isn't using ad like so that makes sense.

D

uh That's a harder problem. One of my biggest issues is, if I'm here and I'm doing like.

D

The yeah look at that look at that. I hate that.

A

But that is oh, that is actually oh, there's there's already an issue for that. Let me go find that out, because what yeah yeah exactly because what you just you were about to. What did you do you collin and spacer just call and.

D

If you do it next to the word, it's it doesn't do it, but if it's anywhere, beware that it's.

A

And you know what that is not, and that is where the issue is coming from, that is not 100 only 100 acceptable in yemo. That is only that syntax is um 100 acceptable in french as well, and our french users are not very happy with that. Behavior wait. French.

A

Never mind yemo french language, yes, that the one that is spoken in france and many other cards countries wow. So they for don't ask me, but it seems like it is super um it's just before they do a comment.

D

Let's fix it, let's fix it, it's not it's not good. So.

A

Wait, let me let.

D

Me go find the issue you're saying it's not even in a code block. Yes,.

A

What that's, what I'm saying.

B

So sorry, what the french use the is it a colon or semicolon. I always get confused. I.

A

B

They use it just in in in language sort of thing.

A

Exactly they, I don't know, if that's for every comment they do, but um every once in a while they will be doing a space before the column, which is absolutely appropriate.

B

So, and we want to stop the emoji picker coming up, do we or what do we? How do we want to handle it.

A

Yeah we wanna, we wanna stop it.

B

But how do we know that they don't wanna, do an emoji.

A

I feel like the suggestion has been if the emoji picker pops up and you would hit space for another for once more then it should close and just just go away, because currently it doesn't, you would have.

F

D

You're right, yeah, yeah.

C

D

Oh okay, that's yes! Let's fix that.

A

um I I found the issue, let me and I'll be putting it into the zoom chat, great.

B

Find janet great, find really interesting one to tackle.

A

And yeah already sitting around for a year, here's.

D

A I guess they would use it like. We would use the hyphen, maybe in english they're saying like this is this film is interesting, it's a classic like, and so they would use. They use the colon that way at this, but is that every time they used it?

D

I guess they use it in other ways, but that's I see one example of it being used and here's something too, like I guess someone said this yeah.

A

So there are definitely cases and, as we can see, oh.

D

Yeah space, common space and yeah, for here it's replacing a comma yeah, that's a big deal. Let's do it, let's fix it all right, I'm sold speed all right.

D

So so the fix is. When you do colon and then space, we close.

A

D

F

A

Yep, it seems yeah, that's um that's quickly. Like probably the issue already has a couple of um those user experience goal there. We go um look at that face.

D

A

The user experience goal is when the user type column followed by a space. The auto complete component must be closed, so this should be good rest. All.

D

Right, let's figure that out, um let me open up.

D

I'm going to use a tool to help me keep track of time. I'm going to set a timer for 20.

F

Minutes so here we go.

D

F

D

It's really helpful, but since we only have 30-ish minutes left of our pairing, it's gonna help me.

E

Spend too much time on one thing so.

D

We know we know this is gonna, be in at hill land. We know that uh that is in our what is it called our.

F

Auto leave: what is it called javascripts.

D

Well, let me just look for ad who.

A

Yeah, let me just yeah in the chat I'll just link the dmr we've been working on with the sk paneler, because they'll probably have some of the paths that we might be touching as well. Oh.

D

My gosh, who is adding functions to this file, we're not supposed to change it. I'm joking, like I'm sorry,.

A

uh Five years ago,.

D

So wait, let me go back, though um do we do we do the same thing for users.

A

Seems like we don't right, that's emoji! Only it's emoji only oh that.

E

A

Even more annoying for all of our french friends, because they will probably not have a space behind an epicenter okay.

D

Yeah, that's really weird um I've. I wonder if it's always done that.

E

Let's see here.

E

What do these things mean? What does skip markdown.

D

Character test mean, oh man, so that's one difference I see with the emoji thing is uh so here we have.

D

E

Display template value.

D

I wonder if we're doing the thing for search, insert template, skip special.

E

D

I wonder: what's triggering it to hide um when we're like? Do a member search.

A

Is this fixed for the hashtag, or do we have the same problem on this? Let me see.

E

D

So fixed okay, only emojis.

F

uh Interesting.

D

Matcher, it's got to be in the matcher.

D

Oh, I wonder if that's got to be it. Let me.

E

See uh call backs matcher that is followed by. Oh I've, never seen that followed by.

B

uh You've reminded me of something that I tried to tackle a while back and gave up on that. Maybe we'll look at in the future yeah. Let's.

D

Let me let's let's play around: I I have a hypothesis, it's in the matcher and I'm going to do something where I just return null all the time.

D

I'm going to do that by saying. If true.

A

So what do we expect? Not the emoji.

E

D

E

Open yeah: that's what I'm expecting.

A

That's the case that we're having a problem with fragrances- and that is usually where I close the case because.

D

Oh yeah, okay, it's not open, though maybe we should create our failing test for this.

D

What do you? What do you think.

A

Pest river love, it.

D

Yeah our failing test- let's, let's figure out how to test how these things are tested. We have um we have these specs uh and you, you created some tests for this recently right.

A

um I let me double check if it wasn't exactly that far, but I really hope so and put it back up.

A

I did what's the question, you need a part. No you've got the path so.

D

These are just testing ah these are just these are such.

D

These are testing very specific functions.

D

um You did the no events listener. One okay, yeah yeah,.

E

D

All right, um I happen to know that we have another set of tests that could make this.

D

That we could use for this. uh How.

A

Are we like just to get this right? Are we looking into testing just via fake and keyboard inputs or.

D

We have um we have front-end integration specs, where we like target page test things at integration, so not necessarily at the unit level as tests of behavior, because.

A

They're not in we're not in our spec land. We are in yeah.

D

Fill in javascript land, but okay.

A

D

In this environment, there's a readme about this, but the backend is all mocked out uh with certain specific routes, including like fetching all the emojis. So because it's marked out, we can actually just trigger.

A

But will it start a browser if it runs.

D

No, no, it's still in jstone land, but.

E

Like so, here's.

D

Here's a really cool test that we have is for these searches. These things pull up, and so I think we can actually just simply add for the colon space. Nothing shows up right. Okay, that's good! Let's try it out. Let me see if I can run this first.

D

And so this is in just integration, land.

D

And it's probably going to yell at me because it wants me to dump the schema because it starts to back in so it starts a fake back end using a really cool library called.

D

Mirage and so we have a whole bunch of like endpoints that were mocked out here, never heard of that. It's.

B

Really cool, it's really.

E

I've never seen.

B

I've never these integration specs on the front end.

D

It's really helpful right so, like imagine the web id that has so many components going on and uh we originally wrote like 10 feature spikes for this and it became the longest r spec in the suite it took like 30 minutes to run the 10 specs.

A

Yeah we should take this with a grain of salt because um I know starting to understand why paul doesn't um doesn't trust the pipelines we're having.

D

There you go uh the, uh and so then we try to push these down the pyramid, so we're testing the id whole ide bundle um and it and and what I really love, is just how readable these tests are. It's like so we're going to update the file and, like that's all contained in some logic, of what that looks like we're, testing the whole page bundle, but we're still in jsdom blank, because we're still really interested in performance and stuff, so um yeah, the front-end testing environment, it's pretty it's pretty nice.

F

It's awesome, yeah.

D

Definitely a little quirky, uh but you know nothing, nothing that us professional software engineers can't handle.

D

Yep, oh yeah, if you're running into strange front-end integration test errors, you should drop and drop a note on the issue and your comment is very important to us and please stay on the line.

D

Cool all right. So uh yes, yes, yes, yes, yes, space.

A

I don't okay, what are we like in line 46? What are you testing the circuit ideograph except? I don't wait. What.

D

So we're testing here what gets returned by autocomplete. It used to be really bad like we had. Our search would not match right stuff. Okay, I see so this is we're trying to order what makes sense.

D

The things that should be auto completed with emojis here uh so this.

E

D

So, like hey, when they type in red, this is what gets auto completed. Maybe credit card isn't the best thing, and so.

A

Yeah yeah yeah sweet and that's just circuit. That is just the uh expected results for, if you type in circuit, okay, yeah.

D

For circle, I think you would really want red circle like you'd want red circle to be up there. Maybe um yes! Yes! Yes! Yes, look at it! Look at it. We got our failing test. ah Yes, it's gonna be so easy all right, I'm so stoked.

E

B

I'll just pick your guys brains, one second, sorry to interrupt your flow. um Have you seen examples of jest specs complaining? Well, actually, it's es lin. I think that's complaining that you're using the same test title in multiple blocks when working with described each is yeah. That's frustrating.

D

Well, I you can disable it. I guess that oh.

B

Okay, okay, that's it.

D

That would get frowned upon the other.

F

A

Have you have you considered adding a two at the end of the description.

D

That's probably the other idea um yeah the lyncher whatever lentor is. There is not sophisticated enough to realize that if you have the same described in multiple contexts, it shouldn't be treated the same, that's yeah! So it's a little frustrating.

B

Thank you. Sorry! uh No sorry for interrupting you.

D

No, no you're good, so this is um this is a look behind right. I don't think that is what we want um and look. This is saying for anything that is not a colon. We just keep going.

D

And that's not really what we want right.

A

We want to keep going for everything except the space.

D

Yeah, let's see what well, but maybe not even like special characters.

B

D

Just yeah, maybe just a to z, not tonight.

B

D

So like, if I oh point do I need to refresh this, I did I get rid of my.

E

uh All right, I don't know.

D

Like do we wanna? Oh, it is already skipping some characters, so I guess you're right. I guess I guess yeah. Let's not do.

C

When you look at the emoji spec like or do we know that it's what subset of characters or the actual names or what's being searched.

D

I I am now realizing, I think, related to that we want. We want to be able to do space inside right.

B

Oh, yes, only the first character that you want to.

C

D

So let me, let me add, to our tests.

D

Red should return the red circle. uh I want to make sure we don't lose that behavior.

E

D

What ah what's the problem I did already? Oh, I already broke this, I think. Did I already break it? I did that's good the thing I added that test.

F

D

D

Oh gosh, what is wrong with you? That's weird: it's not.

F

What I would expect.

D

um Square this this that is so weird, um let's do a different space. I think these circles- oh yeah. Oh that's! Actually, what it's doing look at that. I don't know what that is. It looks like it's a different language. um It's gotta be like fortrans yeah,.

F

Interesting um all right.

D

Red ci we're all familiar with red ci.

A

F

Large red circle, thank you.

F

D

All right so now we have preserved, we can search on spacing that's great.

D

All right, I'm going to add a comment.

F

We can have space side.

D

Do you have an issue to the? Do? You have a link to the issue? Did you already link it in there.

A

um Yeah, let me let me see if it is in the chat, but um I hope it is yeah. It should be. The very last issue I put in there.

D

Is someone already someone already fixed this.

A

um Good call I haven't well.

D

Let's link to a merge request: oh, was that your merch request, yeah.

A

Yeah, that was the one um about the the escape key listener. So um no, but it has already the issue- has five thumbs up. So um there is an audience awesome. Okay,.

D

uh Cool we got our failing test so now. The big thing I think is.

D

Here in regex land, we just do not want it to start with a space.

C

D

So I'm almost tempted to just say.

D

D

uh Yeah, I'm tempted to just say not.

D

A

How do we feel about pacing this thing in regex 101, because I'm I'm a regular I'll admit.

D

B

I don't think you want that to be optional, though, do you isn't that what the question.

D

Might mean no, I know.

F

D

Because, then, that.

D

F

B

Enough and is, is a space acceptable. Do you need a backslash s or just backslash space or something maybe a space is okay in a regex I don't know so.

D

Here's here's how it is. I got it now. I, on the other hand, love regex.

D

I really do uh so. This is all good after the fact and we're saying we can have any of those.

D

So we are going to have, but we need it to start with not a space.

E

D

B

That's just the first character. I don't think you need to put any question mark stars, pluses, anything or.

D

That, yes, it could be, it has to be not a space or a colon, and then we can use spaces.

B

Yes good point and you need to use a pipe because you got two characters in that square bracket or not no.

D

Square bracket, the carrot means not and.

B

But then you're not saying it's not space colon. Are you saying space or colon.

D

So the brackets is a character set and then every character in there is going to be the set. uh But then the mirror is saying not in this set. uh um But this is why we write tests.

D

Yannick is like man, this is, I hate, regex you're looking like this is not good.

B

If it's not regex crossword, I'm not interested all right.

D

This is, do we want to try it out, it's probably worth trying we want to yeah. We want to to try so there's a you're saying: do you have a regex website of your choosing.

A

um Kinda yeah, let me um let me put it in the new chat.

A

This is what would save me a couple of times.

D

Okay, insert your regular: oh that's just a regular expression. um So here's my test string boom that matches.

D

um Are we doing this.

D

I want it to see if it'll match the whole. Oh yeah, if I put a dollar here- yes, yes, yes, so that matches yes, that does not mind. Anything here is not going to match, but if I do anything here, this is starting to match. Yep.

F

Awesome, why did you start matching super bob? What happened.

D

Did I do something? Is it one match still matching space.

A

Still matching, oh.

D

It was processing, it was, and I wasn't giving it time I I was overloading it patience.

A

What about another space now.

F

D

A

Soon, as I add.

D

A space here it's going to not gotcha what about a column at the end, a colon at the end, uh yeah.

E

F

F

D

And this is doing some sort of searching for colon before, like. I think I think we're good, let's test it now and here and then we should begin. Oh, my, my alarm is going off. Oh no, all right just in time it feeds yeah. We will we fix it in time. That's great!

D

um So if I do large red circle, yeah, that's great, that it doesn't show it up here. That's great! This is all working. So let's, let's start, let's start writing some french.

D

I thought this would have shown up now. That's.

F

B

uh Because you need another character because you've put the not space one in, I guess, haven't you.

B

F

I think you need.

B

To put a plus next to it, to say that it's the optional or.

D

Is it a question looking at this? It was matching if it was just here, because I said all of this group is optional.

E

D

um Let me run our test again double check.

D

Okay, so it is working with all our and our test is working. It includes.

D

Let me add a test for this case that we're.

F

Running into when we just ran it, what did we get.

D

We don't want it to be empty, um so that's what did I change here again.

E

D

Oh, no, it's got to be this capturing group thing I think. Maybe um oh yes, I bet it is that.

D

All right, let me do let me do this.

F

D

Compared to our last uh pairing, I'm going to do my console log debugging. Instead of fancy general script.

D

So here's the subtext that we're searching for, I guess and then I mean.

F

Putting the match.

E

Are you upset oh gosh,.

D

ah That's so interesting.

D

Oh, how interesting.

D

So um previously, this capturing group always existed.

D

Does that make sense? Because I didn't have the question mark there.

D

So it would match- uh and this capturing group would just be empty because it was a whatever star so and it didn't have anything so be empty. Yeah.

B

D

Now I'm putting this question mark here and so it's not existing and so it's can. You move the.

B

Question mark to be after the square brackets with the space and the colon would that help or not.

D

Move the question mark uh move.

B

It exactly yeah, and I.

D

When I did that, regex can actually just like skip it like uh okay yeah, so I I do want to do this, but I think this.

B

D

That I want to do is um I think I want to do.

E

Oh gosh, oh no. I.

F

Want to do this.

D

Gotcha, that's a lot of operators and.

D

D

F

What do you think.

B

Well, if it works, we can tweak it if it doesn't. We burn it to the ground exactly.

D

uh Let's see this.

D

I'm gonna the the way to make that cleaner is to do an if.

E

uh Return match.

E

Since we have question mark the.

F

Group, it's possible.

E

Oh, we don't like doing results for currents.

D

What do you think.

B

Yeah yeah, I like it.

E

Okay, that was it this is it I'm feeling it.

D

So our test here is going to fail because, yes, yes, yes, yes, yes.

F

B

Do you have that shift and alt pull.

D

All right, our tests are all passing. This is going to work. I could feel it. This is definitely going to work test.

D

All right now, let's write some french okay.

B

Well, let's did you try like red circle and stuff with the spacing as well just to make sure we haven't broken nice, nice.

D

Let's make sure our emoji and code feature is working. That's working! It's great.

D

B

F

B

Fact you feel like necessary to put genuine french in there.

A

Can have a realistic test case.

D

Yeah, I don't know how to type that character. Oh it's the other way. Oh no.

B

That's, I'm pretty sure, that's not french. However, I think.

D

This is the railing.

D

A

D

Cool yeah, it sounds good. That's.

B

I think you've nailed it that.

D

Was the only one that had that? uh That was the only one that had that issue right.

A

D

Okay, cool and yeah, we got, we got tests for it hardening it, so I feel like we fixed it. Let's create this, commit and call it a day.

B

Can anyone possibly be upset by the fact that we've changed this behaviour.

F

No, I don't think so. It's impossible for someone to be upset about this.

A

It was like um if you would start the search string with a space like that was pretty useless before anyhow, so I don't like what kind of emoji would you be searching for? Let's start with space.

B

Don't I don't see a valid case, but you know what it's like. You think.

E

B

Yeah at the time.

A

Well, if so, that's another issue for next week, then.

D

Cool all right well, this is super fun I'll, create the commit I'll, create the mr um and I'll upload. The recording.

A

um Fantastic fantastic in um if anybody has more time to spare, I actually came up with a little um syntax quill that but like everybody's super free to leave. But um if anybody still wants to hang out, then um there'll probably be um like um disclaimer um speaking about ruby, but um syntax wise. You probably could help me out. Let me grab the screen because that just came to my mind.

D

It is, I have time and yeah if lee or chad, if you all need to hop off, don't don't feel pressured.

B

Just for a few minutes to be teased with what you're uh looking at.

A

Awesome um we are speaking about the um aspect tax tests that I introduced that I showed you last week. um If I remember correctly- and it is about the let's- let me put this up yeah. So that's how it currently works. um We are we there. There are plenty of tests running there. What we want to make sure is that we are looping through it um with a false and true flag volume. So so far so good this is working. The current version is working perfectly fine.

A

um One downside that it has to it is that it reduces a ridiculously large diff, which is um because you have to indent everything. That's in there, so um it's uh it's just massive um and a tip that I got from a reviewer. Let me let me see so yeah.

A

This is all of this nasty stuff because it basically doesn't have any changes, but it it looks like it has, um and a tip I've got from the backend maintainer is to um use this with a shared contacts, because that will probably reduce the the diff quite big time.

A

I'm not too familiar with how the shared context work, but um that is something we could. We could figure out together, like I kind of I kind of get it. What I don't um so going by this example, um and I feel like I've already pasted something in there yeah going by this example, and this is just a dummy for for now, um what I'm having trouble with is: where is this variable defined like? How would I approach it.

C

It should be up at the same level as the describe it shouldn't be inside the loop. It's oh okay directive. That says this is sort of yeah.

B

Like you, don't I don't think you have to you, you can do it that way, but I think you can also use let's to pass the variable if you want as well. I don't know if there's one that's favored over the other.

A

Okay, so so, which level would that go like just below the describe.

C

Okay, we we're talking about two things there. I don't understand what you're saying about a let.

B

Oh, so I was just saying that I think you don't have to pass the variable. Do you for shared uh shared context.

C

First, let's just take where it's supposed to go. First, though, it needs to be at the same level as the describe.

A

Okay, so just uh starting at line nine, basically yeah exactly okay, sweet. um So then that would then allow me to get oopsie just the original context. So I would be able to delete this and delete one of those ends and put this back one level correct right, oh okay, but that's still like I'm now for the context. I feel, like I've doubled this now, because we're having a shared context with a valid username and password in a context.

F

C

So what is that uh context? Testing? Like? Did you add the with valid username and password.

A

um One more time didn't really compute to me.

C

Did you line 21 was already there or did you add it in the smr, and that was already there? Okay, so the.

A

To just for your understanding- and the only thing I did is, I want to um add the before- do and stop the features like once with a true and once with a false value. That's what I'm trying to do right so.

C

The shared context would be named, something like with feature flag enabled.

C

Does that make sense to y'all.

A

Well, it would make sense for the first one and on the second one I want to disable it. Okay,.

C

So you can make a separate context if okay, so we would have two.

A

The normal behavior.

C

Is all flags default to enabled? So I think you would just need one context with disabled, correct.

A

um I definitely want to make sure these tests are run twice with both of these states.

D

Do you need, um do you need this, these contacts to be used outside of this file? Is it just with this file.

A

I actually asked the back and maintain about this and we agreed that like it can be shared, but in this case we have different examples, so it would be easy. It would be used mostly for structuring code and separate files.

A

So the way I read this for now, I would um have it for this file only, but we are having multiple files that are affected.

D

We did something really similar with the nav chad. Do you remember.

C

Yeah but let's, let's get it working in the single file. First.

D

C

But yes, I do remember what you're talking about and I think it's uh so you think about the the different axes of of matrix that you have so the with few factor authentication and then with valid username and password, and it's got a lot of different things under that right.

C

So all of those are running.

C

C

Different tests to test different things, so this feature flag could potentially affect any of these tests.

A

Might sound weird, but that is the case to give you a quick background on this. Dsmr is introducing a redesign for the for the login page and the. What we don't want to do is touch any of the functionalities, basically just a visual layer, but if we would only deal with the feature flag, toggled on then out, our our specs would only test for the new version and not for the old anymore, and since it will probably take us a while. Therefore, it would be best to test for both cases.

C

It sounds exactly like what we did with the nav redesign paul. Do you have do you have that? Mr? Are you looking for it? Let me see if I can find it yeah I'll see you.

D

C

So yeah yeah, like ordinarily, like a feature flag. You it's like isolated uh one or two specs, but in these cases, where it's like multiple files and do it in a a less intrusive way like exactly like this, without having to indent the whole thing, and we when we do, we like mixed it in or something.

D

Yeah, let me let me see if I can find it uh lee lee parted with this. um Can I uh let me let me start by sharing all mr parts. Oh man, good thing. We made all this traceability and stuff. No, I wasn't gonna share my screen. I'm just gonna share um this this link and then you can open it up and we got it.

A

D

Nope go to overview.

D

This is the this: is the spike m arm that got broken up into a whole bunch of parts. If you scroll up that link at the top, those lists of mrs at the top should be one of those.

C

Where we like explain the whole approach and why we did it and how.

D

Yeah, if you go to the that combined menu flag, feature specs, that's got to be it right.

D

C

Yeah, this is yeah.

D

For, however, music, mr.

C

uh If you click on that full context, spike in no no sorry the combined menu one, it's the first one in the all mr parts.

A

um Let me go back so.

C

I'm not looking at your screen anymore, I'm looking at mine.

A

Catch it um combine menu like okay, it's it's, mr 635,.

C

You're on it and then that workflow for how we are using pending examples.

A

Back in the overview, workflow conf.

C

Oh yeah sure this explains exactly what we a way to do this, which is a little bit different than the standard approach, but for something like this, where, like you're, changing everything and you want a feature flag around a bunch of different things in different files, this is.

A

C

A

Awesome: okay, all existing specs, which fail with the flag on are wrapped in a shared context and executed from tunic. Exactly that's what I'm, what I need.

A

Okay, so we're on the same page: let's see how this is implemented. um Shared examples combine menu of future flex. Examples before do stop feature true.

A

A

Where would the false one be like? Is that because it is false by default deflect? What do you mean? The old one um because true is is hard coded in here, I'm looking for the so that would be the example for the uh stopped license features when it's when it's.

C

Like that's, not our flag, ah okay, I see unrelated go back to the diff.

C

Can you do it side by side, nif.

A

um Wait what this should be in here shouldn't it.

F

C

Knew that paul.

D

What are you saying, I'm.

C

Creating that line side by side editor.

D

It's at the top.

A

ah There we go okay, thank you.

F

There you go here.

C

F

C

C

I'm trying to remember this. Let me know if you meet me paul.

A

Which flag are we speaking about that'd, be interesting.

C

A

The name of it.

D

uh The combined menu flag, okay,.

C

Yeah combine meaning.

D

A

Oh, no, no! No.

D

F

D

Oh yeah, this is really interesting. Oh yeah yeah. That was really interesting, so we wrapped that's right. Oh that's! So interesting. If you go to the very bottom of this.

D

Oh, so you see the line 32 through 42.

A

D

D

Yes, so the intention with this workflow- and so you may not be in the same workflow, uh okay, we already have all the tests passing, uh and so what we did is take our main, rather than rather than the shared example being rather than the sorry, rather than the shared example.

D

Flagging the putting the flag on and off the core code is the shared example and then your context around it or the core tests for the features. The shared example and the contacts around it are flag on or flag off, uh so that that it behaves like combined menu, feature flag examples, that's actually what's testing this operations link or something like. So that's. Instead of calling that shared example, combined minion feature flag examples, maybe it should we could have called it shared examples, operations like stuff or whatever.

A

uh Okay, but that's what I need as well, isn't.

D

It, yes, I think so the thing that might not you might need you might not need we merged this first before writing the code to make the test pass, and so what we have done is on line 53..

D

F

D

um If you go back to the to the diff.

D

uh There's a really cool rspec feature called pending, and so this kind of enables you to do somewhat of a like long-term test-driven development thing where we can write a test for something and uh say that.

D

Say that it's basically flagged that it's pending, and we only do that if um you notice on line 33 when the feature flag is on, we had no. When we this was originally written, we had no code for it and mastered yet it just basically broke the top nav, and so that's when we would actually flag it as pending. uh So we have all of our tests ready to go. We could try out what tests pass when we do this um when we iteratively build out the feature, but this enables you some test driven development.

D

You might not be at that stage because I know you've already been working on this, so you might be just needing to cover it with tests. So.

F

D

Stuff, you might not need, but.

A

That is thanks for sharing that's pretty pretty cool yeah. For for a future example, I was not aware that this is actually possible.

D

The the thing that you, the thing that you will might need is, um I think, breaking off, and here I think we chose that 32-50.

C

Is what the the pattern you'll need, like? You, have two contacts with the flag on and the flag off.

F

C

But then the it behaves like like that wraps all of your previous tests, so that would be the previously existing.

A

C

Context, you have so like with two-factor authentication.

C

Well, like you're turning this into a shared context,.

A

Yeah yeah, I feel like I've understood at least half of it. So that's that's great.

D

So I would on line 33 so go ahead and get rid of you know, line 10 or you can keep those that's fine, but like line 33 instead of a describe it's a shared context. Now.

A

D

And uh no is it shared contacts or shared examples? Are those the same thing no.

A

They're not aya, that's probably what it should be.

C

Yeah, but those should just have examples in them that context, I think so, but.

A

There's context any.

D

Shared content, there are contexts for the examples.

D

Okay, I don't know I. I would call that the following the same pattern: whatever tasks were there previously, I would call that shared examples.

C

Then you don't need to um when you remove the feature flag, you just have to change it back to your context. Instead of a shared context,.

D

C

Is the behavior.

D

Based on what you call it, it's the same thing: it's just calling it something right.

C

Yeah but like to minimize the the changes when you remove, you know when you finally remove all of the feature flag plumbing, you would only have to change like remove the shared underscore.

F

C

Yeah right so then, this line, 15 and 25 would just be like with two-factor authentication.

D

And we might need to move.

D

We might need to move the colon js to the very top.

D

um I don't think so. Does that work with shared stuff.

C

Yeah I mean it, should it, I think so, but.

A

It adds metadata.

C

To the context, whenever you encounter it good.

A

Job, so this basically should do the exact same thing as it should have been doing before.

C

Yeah, but you want to go ahead and change 10 and 18 to be the name of your feature, flag.

A

Yeah definitely want to do that.

C

I mean just change: combined menu yeah to yours. There you go.

C

I said if you run this whole file, what does it do.

A

Yeah, let's see.

C

Yeah, it's like you're inverting the pattern that the maintainer told you to do. You're like everything's.

B

C

Is a shared context? Ordinarily, you're only like doing it a couple of places, you would make the thing you're doing in a couple of places and share context, but here it's everything. So it's better.

A

Better understood, yeah um and that's that's absolutely fine, like um the thing trying to achieve there is to um make sure everything is covered with the smallest amount of dips, and that is absolutely what's happening in there and.

C

The also when you go to when you finally deprecate and completely delete the feature flag, you're, basically deleting those share context and the or those two contacts and the shared underscore done. You don't.

A

Have to touch anything.

C

A

Exactly that that would be it like that. That's the thing that sweet, so that's just hope for this thing to pass and we should be go. um Would it be.

C

Not a fan of share context because they they they're useful, but they mess up the stack trace. They make it hard to know what failed and where okay.

A

I see um something's not quite right. It behaves like with two factor: authentication could not find shared examples, um maybe shared context like what we're looking for.

C

Put it at the bottom just try moving those lines 10 through 26 to the bottom of the file. I don't think it should matter.

A

um Oh, where would that go now.

C

Still, at the same level,.

A

So that's the the first indentation that would be here and then.

C

A

It feels like to me because, like yeah I'd say so, yeah like these are two tabs and going down.

A

This is the same, so it should be.

F

Okay, let's see.

C

C

Ruby itself is a two pass parser, I'm not sure if our spec is.

A

It feels like oh, no well yeah. It feels like we're already further than on the first one. Turning from the output.

A

Yep yep, looking better yeah.

C

Our spec just parses the context as they go and it's like. I don't know anything about that short context. I've never seen it yet that is annoying regular. Ruby is a two pass interpreter, so you can put stuff in whatever order you want.

E

C

You get to mix-ins and rails, then stuff gets kind of weird, sometimes.

A

Okay: okay, sweet um speaking.

F

About this dismart.

A

Yeah it's looking looking looking great. Is it acceptable um to reproduce this behavior in every file, or would you expect to to have this shared across many files.

C

um I think we had that same discussion when paul- and I did this in my opinion- the the barrier for dryness is a lot lower in in specs, so like this is going to get deleted right. It's not like this code is going to be here forever. This feature flag code is going to get deleted so just having it at the bottom of every file, I think is, is easier to understand. What do you think paul.

D

Does this have to be every file and.

A

No well we're speaking about free ish files.

F

D

That's not a big deal, I would, I would do it um if it was like every time we use sign in. We have to do this, it's like! No, let's find it. Let's find a better way or.

C

If it were like 50 lines of code, as opposed to, like you know, two dozen yeah.

F

You have 0.2.

A

Gotcha: okay, um interesting that some tests are failing on me now, but.

C

A

Might be something.

D

Else that means it's working.

A

F

A

F

D

F

A

Absolutely okay: sweet thanks! So much for helping out um looking forward to to see dmr for ufx ball.

D

Yeah, are you on the back end pairing um meeting at all organic like? If you do run into these spec problems, you should totally feel free to bring them up on the backend pairing, which is on mondays.

A

Speech um I'll make sure to check it out. I haven't um I've been too shy yet.

D

Yeah uh I kind of get the feeling chad likes the back and pairing one more. I'm joking chad, I'm giving you a hard time. I mean.

C

They're both really early in the morning, so life is a strong word like.

D

I know I know yeah all right. Well, thanks, thanks for hopping on appreciate it bye, absolutely see you soon.