Integration Guides

croissant-buyback-badge

Initialization

Test Case: Verify Component Renders with Initial Configuration

Description: Confirm that the Croissant Buyback Badge initializes correctly based on the provided props for both "basic" and "with subtext" configurations.

Assertion:

  • Assert that the component renders correctly when hasSubtext is true or false.
  • Assert that the initial price is displayed accurately.
  • Assert that logoSize, hasLearnMoreLink, and hasBackgroundColor props are applied correctly based on the initial configuration.

Functionality

Test Case: Modal Visibility Toggle

Description: Ensure the modal associated with the Learn More link toggles its visibility as expected upon user interaction.

Assertion:

  • Click the Learn More link if hasLearnMoreLink is true.
  • Assert that the Croissant Modal is displayed.
  • Close the modal.
  • Assert that the modal is no longer visible.

Test Case: Dynamic Style Application

Description: Verify that the component dynamically applies styles based on customStyles and hasBackgroundColor.

Assertion:

  • Assert that the component’s background color is set correctly when hasBackgroundColor is true.
  • Assert that the default and custom styles are applied correctly.

Test Case: Price Update

Description: Ensure that the component updates the display price correctly when the price prop is changed after initialization.

Assertion:

  • Update the price prop of the component.
  • Assert that the displayed price updates to reflect the new value.

Interaction with Subtext Variant

Test Case: Display Subtext Appropriately

Description: For the "with subtext" variant, verify that the subtext and additional links are displayed correctly.

Assertion:

  • Assert that the subtext is visible if hasSubtext is true.
  • Assert that the Learn More link within the subtext is functional and opens the modal.

Test Case: Responsive Font Size Adjustment

Description: Ensure that the font size adjusts responsively within the "with subtext" variant based on the width of the container.

Assertion:

  • Manually adjust the width of the component’s container.
  • Assert that the font size of the subtext adjusts according to the predefined rules for responsiveness.

Interaction with Basic Variant

Test Case: Verify Basic Variant Layout

Description: For the "basic" variant, ensure the layout and elements render correctly without subtext.

Assertion:

  • Assert that the component does not display any subtext or additional links beyond the Learn More link if hasSubtext is false.
  • Assert that the basic information (including price and buyback eligibility status) is displayed according to the provided styles and configurations.