Sophie Au
Sophie Au
Sophie is a software developer at Donut where she champions testing and accessibility. And ensures there's a steady supply of office donuts.
Panel Discussion: Testing
React Summit 2020React Summit 2020
21 min
Panel Discussion: Testing
Video
♪ I would like to welcome Tomasz Lakomi, Kenzi Dotz, Iris Schaffer and Sophie Au to our panel. Are they all here? Hello? Hello. Ah, excellent. So good to see you all. Hi. How are you all doing? Yeah, not too bad, not too bad. Awesome. Sweet. That's fantastic. So I feel like a little bit, coming back to the among us thing that was brought up earlier, I feel like a little bit of the imposter in here, because I do write tests in the projects that I control, but I also worked in many different agencies and companies and projects where testing was met with skepticism, let's put it that way. So I'm really excited to hear your opinions and ideas on this topic, because I think I was not the only one struggling with this like inner tension of kind of knowing that tests provide a big value, but then also seeing like bad practices and seeing problems. So would you all very quickly introduce yourselves and what you think is like the number one value from testing? Let's start with Iris. OK, I'll start then. So my name is Iris. I work at Spotify in Stockholm in Sweden. And I think for me, the number one benefit would be the quality for the end user, just ensuring that on every release without having to manually test every time, every feature. Oh, yeah. Been there, done that, got a T-shirt. What's your take on this, Sophie? Hey, everyone. I'm Sophie. I'm a full stack front end T developer at Donut in Berlin. And for me, like I think the main thing about testing, similar to Iris, is like knowing that the stuff I'm actually pushing to production works. And like, especially because we do mobile, we do a mobile app. So it's not like you can just push a quick fix, but you actually like have to do a new release. So actually kind of being confident in that the app we're shipping to the user works and we don't have to push like 20 buck releases quick after. That's really good. Oh, that sounds convincing. Tomasz, how about you? Hey, everyone. So my name is Tomasz Rokome. I'm a senior front end engineer at Odex Group. And I also record videos for Echel.io. And when it comes to kind of the number one value of testing, apart from the things mentioned by both Iris and Sophie, I would like to say that testing makes me sleep better at night. As in because I push something to production, I don't have to worry for the entire evening that it is going to break. In fact, we've pushed something to production an hour ago and I am not checking Slack or notifications right now. I know that feeling and I know the other side of this. Kent, how about you? I learned a bunch from your testing talks and workshops. Thank you. Yeah. So my name is Kent and I made testing javascript.com where I teach people everything that I know about testing. And I don't have a whole lot to add to what's been said. I'll just one thing is I got started with testing with my open source libraries because every time I pushed or I wanted to push a release, I had to go through this. I brought up the library on a page and clicked around all over the place. It just took a lot of time for something I was doing for free. So I thought, I wonder if I could just clone myself and make, you know, do that with my clone so I can go on and move on. And that's what tests are for me. It's like a thousand little kents going through all of these different things I always did. I see. Interesting. So I heard a bunch of really good reasons for why I would want to test. But I know, bear with me, this has been a few years ago when I started, actually not a few years ago, that has been a long time ago. But when I started with software testing, I basically had to read a really thick book and it was not very fun. But how do I, if I am a React developer who's just starting, how do I get started with writing tests? What's a good path? Well, I'll go ahead and get started there. So I think that something that's important to keep in mind with testing is that testing is not anything different from regular software development. So it's just another thing that you're writing software for. And so having an idea of what a fundamental test even is, is really useful. And basically a test is software that will give you some sort of notification when things are not working as expected. And so, yeah, like how do you get started? It really, the answer to that question is the same generally as like how do I learn FrameworkX or how do I build this feature or whatever? Because it's no different from any other software that you're going to write. Right. But I've seen lots of software out there, sorry, courses or literature that basically assumes you're starting on a greenfield project. But I think for most people, that's not the case. Most people here watching right now probably have a huge code base and wonder like how do I even get started? Even if I know how to write tests, which a lot of the material out there covers, how do I know how to start in my existing code base? How do I get the biggest bang for my buck? How do I find out? Where do I start? I'm happy to take that one. So in my experience, like I'll assume it's like React, like web app. End to end tests are usually kind of my first go to, which essentially, generally, even if you don't actually write tests yet, you have someone who's checking that the app works right. I mean, worst case, it's the user when it's in production. But you have someone that's going to tell you, hey, the checkout button is broken. And just writing end to end tests essentially kind of automates that check. So my general recommendation is kind of what's the most crucial part of your app? Is it your checkout button? Is it, I don't know, like you're sending some financial data around just write a single end to end test for the most important functionality of your app. And then from there, kind of branch out and try to cover it kind of as much as possible. And don't get too bogged down in like unit tests and like the 5000 edge cases. Just make sure you have like a rough idea that covers like 80% of the functionality. Right. That sounds good to me. And I know that I wanted to do that so many times when things broke in production and I was working with customer projects. And then you would get calls to unholy hours to your project manager who then like tries to call you while you're trying to sleep. How can I convince? So now that I might be the person who's like, OK, I see the problem. I want to write tests. I learned how to write tests. And I now know where to start. How do I convince my team to A, join the effort and B also how do I convince my manager that I'm not like slacking off and not spending time on something that's useful? I can take this one because I actually have a blog post in around the same idea. So there's a couple of things around here. First up, you shouldn't have to convince your manager, your product manager or anyone really. Because the same way I don't have to convince my manager that I would like to use your state or use effect or any other hook from React. Like I consider testing to be a part of the thing that I'm trying to deliver. In other words, I as a software engineer, I am getting paid to not only build and ship software, but also ship software that actually works and brings value to our users. Ideally, I would love to get paid for shipping broken software, but that's not how the world works. But in a more realistic scenario in which you have a legacy code base and nobody's writing any tests and you would like to create this test setup and to kind of pave the way for future generations who are going to join this project. I would like to start honestly by convincing our managers or product managers or anyone how much time do we waste resolving production issues. And how many of those production issues could have been avoided if we simply had an end-to-end test or other tests, unit tests and so on. Because for instance, consider a website like Twitter. If on Twitter, the login page is broken, you literally cannot do anything. Because if you are locked out of Twitter, you can of course read the tweets, but you cannot tweet, you cannot add anything to the platform. And with only this one test in place, you are able to ensure that, okay, by the way, we are absolutely convinced that the huge part of our website is at least accessible to our users. So start with not the fact that I want to write tests, but talk instead about I want to ensure the quality of our software. Because people are scared of the word test, but they tend to like the word quality a bit more. But what if then your manager asks, so why are you writing broken code in the first place? Right? I know the answer to that is that's something that I have been asked. Sure. I would say that I don't write broken code. My colleagues, they also don't write broken code. But all of us combined tend to produce something that can be broken. So I would like to say that everybody tries to do their best, but sometimes things just happen. And it's not anybody's fault that something is going to break in production. And by us having the best process in place that we can, we can ensure the utmost quality of our software in production. I think that's a good point. Having a process is key and is something that managers also usually do understand. Because you usually have a process already, at least for project management purposes or product planning. There should also be a quality assurance process, I guess. Also, another interesting question that does come up is when we do start to write tests, especially on a legacy code base, but the legacy code base also still is alive and still is evolving, then sometimes you end up with situations where the website is perfectly fine. It's just the tests are failing. How do you deal with that? Is there any patterns that you can spot in test code that you want to probably avoid to not end up in situations where you create tests that sometimes fail, sometimes pass with no changes in the code made, or there's small changes in the code, but not really in the functionality, but still the tests don't pass anymore? Is there any anti-patterns that I should be looking for in my tests? I think I can take this one. I would say if you have tests that keep failing over and over and over again, you're probably testing something that is internal to the component that you're testing. Rather than testing how other components communicate with you, you're testing something internal. Maybe you're testing that this function is being called, but then you change which function is being called, your test breaks, and then really what you should be testing is, is this displayed to the user or is this API being called? It shouldn't be the detail of how you implement it. It should be the end result that you should be testing. Right. Okay, cool. And you said that a valid point to start are E2E tests, but that raises the question, what do you use for E2E tests, for end-to-end testing of web applications? I don't know about everyone, I know Tomasz's opinion on this, but I'm a huge fan of Cypress. I've been using Cypress for a very long time, and it's fantastic. It has such a great developer experience. That's the biggest reason that I use it. There's Puppeteer, there's Test Café, there's Selenium, and there's various others. But of all the end-to-end testing software that I've used, Cypress is by far in a way that has the best developer experience. And that's what you really need out of a testing tool is, anything can throw an error when there's a problem, but not every testing tool is capable of helping you identify what's causing the problem, which is really critical when a test is failing. That's fair. And an interesting question follow-up on this one. End-to-end testing on browsers, I kind of know what to do, but what if I have a mobile app? So yeah, if you have a React Native app, the one tool that we're using is Detox. It works somewhat similar to Cypress. It is super annoying to set up, I have to admit. I think it took us two days, so the DX isn't great. But once you get it working, it actually does its job quite well. Yeah, it's a bit of a different experience just because you don't have a browser, but it's running in the simulator. But if I remember correctly, I haven't actually written into SSS in a while, but syntax-wise, it's very similar to Cypress as well. I see. Cool, cool. And with the testing tool conversation comes something else, because Kent, you mentioned a bunch of tools already. And I have at least the feeling that similar to JavaScript frameworks a couple of years back, where they popped up like mushrooms in autumn in a Zurich forest, which there are many if you haven't been, I think testing tools evolve quite quickly as well. And there's at least a bazillion, bajillion different test runners, and every couple of years, our opinion changes on what's the best of them. And I feel the same way. A couple of years back, we had Selenium, and everyone was happy, and then everyone hated it, and then everyone jumped to – I can't even remember what the bits and pieces in between were called, but now we're in Cypress. Once you are committed to a solution, should you stick to it, or should you pretty much continue to evaluate and jump on the bandwagon? What's your opinion and experience? I can take this one. So when it comes to testing solutions, in my humble opinion, the landscape is a bit settled, at least for me, because I'm using Jest, I'm using React Testing Library written by Kent, and I'm also using Cypress. So I am quite convinced that this stack is going to take me to great success in the software that I'm building. But when it comes to chasing this bandwagon, and I know when the next better version of something for end-to-end testing is going to be released, for instance, I am not entirely sure whether you should jump on the bandwagon right away. I tend to think of software in the way that if something is solving your problems, and you don't get any issues because of the fact that you are using a certain library, I don't think you should necessarily have to jump to a better testing solution. Although, I don't know, in the next testing solution, it will be twice as fast, or the test will be written by an AI. I would be definitely interested. Fair, I think. Yeah, I think that's a good... The fewer tests that I have to write to be confident in my software, the better. Exactly. I don't write tests because I enjoy writing tests. I write tests because I like to be able to ship software and be confident that it's working. So if I don't have to do that, if I don't have to write the test, then I'm totally fine using some AI that does that for me. Yeah, same goes for Angular code, for the record. Yeah, that's true. I think everyone agrees on that. Speaking of less tests or fewer tests, if I have unit and integration tests as well as end-to-end tests, can I just scrap these asks, Elunade, from the chat? Can I just stick with end-to-end tests? Because they are the closest to what the customer actually gets to interact with, right? I'm happy to take that one. In my experience, your end-to-end test is never going to check all edge cases, especially when it comes to interactions between components. If your end-to-end test does catch all edge cases, that's A, very impressive, and B, the suit is probably going to run for hours because it's really hard to figure out all the different combinations of component interactions. Don't scrap the tests, especially if they pass and then do their job, then leave them in. But when it comes to writing new tests, my general thing is I go for more an integration-y kind of test than actual unit tests, because you very rarely just have one component on your screen, right? It's always about components interacting with each other. So I think KenTest is a really pretty testing trophy, which is mostly end-to-end tests and then integration tests and all the stuff that is super weird tests. That's when you do unit tests. Generally, I'm also a very lazy person, so if I can cover all the edge cases with integration tests, why would I write unit tests, right? That's just more code I have to write and more stuff I have to maintain later on. That's fair. But I think the speed aspect is what's important. Sorry. Sorry. Go ahead. Flakiness as well, I think. End-to-end tests do tend to be a little bit flaky sometimes because there are so many different systems at play, right? So going a level lower already helps a lot with that because all of a sudden you're only testing your part of the application rather than also the interaction with seven different backend services. So that can help. And then I actually love unit tests as well, but I use them not as much for React components, but more for, say, all of my different functions that do stuff, like all the library stuff that is just somewhere tucked away, right? For that, unit tests are perfectly suited. All right. Sweet. Ladies and gentlemen, thank you so much for being here. You filled my brain with lots of inputs, and I hope that the audience enjoys this as well, and we try to cover as much ground as possible within 20 minutes. Unfortunately, our slot is coming to an end. Thanks again for being here. Thanks again for taking these questions and discussing this with me, and I hope that you are having a fantastic time, and stay safe and stay healthy, please. Thank you. Awesome. Cheers. Have a great day. Bye.
Accessibility as a First Class Citizen
React Summit 2020React Summit 2020
24 min
Accessibility as a First Class Citizen
All too often A11Y is only an afterthought and will be added to a project "when we have time" i.e. never. But there are a many reasons why you should develop with a11y in mind from the start including some that will convince The Higher-Ups. We'll explore tools we can use to help us develop more accessibly and talk about some of the quirks and limitations that React Native has.