title
React Testing Crash Course

description
Learn about testing in React including unit, e2e and integration testing with React Testing Library, Jest & Cypress Techbase YouTube Channel: https://www.youtube.com/channel/UC6W89Wklwaki9pc_qSquRtw Starter Repo: https://github.com/MitchelSt/react-testing-starter Final Repo: https://github.com/MitchelSt/react-testing-finished Timestamps: 0:00 - Brad Intro 0:55 - Mitchel Intro 1:24 - Why should you test? 1:58 - What to test? 5:48 - Demo app setup 11:06 - Unit tests 25:11 - Integration tests 28:07 - End-to-End tests 55:56 - Wrap up

detail
{'title': 'React Testing Crash Course', 'heatmap': [{'end': 1760.463, 'start': 1721.417, 'weight': 0.703}, {'end': 2461.866, 'start': 2423.514, 'weight': 1}], 'summary': "'react testing crash course' delves into testing react applications, covering testing priorities, react component testing, ui component testing, cypress setup, automated payment process, and end-to-end testing, providing practical guidance and emphasizing the significance of testing for bug prevention and efficient application behavior.", 'chapters': [{'end': 448.367, 'segs': [{'end': 101.297, 'src': 'embed', 'start': 61.995, 'weight': 0, 'content': [{'end': 69.564, 'text': 'you will have a good understanding of how to test React apps in an efficient and effective way using the most modern testing tools out there.', 'start': 61.995, 'duration': 7.569}, {'end': 71.867, 'text': 'So in this video, we will go over five things.', 'start': 69.685, 'duration': 2.182}, {'end': 78.65, 'text': 'why you should test, what to test, how to write unit, integration, and end-to-end tests.', 'start': 72.688, 'duration': 5.962}, {'end': 82.371, 'text': "And for that, we're going to use the React testing library and Cypress.", 'start': 79.09, 'duration': 3.281}, {'end': 83.611, 'text': "So let's get into it.", 'start': 82.791, 'duration': 0.82}, {'end': 88.213, 'text': 'So the goal of testing is to check whether an application behaves as expected.', 'start': 83.811, 'duration': 4.402}, {'end': 93.755, 'text': 'The idea is that it will safeguard you against unwanted behavior like bugs when you are changing the code.', 'start': 88.333, 'duration': 5.422}, {'end': 101.297, 'text': 'And this could be, for example, when you are adding new features, refactor the code, update the app dependencies, and so on.', 'start': 94.195, 'duration': 7.102}], 'summary': 'Learn to test react apps effectively using modern tools like react testing library and cypress, safeguarding against bugs when changing code.', 'duration': 39.302, 'max_score': 61.995, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM61995.jpg'}, {'end': 261.458, 'src': 'embed', 'start': 199.544, 'weight': 1, 'content': [{'end': 205.208, 'text': "However, even though you want those things to work as well, they're definitely not the most important features.", 'start': 199.544, 'duration': 5.664}, {'end': 209.452, 'text': "And in those high value features, you'll want to focus on the happy paths.", 'start': 205.788, 'duration': 3.664}, {'end': 214.498, 'text': 'So just following the correct steps to complete the feature successfully.', 'start': 209.833, 'duration': 4.665}, {'end': 220.805, 'text': 'So when testing for the edge cases in your high value features, you want to rather focus on the sad paths right?', 'start': 214.919, 'duration': 5.886}, {'end': 228.374, 'text': 'So this could, for example, be if you have an e-commerce shop where you have a store-wide rule that you cannot order more than 100 products,', 'start': 220.825, 'duration': 7.549}, {'end': 233.88, 'text': 'so you want to test, for example, what happens if a user tries to add 1 000 items right.', 'start': 228.374, 'duration': 5.506}, {'end': 238.665, 'text': 'is he actually able to do that, or will we receive an error message, something like that?', 'start': 233.88, 'duration': 4.785}, {'end': 242.747, 'text': 'The third point is to test for things that can easily break right?', 'start': 239.065, 'duration': 3.682}, {'end': 246.63, 'text': "Maybe you've been working on an application and you have just seen that you know.", 'start': 242.787, 'duration': 3.843}, {'end': 250.812, 'text': 'over a certain period of time, certain features just were breaking every now and then.', 'start': 246.63, 'duration': 4.182}, {'end': 258.656, 'text': "Even though you were able to make fixes for them, you just feel that it's a sensitive, a very easily breakable part in your application.", 'start': 251.132, 'duration': 7.524}, {'end': 261.458, 'text': "And of course, it's easy to say, well, then you should solve it.", 'start': 259.096, 'duration': 2.362}], 'summary': 'Focus on high value features, test happy paths, edge cases, and easily breakable parts. for example, test if a user can order more than 100 products in an e-commerce shop.', 'duration': 61.914, 'max_score': 199.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM199544.jpg'}], 'start': 7.145, 'title': 'React testing', 'summary': 'Emphasizes the significance of testing react applications and provides a crash course on react testing using the react testing library, jest, and cypress. it highlights the value of testing for bug prevention and ensuring application behavior, along with a test priority list for efficient testing. additionally, it discusses testing high value features, focusing on happy paths, edge cases, easily breakable parts, and react component testing, and offers guidance on setting up a react demo app.', 'chapters': [{'end': 199.064, 'start': 7.145, 'title': 'React testing crash course', 'summary': 'Discusses the importance of testing react applications and introduces a react testing crash course covering the react testing library, jest, and cypress, highlighting the value of testing for safeguarding against bugs and ensuring application behavior, and providing a test priority list for efficient testing.', 'duration': 191.919, 'highlights': ['The goal of testing is to safeguard against unwanted behavior like bugs when changing the code, providing confidence in project creation, and saving time by quickly checking if the app is still working fine, without manual testing, especially for launch apps.', 'Testing is all about testing the behavior of the application, and having a test priority is essential to efficiently allocate testing resources, with a focus on high value features that bring the most value or money to an app, as demonstrated with examples from Amazon, Spotify, and Gmail.', 'The React testing crash course covers five areas: why you should test, what to test, how to write unit, integration, and end-to-end tests using the React testing library and Cypress, aiming to provide a good understanding of testing React apps efficiently and effectively using modern testing tools.']}, {'end': 448.367, 'start': 199.544, 'title': 'Testing high value features in react', 'summary': 'Discusses the importance of testing high value features, focusing on happy paths, edge cases, easily breakable parts, and react component testing. it also provides guidance on setting up a react demo app.', 'duration': 248.823, 'highlights': ['Focusing on happy paths in testing high value features is crucial, prioritizing correct steps to complete the feature successfully. Testing high value features should prioritize happy paths, ensuring correct steps are followed for successful feature completion.', 'Testing for edge cases in high value features is essential, including scenarios such as exceeding store-wide rules for product orders. Testing edge cases in high value features should include scenarios like exceeding store-wide rules for product orders, e.g., attempting to add 1000 items in an e-commerce shop.', 'Testing easily breakable parts in an application is important, especially for sensitive components prone to breaking over time. Testing easily breakable parts in an application is crucial, especially for sensitive components that tend to break over time, even after fixes are applied.', 'Emphasizing the testing of important React components, focusing on user interaction, conditional rendering, and avoiding testing of implementation details. Testing important React components should focus on user interaction and conditional rendering, while avoiding testing of implementation details like useStateHook value changes after a mutation.', 'Providing guidance on setting up a React demo app, including instructions for cloning the GitHub starter repo and running necessary commands for installation. The chapter also provides guidance on setting up a React demo app, offering instructions for cloning the GitHub starter repo and running commands for installation.']}], 'duration': 441.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM7145.jpg', 'highlights': ['The goal of testing is to safeguard against unwanted behavior like bugs when changing the code, providing confidence in project creation, and saving time by quickly checking if the app is still working fine, without manual testing, especially for launch apps.', 'Focusing on happy paths in testing high value features is crucial, prioritizing correct steps to complete the feature successfully. Testing high value features should prioritize happy paths, ensuring correct steps are followed for successful feature completion.', 'Testing for edge cases in high value features is essential, including scenarios such as exceeding store-wide rules for product orders. Testing edge cases in high value features should include scenarios like exceeding store-wide rules for product orders, e.g., attempting to add 1000 items in an e-commerce shop.', 'Testing easily breakable parts in an application is important, especially for sensitive components prone to breaking over time. Testing easily breakable parts in an application is crucial, especially for sensitive components that tend to break over time, even after fixes are applied.', 'The React testing crash course covers five areas: why you should test, what to test, how to write unit, integration, and end-to-end tests using the React testing library and Cypress, aiming to provide a good understanding of testing React apps efficiently and effectively using modern testing tools.']}, {'end': 881.962, 'segs': [{'end': 520.283, 'src': 'embed', 'start': 499.425, 'weight': 0, 'content': [{'end': 508.614, 'text': "but i'd like to show you how we can test this app according to the testing priority list i just showed you and how you could go from there.", 'start': 499.425, 'duration': 9.189}, {'end': 515.7, 'text': 'so when it comes down to high value features, there are in an app like this, two things that stand out to me, The first,', 'start': 508.614, 'duration': 7.086}, {'end': 520.283, 'text': 'most important thing is that you want to check your account balance and your transactions,', 'start': 515.7, 'duration': 4.583}], 'summary': 'Test app for high value features, prioritize account balance and transactions.', 'duration': 20.858, 'max_score': 499.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM499425.jpg'}, {'end': 563.885, 'src': 'embed', 'start': 540.154, 'weight': 1, 'content': [{'end': 549.258, 'text': 'be to check whether a user is able to submit this form by actually not putting in an amount and a note and thus receiving an error message.', 'start': 540.154, 'duration': 9.104}, {'end': 552.68, 'text': 'The third thing on the list are things that are sensitive to break.', 'start': 549.498, 'duration': 3.182}, {'end': 555.861, 'text': 'Now, of course, not every application has those.', 'start': 553.3, 'duration': 2.561}, {'end': 563.885, 'text': "And since I'm not aware of any sensitive part in this application, and you're probably not as well, we'll just skip that one for this course.", 'start': 556.502, 'duration': 7.383}], 'summary': 'Testing form submission without amount and note to trigger error message. skipping sensitive part analysis.', 'duration': 23.731, 'max_score': 540.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM540154.jpg'}, {'end': 610.746, 'src': 'embed', 'start': 578.573, 'weight': 5, 'content': [{'end': 581.094, 'text': 'So we are really close now to writing the actual code.', 'start': 578.573, 'duration': 2.521}, {'end': 585.156, 'text': "But before we do that, I'd like to talk about the fact that in this course,", 'start': 581.474, 'duration': 3.682}, {'end': 594.72, 'text': "we're going to focus on the three most common types of tests in automated testing, which are unit tests, integration tests and end-to-end tests.", 'start': 585.156, 'duration': 9.564}, {'end': 602.903, 'text': 'Unit testing is about testing a very small part of the code, especially in functional programming, mostly referred to testing a function.', 'start': 594.98, 'duration': 7.923}, {'end': 610.746, 'text': 'Integration testing is testing essentially whether multiple units in your applications are working correctly together.', 'start': 603.323, 'duration': 7.423}], 'summary': 'Focus on unit, integration, and end-to-end tests in automated testing.', 'duration': 32.173, 'max_score': 578.573, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM578573.jpg'}, {'end': 681.422, 'src': 'embed', 'start': 651.107, 'weight': 4, 'content': [{'end': 659.593, 'text': 'And the reason for that because usually you want to start at the top of the list is that the tests we are going to write at the bottom of the list are more concise.', 'start': 651.107, 'duration': 8.486}, {'end': 660.734, 'text': "They're easier to understand.", 'start': 659.613, 'duration': 1.121}, {'end': 665.518, 'text': "So through time, we're going to increase the difficulty of every test we're writing.", 'start': 660.794, 'duration': 4.724}, {'end': 668.18, 'text': 'So we are going to start by writing two unit tests.', 'start': 665.818, 'duration': 2.362}, {'end': 672.501, 'text': "And we're going to focus on step two of the payment process.", 'start': 668.78, 'duration': 3.721}, {'end': 681.422, 'text': "And for this, we're going to use the React testing library, which as of today, comes by default with a create React app installation.", 'start': 672.861, 'duration': 8.561}], 'summary': 'Starting with two unit tests, focusing on step two of the payment process using react testing library.', 'duration': 30.315, 'max_score': 651.107, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM651107.jpg'}, {'end': 723.365, 'src': 'embed', 'start': 697.105, 'weight': 3, 'content': [{'end': 704.25, 'text': 'go over right here and now you will see that that component is called transaction create step two.', 'start': 697.105, 'duration': 7.145}, {'end': 707.453, 'text': "so we don't really have to worry what's inside this component.", 'start': 704.25, 'duration': 3.203}, {'end': 717.661, 'text': "i'm just going to copy the name of the component and it will create a new file and i will name it just like the component itself.", 'start': 707.453, 'duration': 10.208}, {'end': 723.365, 'text': "but i will say instead of tsx i will say test dot, and for this we're just going to use javascript.js.", 'start': 717.661, 'duration': 5.704}], 'summary': "Creating a new file named 'test.js' using the component name 'transaction create step two.'", 'duration': 26.26, 'max_score': 697.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM697105.jpg'}], 'start': 448.367, 'title': 'Testing banking app and react component testing', 'summary': "Explores testing priorities for a banking app, emphasizing high value features like checking account balance and making payments, along with edge cases and sensitive areas. it also covers unit, integration, and end-to-end tests for the react component 'transaction create step two' using react testing library.", 'chapters': [{'end': 555.861, 'start': 448.367, 'title': 'Testing a banking app', 'summary': 'Explores testing priorities for a banking app, focusing on high value features such as checking account balance and making payments, as well as testing edge cases and sensitive areas, all of which are crucial for a comprehensive testing strategy.', 'duration': 107.494, 'highlights': ['The most important features to test in the app are checking account balance and making payments, which are considered high value features.', "Testing edge cases in high value features is crucial, such as ensuring error messages are displayed when necessary fields are not filled, to enhance the app's robustness.", 'Emphasizing the need to test areas that are sensitive to break, although not all applications may have such areas.']}, {'end': 881.962, 'start': 556.502, 'title': 'React component testing', 'summary': "Covers three types of automated testing: unit tests, integration tests, and end-to-end tests, with a focus on writing unit tests for the react component 'transaction create step two' and using the react testing library.", 'duration': 325.46, 'highlights': ['The chapter covers three types of automated testing: unit tests, integration tests, and end-to-end tests The course focuses on the three most common types of tests in automated testing: unit tests, integration tests, and end-to-end tests.', "Writing unit tests for the React component 'transaction create step two' and using the React testing library Starting with writing two unit tests and focusing on step two of the payment process using the React testing library, which comes by default with a create React app installation.", 'Explaining the purpose of each type of test and the progression in difficulty The chapter explains the purpose of unit testing, integration testing, and end-to-end testing, and mentions the plan to start with concise tests and increase the difficulty gradually over time.']}], 'duration': 433.595, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM448367.jpg', 'highlights': ['Testing high value features like checking account balance and making payments is crucial.', "Ensuring error messages are displayed for necessary fields in high value features enhances app's robustness.", 'Emphasizing the need to test sensitive areas that are prone to breakage is important.', "The chapter covers unit tests, integration tests, and end-to-end tests for the React component 'transaction create step two'.", 'Starting with writing two unit tests and focusing on step two of the payment process using the React testing library.', 'Explaining the purpose of unit testing, integration testing, and end-to-end testing is essential.']}, {'end': 1422.447, 'segs': [{'end': 912.626, 'src': 'embed', 'start': 881.962, 'weight': 6, 'content': [{'end': 888.789, 'text': 'and now, when i save this And I scroll all the way down again, you will now see that the test has passed.', 'start': 881.962, 'duration': 6.827}, {'end': 890.93, 'text': 'And this is really important to know,', 'start': 889.35, 'duration': 1.58}, {'end': 899.155, 'text': "because if you don't make any assertions in your test which we will do in a couple of minutes from now your test will automatically pass,", 'start': 890.93, 'duration': 8.225}, {'end': 900.515, 'text': 'unless there are errors, of course.', 'start': 899.155, 'duration': 1.36}, {'end': 904.017, 'text': "So you might wonder what's up with the screen.debug.", 'start': 900.995, 'duration': 3.022}, {'end': 912.626, 'text': 'Now, if we scroll up, You will see right here that we have a console log, which is essentially console logging the body.', 'start': 904.317, 'duration': 8.309}], 'summary': 'Successfully passing test with assertions, console logging the body.', 'duration': 30.664, 'max_score': 881.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM881962.jpg'}, {'end': 958.073, 'src': 'embed', 'start': 928.103, 'weight': 5, 'content': [{'end': 930.744, 'text': 'And you will see that this input, for example, is one of them.', 'start': 928.103, 'duration': 2.641}, {'end': 943.868, 'text': 'So instead of saying screen.debug, I will now say get screen.getByRole and just an empty string right here.', 'start': 931.184, 'duration': 12.684}, {'end': 949.99, 'text': 'Now when I save it and go back to my test, you will see we again have a failing test.', 'start': 944.268, 'duration': 5.722}, {'end': 958.073, 'text': "So when I scroll up, You'll see right here that enabled to find an accessible element with the role empty string.", 'start': 950.01, 'duration': 8.063}], 'summary': 'Transitioning from screen.debug to screen.getbyrole leads to failing test due to inability to find an accessible element with the role empty string.', 'duration': 29.97, 'max_score': 928.103, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM928103.jpg'}, {'end': 1057.659, 'src': 'embed', 'start': 1010.112, 'weight': 3, 'content': [{'end': 1018.765, 'text': 'we just did, and we can target it by Putting in an object right here and saying that the name should equal pay.', 'start': 1010.112, 'duration': 8.653}, {'end': 1021.386, 'text': "We're going to do a case insensitive search.", 'start': 1019.345, 'duration': 2.041}, {'end': 1027.568, 'text': 'And then right here we can say to be enabled instead of disabled.', 'start': 1023.067, 'duration': 4.501}, {'end': 1029.189, 'text': 'And I will show you in a minute why.', 'start': 1027.608, 'duration': 1.581}, {'end': 1030.97, 'text': "So let's save this and run the test.", 'start': 1029.249, 'duration': 1.721}, {'end': 1033.931, 'text': 'now this is a very good use case.', 'start': 1031.77, 'duration': 2.161}, {'end': 1035.471, 'text': 'why you should always do this?', 'start': 1033.931, 'duration': 1.54}, {'end': 1043.513, 'text': 'because of course, we wanted to check if the button was disabled, but even though we put in is enabled or to be enabled, um,', 'start': 1035.471, 'duration': 8.042}, {'end': 1053.218, 'text': "the test still passes and the reason for that and this is something you won't find very often in applications but right here we have some errors and this is related to formic.", 'start': 1043.513, 'duration': 9.705}, {'end': 1055.999, 'text': 'now to get rid of this, because i can also show you this.', 'start': 1053.218, 'duration': 2.781}, {'end': 1057.659, 'text': "actually, let's go back right here.", 'start': 1055.999, 'duration': 1.66}], 'summary': 'Demonstrating how to target and enable a case-insensitive search in a test, with a focus on addressing errors related to formic.', 'duration': 47.547, 'max_score': 1010.112, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM1010112.jpg'}, {'end': 1126.739, 'src': 'embed', 'start': 1100.842, 'weight': 0, 'content': [{'end': 1107.644, 'text': "But that's because if we're using async await, instead of saying get by role, you want to using find by role.", 'start': 1100.842, 'duration': 6.802}, {'end': 1111.527, 'text': "so now let's save this and take a look at the outcome of the test.", 'start': 1108.004, 'duration': 3.523}, {'end': 1112.087, 'text': 'all right, great.', 'start': 1111.527, 'duration': 0.56}, {'end': 1118.292, 'text': 'so now it says received element is not enabled, and that was what we were looking for.', 'start': 1112.087, 'duration': 6.205}, {'end': 1126.739, 'text': "right, and i think it's always a good practice to, if you're making an assertion, first do it the opposite side right and then, um well,", 'start': 1118.292, 'duration': 8.447}], 'summary': 'Using async await, change get by role to find by role, resulting in element not enabled.', 'duration': 25.897, 'max_score': 1100.842, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM1100842.jpg'}, {'end': 1238.283, 'src': 'embed', 'start': 1211.962, 'weight': 1, 'content': [{'end': 1220.573, 'text': 'i want to mimic the event where the user is entering an amount and adds a note and then we want to, of course, do kind of like the same thing,', 'start': 1211.962, 'duration': 8.611}, {'end': 1225.579, 'text': 'but then expect, um, that the button becomes enabled.', 'start': 1220.573, 'duration': 5.006}, {'end': 1236.103, 'text': "now, before we do that, i'd like to um, let you know about this like in react with the react testing library, there is a recommended testing priority,", 'start': 1225.579, 'duration': 10.524}, {'end': 1238.283, 'text': 'and this is with regard to the queries.', 'start': 1236.103, 'duration': 2.18}], 'summary': 'Implement input validation and button enabling in react testing with recommended testing priority.', 'duration': 26.321, 'max_score': 1211.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM1211962.jpg'}, {'end': 1328.025, 'src': 'embed', 'start': 1297.695, 'weight': 2, 'content': [{'end': 1300.956, 'text': 'we will be using get by placeholder text.', 'start': 1297.695, 'duration': 3.261}, {'end': 1305.397, 'text': 'So, to mimic this user event, we can make use of user event.', 'start': 1301.616, 'duration': 3.781}, {'end': 1307.898, 'text': 'that also comes with React testing library.', 'start': 1305.397, 'duration': 2.501}, {'end': 1309.879, 'text': "So we'll say user event.", 'start': 1307.938, 'duration': 1.941}, {'end': 1313.38, 'text': 'And I have to manually import it.', 'start': 1311.019, 'duration': 2.361}, {'end': 1314.92, 'text': 'So just copy this line.', 'start': 1313.42, 'duration': 1.5}, {'end': 1317.361, 'text': "I'll say user event.", 'start': 1314.94, 'duration': 2.421}, {'end': 1323.763, 'text': 'And this is not coming from testing library React, but testing library user event.', 'start': 1318.482, 'duration': 5.281}, {'end': 1325.464, 'text': 'There we go.', 'start': 1325.064, 'duration': 0.4}, {'end': 1328.025, 'text': 'So right here, we want to type.', 'start': 1326.164, 'duration': 1.861}], 'summary': 'Using react testing library to mimic user event with user event library', 'duration': 30.33, 'max_score': 1297.695, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM1297695.jpg'}], 'start': 881.962, 'title': 'React testing library', 'summary': 'Covers testing buttons and async await, including assertions, accessibility errors, handling form-related issues, and testing for element enablement, with recommended testing priorities and switching from get by role to find by role.', 'chapters': [{'end': 1079.266, 'start': 881.962, 'title': 'React testing library: button testing', 'summary': 'Covers the process of testing buttons using react testing library, including assertions, accessing elements by role, identifying accessibility errors, and handling form-related issues.', 'duration': 197.304, 'highlights': ['The test will automatically pass if no assertions are made, except in the presence of errors. If no assertions are made in the test, it will automatically pass, except in the presence of errors.', 'Accessing elements by role using get screen.getByRole and identifying accessibility issues. The process of accessing elements by role using get screen.getByRole and identifying accessibility issues is demonstrated.', 'Using assertions to check if the pay button is enabled and handling form-related issues with formic. The use of assertions to check if the pay button is enabled, as well as the handling of form-related issues with formic, is explained.']}, {'end': 1422.447, 'start': 1079.266, 'title': 'React testing library - async await and user events', 'summary': 'Covers the usage of async await and user events in react testing library, including switching from get by role to find by role for async await, testing for element enablement and mimicking user events with recommended testing priorities.', 'duration': 343.181, 'highlights': ['Switch from get by role to find by role when using async await It is recommended to switch from using get by role to find by role when using async await, as it may affect the type of expression and ensure the test outcome matches the expected behavior.', 'Best practice to test for element enablement and disablement It is a good practice to test for both element enablement and disablement to ensure assertions cover both scenarios and validate the expected behavior of the UI components.', 'Recommended testing priority for form elements in React Testing Library The recommended testing priority for form elements in React Testing Library is to use get by placeholder text when targeting form inputs without labels, ensuring accurate targeting and testing of form elements.', 'Mimicking user events with user event in React Testing Library The usage of user event in React Testing Library allows for mimicking user events, such as typing into input fields, enabling comprehensive testing of user interactions and form behaviors.']}], 'duration': 540.485, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM881962.jpg', 'highlights': ['Switch from get by role to find by role when using async await', 'Recommended testing priority for form elements in React Testing Library', 'Mimicking user events with user event in React Testing Library', 'Best practice to test for element enablement and disablement', 'Using assertions to check if the pay button is enabled and handling form-related issues with formic', 'Accessing elements by role using get screen.getByRole and identifying accessibility issues', 'The test will automatically pass if no assertions are made, except in the presence of errors']}, {'end': 1696.141, 'segs': [{'end': 1454.894, 'src': 'embed', 'start': 1423.648, 'weight': 0, 'content': [{'end': 1425.37, 'text': 'And well, we can do the same thing again.', 'start': 1423.648, 'duration': 1.722}, {'end': 1427.752, 'text': "So we can first check if it's disabled.", 'start': 1425.41, 'duration': 2.342}, {'end': 1436.04, 'text': 'And of course that should not be the case because we now have properly been putting in some data into the form.', 'start': 1427.792, 'duration': 8.248}, {'end': 1443.485, 'text': 'and this pattern, which you see right here, is often referred to as the arrange act, assert pattern.', 'start': 1436.42, 'duration': 7.065}, {'end': 1450.951, 'text': 'so in the first phase of the test you are arranging arranging things, so, for example, rendering the component, then you have your act,', 'start': 1443.485, 'duration': 7.466}, {'end': 1454.894, 'text': 'so it could be, you know, user events, typing, clicking, things like that,', 'start': 1450.951, 'duration': 3.943}], 'summary': 'Testing follows the arrange, act, assert pattern.', 'duration': 31.246, 'max_score': 1423.648, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM1423648.jpg'}, {'end': 1493.387, 'src': 'embed', 'start': 1466.24, 'weight': 3, 'content': [{'end': 1469.302, 'text': 'which is great because it should actually be enabled.', 'start': 1466.24, 'duration': 3.062}, {'end': 1477.206, 'text': 'so of course you can already guess what happens if we will put this in there and save the file Boom.', 'start': 1469.302, 'duration': 7.904}, {'end': 1478.007, 'text': 'And there we go.', 'start': 1477.347, 'duration': 0.66}, {'end': 1479.61, 'text': 'We have two passing tests.', 'start': 1478.048, 'duration': 1.562}, {'end': 1483.174, 'text': "And, as you can see, testing it's not all that difficult, right?", 'start': 1480.01, 'duration': 3.164}, {'end': 1493.387, 'text': "If you have your test priority in place, it's more about translating user interactions in code and making the right assertions.", 'start': 1483.214, 'duration': 10.173}], 'summary': 'Enabling the feature led to passing tests, showing testing is not difficult if test priority is set.', 'duration': 27.147, 'max_score': 1466.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM1466240.jpg'}, {'end': 1537.592, 'src': 'embed', 'start': 1514.197, 'weight': 2, 'content': [{'end': 1522.581, 'text': 'And as I said before, integration tests are about testing multiple units of code, which usually results in like one larger test.', 'start': 1514.197, 'duration': 8.384}, {'end': 1528.665, 'text': 'And you will often find that these type of tests have multiple assertions in them, right?', 'start': 1523.261, 'duration': 5.404}, {'end': 1533.409, 'text': 'So you often see that you know you have your range, so you have your rendering of your component.', 'start': 1528.685, 'duration': 4.724}, {'end': 1537.592, 'text': 'And then you could, for example, have user typing something.', 'start': 1533.869, 'duration': 3.723}], 'summary': 'Integration tests involve testing multiple code units with multiple assertions.', 'duration': 23.395, 'max_score': 1514.197, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM1514197.jpg'}, {'end': 1696.141, 'src': 'embed', 'start': 1646.066, 'weight': 1, 'content': [{'end': 1655.27, 'text': 'And especially in this scenario, I would personally prefer it because it better resembles how a user would use our application.', 'start': 1646.066, 'duration': 9.204}, {'end': 1662.815, 'text': 'please keep in mind that integration testing definitely is not about combining unit tests into one test.', 'start': 1655.27, 'duration': 7.545}, {'end': 1671.82, 'text': 'however, if you find that you are able to combine unit tests into one integration test right so that it will resemble a more realistic user flow,', 'start': 1662.815, 'duration': 9.005}, {'end': 1680.926, 'text': 'i definitely would recommend you to do it, and, from a practical point of view, you will often find that just a few unit tests are, you know,', 'start': 1671.82, 'duration': 9.106}, {'end': 1686.171, 'text': 'much better than you know, having, like hundreds of very small and concise unit tests.', 'start': 1680.926, 'duration': 5.245}, {'end': 1692.637, 'text': "Now let's move on to writing end to end tests, which are by far my most favorite type of test,", 'start': 1686.592, 'duration': 6.045}, {'end': 1696.141, 'text': 'simply for the fact that they are so effective in testing.', 'start': 1692.637, 'duration': 3.504}], 'summary': 'Integration testing should resemble user flow; few unit tests are often better than hundreds. end to end tests are highly effective.', 'duration': 50.075, 'max_score': 1646.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM1646066.jpg'}], 'start': 1423.648, 'title': 'Ui component and integration testing', 'summary': 'Covers the arrange, act, assert pattern for testing ui components, emphasizing test priority and integration testing for realistic user flows to improve efficiency.', 'chapters': [{'end': 1493.387, 'start': 1423.648, 'title': 'Testing ui components', 'summary': 'Discusses the arrange, act, assert pattern for testing ui components, showcasing the process of rendering the component, user interactions, and making assertions, resulting in successful tests and emphasizing the importance of test priority.', 'duration': 69.739, 'highlights': ['The arrange, act, assert pattern involves arranging the component, performing user interactions, and making assertions, facilitating effective testing.', 'Successfully testing UI components results in two passing tests, highlighting the importance of proper test priority and translating user interactions into code.']}, {'end': 1696.141, 'start': 1493.908, 'title': 'Integration testing and user flows', 'summary': 'Discusses integration testing, with a focus on testing multiple units of code together, and recommends combining unit tests into integration tests to resemble realistic user flows and improve testing efficiency.', 'duration': 202.233, 'highlights': ['Integration testing involves testing multiple units of code together, often with multiple assertions, and aims to resemble realistic user flows. Integration tests focus on testing multiple units of code together and often involve multiple assertions to resemble realistic user flows.', 'Recommendation to combine unit tests into integration tests to better resemble how a user would use the application and to improve testing efficiency. Suggests combining unit tests into integration tests to better resemble user flow and improve testing efficiency.', 'End-to-end tests are effective in testing and are favored due to their efficiency in testing. End-to-end tests are favored for their effectiveness in testing.']}], 'duration': 272.493, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM1423648.jpg', 'highlights': ['The arrange, act, assert pattern involves arranging the component, performing user interactions, and making assertions, facilitating effective testing.', 'Recommendation to combine unit tests into integration tests to better resemble how a user would use the application and to improve testing efficiency.', 'Integration testing involves testing multiple units of code together, often with multiple assertions, and aims to resemble realistic user flows. Integration tests focus on testing multiple units of code together and often involve multiple assertions to resemble realistic user flows.', 'Successfully testing UI components results in two passing tests, highlighting the importance of proper test priority and translating user interactions into code.', 'End-to-end tests are effective in testing and are favored due to their efficiency in testing.']}, {'end': 2761.342, 'segs': [{'end': 1760.463, 'src': 'heatmap', 'start': 1715.313, 'weight': 0, 'content': [{'end': 1720.457, 'text': 'However, since it does not come by default with Create React tab, we need to set some things up.', 'start': 1715.313, 'duration': 5.144}, {'end': 1729.659, 'text': 'so we want to install cypress and in order to do that we can say yarn, oops, yarn add, and this will.', 'start': 1721.417, 'duration': 8.242}, {'end': 1739.541, 'text': 'this will be a daft dependency and we can say cypress, and we also want to have testing library slash cypress.', 'start': 1729.659, 'duration': 9.882}, {'end': 1743.142, 'text': "so i go back to you once that's done all right, great.", 'start': 1739.541, 'duration': 3.601}, {'end': 1748.663, 'text': 'so now we can run the command yarn, run, cypress open.', 'start': 1743.142, 'duration': 5.521}, {'end': 1753.437, 'text': 'this will now open up cypress.', 'start': 1750.794, 'duration': 2.643}, {'end': 1760.463, 'text': 'so then you will probably see this thing popping up and as you can see, it already has added some tests by default.', 'start': 1753.437, 'duration': 7.026}], 'summary': 'Install cypress and testing library in create react tab using yarn add, then run cypress open command to see default tests.', 'duration': 27.829, 'max_score': 1715.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM1715313.jpg'}, {'end': 1804.558, 'src': 'embed', 'start': 1771.994, 'weight': 2, 'content': [{'end': 1776.318, 'text': 'but i will just remove those two folders, just like that.', 'start': 1771.994, 'duration': 4.324}, {'end': 1780.843, 'text': 'next up, we want to add the react testing library cypress commands.', 'start': 1776.838, 'duration': 4.005}, {'end': 1788.311, 'text': 'however, this is completely optional, but i like it because we can then use the same commands we used in the previous test in our cypress test,', 'start': 1780.843, 'duration': 7.468}, {'end': 1790.374, 'text': 'which by default is not supported.', 'start': 1788.311, 'duration': 2.063}, {'end': 1804.558, 'text': "so i will go to support commands.js and right here i will add the following line we'll say import, add testing library cypress slash, add commands.", 'start': 1790.374, 'duration': 14.184}], 'summary': 'Remove folders and add react testing library cypress commands, making commands reusable in cypress tests.', 'duration': 32.564, 'max_score': 1771.994, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM1771994.jpg'}, {'end': 2039.25, 'src': 'embed', 'start': 1996.26, 'weight': 1, 'content': [{'end': 2003.081, 'text': 'What I can highly recommend you is to install the following Chrome extension, which is called Testing Playground', 'start': 1996.26, 'duration': 6.821}, {'end': 2009.083, 'text': "It's made by someone that's very actively, like an active maintainer in the React testing library community.", 'start': 2003.121, 'duration': 5.962}, {'end': 2019.605, 'text': 'And what this tool allows you to do is it allows you to hover over elements on the page and suggest a query, which is really great.', 'start': 2009.643, 'duration': 9.962}, {'end': 2023.866, 'text': "Again, it's optional, but I'm going to use it and I recommend you to use it as well.", 'start': 2019.645, 'duration': 4.221}, {'end': 2025.386, 'text': 'But I already have it installed.', 'start': 2024.086, 'duration': 1.3}, {'end': 2033.408, 'text': 'So now if you would open up your Cypress window again, you will see that right here, you see we have the payment underscore spec.js file.', 'start': 2025.686, 'duration': 7.722}, {'end': 2036.929, 'text': 'And you can click right here on run one integration spec.', 'start': 2033.808, 'duration': 3.121}, {'end': 2039.25, 'text': "Now it's important.", 'start': 2037.269, 'duration': 1.981}], 'summary': 'Recommend using the chrome extension testing playground for react testing library with hover-over element query suggestion feature.', 'duration': 42.99, 'max_score': 1996.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM1996260.jpg'}, {'end': 2437.823, 'src': 'embed', 'start': 2403.776, 'weight': 4, 'content': [{'end': 2408.162, 'text': "and a user will never go off by a test id, right, and that's why we have right here.", 'start': 2403.776, 'duration': 4.386}, {'end': 2416.79, 'text': "um, we have to find a row and find the label text, because that's actually how a user will look at our and interact with our application.", 'start': 2408.162, 'duration': 8.628}, {'end': 2423.514, 'text': 'but especially in cases like this, where you, for example, have, like dynamic content, a data test id is perfectly fine to use.', 'start': 2416.79, 'duration': 6.724}, {'end': 2426.336, 'text': "so i'll just close this up and the first thing i will do,", 'start': 2423.514, 'duration': 2.822}, {'end': 2437.823, 'text': "i will assign a new variable and i will call it let's see current balance or let's actually do old balance,", 'start': 2426.336, 'duration': 11.487}], 'summary': 'Using data test ids for dynamic content, finding label text for user interaction.', 'duration': 34.047, 'max_score': 2403.776, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM2403776.jpg'}, {'end': 2461.866, 'src': 'heatmap', 'start': 2423.514, 'weight': 1, 'content': [{'end': 2426.336, 'text': "so i'll just close this up and the first thing i will do,", 'start': 2423.514, 'duration': 2.822}, {'end': 2437.823, 'text': "i will assign a new variable and i will call it let's see current balance or let's actually do old balance,", 'start': 2426.336, 'duration': 11.487}, {'end': 2440.705, 'text': 'because later on we will also use the current balance.', 'start': 2437.823, 'duration': 2.882}, {'end': 2446.308, 'text': 'so i think it might be a little bit more clear to say that we first have the old balance and then grab the new balance.', 'start': 2440.705, 'duration': 5.603}, {'end': 2448.95, 'text': 'so now we want to store that value.', 'start': 2446.308, 'duration': 2.642}, {'end': 2450.531, 'text': 'um, of course.', 'start': 2448.95, 'duration': 1.581}, {'end': 2461.866, 'text': "so what we can do is i will just copy this to my clipboard and i'll say dot then and we will um call this balance, for example.", 'start': 2450.531, 'duration': 11.335}], 'summary': "Creating a new variable 'old balance' to store the current value for future use.", 'duration': 38.352, 'max_score': 2423.514, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM2423514.jpg'}, {'end': 2549.572, 'src': 'embed', 'start': 2482.459, 'weight': 5, 'content': [{'end': 2496.986, 'text': "so i can say dot then and then we take the, uh, the i don't know balance and return console log console dot, log balance.", 'start': 2482.459, 'duration': 14.527}, {'end': 2501.168, 'text': 'there we go and you can also open up your console right here.', 'start': 2496.986, 'duration': 4.182}, {'end': 2507.031, 'text': "so now you'll see, the test is going to run And there we go.", 'start': 2501.168, 'duration': 5.863}, {'end': 2509.633, 'text': 'The current balance is now console logged.', 'start': 2507.252, 'duration': 2.381}, {'end': 2511.634, 'text': "But of course, we don't need that for now.", 'start': 2509.993, 'duration': 1.641}, {'end': 2516.517, 'text': 'So I will just remove that part and save it like that.', 'start': 2511.674, 'duration': 4.843}, {'end': 2519.419, 'text': 'So next up, we have click on pay button.', 'start': 2516.837, 'duration': 2.582}, {'end': 2521.56, 'text': "But now we see it's actually new.", 'start': 2519.439, 'duration': 2.121}, {'end': 2523.461, 'text': "So let's change that.", 'start': 2521.62, 'duration': 1.841}, {'end': 2529.756, 'text': 'and we can go back to our app right here.', 'start': 2525.974, 'duration': 3.782}, {'end': 2546.31, 'text': 'see if our testing playground has a suggested query and it does get a role button name, new, awesome, copy that cypress button and once you click it,', 'start': 2529.756, 'duration': 16.554}, {'end': 2549.572, 'text': 'so we then want to search for a user.', 'start': 2546.31, 'duration': 3.262}], 'summary': 'Testing and updating code for user balance and button functionality in app.', 'duration': 67.113, 'max_score': 2482.459, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM2482459.jpg'}, {'end': 2728.924, 'src': 'embed', 'start': 2699.633, 'weight': 7, 'content': [{'end': 2703.035, 'text': 'right. so i will copy this.', 'start': 2699.633, 'duration': 3.402}, {'end': 2707.077, 'text': 'and we also want to get the add a note.', 'start': 2703.035, 'duration': 4.042}, {'end': 2709.659, 'text': "we're going to uh.", 'start': 2708.118, 'duration': 1.541}, {'end': 2712.279, 'text': 'so now to make sure that we have like a unique note.', 'start': 2709.659, 'duration': 2.62}, {'end': 2719.401, 'text': 'because, because if i will add dinner right here, then if a user would go to uh their personal transactions right here,', 'start': 2712.279, 'duration': 7.122}, {'end': 2721.302, 'text': 'you will get like dinner everywhere, right.', 'start': 2719.401, 'duration': 1.901}, {'end': 2723.783, 'text': 'so we want to prevent that from happening.', 'start': 2721.302, 'duration': 2.481}, {'end': 2728.924, 'text': 'so what i can do is i can, uh, make sure we get like a unique node.', 'start': 2723.783, 'duration': 5.141}], 'summary': 'Implementing a unique note feature to prevent duplication in personal transactions.', 'duration': 29.291, 'max_score': 2699.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM2699633.jpg'}], 'start': 1696.141, 'title': 'Cypress setup and automated payment process', 'summary': 'Covers setting up cypress for react testing, including installing cypress, adding react testing library cypress commands, and writing a payment test. it also discusses using testing playground for cypress, demonstrating its use for querying elements, typing, checking, and clicking actions, and using data test ids. additionally, it covers automating the payment process using cypress, including setting old and current balance, clicking on pay button, searching for a user, adding an amount and a unique note, and testing the payment process.', 'chapters': [{'end': 1995.44, 'start': 1696.141, 'title': 'Setting up cypress for react testing', 'summary': 'Discusses setting up cypress for react testing, including installing cypress, adding react testing library cypress commands, and writing a payment test, enabling seamless integration with react testing and simulating user actions.', 'duration': 299.299, 'highlights': ['The chapter discusses setting up Cypress for React testing, including installing Cypress, adding react testing library cypress commands, and writing a payment test, enabling seamless integration with React testing and simulating user actions.', 'Cypress allows for fast simulations on the screen, surpassing human interaction speed, making it enjoyable to write high-value features.', 'The process involves installing Cypress and testing library/cypress, removing default tests, optionally adding react testing library cypress commands, and writing a payment test to simulate user actions such as logging in, checking account balance, making a payment, and verifying transactions.', 'By adding react testing library cypress commands, the same commands used in previous tests can be applied to Cypress tests, enhancing test consistency and efficiency.']}, {'end': 2423.514, 'start': 1996.26, 'title': 'Using testing playground with cypress', 'summary': 'Discusses the installation of the chrome extension testing playground for cypress, demonstrating its use for querying elements, typing, checking, and clicking actions, and using data test ids to target dynamic content in end-to-end tests.', 'duration': 427.254, 'highlights': ['The chapter discusses the installation of the Chrome extension Testing Playground for Cypress The speaker highly recommends installing the Testing Playground Chrome extension for Cypress, as it allows users to hover over elements on the page and suggest a query for querying elements in end-to-end tests.', 'Demonstrating the use of Testing Playground for querying elements, typing, checking, and clicking actions The speaker demonstrates using the Testing Playground to suggest queries for querying elements, typing, checking, and clicking actions in end-to-end tests with Cypress.', 'Using data test IDs to target dynamic content in end-to-end tests The speaker explains the use of data test IDs as a last resort for targeting dynamic content in end-to-end tests, especially when the content can be dynamic.']}, {'end': 2761.342, 'start': 2423.514, 'title': 'Automated payment process', 'summary': 'Covers automating the payment process using cypress, including setting old and current balance, clicking on pay button, searching for a user, adding an amount and a unique note, and testing the payment process.', 'duration': 337.828, 'highlights': ['Setting old and current balance using Cypress and console logging the current balance The speaker demonstrates setting the old balance and current balance using Cypress and console logging the current balance for testing purposes.', 'Automating the process of clicking on the pay button and searching for a user using Cypress The speaker illustrates automating the process of clicking on the pay button and searching for a user using Cypress for efficient testing.', 'Adding an amount and a unique note using Cypress and preventing duplicate notes by using a unique identifier The transcript discusses adding an amount and a unique note using Cypress, and preventing duplicate notes by using a unique identifier like uuid v4 for uniqueness.']}], 'duration': 1065.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM1696141.jpg', 'highlights': ['Covers setting up Cypress for React testing, including installing Cypress, adding react testing library cypress commands, and writing a payment test, enabling seamless integration with React testing and simulating user actions.', 'The process involves installing Cypress and testing library/cypress, removing default tests, optionally adding react testing library cypress commands, and writing a payment test to simulate user actions such as logging in, checking account balance, making a payment, and verifying transactions.', 'By adding react testing library cypress commands, the same commands used in previous tests can be applied to Cypress tests, enhancing test consistency and efficiency.', 'The chapter discusses the installation of the Chrome extension Testing Playground for Cypress, allowing users to hover over elements on the page and suggest a query for querying elements in end-to-end tests.', 'Using data test IDs to target dynamic content in end-to-end tests, especially when the content can be dynamic.', 'Setting old and current balance using Cypress and console logging the current balance for testing purposes.', 'Automating the process of clicking on the pay button and searching for a user using Cypress for efficient testing.', 'Adding an amount and a unique note using Cypress, and preventing duplicate notes by using a unique identifier like uuid v4 for uniqueness.']}, {'end': 3515.359, 'segs': [{'end': 2960.428, 'src': 'embed', 'start': 2932.609, 'weight': 3, 'content': [{'end': 2938.113, 'text': "And Cypress, like by default, is constantly looking for the element you're trying to target.", 'start': 2932.609, 'duration': 5.504}, {'end': 2944.798, 'text': "And as soon as it finds it, it's going to click or type or execute whatever you asked Cypress to do.", 'start': 2938.153, 'duration': 6.645}, {'end': 2955.145, 'text': "And because this is not really working properly, because when I go right here to the let's take a look right here, try to click.", 'start': 2945.778, 'duration': 9.367}, {'end': 2960.428, 'text': 'And, as you can see, the list did not completely load yet properly.', 'start': 2955.165, 'duration': 5.263}], 'summary': 'Cypress constantly looks for the target element, but encountering issues with proper functionality.', 'duration': 27.819, 'max_score': 2932.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM2932609.jpg'}, {'end': 3105.313, 'src': 'embed', 'start': 3076.966, 'weight': 1, 'content': [{'end': 3081.89, 'text': 'but right here I want to check if,', 'start': 3076.966, 'duration': 4.924}, {'end': 3091.877, 'text': 'like the and we can use string interpolation for that if the minus dollar sign and then we want to have the payment amount, right?', 'start': 3081.89, 'duration': 9.987}, {'end': 3093.178, 'text': 'So payment amount.', 'start': 3092.178, 'duration': 1}, {'end': 3097.725, 'text': 'And then we want to check if this is actually visible on the page.', 'start': 3094.642, 'duration': 3.083}, {'end': 3099.587, 'text': 'So we can say should.', 'start': 3097.946, 'duration': 1.641}, {'end': 3105.313, 'text': 'And this is different compared to the React testing library, right? The way we make assertions.', 'start': 3101.269, 'duration': 4.044}], 'summary': 'Using string interpolation to check payment amount visibility in react testing.', 'duration': 28.347, 'max_score': 3076.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM3076966.jpg'}, {'end': 3299.471, 'src': 'embed', 'start': 3256.513, 'weight': 2, 'content': [{'end': 3264.635, 'text': 'Perfect So now we want to check whether the difference between the new and old balance is equal to the payment amount.', 'start': 3256.513, 'duration': 8.122}, {'end': 3267.135, 'text': 'So we can make a custom assertion.', 'start': 3265.155, 'duration': 1.98}, {'end': 3277.118, 'text': 'So I can say expect converted new balance minus the converted old balance, or actually I have to swipe that around.', 'start': 3267.195, 'duration': 9.923}, {'end': 3278.238, 'text': 'Of course, there you go.', 'start': 3277.258, 'duration': 0.98}, {'end': 3283.739, 'text': 'Two equal.', 'start': 3282.219, 'duration': 1.52}, {'end': 3297.59, 'text': 'and then we take parse float, the payment amount.', 'start': 3287.862, 'duration': 9.728}, {'end': 3299.471, 'text': 'okay, that should be it.', 'start': 3297.59, 'duration': 1.881}], 'summary': 'Checking if difference between new and old balance equals payment amount.', 'duration': 42.958, 'max_score': 3256.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM3256513.jpg'}, {'end': 3395.578, 'src': 'embed', 'start': 3368.98, 'weight': 0, 'content': [{'end': 3376.345, 'text': 'so make sure you have a, you know, some priorities in your testing strategy so you can get most bang for your buck.', 'start': 3368.98, 'duration': 7.365}, {'end': 3385.691, 'text': 'my testing priority list i showed you before is an example of that right, and it just gives you some guidance in your testing workflow.', 'start': 3376.345, 'duration': 9.346}, {'end': 3395.578, 'text': 'very often you will find that your high value features are best to be tested with at least some end-to-end tests using tools like cypress.', 'start': 3385.691, 'duration': 9.887}], 'summary': 'Prioritize high value features for end-to-end tests using tools like cypress.', 'duration': 26.598, 'max_score': 3368.98, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM3368980.jpg'}], 'start': 2761.342, 'title': 'Automating user actions in cypress and end-to-end testing', 'summary': 'Covers automating user actions in cypress, such as adding a unique id, clicking on specific buttons, and using suggested queries, along with troubleshooting end-to-end tests, including issues with element visibility, assertions, and custom validations, stressing the importance of testing strategies and selecting the right testing tools.', 'chapters': [{'end': 2874.5, 'start': 2761.342, 'title': 'Automating user actions in cypress', 'summary': 'Covers automating user actions in cypress, including adding a unique id, clicking on specific buttons, and using suggested queries for different user interactions.', 'duration': 113.158, 'highlights': ['The user will click on return to transactions, so we again have a suggested query dot click, cyprus find by role.', 'The next thing the user will do is click on that pay button, and a suggested query for that is cyprus find by role dot click.', 'We have our unique ID added when saving the note and going back to Cypress.']}, {'end': 3515.359, 'start': 2875.481, 'title': 'End-to-end testing with cypress', 'summary': 'Covers troubleshooting an end-to-end test with cypress, including issues with element visibility, assertions, and custom validations, emphasizing the importance of testing strategies and selecting the right testing tools.', 'duration': 639.878, 'highlights': ["Troubleshooting issues with element visibility and interaction, utilizing Cypress 'force' option to click on elements covered by other elements, and emphasizing the importance of ensuring elements are visible before interaction. Emphasizes the use of Cypress 'force' option to interact with elements covered by other elements, highlights the importance of ensuring element visibility before interaction.", "Utilizing variables and string interpolation to dynamically handle payment amount verification, demonstrating the use of 'should' to check for visibility, and emphasizing the importance of reusable code for testing scenarios. Demonstrates dynamic handling of payment amount verification, emphasizes the use of 'should' to check for visibility, and highlights the importance of reusable code for testing scenarios.", 'Implementing custom assertions using parsed float values to validate balance deductions from account balance, and detailing the resolution of typos and error messages during the testing process. Details the implementation of custom assertions using parsed float values, and resolution of typos and error messages during the testing process.', 'Emphasizing the importance of testing strategies, prioritizing high-value features for end-to-end testing, and suggesting the combination of integration and unit tests for other functionalities to optimize testing efforts. Emphasizes the importance of testing strategies, prioritizing high-value features for end-to-end testing, and suggesting the combination of integration and unit tests for other functionalities to optimize testing efforts.', 'Providing guidance on testing workflows, prioritizing high-value features for end-to-end testing, and recommending the use of integration or unit tests for other functionalities, with an emphasis on mimicking user behavior in tests. Provides guidance on testing workflows, prioritizing high-value features for end-to-end testing, and recommending the use of integration or unit tests for other functionalities.']}], 'duration': 754.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/OVNjsIto9xM/pics/OVNjsIto9xM2761342.jpg', 'highlights': ['Emphasizes the importance of testing strategies, prioritizing high-value features for end-to-end testing, and suggesting the combination of integration and unit tests for other functionalities to optimize testing efforts.', "Utilizing variables and string interpolation to dynamically handle payment amount verification, demonstrating the use of 'should' to check for visibility, and emphasizing the importance of reusable code for testing scenarios.", 'Implementing custom assertions using parsed float values to validate balance deductions from account balance, and detailing the resolution of typos and error messages during the testing process.', "Troubleshooting issues with element visibility and interaction, utilizing Cypress 'force' option to click on elements covered by other elements, and emphasizing the importance of ensuring elements are visible before interaction."]}], 'highlights': ['The React testing crash course covers five areas: why you should test, what to test, how to write unit, integration, and end-to-end tests using the React testing library and Cypress, aiming to provide a good understanding of testing React apps efficiently and effectively using modern testing tools.', 'Testing high value features like checking account balance and making payments is crucial.', 'Focusing on happy paths in testing high value features is crucial, prioritizing correct steps to complete the feature successfully. Testing high value features should prioritize happy paths, ensuring correct steps are followed for successful feature completion.', 'Testing for edge cases in high value features is essential, including scenarios such as exceeding store-wide rules for product orders. Testing edge cases in high value features should include scenarios like exceeding store-wide rules for product orders, e.g., attempting to add 1000 items in an e-commerce shop.', 'The goal of testing is to safeguard against unwanted behavior like bugs when changing the code, providing confidence in project creation, and saving time by quickly checking if the app is still working fine, without manual testing, especially for launch apps.', 'The arrange, act, assert pattern involves arranging the component, performing user interactions, and making assertions, facilitating effective testing.', 'Integration testing involves testing multiple units of code together, often with multiple assertions, and aims to resemble realistic user flows. Integration tests focus on testing multiple units of code together and often involve multiple assertions to resemble realistic user flows.', 'Covers setting up Cypress for React testing, including installing Cypress, adding react testing library cypress commands, and writing a payment test, enabling seamless integration with React testing and simulating user actions.', 'Emphasizes the importance of testing strategies, prioritizing high-value features for end-to-end testing, and suggesting the combination of integration and unit tests for other functionalities to optimize testing efforts.']}