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();
});
});