@testing-library/react-native#wait TypeScript Examples

describe('[Stack] navigator', () => {
  beforeEach(() => {
    props = createTestProps();
    component = createTestElement(<StackNavigator {...props} />);
  });

  it('should renders without crashing', async () => {
    const { container } = render(component);
    await act(() => wait());
    expect(container).toBeTruthy();
    expect(container).toMatchSnapshot();
  });
});

describe('Dashboard', () => {
  it('should be able to list products', async () => {
    apiMock.onGet('products').reply(200, [
      {
        id: '1234',
        title: 'Cadeira Rivatti',
        image_url:
          'https://http2.mlstatic.com/cadeira-rivatti-branca-pes-madeira-confortavel-bonita-D_NQ_NP_981901-MLB20422264882_092015-F.jpg',
        price: 400,
      },
      {
        id: '123456',
        title: 'Poltrona de madeira',
        image_url:
          'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRod5Tf0R0LkCjClrgAJU0tM713nyqHTP2lFbXU1o5zheYpwgfonTTde8swBNlahgij4hGeOgn7hQ&usqp=CAc',
        price: 600,
      },
    ]);

    const { getByText, getByTestId } = render(<Dashboard />);

    await wait(() => expect(getByText('Cadeira Rivatti')).toBeTruthy(), {
      timeout: 200,
    });

    expect(getByText('Cadeira Rivatti')).toBeTruthy();
    expect(getByTestId('add-to-cart-1234')).toBeTruthy();

    expect(getByText('Poltrona de madeira')).toBeTruthy();
    expect(getByTestId('add-to-cart-123456')).toBeTruthy();
  });

  it('should be able to add item to cart', async () => {
    const useCartMocked = mocked(useCart);

    const addToCart = jest.fn();

    useCartMocked.mockReturnValue({
      addToCart,
      products: [],
      increment: jest.fn(),
      decrement: jest.fn(),
    });

    const products = [
      {
        id: '1234',
        title: 'Cadeira Rivatti',
        image_url:
          'https://http2.mlstatic.com/cadeira-rivatti-branca-pes-madeira-confortavel-bonita-D_NQ_NP_981901-MLB20422264882_092015-F.jpg',
        price: 400,
      },
      {
        id: '123456',
        title: 'Poltrona de madeira',
        image_url:
          'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRod5Tf0R0LkCjClrgAJU0tM713nyqHTP2lFbXU1o5zheYpwgfonTTde8swBNlahgij4hGeOgn7hQ&usqp=CAc',
        price: 600,
      },
    ];

    apiMock.onGet('products').reply(200, products);

    const { getByText, getByTestId } = render(<Dashboard />);

    await wait(() => expect(getByText('Cadeira Rivatti')).toBeTruthy(), {
      timeout: 200,
    });

    act(() => {
      fireEvent.press(getByTestId('add-to-cart-1234'));
    });

    expect(addToCart).toHaveBeenCalledWith(products[0]);
  });
});

describe('Favorites', () => {
  it('should be able to list the favorite food plates', async () => {
    const items = [
      {
        id: 1,
        name: 'Ao molho',
        description:
          'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
        price: 19.9,
        category: 1,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
        extras: [
          {
            id: 1,
            name: 'Bacon',
            value: 1.5,
          },
          {
            id: 2,
            name: 'Frango',
            value: 2,
          },
        ],
      },
      {
        id: 2,
        name: 'Veggie',
        description:
          'Macarrão com pimentão, ervilha e ervas finas colhidas no himalaia.',
        price: '21.90',
        category: 2,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food2.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/veggie.png',
        extras: [
          {
            id: 3,
            name: 'Bacon',
            value: 1.5,
          },
        ],
      },
    ];

    apiMock.onGet('/favorites').reply(200, items);

    const { getByText } = render(<Favorites />);

    await wait(() => expect(getByText('Ao molho')).toBeTruthy(), {
      timeout: 200,
    });

    expect(getByText('Ao molho')).toBeTruthy();
    expect(
      getByText(
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      ),
    ).toBeTruthy();
    expect(getByText('Veggie')).toBeTruthy();
    expect(
      getByText(
        'Macarrão com pimentão, ervilha e ervas finas colhidas no himalaia.',
      ),
    ).toBeTruthy();
  });
});

describe('Orders', () => {
  it('should be able to list the orders', async () => {
    const items = [
      {
        id: 1,
        name: 'Ao molho',
        description:
          'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
        price: 19.9,
        category: 1,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
        extras: [
          {
            id: 1,
            name: 'Bacon',
            value: 1.5,
          },
          {
            id: 2,
            name: 'Frango',
            value: 2,
          },
        ],
      },
      {
        id: 2,
        name: 'Veggie',
        description:
          'Macarrão com pimentão, ervilha e ervas finas colhidas no himalaia.',
        price: '21.90',
        category: 2,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food2.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/veggie.png',
        extras: [
          {
            id: 3,
            name: 'Bacon',
            value: 1.5,
          },
        ],
      },
    ];

    apiMock.onGet('/orders').reply(200, items);

    const { getByText } = render(<Orders />);

    await wait(() => expect(getByText('Ao molho')).toBeTruthy(), {
      timeout: 200,
    });

    expect(getByText('Ao molho')).toBeTruthy();
    expect(
      getByText(
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      ),
    ).toBeTruthy();
    expect(getByText('Veggie')).toBeTruthy();
    expect(
      getByText(
        'Macarrão com pimentão, ervilha e ervas finas colhidas no himalaia.',
      ),
    ).toBeTruthy();
  });
});

describe('Cart Context', () => {
  afterEach(() => {
    mockedAsyncStorage.setItem.mockClear();
    mockedAsyncStorage.getItem.mockClear();

    cleanup();
  });

  it('should be able to add products to the cart', async () => {
    const { getByText, getByTestId } = render(
      <CartProvider>
        <TestComponent />
      </CartProvider>,
    );

    act(() => {
      fireEvent.press(getByTestId('add-to-cart'));
    });

    expect(getByText('Test product')).toBeTruthy();
    expect(getByText('1')).toBeTruthy();
  });

  it('should be able to increment quantity', async () => {
    const { getByText, getByTestId } = render(
      <CartProvider>
        <TestComponent />
      </CartProvider>,
    );

    act(() => {
      fireEvent.press(getByTestId('add-to-cart'));
    });

    act(() => {
      fireEvent.press(getByTestId('increment'));
    });

    expect(getByText('2')).toBeTruthy();
  });

  it('should be able to decrement quantity', async () => {
    const { getByText, getByTestId } = render(
      <CartProvider>
        <TestComponent />
      </CartProvider>,
    );

    act(() => {
      fireEvent.press(getByTestId('add-to-cart'));
    });

    act(() => {
      fireEvent.press(getByTestId('increment'));
    });

    act(() => {
      fireEvent.press(getByTestId('decrement'));
    });

    expect(getByText('1')).toBeTruthy();
  });

  it('should load products from AsyncStorage', async () => {
    mockedAsyncStorage.getItem.mockReturnValue(
      new Promise(resolve =>
        resolve(
          JSON.stringify([
            {
              id: '1234',
              title: 'Test product',
              image_url: 'test',
              price: 1000,
              quantity: 0,
            },
          ]),
        ),
      ),
    );

    const { getByText } = render(
      <CartProvider>
        <TestComponent />
      </CartProvider>,
    );

    await wait(() => expect(getByText('Test product')).toBeTruthy());

    expect(getByText('Test product')).toBeTruthy();
  });

  it('should store products in AsyncStorage while adding, incrementing and decrementing', async () => {
    const { getByTestId } = render(
      <CartProvider>
        <TestComponent />
      </CartProvider>,
    );

    await act(async () => {
      fireEvent.press(getByTestId('add-to-cart'));
      fireEvent.press(getByTestId('increment'));
      fireEvent.press(getByTestId('decrement'));
    });

    expect(mockedAsyncStorage.setItem).toHaveBeenCalledTimes(3);
  });
});

describe('Dashboard', () => {
  it('should be able to list the food plates', async () => {
    const items = [
      {
        id: 1,
        name: 'Ao molho',
        description:
          'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
        price: 19.9,
        category: 1,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
        extras: [
          {
            id: 1,
            name: 'Bacon',
            value: 1.5,
          },
          {
            id: 2,
            name: 'Frango',
            value: 2,
          },
        ],
      },
      {
        id: 2,
        name: 'Veggie',
        description:
          'Macarrão com pimentão, ervilha e ervas finas colhidas no himalaia.',
        price: '21.90',
        category: 2,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food2.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/veggie.png',
        extras: [
          {
            id: 3,
            name: 'Bacon',
            value: 1.5,
          },
        ],
      },
    ];

    apiMock.onGet('/categories').reply(200, [
      {
        id: 1,
        title: 'Massas',
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/massas.png',
      },
    ]);

    apiMock.onGet('/foods').reply(config => {
      if (config.params.name_like === '') {
        return [200, items];
      }

      return [200, items];
    });

    apiMock.onGet('/foods?name_like=').reply(200, items);

    const { getByText } = render(<Dashboard />);

    await wait(() => expect(getByText('Ao molho')).toBeTruthy(), {
      timeout: 200,
    });

    expect(getByText('Ao molho')).toBeTruthy();
    expect(
      getByText(
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      ),
    ).toBeTruthy();
    expect(getByText('Veggie')).toBeTruthy();
    expect(
      getByText(
        'Macarrão com pimentão, ervilha e ervas finas colhidas no himalaia.',
      ),
    ).toBeTruthy();
  });

  it('should be able to list the food plates filtered by category', async () => {
    const items = [
      {
        id: 1,
        name: 'Ao molho',
        description:
          'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
        price: 19.9,
        category: 1,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
        extras: [
          {
            id: 1,
            name: 'Bacon',
            value: 1.5,
          },
          {
            id: 2,
            name: 'Frango',
            value: 2,
          },
        ],
      },
      {
        id: 2,
        name: 'Veggie',
        description:
          'Macarrão com pimentão, ervilha e ervas finas colhidas no himalaia.',
        price: '21.90',
        category: 2,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food2.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/veggie.png',
        extras: [
          {
            id: 3,
            name: 'Bacon',
            value: 1.5,
          },
        ],
      },
    ];

    const categoryOneItems = [
      {
        id: 1,
        name: 'Ao molho',
        description:
          'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
        price: 19.9,
        category: 1,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
        extras: [
          {
            id: 1,
            name: 'Bacon',
            value: 1.5,
          },
          {
            id: 2,
            name: 'Frango',
            value: 2,
          },
        ],
      },
    ];

    const categoryTwoItems = [
      {
        id: 2,
        name: 'Veggie',
        description:
          'Macarrão com pimentão, ervilha e ervas finas colhidas no himalaia.',
        price: '21.90',
        category: 2,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food2.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/veggie.png',
        extras: [
          {
            id: 3,
            name: 'Bacon',
            value: 1.5,
          },
        ],
      },
    ];

    const categories = [
      {
        id: 1,
        title: 'Massas',
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/massas.png',
      },
      {
        id: 2,
        title: 'Pizzas',
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/pizzas.png',
      },
    ];

    apiMock.onGet('/foods').reply(config => {
      switch (config.params.category_like) {
        case 1:
          return [200, categoryOneItems];

        case 2:
          return [200, categoryTwoItems];

        default:
          return [200, items];
      }
    });

    apiMock.onGet('/foods?category_like=1').reply(200, categoryOneItems);
    apiMock.onGet('/foods?category_like=2').reply(200, categoryTwoItems);

    apiMock.onGet('/categories').reply(200, categories);

    const { getByText, queryByText, getByTestId } = render(<Dashboard />);

    await wait(() => expect(getByText('Massas')).toBeTruthy(), {
      timeout: 200,
    });

    expect(getByText('Massas')).toBeTruthy();
    expect(getByText('Pizzas')).toBeTruthy();

    expect(getByText('Ao molho')).toBeTruthy();
    expect(getByText('Veggie')).toBeTruthy();

    await act(async () => {
      fireEvent.press(getByTestId('category-1'));
    });

    expect(getByText('Ao molho')).toBeTruthy();

    expect(queryByText('Veggie')).toBeFalsy();

    await act(async () => {
      fireEvent.press(getByTestId('category-2'));
    });

    expect(queryByText('Ao molho')).toBeFalsy();
    expect(getByText('Veggie')).toBeTruthy();

    await act(async () => {
      fireEvent.press(getByTestId('category-2'));
    });

    expect(getByText('Ao molho')).toBeTruthy();
    expect(getByText('Veggie')).toBeTruthy();
  });

  it('should be able to list the food plates filtered by name search', async () => {
    const items = [
      {
        id: 1,
        name: 'Ao molho',
        description:
          'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
        price: 19.9,
        category: 1,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
        extras: [
          {
            id: 1,
            name: 'Bacon',
            value: 1.5,
          },
          {
            id: 2,
            name: 'Frango',
            value: 2,
          },
        ],
      },
      {
        id: 2,
        name: 'Veggie',
        description:
          'Macarrão com pimentão, ervilha e ervas finas colhidas no himalaia.',
        price: '21.90',
        category: 2,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food2.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/veggie.png',
        extras: [
          {
            id: 3,
            name: 'Bacon',
            value: 1.5,
          },
        ],
      },
    ];

    const aoMolhoSearchResult = [
      {
        id: 1,
        name: 'Ao molho',
        description:
          'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
        price: 19.9,
        category: 1,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
        extras: [
          {
            id: 1,
            name: 'Bacon',
            value: 1.5,
          },
          {
            id: 2,
            name: 'Frango',
            value: 2,
          },
        ],
      },
    ];

    const veggieSearchResult = [
      {
        id: 2,
        name: 'Veggie',
        description:
          'Macarrão com pimentão, ervilha e ervas finas colhidas no himalaia.',
        price: '21.90',
        category: 2,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food2.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/veggie.png',
        extras: [
          {
            id: 3,
            name: 'Bacon',
            value: 1.5,
          },
        ],
      },
    ];

    const categories = [
      {
        id: 1,
        title: 'Massas',
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/massas.png',
      },
      {
        id: 2,
        title: 'Pizzas',
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/pizzas.png',
      },
    ];

    apiMock.onGet('/foods').reply(config => {
      switch (config.params.name_like) {
        case 'Ao molho':
          return [200, aoMolhoSearchResult];

        case 'Veggie':
          return [200, veggieSearchResult];

        default:
          return [200, items];
      }
    });

    apiMock.onGet('/foods?name_like=Ao+molho').reply(200, aoMolhoSearchResult);

    apiMock.onGet('/foods?name_like=Veggie').reply(200, veggieSearchResult);

    apiMock.onGet('/categories').reply(200, categories);

    const { getByText, queryByText, getByTestId, debug } = render(
      <Dashboard />,
    );

    await wait(() => expect(getByText('Massas')).toBeTruthy(), {
      timeout: 200,
    });

    expect(getByText('Massas')).toBeTruthy();
    expect(getByText('Pizzas')).toBeTruthy();

    expect(getByText('Ao molho')).toBeTruthy();
    expect(getByText('Veggie')).toBeTruthy();

    const inputSearch = getByTestId('search-input');

    await act(async () => {
      fireEvent.changeText(inputSearch, 'Ao molho');
    });

    expect(getByText('Ao molho')).toBeTruthy();

    expect(queryByText('Veggie')).toBeFalsy();

    await act(async () => {
      fireEvent.changeText(inputSearch, 'Veggie');
    });

    expect(queryByText('Ao molho')).toBeFalsy();

    expect(getByText('Veggie')).toBeTruthy();

    await act(async () => {
      fireEvent.changeText(inputSearch, '');
    });

    expect(getByText('Ao molho')).toBeTruthy();

    expect(queryByText('Veggie')).toBeTruthy();
  });

  it('should be able to navigate to the food details page', async () => {
    const items = [
      {
        id: 1,
        name: 'Ao molho',
        description:
          'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
        price: 19.9,
        category: 1,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
        extras: [
          {
            id: 1,
            name: 'Bacon',
            value: 1.5,
          },
          {
            id: 2,
            name: 'Frango',
            value: 2,
          },
        ],
      },
      {
        id: 2,
        name: 'Veggie',
        description:
          'Macarrão com pimentão, ervilha e ervas finas colhidas no himalaia.',
        price: '21.90',
        category: 2,
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food2.png',
        thumbnail_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/veggie.png',
        extras: [
          {
            id: 3,
            name: 'Bacon',
            value: 1.5,
          },
        ],
      },
    ];

    apiMock.onGet('/categories').reply(200, [
      {
        id: 1,
        title: 'Massas',
        image_url:
          'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/massas.png',
      },
    ]);

    apiMock.onGet('/foods').reply(config => {
      if (config.params.name_like === '') {
        return [200, items];
      }

      return [200, items];
    });

    apiMock.onGet('/foods?name_like=').reply(200, items);

    const { getByText, getByTestId } = render(<Dashboard />);

    await wait(() => expect(getByText('Ao molho')).toBeTruthy(), {
      timeout: 200,
    });

    await act(async () => {
      fireEvent.press(getByTestId('food-1'));
    });

    expect(getByTestId('food-1')).toBeTruthy();

    expect(mockedNavigate).toHaveBeenCalledTimes(1);

    expect(mockedNavigate).toHaveBeenCalledWith('FoodDetails', {
      id: 1,
    });
  });
});

describe('Orders', () => {
  it('should be able to list the food', async () => {
    const item = {
      id: 1,
      name: 'Ao molho',
      description:
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      price: 19.9,
      category: 1,
      image_url:
        'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
      thumbnail_url:
        'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
      extras: [
        {
          id: 1,
          name: 'Bacon',
          value: 1.5,
        },
        {
          id: 2,
          name: 'Frango',
          value: 2,
        },
      ],
    };

    apiMock.onGet('/foods/1').reply(200, item);

    const { getByText, getByTestId } = render(<FoodDetails />);

    await wait(() => expect(getByText('Ao molho')).toBeTruthy(), {
      timeout: 200,
    });

    expect(getByText('Ao molho')).toBeTruthy();
    expect(
      getByText(
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      ),
    ).toBeTruthy();

    expect(getByText('Bacon')).toBeTruthy();
    expect(getByText('Frango')).toBeTruthy();

    expect(getByTestId('food-quantity')).toHaveTextContent('1');

    expect(getByTestId('cart-total')).toHaveTextContent('R$ 19,90');
  });

  it('should be able to increment food quantity', async () => {
    const item = {
      id: 1,
      name: 'Ao molho',
      description:
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      price: 19.9,
      category: 1,
      image_url:
        'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
      thumbnail_url:
        'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
      extras: [
        {
          id: 1,
          name: 'Bacon',
          value: 1.5,
        },
        {
          id: 2,
          name: 'Frango',
          value: 2,
        },
      ],
    };

    apiMock.onGet('/foods/1').reply(200, item);

    const { getByText, getByTestId } = render(<FoodDetails />);

    await wait(() => expect(getByText('Ao molho')).toBeTruthy(), {
      timeout: 200,
    });

    expect(getByText('Ao molho')).toBeTruthy();
    expect(
      getByText(
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      ),
    ).toBeTruthy();

    expect(getByText('Bacon')).toBeTruthy();
    expect(getByText('Frango')).toBeTruthy();

    expect(getByTestId('food-quantity')).toHaveTextContent('1');

    await act(async () => {
      fireEvent.press(getByTestId('increment-food'));
    });

    expect(getByTestId('food-quantity')).toHaveTextContent('2');

    expect(getByTestId('cart-total')).toHaveTextContent('R$ 39,80');
  });

  it('should be able to decrement food quantity', async () => {
    const item = {
      id: 1,
      name: 'Ao molho',
      description:
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      price: 19.9,
      category: 1,
      image_url:
        'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
      thumbnail_url:
        'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
      extras: [
        {
          id: 1,
          name: 'Bacon',
          value: 1.5,
        },
        {
          id: 2,
          name: 'Frango',
          value: 2,
        },
      ],
    };

    apiMock.onGet('/foods/1').reply(200, item);

    const { getByText, getByTestId } = render(<FoodDetails />);

    await wait(() => expect(getByText('Ao molho')).toBeTruthy(), {
      timeout: 200,
    });

    expect(getByText('Ao molho')).toBeTruthy();
    expect(
      getByText(
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      ),
    ).toBeTruthy();

    expect(getByText('Bacon')).toBeTruthy();
    expect(getByText('Frango')).toBeTruthy();

    expect(getByTestId('food-quantity')).toHaveTextContent('1');

    await act(async () => {
      fireEvent.press(getByTestId('increment-food'));
    });

    expect(getByTestId('food-quantity')).toHaveTextContent('2');

    await act(async () => {
      fireEvent.press(getByTestId('increment-food'));
    });

    expect(getByTestId('food-quantity')).toHaveTextContent('3');

    await act(async () => {
      fireEvent.press(getByTestId('decrement-food'));
    });

    expect(getByTestId('food-quantity')).toHaveTextContent('2');

    await act(async () => {
      fireEvent.press(getByTestId('decrement-food'));
    });

    expect(getByTestId('food-quantity')).toHaveTextContent('1');

    expect(getByTestId('cart-total')).toHaveTextContent('R$ 19,90');
  });

  it('should not be able to decrement food quantity below than 1', async () => {
    const item = {
      id: 1,
      name: 'Ao molho',
      description:
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      price: 19.9,
      category: 1,
      image_url:
        'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
      thumbnail_url:
        'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
      extras: [
        {
          id: 1,
          name: 'Bacon',
          value: 1.5,
        },
        {
          id: 2,
          name: 'Frango',
          value: 2,
        },
      ],
    };

    apiMock.onGet('/foods/1').reply(200, item);

    const { getByText, getByTestId } = render(<FoodDetails />);

    await wait(() => expect(getByText('Ao molho')).toBeTruthy(), {
      timeout: 200,
    });

    expect(getByText('Ao molho')).toBeTruthy();
    expect(
      getByText(
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      ),
    ).toBeTruthy();

    expect(getByText('Bacon')).toBeTruthy();
    expect(getByText('Frango')).toBeTruthy();

    expect(getByTestId('food-quantity')).toHaveTextContent('1');

    await act(async () => {
      fireEvent.press(getByTestId('increment-food'));
    });

    expect(getByTestId('food-quantity')).toHaveTextContent('2');

    await act(async () => {
      fireEvent.press(getByTestId('decrement-food'));
    });

    expect(getByTestId('food-quantity')).toHaveTextContent('1');

    await act(async () => {
      fireEvent.press(getByTestId('decrement-food'));
    });

    expect(getByTestId('food-quantity')).toHaveTextContent('1');
  });

  it('should be able to increment an extra item quantity', async () => {
    const item = {
      id: 1,
      name: 'Ao molho',
      description:
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      price: 19.9,
      category: 1,
      image_url:
        'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
      thumbnail_url:
        'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
      extras: [
        {
          id: 1,
          name: 'Bacon',
          value: 1.5,
        },
        {
          id: 2,
          name: 'Frango',
          value: 2,
        },
      ],
    };

    apiMock.onGet('/foods/1').reply(200, item);

    const { getByText, getByTestId } = render(<FoodDetails />);

    await wait(() => expect(getByText('Ao molho')).toBeTruthy(), {
      timeout: 200,
    });

    expect(getByText('Ao molho')).toBeTruthy();
    expect(
      getByText(
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      ),
    ).toBeTruthy();

    expect(getByText('Bacon')).toBeTruthy();
    expect(getByText('Frango')).toBeTruthy();

    expect(getByTestId('extra-quantity-1')).toHaveTextContent('0');

    await act(async () => {
      fireEvent.press(getByTestId('increment-extra-1'));
    });

    expect(getByTestId('extra-quantity-1')).toHaveTextContent('1');

    await act(async () => {
      fireEvent.press(getByTestId('increment-extra-1'));
    });

    expect(getByTestId('extra-quantity-1')).toHaveTextContent('2');

    expect(getByTestId('cart-total')).toHaveTextContent('R$ 22,90');
  });

  it('should be able to decrement an extra item quantity', async () => {
    const item = {
      id: 1,
      name: 'Ao molho',
      description:
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      price: 19.9,
      category: 1,
      image_url:
        'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-food/food1.png',
      thumbnail_url:
        'https://storage.googleapis.com/golden-wind/bootcamp-gostack/desafio-gorestaurant-mobile/ao_molho.png',
      extras: [
        {
          id: 1,
          name: 'Bacon',
          value: 1.5,
        },
      ],
    };

    apiMock.onGet('/foods/1').reply(200, item);

    const { getByText, getByTestId } = render(<FoodDetails />);

    await wait(() => expect(getByText('Ao molho')).toBeTruthy(), {
      timeout: 200,
    });

    expect(getByText('Ao molho')).toBeTruthy();
    expect(
      getByText(
        'Macarrão ao molho branco, fughi e cheiro verde das montanhas.',
      ),
    ).toBeTruthy();

    expect(getByText('Bacon')).toBeTruthy();

    expect(getByTestId('extra-quantity-1')).toHaveTextContent('0');

    await act(async () => {
      fireEvent.press(getByTestId('increment-extra-1'));
    });

    expect(getByTestId('extra-quantity-1')).toHaveTextContent('1');

    await act(async () => {
      fireEvent.press(getByTestId('increment-extra-1'));
    });

    expect(getByTestId('extra-quantity-1')).toHaveTextContent('2');

    await act(async () => {
      fireEvent.press(getByTestId('decrement-extra-1'));
    });

    expect(getByTestId('extra-quantity-1')).toHaveTextContent('1');

    expect(getByTestId('cart-total')).toHaveTextContent('R$ 21,40');
  });
});