 Right, so I haven't had any preparation for this, but we're doing it. It's gonna be awesome So I'm gonna be talking about behavior-driven development and the approach that we took on incorporating that with ember So my name is Michael and I'm an ember addict So I thought that it would be nice if we could all launch EA ember anonymous No, no, okay so Jokes aside, my name is Michael Chenis. I work for a company called Truva and We're essentially an e-commerce platform and we get Independent retailers to sell their products online because we know that they can bring like really quality products and sell them offline But they're really bad at it doing it online We've got around five is it five yes five five ember apps no 350 and Yeah, so you can imagine like the complexity behind upgrading everything to ember 2.1 and a lot of stuff, so I'm very excited to be talking here today So a little bit about BDD so it started in 2009 by Don North and It was initially planned to be an extension of TDD, but it grew much more than that. So we've got now specific keywords that you can use on a specific structure and It allows you to build much better and stronger code and much faster So I've put a put up some key Reasons why we why you would want to use BDD But really the main reason that you would want to do use BDD is because it's simple and then one can write or read tests That's a really big point because everyone in the team Even if they're and not even if they're a tech or non-tech they can write tests for you And we can essentially take those take those tests and each step of that test is one key interaction for on the interface So and when I say simple, I mean seriously seriously simple And I bet that if I show you now the Gherkin syntax, which is this Everyone will understand it So this is a scenario so a scenario is essentially one one test and If I if I want to add something to my basket, I have four different steps that I go to First is that I'm on a product page I have say I have one item on my basket and I add the I click the add to card button Then I should have two items in my basket. So that's a really simple like Way that the actual user would behave. So hence the behavior driven development The past few years have been really exciting for the BDD for the BDD world and there have been many many frameworks throughout the throughout many languages and Being a JavaScript developer. I naturally just boiled down to the last two. So I either wanted to use Cucumberjs or Yata and it eventually boiled down to Having an add-on for that. So We eventually boiled down to Embersi Eli Yata So Embersi Eli Yata was created by Albert Yan He said he was gonna be here. No, not today. Okay, so He was created by Albert Yan. He's an awesome guy. He does some really nice some really nice Projects. So have a look at his GitHub Right, so we'll go through like a really simple Test that we would write for example on our website so we're gonna go through a table pagination and say we've got like a table that displays like colors and We have a limit of 10 on each on each page I'm the only thing that I'm gonna assume is that you have Embersi Eli Mirage setup because we always use it and it's really handy for running your tests much faster on On your testing environments So the setup Okay So the setup is really easy. You only need to do Ember install Embersi Eli Yata and That downloads the package for you. I Swear that's not gonna take ages and then it's gonna eventually come to a point where it's gonna run the generator And it's gonna install one file. Yeah, there we go Let me pause this okay, so The installation is finished and then it generates this file for you So the steps is where you actually type in the logic for your tests so each each line of the gherkin syntax that I showed earlier is essentially one step and I'll go I'll go into that in just a moment So I want to write my test First I need to generate my feature. I use the Embersi Eli Adon and I use the Ember G feature color pagination and that generates me Okay, so that generates me two files it generates the color pagination that feature Which is where our which is where our gherkin syntax will go which is the one that I've shown earlier And it also generates the color pagination steps and this is where we write Some of our steps. I'll go into that in just a moment. So the file structure now looks like this so Okay, so this is our steps, which is the global steps, which I will explain in just a moment that's our color pagination steps, which again I will explain in just a moment and Let's dive right into this which is where we will write our gherkin syntax So we named our test color pagination dot feature and dot feature is essentially the extension that we use for the gherkin files So I want to test like if I have three colors and I'm on the product among the colors page Then I should only see three rows. So I want to I want to do an acceptance test just for that And just for a sanity check I'm going to check that I'm on the correct page as well now remember that we added like Limit of 10 on each page on each page of the pagination if I have 15 colors then the second page should only have five So my second test would be given there are 15 colors and I'm on the page 2. So that's a query param Then there should be five rows and that should be again on the same page Now you see a lot of duplication on this Mainly because you have the same the same structure there But you have different variables, which is the number and the page We can avoid the duplication horror essentially by create by using the tables which is Really handy. So when we were writing the test of true we we came up with a huge huge file of Right essentially having the same tests but over and over again and then diving right into it We essentially found out that we could do it much easier with the table, but yeah Okay, so the way it works is you write your scenarios you did before But essentially anywhere that you want a variable you would you would put that within square brackets, so the so the name number there would be essentially replaced by the number on the table and The same applies for the page the display rows and again the page So essentially each row on the table is one test So you can have you can you can essentially like get a dump of an of an xls file You can put it in your table and you can essentially create one one step. Sorry one test But it will run a hundred times for all your data. So that's really really handy so I promised that I was going to talk about the steps and Here they are so You see first of all this yada localization English library That is really powerful because it allows us to create It allows us to create the Steps for the gherkin syntax this thing in any language that we want so we can essentially take Any any gherkin syntax we can translate it from anywhere from any people like working abroad you know in the same company or anything and We can apply the same steps that we had earlier. So All of this gherkin syntax each line is one step so given there are a number of colors and When I am on page page all that is all that is one step. So let's take the when I am on page page If we write this this will essentially run as a regex. So when I am on page and then that's a variable page then the value of this Variable will be passed to the function and we can do any assertions just as we did earlier Like before in your acceptance tests. So you have access just as you did before to assert and Server if you have if you have embassy line mirage running So in the case of this when I there's really no no assertion that we can run So we just pass like okay true just so that that step can pass and then this next function is Passed down by the embassy alayata and we can use that to essentially say okay, this step has finished so move on to the next step and The then I should be on page That within quotes the variable is essentially At a step where we test something So I want to make sure that I'm on that on that specific page So I use the current URL that's provided by ember and I use the assert dot equal That's provided by Q unit and I can compare the two and make sure that yes. I'm on the correct page So all these are all these steps are global So I put everything in these steps or JS. So if I create multiple If I create like 100 different feature files all of the feature files can inherit from the same steps or JS So you have access to everything from this specific file the color pagination steps is where we put our steps that Highly dependent on the specific feature. So if we're using the there if we're generating mirage data That that will only be generated on this specific test the color pagination test We can put everything here inside just to clear up just to keep our steps or JS a short nice and smooth That was weird. Okay. So we use the Embersi ally mirage server dot create list. We pass down the We pass down the factory. That's a wrong factory and we say the amount of factories that we want to create and that generates basically a list of list of data in embersi ally mirage and Then we can check that that number is correct by using the assert dot equal again just as we did earlier in Q unit and Again, we have access to the same parameters the same objects that we had earlier in our acceptance test and we can check that that amount is correct and Again, we have the same access to the helpers so we can use the fines to count the number of rows That was meant to be like a really short introduction to be DD. I'm not sure how much more time we have left. So Okay, because that was my end. So I'm creating an update that's coming out soon and not now soon as the as the bubble guy announced last time But it tea. I promise it is coming by the end of next week Which will allow you to create Feature files and run your tests like proper unit tests on your models on your components anything that you want So you can essentially just like run tests on specific components using the gherkin syntax, which wasn't available before Thank you any questions. Yes. Yes There's no really default you you type them in once so if you're like reusing the same steps in your different files This steps to JS is you and you essentially inherit from here You'll see that we import the steps from the from these steps of JS file and we inherit from that So we keep these same steps so we so we can review steps over and over again throughout all our feature files Yes Yeah Well, you did really Yeah, why the name good question. I don't know the answer to that, but I did read a blog Yesterday as I was doing the slides That he wasn't too happy with cucumber JS because the structure of cucumber JS is very strict So he created on he went on to create the other which essentially like is more flexible with with the gherkin syntax and It allows you to like use this specific library to do more stuff So you can use that for deployment stuff So you can create like your feature file and that will be your deployment Then you can do like another feature file will be another deployment or whatever. So it essentially like gives you more stuff to do Yes Yeah, which Yeah, so the first dollar thing will be the first parameter that will be passed down now the use why The reason why we use it is because whatever will be passed in it won't be a string So it will be converted to an integer. So we know that the amount will be an integer Great question So you have access to the end then for the acceptance tests and you also have access to the wait for the unit tests That's coming in the next update Yes Yeah, it's literally written down like this So you write your test you you say where and that knows like wherever it finds anything within Square brackets it will replace anything on the table without value