@kiwicom/smart-faq/src/shared/StaticFAQ/FAQExtraInfo/BoardingPassesInfo/__tests__/BoardingPassesInfo.test.js

// @flow

import { mount } from 'enzyme';
import { create } from 'react-test-renderer';
import * as React from 'react';
import { createMockEnvironment, MockPayloadGenerator } from 'relay-test-utils';
import { graphql, QueryRenderer } from 'react-relay';
import Alert from '@kiwicom/orbit-components/lib/Alert';

import BoardingPassesBoxWrapper from '../BoardingPassesBoxWrapper';
import BoardingPassesBoxContent from '../BoardingPassesBoxContent';
import BoardingPassesList from '../BoardingPassesList';
import BoardingPassesItem from '../BoardingPassesItem';

const renderBoardingPasses = queryProps => {
  const { props, error } = queryProps;
  const boardingPassesInfo = props?.nearestBooking;
  return (
    <BoardingPassesBoxWrapper showSubtitle={!error}>
      <BoardingPassesBoxContent
        boardingPassesInfo={boardingPassesInfo}
        error={error}
      />
    </BoardingPassesBoxWrapper>
  );
};

describe('BoardingPassesInfo', () => {
  const environment = createMockEnvironment();

  const TestRenderer = () => (
    <QueryRenderer
      environment={environment}
      query={graphql`
        query BoardingPassesInfoTestQuery($brand: String!)
          @relay_test_operation {
          nearestBooking(brand: $brand) {
            ...BoardingPassesList_boardingPassesInfo
          }
        }
      `}
      variables={{ brand: 'kiwicom' }}
      render={renderBoardingPasses}
    />
  );

  it('Should display the loading animation content when it is loading', () => {
    const dataLoading = {
      boardingPassesInfo: null,
      error: null,
    };
    const wrapper = mount(
      <BoardingPassesBoxWrapper showSubtitle={!dataLoading.error}>
        <BoardingPassesBoxContent
          boardingPassesInfo={dataLoading.boardingPassesInfo}
          error={dataLoading.error}
        />
      </BoardingPassesBoxWrapper>,
    );
    expect(wrapper.find('svg > title').text()).toEqual('Loading interface...');
  });

  it('Should render the card with an error message when there is a GraphQL error', () => {
    const component = create(<TestRenderer />).root;

    // Simulate a GraphQL error
    environment.mock.rejectMostRecentOperation(
      new Error('Mordor is not a valid booking destination'),
    );

    const errorBox = component.findByType(Alert);
    const Title = errorBox.props.title;

    expect(errorBox).toBeDefined();
    expect(Title.props.t).toBe(
      'smartfaq.boarding_pass_info.content.error_alert.title',
    );
  });

  it('Should render the card with a valid result', () => {
    const component = create(<TestRenderer />).root;

    // Mock a GraphQL response with a sample location area name (which renders on the result)
    environment.mock.resolveMostRecentOperation(operation =>
      MockPayloadGenerator.generate(operation, {
        LocationArea: () => ({
          name: 'Oslo',
        }),
      }),
    );

    const resultsElement = component.findByType(BoardingPassesList);
    const resultsItem = component.findByType(BoardingPassesItem);
    const errorBox = component.findAllByType(Alert);

    expect(resultsElement).toBeDefined();
    expect(resultsItem).toBeDefined();

    expect(resultsElement.children).toHaveLength(1);
    expect(errorBox).toHaveLength(0);
  });
});