Magento PWA Studio, 20 May 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PWA Studio Community Sync 20 May, 2021

Description

Magento PWA Community Sync:
- Demo of integrated http://cypress.io as a testing suite for PWA Studio
- Add product to cart from the wishlist demo

A

uh So rewind who's gonna tell mother, cyprus and integration uh and also.

B

A

Will show the progress on her add to cart um functionality from the wish list, so with that I hand over to rebound to do the sabbath demo.

C

Thank good morning, everyone good afternoon, um I'm going to be demoing. The cypress uh visual testing plugin, um the the full page snapshot testing that we have integrated recently and I would like to also go over the issues we have faced and the baby has fixed them. So maybe it can it can help you.

C

Let me start by sharing screen. I hope you guys can see the screen. uh Let me enlarge them.

C

uh I guess like we already went over what cyprus is and what we are trying to achieve with cyprus. uh Today I would like to go over a sample.

A

C

uh How we are using uh snapshot testing the image snapshot, testing with cyprus and the issues we went over so here I have a sample test uh which is gonna check if the page builder home page has loaded up properly or not.

C

For now. All I do is I create a test. I set the viewport to 800 by find.

A

C

You can set it to whatever you want, um I'm just waiting for 500 milliseconds. uh You know for the page to load. I hope- and I wish there was a better way. You know, instead of waiting for a arbitrary time like if we can wait for something to be in in the viewport, uh and we are already looking into that and then now we are visiting the home page. We again wait for um 3000 milliseconds. At this point, the page is actually being loaded here the viewport is being set.

C

um Then we have added couple new commands the load full page command. All it does. Is it's going to scroll through the whole page, because in pwa studio uh because of performance benefits, we have enabled lazy loading of images and if you don't load the whole page, if you don't scroll through the whole thing before taking a snapshot, you would see um empty spaces like uh just grayed out images.

C

There won't be any any image loaded, so we load through the page and at that point it's like a promise and then once it is done, we would capture the whole page. So this load full page and capture full page screenshot. These are the two commands that we have added and there are a bunch of options that this guy takes. For example, at the moment, I'm giving a name to it.

C

So when the snapshot is recorded, this is the name it's going to be used for that particular snapshot, um and this is very similar to how it's done in jest, except that ingest. It's it's json or some kind of a gest related file type for the snapshots. But here it's like png images.

C

Let's look at that in action.

C

Let me increase the size. Okay, uh I'm in the veneer integration tests uh folder on develop at the moment, and when we do yarn test, it's gonna run the cyprus cli utility.

C

So here we have a list of all the tests that are part of this particular project. We are looking at the home page spec. So when I click this, it's going to load up the chrome browser, and now it's going to go through all the steps you can see that it is waiting and then now it is scrolling through the whole page waiting for one second, before scrolling to the next viewport, and now it is done loading up the whole page.

C

At this moment, it's actually capturing the image.

C

Wonderful, so it has loaded the whole. You can actually see through the actions here, so it loaded the viewport it waited for a while and then it scrolled through the whole thing, and here it took the screenshot and it started comparing it, and we can see that it's a green tech which is saying that the image has been compared against what it was in the repository, and these two are fine. So we can see that the test has passed. um You can go over and click run the other tests as well. We.

A

C

Coil the filter model- this is an another example where we are taking a snapshot of just one viewport, it's from the whole page. So here we are loading up the category page. uh Then we are look. We are trying to look for the filter button. It's going to miss it at the moment, because this test is for a different uh uh branch. But then you can see that you know it fade. It says where it has fade.

C

It says, like you, know, I'm unable to get the filter button, because this test is for a different, um a branch, not the developed branch itself. This I just added this for an example just to show how it's done and um that that's how we take the snapshots and you can actually look through the snapshots.

C

uh So here you have category page, and this is.

A

C

Took you can see that it's 800 by 4829 um image and it's a png and if, let's say you end up with a diff output like let's say this image that you have stored in your browser? Sorry in your project is different from the one that you have recorded right now. When you run the sector's test, uh it goes into the diff output folder, and it's only going to show you the difference between the one that you uh that the one that is expected and the one that's actual uh right.

D

Now, since the images are same.

C

You don't see it before, but but if it does, you can actually it comes into this particular folder, all right now, nevermind, okay, uh coming to the commands themselves, the lord full page and the capture hall page. Here we have them. These are part of the support folder, and here we have list of all the commands.

C

At the moment we only have two commands, but uh moving forward and other branches, we have started adding other commands. That's gonna make testing easier in the load full page. All it does. It's gonna load up the document and then it's gonna get scroll height, client height, and then it's just it's basically a for loop of scroll to and like wait for a certain time. So that's all it is gonna. Do it's pretty basic, but the the magic is actually in the full page screenshot command.

C

uh So this guy is the command. That's gonna actually take the full page screenshot. uh The problem we had firstly, was: uh when you look at. Let me load up.

C

Right so when you scroll, you can see that the app bar on the top, it doesn't scroll like it, stays there. It's that's how it is built, but the problem is when you're taking a screenshot, you don't want it uh to hanging around in every. You know page scroll, every viewport, so we had to first. uh You know we get the header or the the div of that particular header and we're trying to change the style of it to static.

C

Then we are going to go through the whole image snapshot thing and then, when the test is done, we can change it back to sticky.

C

However, it does so that's one thing we have we had to do and uh and the the match image snapshot function is the one uh that we had to change a little bit, but the probably the problem we had was uh when we were testing it against, like a macbook pro, which has a higher dpi uh device- pixel ratio- I I don't know about this, but yeah so which has a different dpi compared to like a 4k, monitor and compared to a 2k monitor the color.

C

Reproduction was little different and also the size of images was different, because two pixels on a one dpi uh machine is different from one is: is equal to basically one pixel on a four dpi kind of a machine, so we had to you know, change a little bit on that. um That's actually done in the plugins folder. uh That's where we have this resize snapshot plugin. So basically, this guy is is only going to take the snapshot.

C

It's going to check the dpi values and it's going to adjust those details and basically resize it resize the image write it back like basically take the image. Read that image resize it and write it back again into this image. Basically you're overriding it and all you are you do that, basically, with the width and the pixel ratio of that ignition.

C

So um all in all, um I wish cyprus did all these things instead of asking us to do it. It was pretty hard at first to get the you know idea of how to do this, but I'm hoping that cyprus, one day, is gonna.

C

You know change the snapshot testing to uh dpi, irrespective and color reproduction, irrespective because each each uh screen has a different reproduction style like samsung's are like very saturated. uh Apples are a little different, maybe hp's little different. That is different, so um other than that, uh if you guys are using cyprus and you end up with similar issues, you can always find how you want to do this, and the clue has always been a resize plugin and the full snapshot command.

C

The the reason why we moved to cyprus and everything is it's similar to mfdf and if most of you don't know, it's imaginable functional testing framework and it's if, when someone is contributing to our code base, it's open source, if someone is contributing uh since mftf is not open right now it's on us and we are adding the mftf test, uh but now with cyprus there is extensive documentation and it's open just like our code base, so you guys can add the tests uh right now.

C

It is not that mature, but uh you know it's a promise that we'll be doing it we'll do a much better job. For instance, they've created this uh branch and you can see that there are way more commands like route commands, for instance. So all you have to do is just do cy dot visit checkout page, and it's going to take you to the checkout page, the commands that we are adding. They are just going to make your life a little bit easier when you're writing tests.

C

Any questions anyone that's been talking and I'm sorry if I, if that was fast. What was this for.

A

A

The next pwa release, hopefully in like a month or so.

A

Keep taking a look on that and yeah there's something that uh we expect you guys to help us to contribute to as well. So um the next thing on our agenda is the wish list. So I take. uh I took over to tomi to demo their new added functionality of moving the products from the wishlist wish list.

B

Awesome, thank you, elena, um and good luck with the recovery from your second shot.

B

um Yeah, all right. So uh without further ado, I'm getting some feedbacks from somebody. Maybe you elena, if you can, please um I'm working on. uh Hopefully one of the last few features related to wishlist as we round out that epic. um This one in particular, is um being able to add to your cart from the wish list.

B

If anybody's been kind of doing a sneak peek, this has been available for a little while, but it only worked um uh with maybe simple products. It had issues um either way it had issues so uh we're gonna go and work through a lot of those issues.

B

um In addition to leveraging some new functionality that graphql offers us with some of its product queries now. um So here's the pr it's 3170. I think it's made its way through code review, but if you wanted an early sneak peek, this would be where to find it I'll do a quick demo of the functionality. First.

B

So I already have uh I'm logged in as a test user. I have various products in my wishlist that are completely unconfigured, partially configured fully configured and then a simple product. So, as you would expect anything, that's fully configured that you want to add to your cart. um You just hit, add cart and there it is easy, peasy, simple products, same thing, add it to your cart uh and then we get into the more complicated pieces where for something that's unconfigured uh you.

B

We opted for this little kind of dialogue, pop-up to kind of like a slimmed down version of the product page.

B

So in here it behaves almost identical to the product page, except for some fun little things related to how we're retrieving, live, pricing and variant images um and I'll kind of dig into um how we do that in a second. So you'll see there every time you kind of switch.

B

We added like a little loading indicator there uh we'll serve stuff from the cache immediately, but we kind of want to check with the back end that since you added it to the wish list, that, like pricing didn't change or that it's, um I don't think we manage stock here, there's a big epic coming up with that, but either way after you fully configured, uh you can go and add that to your cart, um guidance was deleted in the wish list.

B

So we don't automate anything about removing things um and then I think there is a follow-up to go ahead and bring back the ability to remove items from the wish list that's coming later and then, as you would expect for things that are partially configured when you open it up, whatever you had pre-selected is pre-selected and then, if you change that selection, if the price was different, you would see that pop up here too. Unfortunately, our sample data has everything is the same price.

B

So add to cart, adds to the cart um error detection if something goes wrong and just kind of displays it to you um in the view, um so that is the demo portion. I'm gonna try not to get like too too technical here, um but one of the very cool things um that we do here that differs from uh the product page and I think, probably everywhere else we've ever done. This um is previously to figure out what selected variant you had. We would take your options and then we'd go through the entire.

A

B

Of possible variants and kind of say, like okay, we're we're lilac medium, I'm going to scan through all 1000 of these variants to find what I'm looking for, but graphql added an option.

B

So we don't have to do that anymore, so they moved over to this concept of like configurable option uids.

B

So when you are when you want to filter a product by like the options that you've selected, you provide that in your query here. So you just printed an array.

A

B

Ids these value ids are unique, so that's all it needs to know it doesn't need to know the attribute.

B

It doesn't need to know any other detail, it's just a simple array of value ids and then it can determine what those values map to.

B

When you do that, then it has the ability to pass you like specific media gallery entries and the current variant that you're on if it's fully configured, um which will give you kind of uh right now we're using like price range.

B

um This also has the ability to give you additional detail about kind of the available options that are selected, that we will also uh fully support um in a in a later story, but it was pretty cool that with that new uh piece of functionality, I can kind of make a selected options array that I feed to this query here and then the data that I get back from this query allows me to set um kind of current image, so the if I selected pink, I would want to see the pink dress, blue, blue dress um and then, in addition to that, even though our sample data doesn't support it.

B

If those uh those variants had different prices, um uh that would also update based on the currently selected item. I don't think that happens in the product view, maybe in the product edit view um but anyways. This was a lot of fun being able to leverage some of those new endpoints. um It's the the edge case.

B

This solves, isn't really a big deal if you have like a couple configurable options, but um once we get into b2b land, where, like there's, probably going to be 10 configurable options, maybe a thousand plus variants uh you can imagine like manually going through those variants just to pick out the one that you're currently selected uh isn't uh ideal.

B

So uh unloading that onto the server for a quick round trip um is kind of a trade off there, but probably better than you know, retrieving a thousand variants of data that you may or may not need. So um that's it for the demo. Any questions comments.

D

uh Yeah wanted that's looking pretty cool, it looks like you've built the dialogue as a standalone component. So can I assume we'd be able to reuse that from like a category or product listing page.

B

uh Yes, yeah yeah, that was um the intention, was to try to reuse the. I think in the cart page, there's like an edit functionality, but it was kind of tied to all the old um yeah. We have this thing, so we attempted to reuse this, but it was really coupled with kind of the old way of coming through the variants to get that to pull that data out.

B

So this is a new component and the intention is that it can be used on a category page, and ideally it can also be reapplied here to the edit.

D

B

Where you can probably accept some sort of um on success, callback that would go ahead and delete the the previous.

B

Variant that you had in your cart, because uh you can't edit a configurable product, it's really like adding the new one and deleting the old one, but yeah that's exactly the intention, and hopefully it goes as smoothly as intended.

D

Very nice- and it looks like when you load up the dialogue you've already fetched all the varying information.

B

um No so uh on this page there we only have, um I could peek at the data really quick.

B

We only grab configurable options and then we pass those value. Ids.

B

So, let's take a peek at so when I select this you'll see that it initiates a query and um sorry and what I passed to it was just the selected value id and the sku, and then the response I get from that- um and here is, if I am fully configured, it will return me a variant um and then it always kind of returns.

B

You media gallery entries that are relevant to that, but you'll see that um nowhere in this item that I call is like the the list of variants or anything I kind of just need, I just need the options, the values um and this will be cleaned up too, as we kind of progress along this path like the more and more we start leveraging uids the easier. This is going to get um there's still some coupling tied to our um options component.

B

That requires the old kind of code um and value id, but once we transition that component over to uids, this will all get a lot a lot simpler.

A

E

Know we mentioned like we don't have to conclude stocks right, uh so if a product is out of stock and if I try to add to cart so currently like that flow is kind of a broken or something like that.

B

Yeah yeah, I think uh we just render the standard form error above this above the product details here, and it would tell you yeah yeah the product is out of stock. I I was exploring how simple that would be, and kind of it would require a huge refactor of the selected options component, where the response we get from graphql is value. Uids.

B

And it tells you which ones are available for selections, so we would pass that to the options component and say disable anything you don't find in this list.

B

So that is something that ideally would also be returned from this configurable product options. Selection, I think, there's another field here called like available options um where you can kind of filter down your selected up or your available options. Based on that response, so um yeah, I think we have a lot of stock stock status, partial stock uh out of stock flows that we still don't fully support, um that'll be one of them that we can solve uh solve here soon.

A

Are there more.

A

Questions, I guess that means no thanks to me for in-depth demo and again, the wishlist is something that we are already wrapping up and planting include into the next release of the bwe, and we have two minutes left for this all uh guys from the community. Anything that you wanna share. Questions in general.

A

Well, in this case, thank you for attending and I'm wrapping up other call at this point and wish you a great rest of your day afternoon evening, enjoy thanks for joining.

A

A