enzyme#shallow TypeScript Examples

describe('DragonpayVoucherResult', () => {
    test('should not render issuer image for dragonpay_otc_philippines', () => {
        const wrapper = shallow(<DragonpayVoucherResult issuer="BPXB" paymentMethodType="dragonpay_otc_philippines" />);
        const voucher = wrapper.find('Voucher');
        expect(voucher.props()).toHaveProperty('issuerImageUrl', null);
    });

    test('should render issuer image for dragonpay_otc_non_banking', () => {
        const wrapper = shallow(<DragonpayVoucherResult issuer="BPXB" paymentMethodType="dragonpay_otc_non_banking" />);
        const voucher = wrapper.find('Voucher');
        expect(voucher.props()).toHaveProperty('issuerImageUrl', 'images/logos/dragonpay_otc_non_banking/bpxb.svg');
    });
});

describe("<Results/>", () => {
    it("renders dummy snapshot", () => {
        expect(shallow(
            <Results template={null} css={null} results={results} top={50} skip={0} count={results.length} />
        )).toMatchSnapshot();
    });
    it("renders two results", () => {
        const wrapper = shallow(
            <Results template={null} css={null} results={results} top={50} skip={0} count={results.length} />
        );
        expect(wrapper.find(".searchResults__result").length).toBe(2);
        expect(wrapper.find(".results__blurb").text()).toEqual("1 - 2 of 2");
    });
    it("renders empty div for zero results", () => {
        const wrapper = shallow(
            <Results template={null} css={null} results={[]} top={50} skip={0} count={results.length} />
        );
        expect(wrapper.find(".searchResults__result").length).toBe(0);
        expect(wrapper.find("div").length).toBe(2);
    });
    it("renders two results with custom template", () => {
        const wrapper = shallow(
            <Results template={template} css={null} results={results} top={50} skip={0} count={results.length} />
        );
        const resultsElms = wrapper.find(".searchResults__result");
        expect(resultsElms.length).toBe(2);
        expect(resultsElms.first().html()).toEqual("<div class=\"searchResults__result col-xs-12 col-sm-12\">foo</div>");
        expect(wrapper.find(".results__blurb").text()).toEqual("1 - 2 of 2");
    });
});

describe('<App />', () => {
  let component

  beforeEach(() => {
    component = shallow(<App />)
  })
  test('It should mount', () => {
    expect(component.length).toBe(1)
  })
})

describe('Basic Comment Component Rendering', () => {
  it('detached comment should render correctly', () => {
    const fakeDetachedComment = getComment();
    const componentDetached = shallow(
      <Comment detachedComment={fakeDetachedComment} />
    );

    expect(componentDetached).toMatchSnapshot();
  });

  it('review comment should render correctly', () => {
    const fakeReviewComment = {
      author: 'mkalil',
      text: 'fake comment for testing React component',
      timestamp: '2020',
      range: 'none',
      hash: 'none',
      revision: 'none',
      request: {
        timestamp: '2020',
        reviewRef: 'none',
        targetRef: 'none',
        requester: 'none',
        description: 'none',
        baseCommit: 'none',
        reviewHash: 'none',
      },
      filePath: 'fake/path',
    };
    const componentReview = shallow(
      <Comment reviewComment={fakeReviewComment} />
    );

    expect(componentReview).toMatchSnapshot();
  });
});

describe('RibbonLink', () => {
  it('matches snapshot', () => {
    const coolRibbon = shallow(<RibbonLink flavour="cool">Cool</RibbonLink>);
    const mildRibbon = shallow(<RibbonLink flavour="mild">Mild</RibbonLink>);
    const hotRibbon = shallow(<RibbonLink flavour="hot">Hot</RibbonLink>);

    expect(coolRibbon.prop('className')).toBe('nhsuk-ribbon-link nhsuk-ribbon-link--cool');
    expect(mildRibbon.prop('className')).toBe('nhsuk-ribbon-link nhsuk-ribbon-link--mild');
    expect(hotRibbon.prop('className')).toBe('nhsuk-ribbon-link nhsuk-ribbon-link--hot');

    expect(coolRibbon).toMatchSnapshot();
    expect(mildRibbon).toMatchSnapshot();
    expect(hotRibbon).toMatchSnapshot();

    coolRibbon.unmount();
    mildRibbon.unmount();
    hotRibbon.unmount();
  });

  describe('RibbonLink.Bar', () => {
    it('matches snapshot', () => {
      const bar = shallow(<RibbonLink.Bar />);
      expect(bar).toMatchSnapshot();
      bar.unmount();
    });
  });
});

describe('Badge Component', () => {
  it('render with default props does not crash', () => {
    const wrapper = shallow(<Badge>Text</Badge>);
    expect(wrapper.length).toEqual(1);
    expect(wrapper.hasClass('tk-badge')).toBe(true);
    expect(wrapper.find('div').hasClass('tk-badge--default')).toBe(true);
  });
  it('render a variant', () => {
    const wrapper = shallow(<Badge variant="attention">Badge</Badge>);
    expect(wrapper.length).toEqual(1);
    expect(wrapper.find('div').hasClass('tk-badge--attention')).toBe(true);
  });
});

describe('<HomePage /> without knowing isIsolatedServer', () => {

  jest.spyOn(React, 'useContext').mockImplementation(() => ({
    isIsolatedServer: null
  }))

  const homePage = shallow(<HomePage />)

  it('matches snapshot', () => {
    expect(toJson(homePage)).toMatchSnapshot()
  })

})

test('Route Subscriber should call listen if container is not inited', () => {
  const mockState = { unlisten: null };
  const mockActions = { listen: jest.fn() };

  (RouterSubscriber as any).mockImplementation(
    ({ children }: { children: any }) => children(mockState, mockActions)
  );

  const wrapper = shallow(
    <MainRouterSubscriber>{() => <div />}</MainRouterSubscriber>
  );

  wrapper.prop('children')(mockState, mockActions);
  expect(mockActions.listen).toHaveBeenCalled();
});

describe('Canvas', () => {
  it('renders canvas given dot pattern', () => {
    const dotPattern = <DotPattern cellSize={10} radius={1} />;

    const canvas = shallow(
      <Canvas>
        {dotPattern}
      </Canvas>,
    );

    expect(toJson(canvas)).toMatchSnapshot();
  });

  it('renders canvas given grid pattern', () => {
    const gridPattern = <GridPattern cellSize={10} patternSize={100} />;

    const canvas = shallow(
      <Canvas>
        {gridPattern}
      </Canvas>,
    );

    expect(toJson(canvas)).toMatchSnapshot();
  });
});

test('Code widget properly rendered', () => {
  const component = shallow(
    <CodeWidget
      name="test.name"
      helpText="test"
      style={{}}
      displayValue={() => '<a href="/test.com">test</a>'}
      mainDetailObject={detailObject}
      provider={testProvider}
      dataTarget={jest.fn()}
      dataSource={jest.fn()}
      targetPayload={jest.fn()}
      setMainDetailObject={jest.fn()}
      notifier={testNotifier}
      setInitialValue={jest.fn()}
      submitChange={jest.fn()}
      viewType="test_view"
      widgetAnalytics={jest.fn()}
      resource="test-resource"
      analytics={undefined}
      containerStore={mockedEffectorContainerStore}
    />
  )

  expect(component.find(WidgetWrapper).length).toEqual(1)
  expect(component.find(StyledCodeWidget).length).toEqual(1)
  expect(component.find('a').length).toEqual(1)
})