@navinc/base-react-components/src/pricing-card.spec.js

Nav's Pattern Library

import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import { render } from '@testing-library/react'
import PricingCard from './pricing-card.js'

describe('Pricing page: PricingCard', () => {
  const defaultProps = {
    isMostPopular: true,
    description: 'Best plan ever',
    illustration: 'my-illustration.png',
    features: ['Personal Credit Summary', 'Business Credit Summary'],
    planName: 'Premium',
    planPrice: '24.99',
  }

  const renderWrappedPricingCard = (props) =>
    render(
      <BrowserRouter>
        <PricingCard {...defaultProps} {...props} />
      </BrowserRouter>
    )

  it('renders PricingCard with title, price, description, illustration and features', () => {
    const { getByText } = renderWrappedPricingCard()
    expect(getByText(/most popular/i))
    expect(getByText(/premium/i))
    expect(getByText(/24.99/i))
    expect(getByText(/best plan ever/i))
    expect(getByText(/see more details/i))
    expect(getByText(/personal credit summary/i))
    expect(getByText(/business credit summary/i))
  })
  it('renders current plan button if plan is already selected', () => {
    const { getByText } = renderWrappedPricingCard({ actionHref: '/plan', shouldBeSelectable: true, isSelected: true })
    expect(getByText(/current plan/i))
  })
  it('renders as many asterisks as disclaimer reference passes', () => {
    const { getByText } = renderWrappedPricingCard({ disclaimerReference: 3 })
    expect(getByText('***'))
  })
})