diff --git a/static/app/views/codecov/tests/onboarding.spec.tsx b/static/app/views/codecov/tests/onboarding.spec.tsx index 7d2591bae88d49..8b1b6afeaa6292 100644 --- a/static/app/views/codecov/tests/onboarding.spec.tsx +++ b/static/app/views/codecov/tests/onboarding.spec.tsx @@ -1,18 +1,100 @@ -import {OrganizationFixture} from 'sentry-fixture/organization'; +import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary'; -import {render, screen} from 'sentry-test/reactTestingLibrary'; +import TestsOnboardingPage from 'sentry/views/codecov/tests/onboarding'; -import TestAnalyticsOnboardingPage from 'sentry/views/codecov/tests/onboarding'; +describe('TestsOnboardingPage', () => { + it('renders with GitHub Actions selected by default if no query param is provided', () => { + render(, { + initialRouterConfig: { + location: { + pathname: '/codecov/tests/new', + query: {}, + }, + }, + }); + + const githubRadio = screen.getByLabelText('Use GitHub Actions to run my CI'); + expect(githubRadio).toBeChecked(); -const COVERAGE_FEATURE = 'codecov-ui'; + const cliRadio = screen.getByLabelText( + "Use Sentry Prevent's CLI to upload testing reports" + ); + expect(cliRadio).not.toBeChecked(); + }); -describe('TestAnalyticsOnboardingPage', () => { - it('renders the placeholder content', () => { - render(, { - organization: OrganizationFixture({features: [COVERAGE_FEATURE]}), + it('renders with GitHub Actions selected by default if empty opt query param is provided', () => { + render(, { + initialRouterConfig: { + location: { + pathname: '/codecov/tests/new', + query: {opt: ''}, + }, + }, }); - const testContent = screen.getByText('Test Analytics Onboarding'); - expect(testContent).toBeInTheDocument(); + const githubRadio = screen.getByLabelText('Use GitHub Actions to run my CI'); + expect(githubRadio).toBeChecked(); + + const cliRadio = screen.getByLabelText( + "Use Sentry Prevent's CLI to upload testing reports" + ); + expect(cliRadio).not.toBeChecked(); + }); + + it('renders with CLI selected when opt=cli in URL', () => { + render(, { + initialRouterConfig: { + location: { + pathname: '/codecov/tests/new', + query: {opt: 'cli'}, + }, + }, + }); + + const cliRadio = screen.getByLabelText( + "Use Sentry Prevent's CLI to upload testing reports" + ); + expect(cliRadio).toBeChecked(); + + const githubRadio = screen.getByLabelText('Use GitHub Actions to run my CI'); + expect(githubRadio).not.toBeChecked(); + }); + + it('updates URL when GitHub Actions option is selected', async () => { + const {router} = render(, { + initialRouterConfig: { + location: { + pathname: '/codecov/tests/new', + query: {opt: 'cli'}, + }, + }, + }); + + const githubRadio = screen.getByLabelText('Use GitHub Actions to run my CI'); + expect(githubRadio).not.toBeChecked(); + + await userEvent.click(githubRadio); + + expect(router.location.search).toBe('?opt=githubAction'); + }); + + it('updates URL when CLI option is selected', async () => { + const {router} = render(, { + initialRouterConfig: { + location: { + pathname: '/codecov/tests/new', + query: {opt: ''}, + }, + }, + }); + + const cliRadio = screen.getByLabelText( + "Use Sentry Prevent's CLI to upload testing reports" + ); + expect(cliRadio).not.toBeChecked(); + + await userEvent.click(cliRadio); + + expect(router.location.search).toBe('?opt=cli'); }); }); diff --git a/static/app/views/codecov/tests/onboarding.tsx b/static/app/views/codecov/tests/onboarding.tsx index 96665760de77d5..959c248f5cc606 100644 --- a/static/app/views/codecov/tests/onboarding.tsx +++ b/static/app/views/codecov/tests/onboarding.tsx @@ -1,13 +1,47 @@ +import {useCallback} from 'react'; +import {useSearchParams} from 'react-router-dom'; import styled from '@emotion/styled'; +import RadioGroup from 'sentry/components/forms/controls/radioGroup'; +import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; -import TestPreOnboardingPage from 'sentry/views/codecov/tests/preOnboarding'; + +type SetupOption = 'githubAction' | 'cli'; export default function TestsOnboardingPage() { + const [searchParams, setSearchParams] = useSearchParams(); + const opt = searchParams.get('opt'); + + const handleRadioChange = useCallback( + (newOption: SetupOption) => { + setSearchParams({opt: newOption}); + }, + [setSearchParams] + ); + return (

Test Analytics Onboarding

- + + + {t('Get Started with Test Analytics')} + + {t( + 'Test Analytics offers data on test run times, failure rates, and identifies flaky tests to help decrease the risk of deployment failures and make it easier to ship new features quickly.' + )} + + + {t('Select a setup option')} + +
); } @@ -16,3 +50,31 @@ const LayoutGap = styled('div')` display: grid; gap: ${space(2)}; `; + +const OnboardingContainer = styled('div')` + padding: ${space(1.5)} ${space(4)}; + border: 1px solid ${p => p.theme.border}; + border-radius: ${p => p.theme.borderRadius}; +`; + +const IntroContainer = styled('div')` + border-bottom: 1px solid ${p => p.theme.border}; + padding-bottom: ${space(3)}; +`; + +const GetStartedHeader = styled('h2')` + font-size: 1.625rem; + color: ${p => p.theme.tokens.content.primary}; + line-height: 40px; +`; + +const TAValueText = styled('p')` + font-size: ${p => p.theme.fontSizeLarge}; + color: ${p => p.theme.tokens.content.primary}; +`; + +const SelectOptionHeader = styled('h5')` + font-size: ${p => p.theme.fontSizeExtraLarge}; + color: ${p => p.theme.tokens.content.primary}; + margin-top: ${space(3)}; +`;