[Lecture Topic Task] Document TDD tests for pet goodbye feature

[Negroni1]

Follow up on #247 and document it as part of the milestone 3 documentation

[Negroni1]

@PinkSylvie @irsaris Add the following to the documentation :

5. Sixth case - Goodbye Pet Feature The first test checks for the goodbye feature checks the initial state, ensuring that the image source of the textBox matches the expected source. The second test simulates a button click event, then checks if the image source of the textBox updates accordingly. The third test verifies that the component re-renders correctly after a state change, confirming that the image source of the textBox remains as expected. Initial State Test

   test('initial state', () => {
   const { getByTestId } = render(<PetGoodbye />);
   const textBox = getByTestId('textBox');
   expect(textBox.props.source).toEqual(require('../../assets/petGoodbye/goodbyeText1.png'));
   });

   Description: In this test, we're ensuring that when the PetGoodbye component is initially rendered, it displays the correct image. We use render from @testing-library/react-native to render the component, then we retrieve the textBox element using getByTestId (assuming the element has a testID of 'textBox'). Finally, we assert that the source of the image (textBox.props.source) matches the expected source (../../assets/petGoodbye/goodbyeText1.png).

Handle Click Method Test:

test('handleClick method', () => {
  const { getByTestId } = render(<PetGoodbye />);
  const button = getByTestId('button');
  fireEvent.press(button);
  const textBox = getByTestId('textBox');
expect(textBox.props.source).toEqual(require('../../aassets/petGoodbye/goodbyeText2.png'));
});

Description: This test ensures that when the button is clicked, the handleClick method updates the image displayed by the PetGoodbye component. We render the component, then simulate a button press using fireEvent.press. After that, we retrieve the textBox element again and verify that its source has changed to ../assets/petGoodbye/goodbyeText2.png.

Rendering Different Images and Text Boxes Based on State Test:

test('rendering different images and text boxes based on state', () => {
  const { getByTestId, rerender } = render(<PetGoodbye />);
  const button = getByTestId('button');
  fireEvent.press(button);
  rerender(<PetGoodbye />);
  const textBox = getByTestId('textBox');
expect(textBox.props.source).toEqual(require('../../aassets/petGoodbye/goodbyeText2.png'));
});

Description: In this test, we check if the component correctly re-renders with different images and text boxes based on its state. We render the component and simulate a button press to trigger a state change. Then, we re-render the component using rerender. Finally, we retrieve the textBox element and assert that its source matches the expected source for the updated state (../assets/petGoodbye/goodbyeText2.png).

These tests provide comprehensive coverage for the PetGoodbye component, ensuring that it behaves correctly under different circumstances and state changes.