Mini-Challenge 2: Intro to Testing

README.md

Mini-Challenge 2: Intro to Testing

Answer the following questions first

1. Using create-react-app, what do we need to set up for testing?
2. What components are worth to test in your development?
3. Can you apply TDD once you already created components?

The Challenge

NOTE: Apply TDD as much as you can.

1. Find any sub-routine, extract that logic into a separate file and test it out.
2. Run test coverage and save results into a .txt file at ./ - root level. Can you make the total coverage to be above of 60%?

Acceptance Criteria

• Meaningful test cases were implemented for components and sub-routines logic.
• All the test cases were successful.

Bonus Points

• Test coverage is above 60%.

Using create-react-app, what do we need to set up for testing?
We need to add the library @testing-library/react then import it to the tests files

What components are worth to test in your development?
The HTML elements

Can you apply TDD once you already created components?
Yes, Test Driven Development will allows to create test once the component is created.

Answers:

1. to start testing using create-react-app me need to install our prefered tool like jest or react testing library, in this case I choose jest, we need to install it:
   npm install --save-dev jest
   after this we create two files like funcionality1.js (where code goes) and functionality1.test.js (where we are going to test our code)
   then we edit the package.json like this
   {
   "scripts": {
   "test": "jest"
   }
   }
   finally we run _npm run test or yarn test

2. these are some of the components worth to test:

• It must render: At the very least, make sure the component renders without error.
• Test the output: Given a set of props, what output is expected? Does Person render its name and age?
• Test the states: If the classNames are conditional (enabled/disabled, success/warning/error, etc), make sure to test that the className-deciding logic is working right. if a Logout button is only visible when the user is logged in, for instance, make sure to test for that.
• Test the events: If the component can be interacted with (an input or button with an onClick or onChange or onAnything), test that the events work as expected and call the specified functions with the correct arguments (including binding this, if it matters).
• Test the edge cases: Anything that operates on an array could have boundary cases — an empty array, an array with 1 element, a paginated list that should truncate at 25 items, and so on.

3. it is possible, the only this to consider is the cost of converting functions/components to a granular components to be able to test them.

Using create-react-app, what do we need to set up for testing?

• Nothing, jest comes included when creating an app with it

What components are worth testing in your development?

• Those that are created or extended by the programmer and include expressions, variables, functions, etc...

Can you apply TDD once you already created components?

• Yes, but it's a better practice to do it along with the development.

Answers to questions

Using create-react-app, what do we need to set up for testing?

Nothing, creating a React app by using npx create-react-app app this creates a new application with all the necessary stuff to test our application, to run a development server, and to build a minimized bundle for production.

What components are worth to test in your development?

Well, summed in few words, components with high-value features

Within these, from my experience, I think we can consider the following:

• Components render the way should render
• Components render what they should render based on the properties passed down to them
• The output Y of a function A given X set of parameters.
• Deciding logic, for example: is the state updating the correct values based on X event or Z user input?
• Events: Within these, tests the behavior after data fetching, user input: button clicks, text input, etc. Basically all that's supposed to change given an user interaction.

Maybe there are a few more, but I think this answers the question.

Can you apply TDD once you already created components?

Yes, here's why:

TDD is only an approach for software development, if you haven't been applying TDD but you have been creating tests for your components, that's just a different approach and by using a different approach it just means different advantages, disadvantages and tradeoffs compared to TDD.

I love to use TDD. Since I leared how to test my applications and why is this so important, I changed the focus of Build first, test later to Test first, build later because I noted that helped me build better apps, why? the next are the following reasons for me:

• I void trying to figure out what to build next, or what's the next step on the workflow
• I write less code, just the necessary code.
• I creat the test that is telling me my application is working even before creating something.

So, after all, you can TDD your app's components once they're created.
Maybe even you can realize things as me, for example, that I was able to get rid of some unnecesary code that was just making my code cumbersome.

EDITED: Well, I wrote this time ago, but according to the readings, it is not possible, because it is a process you must start from the beginning... I'm not very sure about this, but I argue that it is possible, because once you start writing a test, it is a new beginning, so, I say yes, authors say no... I don't know what to believe.

EDITED: Well, I wrote this time ago, but according to the readings, it is not possible, because it is a process you must start from the beginning... I'm not very sure about this, but I argue that it is possible because once you start writing a test, it is a new beginning, so, I say yes, authors say no... I don't know what to believe.

hey @cylcrow, it depends on one's perspective. I also think it is possible to start doing TDD for legacy code when building new features, fixing bugs and adding the new corresponding tests. The obvious reason here is that you are starting a new development.

For that code with no tests, you can think of the business logic already built at the code as a black box and write your unit tests, if something fails you can start from there applying TDD, but this scenario would start for sure with the approach "code-then-test".

EDITED: Well, I wrote this time ago, but according to the readings, it is not possible, because it is a process you must start from the beginning... I'm not very sure about this, but I argue that it is possible because once you start writing a test, it is a new beginning, so, I say yes, authors say no... I don't know what to believe.

hey @cylcrow, it depends on one's perspective. I also think it is possible to start doing TDD for legacy code when building new features, fixing bugs and adding the new corresponding tests. The obvious reason here is that you are starting a new development.

For that code with no tests, you can think of the business logic already built at the code as a black box and write your unit tests, if something fails you can start from there applying TDD, but this scenario would start for sure with the approach "code-then-test".

😄 I knew it was possible. Thank you very much for sharing your experience. 🙏

1. create-react-app comes pre-built with testing tools, all you have to do is install them via NPM or Yarn.
2. For this challenge, i've tested fetching the API data and matching them on the HTML elements (like, title and description)
3. No, TDD is done during the development process, and not after. But you can always do standard testing after development if required.

1. Using create-react-app, what do we need to set up for testing?
   Nothing much since it already comes with Jest ready to start testing.
2. What components are worth testing in your development?
   In my opinion, the ones that have key features or are more dynamic when using the app, you need to keep in mind that you need to test
   that all renders properly and test the props and latest on those components
3. Can you apply TDD once you already created components?
   That depends on the perspective of each developer, in my opinion, yes, you can start doing TDD on code that was already written but is always good practice to do it starting the development process

1. Using create-react-app, what do we need to set up for testing?

I believe it already includes Jest, so we-re all set up!

2. What components are worth to test in your development?

I think that those that are going to deal with different kinds of inputs, specially those that come from the final user, are very important, so the events. Also checking that it renders properly, the props are passed correctly and the edge cases are quite worth the effort in my opinion.

3. Can you apply TDD once you already created components?

I don't think it can be done retroactively but, if needed, we can include it in further iterations of a product.