Functional Testing Webinar | Velo by Wix

Welcome. Welcome to our demo for Functional Testing. And we'll get started in a few, so we'll just wait for some more attendees in the meantime too as well. The chat is also available, so if you want to communicate with us during the webinar and speak about different the different features. If you have any questions about anything that's going on, make sure you use the chat or the Q and A option as well. And if you are using the chat, make sure that you change to from panelists to all panelists and attendees so that everybody can see the questions you ask or the comments you make. So that if someone you know wants to resonate with something that you wrote and for us to just for everybody have the visibility of what's going on, definitely suggest you writing it in panelists and attendees as well. So I'll go ahead and write a message to everybody and where's everybody from? If you don't mind writing that in the chat. Okay, we have North Carolina, Chicago, Arizona. Nice. So lots of people from the States and a couple from Tel Aviv too. Sweet. All right, so let me get started. Pull up our slides as well. Awesome. So let me see what time it is. Okay, we'll wait another minute or so. Let's go back and check out the chat. So you have Tel Aviv, Ukraine and as well too. You know, this is obviously speaking about functional testing and development as well. So either if you're new to development or if you are someone that has lots of experience as well, this, this demo is definitely going to be able to speak with you in so many different levels. So we'll get, go ahead and get started and I'll introduce myself. So again, welcome to the live demo for Functional testing. Joshua. My name is Joshua Alphonse. I'm a developer advocate at Velo by wix. I'm based out of New York and I'm also a full stack developer and music producer. So if you want to ever get in contact with me and ask any questions about Velo, want to learn about our development community and then also just talk about, maybe even just music, reach out to me on LinkedIn and Twitter. I'm available there as well. And we also have in the chat Meredith Hassett, who's my counterpart as well, that will be helping answer any other questions about functional testing. Meredith is also a developer advocate in San Francisco and she'll be able to answer any questions we have in the chat. And then also if you have any questions you want to see towards the end, feel free and we'll be able to answer them for you. So we're here about functional testing, and let's kind of go over the features and what functional testing offers you as developers. Traditionally, before we had this feature for functional testing, developers were not able to test their backend code seamlessly without having to leave the editor or having to use their developer console from their browser while in preview mode. Well, now with functional testing, we are able to trigger and test your backend functions straight from the code panel itself. Again, you're not leaving the workflow that you're in. You're actually still increasing the velocity of how you're developing. Because you could test all those functions from the back end straight into the editor itself. You'll still be able to use the code panel, the editor, and switch between preview mode and using the external tools that you have there. You can click the play icon. You might be familiar with the play icon and other IDEs. For our instance here, the play icon will help actually open up the testing environment, as you can see from this gif that's playing here, and you're actually able to test that function that you created. Another great feature as well is that you can set parameters if needed, and you'll also be able to run and display those functions and those responses right there within the editor. Again, you're maximizing your workflow here. You don't have to go to preview mode and then back again to the editor itself. You'll be able to do everything all within one space. And that's the beauty of it. So before we jump in about how to actually use this function or use this feature here, we're going to look at what that traditional or that old way was beforehand and then show you how much easier it is now to use the functionality testing feature that we have. Let me just swipe right over here is a demo website. This is actually on the classic editor, and we'll actually jump in again a bit more on how to use this on Editor X or any other type of editor. You can see here. From the code that we have here, it's actually fairly simple. You want to use your functional testing with export functions as well. And even for just this traditional way of testing your functions out, you want to make sure you're using export functions. Just simply console logging a multiplication for two different numbers that are here. If I had to go and test this from my backend on my front end, I'd have to go and click preview mode and just to see the log and just to test it. Now, this can be really annoying. When you have to have a really complex site with lots of code and you're trying to search for something now, you don't have to go and look for all those different functions that you're creating. You'll just be able to use click the Play button. But for the traditional way we go to preview mode, you see, you have it locked there. So I have a button as well. This button is connected to again, actually, let me go back. This button is connected to our event here for handling this button click. So you can see from the Properties panel, I have our on click for button number one, which is for multiplication. And then we're logging our equation here and we'll go straight to preview mode. So once I go and click this, you'll see my multiplication and even another response I have from the back end. Now, this isn't really the best way to keep testing things back and forth. Now imagine if I was calling an API or even just logging some more user information from something. This could just be really annoying, going back and forth just to make sure I have the right data that I need. Now, with the new wave, there's a few other considerations to take up as well of how we're using this functional testing feature, and we'll jump into those right now. So a few considerations and we'll go over this as we jump into the demo of this new feature. You can only test this with the functional testing feature. You can only test functions located in the JavaScript folder, or you can also only test functions that are of the file Type for the JavaScript web module that allows you to export those functions to the front end when testing code that interacts with the database collections. It's not associated with the WIX app. You'll be working with data in the Sandbox mode. So basically, we have another example that will show you about how to actually test those responses you have from your content collections. So you have to make sure that you just have to keep in mind that the data that's being tested is not what's going to be live on your site, just what you have on Sandbox mode. Because again, this is just testing and we're not using any of that live data. The output you do see on the Test tab is the same output that you would have on the developer console. So we're not necessarily taking away that same experience that you have from the developer console. You were just actually enhancing it, because you'll still be able to test out those same functions and have that same kind of layout that you're used to when you're using a developer console. Let's jump right into things. We'll leave this classic editor example and we'll go straight to Editor X. So as you know, you can use Velo in Editor X. And of course the functional testing feature is available as well. So let's head over to the back end. Whatever. We'll head over to our back end as well. And let's start out with our. Let's start off with our example of using a content collection. So as I just mentioned beforehand, if you're using a content collection, you just have to keep in mind that what you'll be testing with the Functional Testing feature is whatever you have in Sandbox. So if I go straight to my database for a sec, go to Cars. This is a car site on Editor X. We'll open this up. So just simply just two different fields. Inside of this collection we have the title, which would be the name of the car. And then also if the car is a premium. So we have Volvo, Audi, BMW, really nice cars. So this is all stored in our collection and it's currently in Sandbox. Now, as you can see here, our Functional Testing feature doesn't require us to activate it by clicking any type of button or installing anything. It's already built in, ready to go on both editors available to you all. And you'll be able to combine this with all of our different APIs when you're testing these functions, especially really useful when you're testing out any data that you're querying from a collection that you do have. For this instance here, just to go over this code, we're actually querying our Cars collection and finding out if the car is premium or not. Let's go out and test this out. You can always move up and down your IDE and retract it as you like. We'll go ahead and click the Play button again. The Play button initiates the testing. Let's go ahead and click Play. You get set up with this new window that's here. And don't worry, it doesn't close off your tab for where you were working with your code. It actually just opens up another tab here for your testing for that specific file. So on the left side you'll be able to set your different parameters in JSON if that's how you'd like to test. On the right, this is where you actually get your results or your output of what you're running. I want to be able to see the cars that I have inside of my Collection, let's go ahead and run. Once I click run, you'll see the steps it's taking to give me our results. Return with null and it looks like we have an error. So the car collection does not exist. It's saying you cannot work with a collection using the data API before it's created in the editor. When I see that error, I'm thinking to myself, hey, I already have this collection. I've definitely made it before I go back to the databases and media, see, I have cars. Luckily enough, with this functionality testing feature, we're able to go back to our code and it can direct us and lead us where this error is in our code as we're testing it within the editor itself. So it says I can go check out get premium brands on line eight and it'll bring me back to my file and I can go and look at what it is that's making my test not work. So I know it's telling us line eight and that's what we're getting, that error. That's how we're capturing the error. But again, back to that, that area that we have here. The car collection does not exist. If I go back to my code and look at our export function again, remember that export functions are the only things that are going to work with this functional testing feature. If I go back to my export function and I look at the first line of that function here and I'm looking const results equals await wix data querycar that's not the name of my collection. My collection is actually named Cars. We see here it says Cars. And if I go back to edit just to double check again, you'll see that the ID of my collection is set to cars lowercase c and I'm able to see my site contents because of the permissions I have, of course. Remember, with data you have to make sure that you have the certain permissions available if you want to test. But of course you're the admin, so you won't really have too much trouble with that. So let's go and edit our cars collection and let's see what our results look like. By pressing the Play button, you can even clear out your console. So notice how I'm going back and forth. This tab is still open and it saves my last output, but if I don't want to see this anymore and I have too much going on, I can always clear our output with this trash can on the right side. Now we have a clean slate and let's click run again. We'll wait for these functions to happen. We'll see. Here, get PremiumBrands JS. That was our file that we had created. On the side it returned with has an array of five different vehicles. Let's check it out. Here we have our Volvo. Our Volvo is premium. Then again, inside of the same array we have our Audi, our BMW, our Mercedes and our Nissan. So all of the premium cars that we had in our collection, because of this function, we were able to find out what cars equaled, mark the premium field as true. And that field was a type of Boolean. So we're able to use the EQ function as well to find out if that card was premium or not. So again, I can always go back and clear out my console, run it again, keep testing over and over and over. I can even set parameters as well on the left side here of the testing tool and I can go and check out everything I want. So the more fields that I do add, the more logic that I have in my function to get the results that I want. I'll be able to see those when I test the function by pressing the play button and then clicking run right after. Great. So this is when you're working with collections, but what about just some of the little things? Right, so let's go over to another one, another file here. This is just a random web module here that we have. So again, let's start out with something simple like hello, so export function. Hello. Sorry, I have problems with my keyboard. Export function. Hello. So now we have our hello, and let's just do console log and we'll just put in here. Hello. Cool. You see, as I created this export function, the play button has already appeared on that first line. We already have our console log that's there, and there's no need for us to set a parameter. Let's just run and you'll see my message is here and it will bring me back again to the line of where I have this message line number two, console log. So it's really useful if I want to find out exactly. Put a place marker on where these tests are coming up in our code. So let's say we want to have another function where we're setting some type of parameter so we can write one export function and we do multiply since we clearly like multiplication. I'm sorry, my keyboard just writes O's really weird. So we'll see. And then in here we'll have our factor one, factor two. And these are just two different factors that we're going to be multiplying to one another. So we do console log. So we have our console log. And then we'll just say we'll put another message like, hey, Bella. So we'll just return factor one and we'll multiply that by factor two. Cool. Solid. So we have our function ready to go. And again, you'll see on line number six, we have our play button that's appeared and ready to go. So let's play. And you'll see again our console still here with our old test. Let's just clear it out, just have a clean slate. And then you'll see on the left side, we have some differences out here because we've set those parameters already in our export function. They appear here on the left side and they come up as the value of null. But let's give these factors some numbers to work with. So we do. Let's say we want to find out five and six. Let's go with those two numbers. If we run our function, you'll see that we got our response for hey, velo from line seven, and we've also returned 30, which is five times six. So you're able to go back and forth and add these different parameters in into your code so you can properly get the responses that you're looking for. So let's just clear out our console for the next example that we do have as well. So let's just say you want to look for like the sum destructured. Right? And again, this. This varies from very beginner examples to other examples that are more advanced as well. So you can always test out as many different things. So there might not be a debugger, but there's really. This is a very effective way to speed up your process when you're coding. So again, let's go with another function. Sorry, my keyboard just keeps writing two O's export function. And let's just say sum destructured. Did I spell that right? Let's see. Okay, some destructured. And we'll just set here. So in our destructured sum, we're just gonna put two different values that are here. So we'll do n 1, n 2. Great. So in n 1, n 2, we'll just set another console log just to log another message, just to show that this is something's working. Working. Or let's say testing, testing, 1, 2, 3. Cool. So now in this instance, let's just return. Let's return N1 plus N2, and let's just format our code, make things look nice. Again, you'll see here with our play button suddenly appears and it's ready to go. Let's test this out. We'll see that we're given an array to go and fill out. Let's just say we want to go with. So we say n1 and n1. We have our value. Let's say our value is 3 and then we have n2, n2 and our value here would be 4. So let's run and see what we got. Cool. Testing, testing. One, two, three. Our response is there and we've returned seven. We're returning the sum to structured. There's lots of different formats that you can go and use in testing your code. Then of course we can click to go to this line of our code in our back end file that we have for a module and we'll see that it's there. Awesome. So there's tons of different ways for you to test out these features. This feature as well, you can combine it with all your different APIs that are already built into Velo. If you're testing a third party integration or third party API from the back end, let's say you install something from NPM or you're using WIX Fetch to then also fetch results from, let's say a fantasy football API or something like that. And you want to fetch any type of results from something like that, you'll use the functional testing feature as well with that from the back end. And yeah, that mean that's pretty much what the feature entails of. Remember those considerations that we did go over as well and I'll bring back up that slide for you. So again, you can only test the functions located in JavaScript and JSW files when testing the code. Remember if you're, if you're testing code from the backend that has to do with your database. If you're using WIX data to query through, just like how we did with the CARS example, your data will be from the San, excuse me, the sandbox version of your database. And on top of that, this isn't really much different from what you see on when you turn on preview mode and look at the developer console that's available for you either from your browser or from Velo. But this just maximizes your workflow. You're able to actually input those different parameters like we saw. You're also able to run your code here and test it out. This is the functional testing feature. This is definitely something that the community has been talking about for a long time. And you see that Velo Again, has delivered something that the community definitely wants to increase their velocity as they're building with this platform. So definitely open to answering any some more questions here. And let's check out what the Q and A looks like as well. I see that Meredith was in there answering some questions for us. And let me check out our QA tool. For some reason it's not open. And. Let's see. I think if I stop sharing my screen, that might be the reason why I don't see it. Okay, here we go. And I'll come back up and I'll put the considerations on the screen for you guys. So someone asked what basic coding knowledge is required? So basic, I guess it's more of a general question, but basic coding in this sense, you don't have to be the most advanced coder to use the functional testing feature as long as you know how to test code simply. Even with the examples we showed with Console Log, there's no debugger, but Console Log is just a really easy way for you to test out some functions. So definitely check out some documentation of how to log. And then someone also asked, will there be a webinar on WIX data aggregation? Definitely a good idea. We'll definitely have a conversation about what our other upcoming webinars are, but there's definitely a lot in the pipeline as well. Let's see. Look back at the chat now put up our our slides. Chad is saying is there a way to add a breakpoint for the dev console except for adding debugger? So there's no breakpoints here. There's no breakpoints here, but it would automatically be that would automatically be added from the Play button as you create different export functions. But there are no breakpoints at the moment. Someone also asked My site was built on the older version, but has since been updated to the new WIX editor and provides this functional testing for the back end file. What user role does this code function under? You should be able to use this function, this feature under like your admin roles and most of your roles that have editing rights for your code. I don't see why not. Mohammad, I definitely love to answer your question. In what way would you like to see some examples of usage besides the ones that we that we showed? Es 6 error functions are actually available as well with Wix. Oh, I'm sorry, I did not see that you guys wanted the screen to be a bit bigger. So actually let me. I can go back and show you what some of those examples do look like. Again, just bear with me For a moment. Sorry about that. So again, this is just a bigger view of things. I know that my Windows definitely crunched down a bit. So this is just a very simple. These are just three very simple functions to go over as well. But I can also write out another one. So say export function. Let's say sum spread. Params. Okay. So to return params, reduce. Okay. And then let's do another. Spell. Spelled that wrong. Like what is that about? So now for this instance here, we're just going to see spread. It's going to be using the spread operator and we're going to click the play button and let me know if this is too small as well. Let me go back to the chat here. Cool. So we'll just put in some values into this array. 2, 4, 5. Let's just look at that and run our function and we'll see that we're able to add all of our different values together inside of our. From our function here. So this we can always clear out. And if we wanted to add another message or another log that will bring us back to that code. You just go back here. You just close out all these different tabs we have go back to a module. So you see all these different testing tabs have been opened. A module. We have our params here. And if I wanted to add something for console log and I wanted to leave a message for myself. Sorry, my keyboard again. Hello. And we test this out. Run and we'll bring it straight to our line where we left our console log. Great. What about Async functions? Do they get back a promise once it's resolved? Yes, with Async functions you will get. You will get the promise once it's resolved as well. Does this help with features provided in the Velo form or WIX help special section? Special section in the WIX forum. I do not know if this was released on the forum as of yet. Definitely expect some more documentation to be there. If you go on the official website Velo.com Wix.com Velo and you go to the features page. There's actually a blurb about the functional testing feature there. But I don't believe there's any official documentation as of yet. Do we have any other questions for today? Definitely be happy to answer. It looks like for some reason my QA tool doesn't keep letting me open up as I have the screen shared. So Guy Guy asked whether I need to. He wants to know whether or not he needs to add debugger to the code. You will not have to add debugger to your code. You'll be able to just get started right away with the same way that I showed you with this functional testing feature. And async functions work the same exact way with this as well. If you don't know how to code, will this be easy? That's a good question. So it's definitely required for you to have some knowledge when you're coding. And Velo by Wix actually does have lots of examples on our example page, if you don't mind sending that link to our examples Meredith that they can see. And the Velo examples page will show you examples from beginner to advanced. And JavaScript has plenty of different resources across the web to show you how to go from beginner to advanced code. Is there a way to get the content manager to be printed so you can actually test that similar to what we did as well? It's just all about the logic that you have. So let's say if we go back and I'll share my screen once more. Believe this one's it. Yep. So we go back to our get premium brands function that's here. It all depends on the logic that you have here in your function for when you're using WIX data and the query function. If you're looking to print out certain things from your collections that you do have, make sure you use WIX data in the query function as well and select the name of that of that collection. So for this case, for this instance we use cars and I have another function here just to make just to find the cars that have are set to true from that Boolean field called is premium. So if I go back to cars, I can even filter here real quick. Can add a new filter contains actually let's see, we'll go to is premium is true add our filter real quick. And this isn't a filter that's going to affect your code. It's just for what we see visually. We'll see that we only get these five results for Volvo, Audi, BMW, Mercedes, Nissan. So we've done this exact same type of function just in code. And as you test it out, you'll be able to run this. It will go through the logic and let us print out what's inside of our code. If you wanted to go, then connect this to a UI element and export this to your front end, connect it to a UI element. All you'll have to do is just actually use that same value, whatever variable you set it as and it will actually take up that text field as used the text property with that text UI element. Cool. So it doesn't look like we have any other questions. So if you do have any other questions again, just remember you can reach out to me or to Meredith on LinkedIn Twitter if you have any questions about the functional testing feature. There is some document, there is some a blurb on our Velo official website as well about functional testing and expect to see some.