[Testing] Understanding of TDD methodology (1)

Introduction

Recently, I interested in the TDD methodology. I read the bunch of posts which describe how it works and the codes related with. But, there is a huddle to understand only read some posts for.

So, I planned to make the side project by cloning the instagram and apply TDD methodology. In my insight if I applied it properly, my code will not return errors at least that I expect.

Let start to write test

First of all

TDD starts with creating the test cases. I read the post who had applied the TDD to the own project said Test code have precedence over The Component Code. So, I made *.test.tsx files for Input, Button, Accordion, etc...

Using @testing-library/react, I worte down the code for the test. Here is the example,

import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { Button } from "..."

describe("Button", () => {
  it("with button name", () => {
  	const BUTTON_NAME = "button";
    const { getByText } = render(<Button name={BUTTON_NAME}/>);
    const button = getByText(BUTTON_NAME);
    expect(button).toBeInTheDocument();
  });
});

Above test code should be failed, because I didn't write the button code.

const Button : React.FC = () => {
	return (
		<button></button>
	)
}

it even don't receive name props at all.

Write the tests code

Now, I write down entire test case I want.

import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { Button } from "..."

describe("Button", () => {
  it("with button name", () => {
  	...test code
  });
  it("click", () => {
  	...test code
  });
  it("is disabled", () => {
  	...test code
  });
  
  ...etc
});

Firstly, my test codes goes all fails. Now I have to write the real code for passing the tests.

write the component code

const Button : React.FC<IButtonProps> = (props) => {
	const {name, onClick, disabled, ...} = props;
	return (
		<button 
        	onClick={onClick} 
            disabled={disabled}
        >
         	{name}
        </button>
	)
}

Of course, sometimes it returns the error. And sometimes it passes the test if I wrote the codes right way.

If the tests failed, go back to the component and fix the errors.

Bottom-up

Component architecture

I made test codes and the components for the Dashboard page which uses List, Accordion, Button and Input component.

<DItem>
  <Accordion>
    <Button />
    <Input />
  </Accordion>  
</DItem>

<Dashboard>
  <List>
    <Item />
  </List>
</Dashboard>

Make the test code again

Now, I write the test codes about DItem Component which have Accordion, Input, Button Component.

And then, I write the test codes about Dashboard AGAIN!.

By scaling up, finally I tested an one single page by testing entire component in this page.

After

How effective it is?

Integrate different codes on the other component and make it works together. It passes smoothly even I didn't think about the logic.

The purpose of the applying TDD methodology is for the upgrade maintenance. But, I only applied TDD on the codes, still don't know about how it affect on the maintenance. (I just guess it would work some ways)

Next steps

I made a simple Instagram clone coding project applying TDD. And I skipped some of functions on the Instagram service. I expect the effect of TDD by adding other functions to the project.