import {OrganizationFixture} from 'sentry-fixture/organization'; import {BillingConfigFixture} from 'getsentry-test/fixtures/billingConfig'; import {SubscriptionFixture} from 'getsentry-test/fixtures/subscription'; import {render, screen, waitFor} from 'sentry-test/reactTestingLibrary'; import {SidebarNavigationItem} from 'getsentry/components/sidebarNavigationItem'; import SubscriptionStore from 'getsentry/stores/subscriptionStore'; import {PlanTier} from 'getsentry/types'; describe('SidebarNavigationItem', function () { let billingConfigMock: any; const renderFunc = jest.fn().mockImplementation(function simpleRenderFunction({ additionalContent, Wrapper, disabled, }) { return ( Some Content {additionalContent} ); }); beforeEach(function () { const organization = OrganizationFixture(); billingConfigMock = MockApiClient.addMockResponse({ url: `/customers/${organization.slug}/billing-config/`, method: 'GET', body: BillingConfigFixture(PlanTier.AM3), }); }); const verifyItemIsEnabled = () => { expect(screen.getByTestId('link')).toHaveAttribute('aria-disabled', 'false'); expect(screen.getByTestId('link')).not.toHaveAttribute('aria-describedby'); expect(screen.queryByTestId('power-icon')).not.toBeInTheDocument(); }; const verifyItemIsDisabled = () => { expect(screen.getByTestId('link')).toHaveAttribute('aria-disabled', 'true'); expect(screen.getByTestId('link')).toHaveAttribute('aria-describedby'); expect(screen.getByTestId('power-icon')).toBeInTheDocument(); }; it('allows items that do not have blocking conditions', function () { const organization = OrganizationFixture(); const subscription = SubscriptionFixture({organization}); subscription.planDetails.features = []; const id = 'metrics'; SubscriptionStore.set(organization.slug, subscription); render( {renderFunc} ); verifyItemIsEnabled(); }); it('provides eligible items with non-blocking render props', function () { const organization = OrganizationFixture(); const subscription = SubscriptionFixture({ organization, plan: 'am2_business', isFree: true, }); subscription.planDetails.features = ['insights-addon-modules']; const id = 'llm-monitoring'; SubscriptionStore.set(organization.slug, subscription); render( {renderFunc} ); verifyItemIsEnabled(); }); it('provides ineligible items with blocking render props', function () { const organization = OrganizationFixture({ features: ['insights-initial-modules'], }); const subscription = SubscriptionFixture({ organization, plan: 'am2_f', isFree: true, }); subscription.planDetails.features = []; const id = 'llm-monitoring'; SubscriptionStore.set(organization.slug, subscription); render( {renderFunc} ); verifyItemIsDisabled(); }); it('considers features of the plan trial', async function () { // The `"am3_team"` plan does not have the `insights-addon-modules` feature. The `"am3_business"` plan _does_ have the feature. The "LLM Monitoring" sidebar item should be enabled const organization = OrganizationFixture(); const subscription = SubscriptionFixture({ organization, plan: 'am3_team', trialPlan: 'am3_business', }); const id = 'llm-monitoring'; SubscriptionStore.set(organization.slug, subscription); render( {renderFunc} ); await waitFor(() => { expect(billingConfigMock).toHaveBeenCalled(); }); verifyItemIsEnabled(); }); it('considers features of the organization', async function () { // The `"am3_team"` plan does not have the `insights-addon-modules` feature. The organization _does_ have the feature. This can happen if the flag is manually turned on via an allowlist. "LLM Monitoring" should be enabled const organization = OrganizationFixture({ features: ['insights-addon-modules'], }); const subscription = SubscriptionFixture({ organization, plan: 'am3_team', }); const id = 'llm-monitoring'; SubscriptionStore.set(organization.slug, subscription); render( {renderFunc} ); await waitFor(() => { expect(billingConfigMock).toHaveBeenCalled(); }); verifyItemIsEnabled(); }); it('covers "Insights" link with an upsell if no Insights are available', async function () { const organization = OrganizationFixture(); const subscription = SubscriptionFixture({ organization, plan: 'am3_team', }); const id = 'sidebar-accordion-insights-item'; SubscriptionStore.set(organization.slug, subscription); render( {renderFunc} ); await waitFor(() => { expect(billingConfigMock).toHaveBeenCalled(); }); expect(screen.getByTestId('link')).toHaveAttribute('aria-disabled', 'true'); expect(screen.getByTestId('link')).toHaveAttribute('aria-describedby'); expect(screen.getByTestId('power-icon')).toBeInTheDocument(); }); it('omits Turbo icon from Insights links if none are available', async function () { const organization = OrganizationFixture(); const subscription = SubscriptionFixture({ organization, plan: 'am3_team', }); const id = 'performance-database'; SubscriptionStore.set(organization.slug, subscription); render( {renderFunc} ); await waitFor(() => { expect(billingConfigMock).toHaveBeenCalled(); }); expect(screen.getByTestId('link')).toHaveAttribute('aria-disabled', 'true'); expect(screen.getByTestId('link')).toHaveAttribute('aria-describedby'); expect(screen.queryByTestId('power-icon')).not.toBeInTheDocument(); }); });