Build testable react app Create test automation using cypress

1. Using TypeScript, ESLint and Cypress
Build Testable
React App

2. Fahmi Idris
Frontend Engineer at Kata.ai
General Lead FrontenDev
Email: fahmi@kata.ai
Phone: +6289-777-033-19

4. +

5. + +

6. –React Lovers
“you’re rockstar”

8. “let’s say about TypeScript”

9. –It is a strict syntactical superset of JavaScript
“TypeScript”

10. why TypeScript?
• TypeScript simplifies JavaScript code, making it easier to read and debug.
• TypeScript is open source.
• TypeScript provides highly productive development tools for JavaScript
IDEs and practices, like static checking.
• TypeScript makes code easier to read and understand.
• With TypeScript, we can make a huge improvement over plain JavaScript.
• TypeScript gives us all the benefits of ES6 (ECMAScript 6), plus more
productivity.
• TypeScript can help us to avoid painful bugs that developers commonly
run into when writing JavaScript by type checking the code.
• Structural
• Powerful type system, including generics.
• TypeScript code can be compiled as per ES5 and ES6 standards to support
the latest browser.
• Aligned with ECMAScript for compatibility.
• Starts and ends with JavaScript.
• Supports static typing.
• TypeScript will save developers time.
• TypeScript is a superset of ES3, ES5, and ES6.

11. https://devopedia.org/typescript

13. pros
• Object Oriented Programming Features
• TypeScript Does Not Need a Runtime Plugin
• Back-end Developer Feel More Comfortable With it
• It is Used in Popular Frameworks

14. cons
• Learning Curve
• Needs Development Tooling
• Cannot Easily be Edited by Content Management Systems (CMS)

15. who’s using TypeScript
And absolutely kata.ai using TypeScript

16. –is a static code analysis tool for identifying
problematic patterns in JavaScript code
“ESLint”

17. why ESLint?
- Enforce Standards Programmatically
By programmatically enforcing standards, teams save time and prevent team head butting

18. why ESLint?
- Automate Code Quality
There are three common ways to enforce linting in your development process
• IDE - Download ESLint for your favorite editor by following the ESLint guide This will
show you problems to fix quick and easy before trying to commit.
• Pre-commit - Check out the Lint-Staged module to run linting against newly staged
files, disallowing commits if any linting errors are found!
• Pipeline - Add linting into your pipeline to prevent any deployments with errors,
preventing developers from completing stories when errors are found!

19. why ESLint?
- Code Maintenance
Enforcing standards that to prevent long discussion and ego battles, along with preventing
developers from committing to the code base unless they adhere to the agreed standards are
the first two big wins for using a linter like ESLint

21. who’s using ESLint
And absolutely kata.ai using ESLint to, but it's still a migration stage :D

22. –is a Javascript End to End testing framework
“Cypress”

23. + +
+

24. –React Lovers
“amazing”

25. why Cypress?
• Cypress does not use Selenium.
• Cypress focuses on doing end-to-end testing REALLY well.
• Cypress works on any front-end framework or website.
• Cypress tests are only written in JavaScript.
• Cypress is all in one.
• Cypress is for developers and QA engineers.
• Cypress runs much, much faster.

27. pro-tips using Cypress
• Use `data-` attributes as element selector
• Use 70/20/10 mantra, 70% unit tests, 20% integration tests, and 10% end-to-end tests
• Run Cypress on your own CI
• Record success and failure videos

28. “demo time”

29. “thanks”