mirror of
https://github.com/hanzoai/sentinel.git
synced 2026-09-29 22:34:33 +00:00
zeekayandHanzo Dev
f888991a7a
FSL-1.0-Apache-2.0 grants us the code, not the name. "Sentry" is Functional Software's trademark, so every place the running app says it to a user -- page titles, onboarding, empty states, toasts, settings copy, the self-hosted footer -- now says Sentinel. Attribution is the other half of the deal and stays untouched: upstream copyright headers, LICENSE, NOTICE. So does anything where the mark is a fact rather than a brand -- @sentry/* packages, sentry-cli, the wizard and bundler plugins, docs.sentry.io, the whole gettingStartedDocs tree. Renaming those would leave instructions that no longer work. Nothing structural moved. No import, identifier, route path, feature flag, API field or test id changed; the diff is 312 lines in and 312 out. Colocated specs were updated in lockstep with the copy they assert. Marketing and community links point at hanzo.ai, only where a real page exists to point at. Co-authored-by: Hanzo Dev <[email protected]>
283 lines
8.5 KiB
TypeScript
283 lines
8.5 KiB
TypeScript
import {OrganizationFixture} from 'sentry-fixture/organization';
|
||
|
||
import {initializeOrg} from 'sentry-test/initializeOrg';
|
||
import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
|
||
import {textWithMarkupMatcher} from 'sentry-test/utils';
|
||
|
||
import {
|
||
platformProductAvailability,
|
||
ProductSelection,
|
||
ProductSolution,
|
||
} from 'sentry/components/onboarding/productSelection';
|
||
|
||
describe('Onboarding Product Selection', function () {
|
||
const organization = OrganizationFixture({
|
||
features: ['session-replay', 'performance-view', 'profiling-view'],
|
||
});
|
||
|
||
it('renders default state', async function () {
|
||
const {router, routerContext} = initializeOrg({
|
||
router: {
|
||
location: {
|
||
query: {
|
||
product: [
|
||
ProductSolution.PERFORMANCE_MONITORING,
|
||
ProductSolution.SESSION_REPLAY,
|
||
],
|
||
},
|
||
},
|
||
params: {},
|
||
},
|
||
});
|
||
|
||
render(<ProductSelection organization={organization} platform="javascript-react" />, {
|
||
context: routerContext,
|
||
});
|
||
|
||
// Introduction
|
||
expect(
|
||
screen.getByText(
|
||
textWithMarkupMatcher(/In this quick guide you’ll use npm or yarn/)
|
||
)
|
||
).toBeInTheDocument();
|
||
expect(screen.queryByText('Prefer to set up Sentinel using')).not.toBeInTheDocument();
|
||
|
||
// Error monitoring shall be checked and disabled by default
|
||
expect(screen.getByRole('checkbox', {name: 'Error Monitoring'})).toBeChecked();
|
||
|
||
// Tooltip with explanation shall be displayed on hover
|
||
await userEvent.hover(screen.getByRole('checkbox', {name: 'Error Monitoring'}));
|
||
expect(
|
||
await screen.findByText(/Let's admit it, we all have errors/)
|
||
).toBeInTheDocument();
|
||
|
||
// Try to uncheck error monitoring
|
||
await userEvent.click(screen.getByRole('checkbox', {name: 'Error Monitoring'}));
|
||
await waitFor(() => expect(router.push).not.toHaveBeenCalled());
|
||
|
||
// Performance monitoring shall be checked and enabled by default
|
||
expect(screen.getByRole('checkbox', {name: 'Performance Monitoring'})).toBeChecked();
|
||
expect(screen.getByRole('checkbox', {name: 'Performance Monitoring'})).toBeEnabled();
|
||
|
||
// Tooltip with explanation shall be displayed on hover
|
||
await userEvent.hover(screen.getByRole('checkbox', {name: 'Performance Monitoring'}));
|
||
expect(
|
||
await screen.findByText(/Automatic performance issue detection/)
|
||
).toBeInTheDocument();
|
||
|
||
// Uncheck performance monitoring
|
||
await userEvent.click(screen.getByRole('checkbox', {name: 'Performance Monitoring'}));
|
||
await waitFor(() =>
|
||
expect(router.replace).toHaveBeenCalledWith({
|
||
pathname: undefined,
|
||
query: {product: [ProductSolution.SESSION_REPLAY]},
|
||
})
|
||
);
|
||
|
||
// Session replay shall be checked and enabled by default
|
||
expect(screen.getByRole('checkbox', {name: 'Session Replay'})).toBeChecked();
|
||
expect(screen.getByRole('checkbox', {name: 'Session Replay'})).toBeEnabled();
|
||
|
||
// Uncheck sesseion replay
|
||
await userEvent.click(screen.getByRole('checkbox', {name: 'Session Replay'}));
|
||
await waitFor(() =>
|
||
expect(router.replace).toHaveBeenCalledWith({
|
||
pathname: undefined,
|
||
query: {product: [ProductSolution.PERFORMANCE_MONITORING]},
|
||
})
|
||
);
|
||
|
||
// Tooltip with explanation shall be displayed on hover
|
||
await userEvent.hover(screen.getByRole('checkbox', {name: 'Session Replay'}));
|
||
expect(
|
||
await screen.findByText(/Video-like reproductions of user sessions/)
|
||
).toBeInTheDocument();
|
||
});
|
||
|
||
it('renders for Loader Script', async function () {
|
||
const {routerContext} = initializeOrg({
|
||
router: {
|
||
location: {
|
||
query: {
|
||
product: [
|
||
ProductSolution.PERFORMANCE_MONITORING,
|
||
ProductSolution.SESSION_REPLAY,
|
||
],
|
||
},
|
||
},
|
||
params: {},
|
||
},
|
||
});
|
||
|
||
const skipLazyLoader = jest.fn();
|
||
|
||
render(
|
||
<ProductSelection
|
||
organization={organization}
|
||
lazyLoader
|
||
skipLazyLoader={skipLazyLoader}
|
||
platform="javascript-react"
|
||
/>,
|
||
{
|
||
context: routerContext,
|
||
}
|
||
);
|
||
|
||
// Introduction
|
||
expect(
|
||
screen.getByText(
|
||
textWithMarkupMatcher(/In this quick guide you’ll use our Loader Script/)
|
||
)
|
||
).toBeInTheDocument();
|
||
expect(
|
||
screen.getByText(
|
||
textWithMarkupMatcher(/Prefer to set up Sentinel using npm or yarn\?/)
|
||
)
|
||
).toBeInTheDocument();
|
||
|
||
await userEvent.click(screen.getByText('Go here'));
|
||
|
||
expect(skipLazyLoader).toHaveBeenCalledTimes(1);
|
||
});
|
||
|
||
it('renders disabled product', async function () {
|
||
const {router, routerContext} = initializeOrg({
|
||
router: {
|
||
location: {
|
||
query: {product: [ProductSolution.SESSION_REPLAY]},
|
||
},
|
||
params: {},
|
||
},
|
||
});
|
||
|
||
const disabledProducts = {
|
||
[ProductSolution.PERFORMANCE_MONITORING]: {
|
||
reason: 'Product unavailable in this SDK version',
|
||
},
|
||
};
|
||
|
||
render(
|
||
<ProductSelection
|
||
organization={organization}
|
||
disabledProducts={disabledProducts}
|
||
platform="javascript-react"
|
||
/>,
|
||
{
|
||
context: routerContext,
|
||
}
|
||
);
|
||
|
||
// Performance Monitoring shall be unchecked and disabled by default
|
||
expect(screen.getByRole('checkbox', {name: 'Performance Monitoring'})).toBeDisabled();
|
||
expect(
|
||
screen.getByRole('checkbox', {name: 'Performance Monitoring'})
|
||
).not.toBeChecked();
|
||
await userEvent.hover(screen.getByRole('checkbox', {name: 'Performance Monitoring'}));
|
||
|
||
// A tooltip with explanation why the option is disabled shall be displayed on hover
|
||
expect(
|
||
await screen.findByText(
|
||
disabledProducts[ProductSolution.PERFORMANCE_MONITORING].reason
|
||
)
|
||
).toBeInTheDocument();
|
||
await userEvent.click(screen.getByRole('checkbox', {name: 'Performance Monitoring'}));
|
||
|
||
// Try to uncheck performance monitoring
|
||
await waitFor(() => expect(router.push).not.toHaveBeenCalled());
|
||
});
|
||
|
||
it('does not render Session Replay', async function () {
|
||
platformProductAvailability['javascript-react'] = [
|
||
ProductSolution.PERFORMANCE_MONITORING,
|
||
];
|
||
|
||
const {router, routerContext} = initializeOrg({
|
||
router: {
|
||
location: {
|
||
query: {product: [ProductSolution.SESSION_REPLAY]},
|
||
},
|
||
params: {},
|
||
},
|
||
});
|
||
|
||
render(<ProductSelection organization={organization} platform="javascript-react" />, {
|
||
context: routerContext,
|
||
});
|
||
|
||
expect(
|
||
screen.queryByRole('checkbox', {name: 'Session Replay'})
|
||
).not.toBeInTheDocument();
|
||
|
||
// router.replace is called to remove session-replay from query
|
||
await waitFor(() =>
|
||
expect(router.replace).toHaveBeenCalledWith({
|
||
pathname: undefined,
|
||
query: {product: [ProductSolution.PERFORMANCE_MONITORING]},
|
||
})
|
||
);
|
||
});
|
||
|
||
it('render Profiling', async function () {
|
||
const {router, routerContext} = initializeOrg({
|
||
router: {
|
||
location: {
|
||
query: {product: [ProductSolution.PERFORMANCE_MONITORING]},
|
||
},
|
||
params: {},
|
||
},
|
||
});
|
||
|
||
render(<ProductSelection organization={organization} platform="python-django" />, {
|
||
context: routerContext,
|
||
});
|
||
|
||
expect(screen.getByRole('checkbox', {name: 'Profiling'})).toBeInTheDocument();
|
||
|
||
// router.replace is called to add profiling from query
|
||
await waitFor(() =>
|
||
expect(router.replace).toHaveBeenCalledWith({
|
||
pathname: undefined,
|
||
query: {
|
||
product: [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.PROFILING],
|
||
},
|
||
})
|
||
);
|
||
});
|
||
|
||
it('renders npm & yarn info text', function () {
|
||
const {routerContext} = initializeOrg({
|
||
router: {
|
||
location: {
|
||
query: {product: [ProductSolution.PERFORMANCE_MONITORING]},
|
||
},
|
||
params: {},
|
||
},
|
||
});
|
||
|
||
render(<ProductSelection organization={organization} platform="javascript-react" />, {
|
||
context: routerContext,
|
||
});
|
||
|
||
expect(screen.queryByText('npm')).toBeInTheDocument();
|
||
expect(screen.queryByText('yarn')).toBeInTheDocument();
|
||
});
|
||
|
||
it('does not render npm & yarn info text', function () {
|
||
const {routerContext} = initializeOrg({
|
||
router: {
|
||
location: {
|
||
query: {product: [ProductSolution.PERFORMANCE_MONITORING]},
|
||
},
|
||
params: {},
|
||
},
|
||
});
|
||
|
||
render(<ProductSelection organization={organization} platform="python-django" />, {
|
||
context: routerContext,
|
||
});
|
||
|
||
expect(screen.queryByText('npm')).not.toBeInTheDocument();
|
||
expect(screen.queryByText('yarn')).not.toBeInTheDocument();
|
||
});
|
||
});
|