refactor: usage of hook on testinho and update of tests

refactor devhatt#30

src/components/Testinho/Testinho.spec.tsx

@@ -1,15 +1,37 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import Testinho from './Testinho';
 
-test('renders Testinho with default name', () => {
-  const { getByText } = render(<Testinho />);
-  const linkElement = getByText(/Hello, World!/i);
-  expect(linkElement).toBeInTheDocument();
-});
+describe('testinhoComponent', () => {
+  describe('when no props is passed', () => {
+    it('render with de default value', () => {
+      const { getByRole } = render(<Testinho />);
+      const linkElement = getByRole('heading', { level: 1 });
+      expect(linkElement.textContent).toBe('Hello, World!');
+    });
+  });
+
+  describe('when props is passed', () => {
+    it('renders with the provided prop', () => {
+      const { getByRole } = render(<Testinho name="React" />);
+      const linkElement = getByRole('heading', { level: 1 });
+      expect(linkElement.textContent).toBe('Hello, React!');
+    });
+  });
+
+  describe('when interact with the posts button', () => {
+    it('sucessfully change value of posts', () => {
+      const LABEL = 'Number of posts:';
+      const { getByRole } = render(<Testinho />);
+
+      const postsLabel = screen.getByText(`${LABEL} 0`);
+      expect(postsLabel.textContent).toBe(`${LABEL} 0`);
+
+      const increaseButton = getByRole('button');
+
+      fireEvent.click(increaseButton);
 
-test('renders Testinho with provided name', () => {
-  const { getByText } = render(<Testinho name="React" />);
-  const linkElement = getByText(/Hello, React!/i);
-  expect(linkElement).toBeInTheDocument();
+      expect(postsLabel.textContent).toBe(`${LABEL} 1`);
+    });
+  });
 });

src/components/Testinho/Testinho.tsx

@@ -1,7 +1,19 @@
 import React from 'react';
 
+import { usePostsStore } from 'stores/usePostsStore';
+
 const Testinho = ({ name = 'World' }) => {
-  return <h1>Hello, {name}!</h1>;
+  const posts = usePostsStore((state) => state.postsQuantity);
+
+  const increaseValue = usePostsStore((state) => state.increase);
+
+  return (
+    <>
+      <button onClick={() => increaseValue(1)}>Change value of posts</button>
+      <p>Number of posts: {posts}</p>
+      <h1>Hello, {name}!</h1>
+    </>
+  );
 };
 
 export default Testinho;

src/pages/home/home.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import CharacterLimit from '~components/CharacterLimit/CharacterLimit';
+import Testinho from '~components/Testinho/Testinho';
 import TextCopy from '~components/TextCopy/TextCopy';
 
 import scss from './home.module.scss';
@@ -33,6 +34,7 @@ const Home = () => {
             </div>
           </div>
         </div>
+        <Testinho />
         <div className={scss.gridTabs} />
       </div>
     </div>

src/stores/usePostsStore.tsx

@@ -4,7 +4,7 @@ import { IPostsStore } from './usePostsStore.types';
 
 export const usePostsStore = create<IPostsStore>()((set) => ({
   postsQuantity: 0,
-  increase: (by) =>
-    set((state) => ({ postsQuantity: state.postsQuantity + by })),
+  increase: (increaseBy) =>
+    set((state) => ({ postsQuantity: state.postsQuantity + increaseBy })),
   reset: () => set({ postsQuantity: 0 }),
 }));