 Mae'r gwsbryd yw'r cyflwyng eich bod yn dweud yn dweud yn ddweud, gyda'r cyflwyng eich bod yn gwrthod ymlaen. Felly, mae'n rhaid i'n ddefnyddio'n cyd-dyn nhw'n ddylch ar fynd. Ond mae'n rhaid i gael eich cyfrifenedd o'i cyfrifenedd yma, ac mae'n ddweud i'r cyfrifenedd yma, ac mae'n ddweud i'ch cwrs ac mae'n ddweud i'ch cyfrifenedd o'r cyfrifeneddol. Mae'r gwrsau Jamie. Mae'r gwrsau ar y dweud i'r gyrwm yma. Of seriously was on this kind of cute micro feature on the best of a website back in 2012. So the idea is if you click this answer my line up link on any artist and this appears in various different places on the site it will add it to your personal line up. You identify yourself with Facebook and then the site generates a kind of personalized festival poster for the year you went and the artists you actually cared about. Dydw i'r cyflym, dwi yw'r gweithio'r dŷlos, dwi'n eich gweithio'r dŷlos ddaterbyn o'r tynnu. Dwi'n credu nawr, oherwydd o'r cyflym gweithio'r dŷlos ddaterbyn, oherwydd o'r cyflym o'r ddaterbyn, oherwydd o'r cyflym o'r ddaterbyn. Dyma'r ysgrifennu, ddiddordeb o'r gwbl, oherwydd o'r cyfnod, oherwydd o'r cyfnod o'r dddangos, oherwydd o'r rŷt. Dyma, yn eich bydd yn gynghraifft, mae'n ei wneud ychydig iawn yn gweithio'r tiylau ar gyfer y tiylau gwahanol a gwahanol yn y tiylau gwahanol. Felly, rydyn ni'n meddwl i'n meddwl i'r lleidwch, a'r lleidwch arall, a'n meddwl i'r lleidwch ar gael yr adeiladau a'r lleidwch i'r meddwl. Mae ydych chi'n cael gallu bod y peth yn ystafell o'r rhywbeth a'r rhywbeth sy'n wedi'u cyfnodd y ffordd o'n teulu o'r ysgrifweith yng Nghyrchu Gwyrtwyr. Ruby or Django or something like that, plus tools provided by your testing libraries, plus something like Selenium to drive a browser through your test suite and simulate real user interaction. In Rubyland, anyway, you use Capybara to interface with Selenium driving as many browsers as you want, aspect syntax. You visit a page, you click some link, you fill in some form, and then at the end you assert that the state of the UI has changed to reflect what you expected it to. I really love this style of testing because it forces you to just speak about interactions in terms of these primitives. You know, you can look at a design or a piece of UX and sort of, it seems like a holistic thing and the user flows through it, but really it always boils down to visiting URLs, clicking on stuff, filling in forms, maybe a bit of drag and drop or adding files in, but really you have at some point to reduce to this quite small interface. So when you do these tests, this is the stack that you end up working with, so your test suite aspect, for example, will boot up an instance of your app, or maybe if it's several apps working conjunction, it'll boot them all up, and then a database in the testing environment, maybe a queue, some kind of mock API if you're dealing with a third party service, and then it will spin up all the browsers you want to test with, and then it will drive through those using Selenium. That works really well. I think it's really impressive that we can do that, we can run it on CI, you can use browser stack, and you can have Travis drive a load of browser stack browsers through testing your application. That's wonderful. So where does Ember fit into all this? So if anyone's used Ember Rails, you might think of it in these terms. Ember is kind of the face of your Rails application, that all of the CSS and the markup and JavaScript is sort of sitting as a thin layer on top of the real guts and business logic. Or you might think of it on the other side of that line. It's its own app sitting in memory in these browsers. And the nice thing is those tests that we wrote with Cappy Bar and Selenium, they still stand. It's still that same interface of clicks and URLs and filling in forms. It all still works great. Until you hit unit tests for your JavaScript, which you will want to do, you'll want to test that your component works with certain groups of inputs, and you'll want to really thoroughly, you know, throw stuff at a helper and see that it does the right thing in different circumstances. You can't really test that in Ruby. So what tends to happen is you'll write a JavaScript suite, and you will then have your this sort of stack that drives things with Ruby, will then like boot up your JavaScript suite, things like that. It will load in your JavaScript test suite. It will get the results using tap or a format like that if anyone has ever come across that. And then it will kind of display all these test results together. And that's a way to do it, like that, you know, can be made to work, can be made to work on CI just like everything else. But this is like, like the question I have when I look at this is like what's your program in all of that stuff. Is your application really this kind of like tightly bound up stack that goes through from a complete GUI in the browser down to a Rails application or several services on different servers through down to databases? Are they really also knotted together that you have to test them that way? One of the best things about writing tests and practicing test driven development is you run across boundaries in your programs. You're kind of forced to confront them, forced to mock them and figure out how small and simple you can make the interface between things. So those primitives, the interface between a human being interacting with your application is visiting URLs, clicking on links and filling in forms. There's not that much to it, you know, and you can maybe add events that can be triggered in the DOM, but even then it's an event with a name and some data attached. So this is, I think, the preferable stack. You don't worry about what the server is up to. Instead, you try and reduce that boundary because at the end of the day, this is quite a simple interface as well. It's your app resident in memory in the browser talking to your API with HTTP requests over TCP or over web sockets or something like that. But you're not testing that HTTP works, at least that I don't think you are. You're just testing that when you receive certain data, the right stuff happens. State changes in your application in the right way and you also want to test, I suppose, that you send the right data out at the right time. So probably a lot of you have used Ember testing, but if you haven't, as you can see from this example, it kind of follows the look and feel of Cappie Barrow quite closely and recently that it's been overhauled to this while it looks like a synchronous test actually deals with any asynchronousity that might come out of your application, but it looks quite a lot like that Ruby test we saw earlier. Visit a URL, click on something, fill in some form field, click another button and then this thing that wraps it at the end, basically all these things are going to load promises into a long chain and then it's going to wait for every last promise to get resolved in some way or another and then you have your opportunity to have a look at the page and see what sort of state it's in. I love this because you're down to those primitives again. You're forced to describe what on paper or in said out loud looks like quite a complex interaction. Someone shows you a screen they've designed and it's like, okay, so you pick up this element and then a 3D spin happens and then some glitter falls across the screen. It's really what it is going to boil down to is clicks filling in forms and you can model all of that just by triggering events and just encapsulating what these things really mean as a node fires an event and you handle it somewhere. This is a video of, let's see if I can get it in HD. Oh no, it probably doesn't matter. So this video is, load it and pause it. So on the left is the source code, on the right is will be the test runner, which is test them in this case and in the background the browser, which is what test them will be driving. This is what the test looks like, what I just showed on the slide and then over on the right, test and boots. We load up that this kind of like servant browser that test them is going to drive through these tests and you see this, this first failure, it's tried to click on an A node containing this bit of text. Test them looks for it or ember running the browser looks for it and can't find it and it tells us. So we go, we make an index template for the app and we add a link to in there. We save very quickly, test them, notice the change and tells us that we're trying to link to a route that doesn't exist yet. By the way, if you thought that seemed quick, this video is sped up a bit, but the reason it's so quick is because this application is being built with broccoli. So it's instant. So we'll add a routine for that new ideas route. So now it can't find this, this new idea form field that it wants to fill in. So we'll go and we'll hit up the ideas template out of form with a new idea field in there and then add button. And then we'll just say that on in this new ideas thing will display all the ideas below the form. This is kind of like a standard demo app. So that and it fails the value that each loops over must be an array. So we've ended up with just this kind of generic ideas controller that doesn't know that it needs to be an array controller. So let's go and create the controller. I think that's what I do next. There we go. So that and so we see now here, there's a create action and nothing at the moment is responding to it. We add the action in and we're green. And I just I like for me, that's a lovely way of working working from this high level, this high level thing. Letting the test strive you through what you need to build like only only adding a component to the application when you really need it. And I think especially with Emma, because of the way it's architected, you find that actually you don't need to write too many unit tests because more often than not, you're just kind of composing the pieces that Emma gives you letting bindings do a lot of the work for you letting the templates do a lot of the work for you. And I think really, I found recently the things you want to test the most of just components like things that need to work in isolation and need to be able to be flexible and deal with lots of different kind of configurations. So there's this book, which I am involved with a little bit have some words in some chapters on this and this goes into testing Emma applications in some depth. This is due to be published any second now. If you're interested, I think the publisher said 40% off for ember London members. So I will put some information about that on the meetup group and they said just contact them say you come from Ember London and they'll they'll give you a discount code. The other interesting thing to look at is James Coglan has a JavaScript testing recipes book in the works, which from what I've seen of his tweets so far looks like it will be thorough to say the least. And that's all I got. I would have wanted to cover more stuff, but that's it. Any questions, I guess. So you're saying that the one I understand is that this integration level testing is replacing a lot of the unit testing you normally write at what stage would you use? That's that's yeah, that's normally it via case of writing acceptance test. Get I guess far as you can until you need to create some objects and then create that by creating a unit test. But I've found with ember that because so much of what you build is a matter of kind of binding things together and you can trust the bindings. The bindings are really well tested and rock solid. So you end up with like almost no business logic that needs to be tested. There's control. There's actions in controls and routes and like maybe you test those, but often they do they do very little as well. They just sets property and then the rest of it is taken care of by bindings. I mean, that's to begin with anyway, a thing later on, like I say, when components come into the picture, they're worth unit testing extensively. But then that's kind of easy because that's another case where I think you you trust the templates to do their job. They're really well tested core part of the framework. And then you just test that all your computer properties behave expectly behave as expected on that component. And if there's anything else it needs to do that, you know, handles events correctly and all this kind of stuff. So you're trying to try to do full step integration tests, but do you still do those? Yeah, so right now I am working on a project where I really don't care about the back end much at all. It just needs to be a done data store more or less to a great extent. And so the tests have been written in the style acceptance test driving the driving up the gooey. And then every time it needs to every time it looks like there's a point it would need to talk to an API. I'm just kind of there's a an object in the system, a service object, which has a bunch of methods on it. And then for the moment they are just mocked out a bit like you'd do with ember data's fixture adapter. It's that kind of that kind of interface. And then what's nice is at this point, a gooey's are working when it's talking to this this kind of mock API adapter. And I know what my API needs to look like. I know what it needs to respond to. So now I can just kind of I have this spec as long as I build my API to that spec, then hopefully the two will talk to each other. And yeah, there'll be I think there'll be not so much integration tests, maybe more like smoke tests to make sure that kind of big stabs and interaction work. So in the river world, we're like addicted to like VCR. Yes, they're like, they accurately mock out the same request. And there is like a VCR.js, which at least works on node. But I wanted to try to use this for like in browser capturing HTTP, HTTP responses. Yeah, anyone use that? I have not used VCR.js. But so my general sense is that if you're back end is very complex, you're going to have a problem. Because how you have your front end and your back end interacting in complex ways. And VCR, like recording HTTP requests is one of the ways you can deal with that complexity. But when I've seen recorded HTTP requests in repositories, they were always very, very complex and hard to maintain. So it's a stopgap at best. I'd absolutely agree with that. In fact, I've been there a couple of times with you. It's very useful at first to be able to record something responded by a third party API responded with. But you it doesn't really you capture that data, you walk away for a couple of months, and you look at it again. And it's very difficult to dig back into it and figure out what what's important to your application, like what you actually care about. And I think, like, like I say, all it. I'm not sure I can really conclusively state this, but I think you're not really testing HTTP and TCP. We know that works. We know if you're using, you know, web sockets or something like Firebase, you kind of trust that that part works. And then you kind of work from the boundary from that interface between you and another system, in the same way that we kind of we trust that events flow around in a browser correctly. So we can test from the point of receiving an event, okay, then state needs to change properly and so on. I think the problem for me is the cost of creating an accurate sort of mock of an API versus just recording it when it breaks. I think well, that's so I was I've been working with brain trees API quite a lot lately. And I think, yeah, that and Chris, you when you gave your talk last month, working through that in the sandbox environment, and I really like the idea that you can, you can test things using known data. So with a credit card processing API, you know that there's a particular card number in sandbox mode, which will validate, okay, and like lead to a successful payment. Another one will give a certain type of error. Another one will give another kind of error. So I've been working with building those into a mock API, which you can then actually reuse in development mode if you want to kind of demo things to people like, okay, well, I know that if I put in validatexample.com, it will give me a certain kind of error. And I can demo that. And like I really don't care that, you know, whether that comes back from a server or not. So I think it's, it's a little bit of trust that your the server side component will be implemented to the same spec, and that you'll be able to keep them in parity. But, you know, both ways complexity lies, I think that's preferable to, like you say, they're very deeply knotted up server and front end components. So what I'm doing is I've got a server, I've got so much business to do it, having to trust it to the server. So my server is supposed to be the third party one. Yep. And I'm finding I'm like, found the other day I'm having a problem. So that boundary does call to be a problem. So I'm in the days, for instance, wasn't, I found it wasn't serializing IDs that it already had if it hadn't, because they were racing relationships, because it hadn't resolved the relationships, it wasn't sending the IDs. So my server thought that it was the client was saying that it removed relationships like that. And I kind of tripped on it by accident and kind of explained why a lot of stuff was going wrong actually. But it's really difficult to actually, that's the thing when you've got, when I'm having to push the business logic onto the server, because I can't trust the client to do it. Or I've got multiple people doing different things. I need the server to resolve the logic. Like I find it. I kind of have no idea how I'm going to go out testing that boundary. It's actually the boundary can. So you're saying, I get that you're kind of saying separate it off, deal kind of concentrate on the client and those interrelations for the user stuff, which is a huge part of testing that the client from end works as expected. But actually, you could test that I can test my logic on my server. It's actually going to cause me big problems when the two start talking to each other. Yeah, would you say in that kind of situation is the solution to have your kind of client tests you say and server tests obviously from logic. And then also do some sort of test that does actually. Yeah, so I remember talking to someone who worked at Songkick and they they broke a very large, very slow test suite down when they switched to a service oriented architecture, and they they kind of moved away from the full stack integration tests because they were so slow and difficult to maintain and understand because the tools move forward. And your integration tests can't necessarily move quickly with them. You run into those kind of problems. But I think that perhaps the point is that if you treat these two things as two separate programmes independent of each other that talk over some kind of interface. And you don't want to have to excessively test that interface works correctly. I would hope that that would that kind of forces you to make it simple, like to make it very basic. You know, and that might mean offloading a lot of the logic onto the server, which you know, I think is appropriate for a lot of applications, or more of it onto the client in which is kind of the case in your demo. I suppose actually purchase thinking about it and actually part of the solution is like, because at the moment you do trust ember to do a lot before you see just trust that the bindings are going to sort stuff out for you. So suppose actually ember data against that level of stability as well. Actually your boundary is like if you if you are using ember data, for instance, then your boundary is a lot more than data. So suppose at the moment I don't I use ember data, but I don't trust everything it's doing. In that case, I mean, in that situation, you can test by one side of the boundary. When I say this, this Jason should be sent. You don't have to have to have to actually send it. So you can test those ideas with that. And on the server, you can have a test that says when I get this payload, this happens. You don't ever have to put those two together necessarily to have the confidence it works. Makes sense. But yeah, ideally you'd be able to trust ember data a bit more. Yeah, I've had something like that in my in my one of my last apps where I've had to have some business logic in the server because it just for performance reasons, it wasn't possible to do it on the client side. And what I would do is I would have a selenium test that would for every model, it would test that I can that the client side app reads it correctly and that it writes it correctly. So it would just have a basic smoke test for every aspect of the app. And then for the detail tests, they would run in JavaScript and mock the API. Okay, well, thank you.