Modal Dialog and Tooltip Visibility Tests

Problem/Feature Description

A product team is building a subscription management page for a B2B SaaS platform. The page has two interactive elements that change visibility state: a "Cancel Subscription" confirmation modal that appears when a user clicks the cancel button, and a help tooltip that appears when hovering over an info icon. Both elements are present in the DOM at all times but are toggled between hidden and visible states using CSS (the modal uses display: none / display: block and the tooltip uses the hidden HTML attribute).

A developer on the team is writing tests and has been told that some assertions are passing even when they shouldn't be — the dialogs look invisible to users but tests still pass. The team suspects the wrong assertion matcher is being used. Write tests for the SubscriptionPage component that correctly verify visibility state transitions for both the modal and the tooltip.

Output Specification

Write a test file named SubscriptionPage.test.tsx that tests the SubscriptionPage component provided below. The tests should cover:

• The cancel modal is not visible initially, becomes visible after clicking the cancel button, and is hidden again after clicking the dismiss button
• The help tooltip is not visible initially and becomes visible after clicking the info button

Also provide any setup needed. Use async/await and userEvent for user interactions.

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: SubscriptionPage.tsx =============== import React, { useState } from 'react';

export function SubscriptionPage() { const [modalOpen, setModalOpen] = useState(false); const [tooltipVisible, setTooltipVisible] = useState(false);

return ( <div> <h1>Manage Subscription</h1> <p>Current plan: <strong>Pro</strong></p>

<button onClick={() => setModalOpen(true)}>Cancel Subscription</button>

  <button
    aria-label="help information"
    onClick={() => setTooltipVisible((v) => !v)}
  >
    ℹ
  </button>
  <div
    role="tooltip"
    hidden={!tooltipVisible}
  >
    Cancelling will take effect at the end of your billing period.
  </div>

  <div
    role="dialog"
    aria-modal="true"
    aria-label="cancel subscription confirmation"
    style={{ display: modalOpen ? 'block' : 'none' }}
  >
    <p>Are you sure you want to cancel your subscription?</p>
    <button onClick={() => setModalOpen(false)}>Dismiss</button>
    <button onClick={() => setModalOpen(false)}>Confirm Cancellation</button>
  </div>
</div>

); }