Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
ReactJS Birthday Reminder React App (with WebdriverIO tests)
Rating: 4.3 out of 5(121 ratings)
9,976 students

ReactJS Birthday Reminder React App (with WebdriverIO tests)

Learn React.js by coding a Birthday Reminder App. Use WebdriverIO + visual e2e testing for web & mobile compatibility.
Created byNikolay Advolodkin
Last updated 3/2022
English
English [Auto],

What you'll learn

  • Learn how to create a birthday react application from scratch.
  • Identify a wonderful testing strategy for the application.
  • Implement a single test that's going to provide a ton of coverage for the web application.
  • Build React application in less than 30 minutes!

Course content

1 section • 12 lectures • 35m total length

  • Introduction0:27

    Build a birthday reminder app with React from scratch, outline a testing strategy, and implement a single test that provides substantial coverage of the web app.

  • Source Code
  • Birthday Reminder React App Setup5:11

    Set up the birthday reminder React app by cloning the repo, installing dependencies, and running it to compare the set up and final folders, while learning testing strategies.

  • Static UI Created4:12

    Create a ReactJS UI for a birthday reminder app, adding a main wrapper, a container section with an h3 showing birthdays, and a button that logs clicks to the console.

  • List component5:32

    Create a dynamic React list component that maps over a people array to render each birthday entry with image, name, and age, while wiring state and props for dynamic rendering.

  • onClick() Implemented0:59

    Implement onClick to clear the birthday list by passing an empty array, update the counter from the people list, and prepare the app for testing with webdriverio.

  • What Is Our Testing Strategy3:44

    Apply a testing pyramid to the ReactJS birthday reminder app, prioritize component tests over unit tests, verify button and list behavior, and ensure look and feel on web and mobile.

  • Installing WDIO3:50

    Install and configure web driver io for visual end-to-end testing of the ReactJS birthday reminder app in the cloud, using Screener, Source Labs, and Mocha in Node.js.

  • Run and Test WDIO1:40

    Learn to run and test a ReactJS birthday reminder app using WebdriverIO, with a basic login test, WebdriverIO config, and plan for visual end-to-end testing with screener.

  • Visual e2e Testing9:24

    Configure visual end-to-end testing with Screener integration, set up environment variables and project details, capture snapshots of the default and clear states, and validate baselines across desktop browsers.

  • Conclusion0:09

    Thank you for joining this tutorial. I look forward to teaching you again next time.

  • BONUS LECTURE0:16

Requirements

  • Knowledge of NodeJS and JavaScript
  • An IDE that works with Node and JavaScript
  • Github Account

Description

Throughout the course, you'll be able to build a small React application, in less than 30 minutes.

Learn the basic concepts, tools, and functions that you will need to build a birthday reminder react app with the popular programming language, JavaScript.

You’ll be provided with access to the source code so you can jump to the relevant part in the code and try to work with this react project on your own.


What's in this course?


  • Birthday reminder set up

  • Static UI created

  • List component

  • onClick() implemented

  • What is your testing strategy

  • Installing wdio

  • Run wdio test

  • Visual e2e testing

  • BONUS lecture

Ready to start? Check out the full curriculum and jump into the tutorial.


What current students are saying:

"I appreciate the time the instructor put on this course as well as the opportunity to get familiar with TestProject free of charge. Well explained, however, if you are using Windows and you are new in Automation Testing, you might find it a bit challenging with adding the SDK Token in your system environment since the instruction used MAC which is completely a different way with windows. Other than that... I appreciate a lot this free course .... thank you so much"

“I like the fundamental approach used by the author. Will see:) To prepare for such a course - it's a really hard and big job. Respect and thank you.” - Serhii Kovalenko


“Wonderful content and things explained in a nutshell. Overwhelmed by Author's dedication to putting things in such a way that any novice or manual tester can follow and understand and definitely be on-boarded as a Selenium Automation Engineer the next day at work. Thanks a million times for creating these courses! One Stop for Automation."- Rupashree Geethaaviji Ananthakrishna

“I am familiar with Nikolay from a course I saw on TestAutomation and have the highest regard for him. Glad to see him on Udemy.” - Annamalai Viswanathan


“One Of the Best courses on Selenium With C#. Cheers Nikolay!!” - Saransh Vaid

Who this course is for:

  • Beginner and Intermediate developers looking to learn how to test web applications

Report abuse