Integration Guides

croissant-opt-in-container

Initialization

Test Case: Verify Component Renders with Initial Configuration

Description: Confirm that the Croissant Opt-In Container initializes correctly based on the provided props.

Assertion:

  • Assert that the component renders correctly.
  • Assert that the initial price is displayed accurately if applicable.
  • Assert that customStyles are applied correctly based on the initial configuration.

Functionality

Test Case: Modal Visibility Toggle

Description: Ensure the modal associated with the content's Learn More or equivalent action toggles its visibility as expected upon user interaction.

Assertion:

  • Trigger the action (e.g., clicking Learn More) intended to show the modal.
  • Assert that the Croissant Modal becomes visible.
  • 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.

Assertion:

  • Assert that the component's border color, or other style elements, are set correctly based on customStyles.primaryColor.

Test Case: Opt-In Action

Description: Confirm that the opt-in action (e.g., selecting an option from the RadioInputForm) correctly triggers any associated events or changes.

Assertion:

  • Perform the opt-in action.
  • Assert that the correct events are emitted (e.g., EventsTypes.RadioButtonViewed).
  • Optionally, verify that local storage or other state indicators are updated to reflect the opt-in status.

Interaction with Content and Header

Test Case: Header and Content Display

Description: Verify that the OptInContainerHeader and OptInContainerContent are displayed correctly and contain the expected content.

Assertion:

  • Assert that the header is present and correctly styled.
  • Assert that the content area includes expected elements (e.g., promotional text, pricing information, radio inputs).

Test Case: Price Update in Content

Description: Ensure that updating the price prop correctly updates the display within OptInContainerContent or related child components.

Assertion:

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

User Interaction with RadioInputForm

Test Case: Radio Selection and Form Submission

Description: Confirm that selecting an option in the RadioInputForm and submitting (if applicable) performs the expected actions, such as updating user opt-in status.

Assertion:

  • Select an option in the RadioInputForm.
  • Submit the form if a submit action is required.
  • Assert that the selection is registered and any expected outcomes (such as opt-in status update) are achieved.