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

describe('Dashboard', () => {
  it('should be able to calculate the cart total', async () => {
    const { getByText } = render(<FloatingCart />);

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

  it('should be able to show the total quantity of itens in the cart', async () => {
    const { getByText } = render(<FloatingCart />);

    expect(getByText('15 itens')).toBeTruthy();
  });

  it('should be able to navigate to the cart', async () => {
    const { getByTestId } = render(<FloatingCart />);

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

    expect(navigate).toHaveBeenCalledWith('Cart');
  });
});

test('share button renders when provided with value', async () => {
  const { getByTestId } = render(
    <Header shareContent="share me">My Title</Header>
  );

  expect(getByTestId('header-text').props.children).toEqual('My Title');
  expect(getByTestId('header-share')).toBeDefined();

  act(() => {
    fireEvent.press(getByTestId('header-share'));
  });

  expect(Share.share).toHaveBeenCalledWith({ message: 'share me' });
});

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('[AppProvider] rendering test', () => {
  let json: renderer.ReactTestRendererJSON;
  const component = (
    <AppProvider>
      <FakeChild />
    </AppProvider>
  );

  it('should match component and snapshot', () => {
    json = renderer.create(component).toJSON();
    expect(json).toMatchSnapshot();
    expect(json).toBeTruthy();
  });

  it('should call [resetUser] when button pressed', () => {
    testingLib = render(component);
    const btn = testingLib.queryByTestId('BUTTON');
    act(() => {
      fireEvent.press(btn);
    });
  });

  it('should call [default] when button pressed', () => {
    testingLib = render(component);
    const btn = testingLib.queryByTestId('BUTTON_NOT_VALID');
    act(() => {
      fireEvent.press(btn);
    });
  });
});

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('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 products on the cart', async () => {
    const { getByText } = render(<Cart />);

    expect(getByText('Cadeira Rivatti')).toBeTruthy();
    expect(getByText('400')).toBeTruthy();
    expect(getByText('2000')).toBeTruthy();
    expect(getByText('5x')).toBeTruthy();

    expect(getByText('Poltrona de madeira')).toBeTruthy();
    expect(getByText('600')).toBeTruthy();
    expect(getByText('6000')).toBeTruthy();
    expect(getByText('10x')).toBeTruthy();
  });

  it('should be able to calculate the cart total', async () => {
    const { getByText } = render(<Cart />);

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

  it('should be able to calculate the cart total', async () => {
    const { getByText } = render(<Cart />);

    expect(getByText('15 itens')).toBeTruthy();
  });

  it('should be able to increment product quantity on the cart', async () => {
    const increment = jest.fn();

    useCartMocked.mockReturnValue({
      addToCart: jest.fn(),
      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,
          quantity: 5,
        },
      ],
      increment,
      decrement: jest.fn(),
    });

    const { getByTestId } = render(<Cart />);

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

    expect(increment).toHaveBeenCalledWith('1234');
  });

  it('should be able to decrement product quantity on the cart', async () => {
    const decrement = jest.fn();

    useCartMocked.mockReturnValue({
      addToCart: jest.fn(),
      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,
          quantity: 5,
        },
      ],
      increment: jest.fn(),
      decrement,
    });

    const { getByTestId } = render(<Cart />);

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

    expect(decrement).toHaveBeenCalledWith('1234');
  });
});

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');
  });
});

// eslint-disable-next-line max-statements
describe('Snackbar', () => {
  beforeEach(() => {
    jest.useFakeTimers()
  })

  afterEach(() => {
    cleanup()
    jest.useRealTimers()
  })

  it('should take a snapshot', () => {
    const component = setup()

    expect(component).toMatchSnapshot()
  })

  it('message is presented correctly', () => {
    const expectedMessage = 'A snackbar message'

    const { result } = setup({ message: expectedMessage })
    const element = result.queryByTestId('natds-snackbar-text')

    expect(element).toHaveTextContent(expectedMessage)
  })

  describe('when setting a type', () => {
    it('displays a warning type correctly', () => {
      const type = 'warning'

      const { result } = setup({ type })
      const wrapperElement = result.queryByTestId('natds-snackbar-wrapper')
      const textElement = result.queryByTestId('natds-snackbar-text')

      expect(wrapperElement).toHaveStyle({ backgroundColor: theme.color.warning })
      expect(textElement).toHaveStyle({ color: theme.color.onWarning })
    })

    it('displays a error type correctly', () => {
      const type = 'error'

      const { result } = setup({ type })
      const wrapperElement = result.queryByTestId('natds-snackbar-wrapper')
      const textElement = result.queryByTestId('natds-snackbar-text')

      expect(wrapperElement).toHaveStyle({ backgroundColor: theme.color.alert })
      expect(textElement).toHaveStyle({ color: theme.color.onAlert })
    })

    it('displays a success type correctly', () => {
      const type = 'success'

      const { result } = setup({ type })
      const wrapperElement = result.queryByTestId('natds-snackbar-wrapper')
      const textElement = result.queryByTestId('natds-snackbar-text')

      expect(wrapperElement).toHaveStyle({ backgroundColor: theme.color.success })
      expect(textElement).toHaveStyle({ color: theme.color.onSuccess })
    })

    it('displays a info type correctly', () => {
      const type = 'info'

      const { result } = setup({ type })
      const wrapperElement = result.queryByTestId('natds-snackbar-wrapper')
      const textElement = result.queryByTestId('natds-snackbar-text')

      expect(wrapperElement).toHaveStyle({ backgroundColor: theme.color.link })
      expect(textElement).toHaveStyle({ color: theme.color.onLink })
    })

    it('displays a standard type correctly', () => {
      const type = 'standard'

      const { result } = setup({ type })
      const wrapperElement = result.queryByTestId('natds-snackbar-wrapper')
      const textElement = result.queryByTestId('natds-snackbar-text')

      expect(wrapperElement).toHaveStyle({ backgroundColor: theme.color.onSurface })
      expect(textElement).toHaveStyle({ color: theme.color.surface })
    })
  })

  describe('when past a certain period of time', () => {
    it('hides snackbar automatically', () => {
      const autoHideDuration = 5000

      const { props } = setup({ autoHideDuration })

      act(() => {
        jest.advanceTimersByTime(autoHideDuration)
      })

      expect(props.onClose).toHaveBeenCalled()
    })
  })

  describe('when setting a button text', () => {
    it('displays correctly', () => {
      const expectedButtonText = 'OK'

      const { result } = setup({ buttonText: expectedButtonText })
      const element = result.queryByTestId('button-label')

      expect(element).not.toBeNull()
      expect(element).toHaveTextContent(expectedButtonText)
    })

    describe('when pressing it', () => {
      it('dismisses the snackbar', () => {
        const expectedButtonText = 'OK'

        const { props, result } = setup({ buttonText: expectedButtonText })
        const element = result.getByTestId('natds-snackbar-button')

        fireEvent.press(element)
        expect(props.onClose).toHaveBeenCalled()
      })
    })
  })

  describe('when not setting a button text', () => {
    it('displays correctly', () => {
      const { result } = setup()
      const element = result.queryByTestId('natds-snackbar-button')

      expect(element).toBeNull()
    })
  })

  describe('when setting to be open', () => {
    it('displays correctly', () => {
      const { result } = setup({ open: true })
      const element = result.queryByTestId('natds-snackbar-wrapper')

      expect(element).not.toBeNull()
    })

    describe('when setting it back to be closed', () => {
      it('displays correctly', () => {
        const { props, result } = setup({ open: true })

        result.rerender(<Snackbar {...props} open={false} />)
        // eslint-disable-next-line max-nested-callbacks
        act(() => {
          jest.advanceTimersByTime(195)
        })
        const element = result.queryByTestId('natds-snackbar-wrapper')

        expect(element).toBeNull()
      })
    })
  })

  describe('when setting to be closed', () => {
    it('displays correctly', () => {
      const { result } = setup({ open: false })
      const element = result.queryByTestId('natds-snackbar-wrapper')

      expect(element).toBeNull()
    })
  })
})