From aa4197b39328a6d19f8ea04e4dd765f6eb4a6518 Mon Sep 17 00:00:00 2001 From: ArthurKnaus Date: Mon, 6 Nov 2023 13:10:08 +0100 Subject: [PATCH] ref(onboarding): Convert platform dart to new structure (#59418) - relates to https://github.com/getsentry/sentry/issues/56549 --- .../app/gettingStartedDocs/dart/dart.spec.tsx | 34 ++- static/app/gettingStartedDocs/dart/dart.tsx | 246 ++++++++---------- 2 files changed, 136 insertions(+), 144 deletions(-) diff --git a/static/app/gettingStartedDocs/dart/dart.spec.tsx b/static/app/gettingStartedDocs/dart/dart.spec.tsx index 3781e7de8383bf..fd8eb1f6333ea0 100644 --- a/static/app/gettingStartedDocs/dart/dart.spec.tsx +++ b/static/app/gettingStartedDocs/dart/dart.spec.tsx @@ -1,18 +1,28 @@ -import {render, screen} from 'sentry-test/reactTestingLibrary'; +import {renderWithOnboardingLayout} from 'sentry-test/onboarding/renderWithOnboardingLayout'; +import {screen} from 'sentry-test/reactTestingLibrary'; +import {textWithMarkupMatcher} from 'sentry-test/utils'; -import {StepTitle} from 'sentry/components/onboarding/gettingStartedDoc/step'; +import docs from './dart'; -import {GettingStartedWithDart, steps} from './dart'; +describe('dart onboarding docs', function () { + it('renders docs correctly', async function () { + renderWithOnboardingLayout(docs, { + releaseRegistry: { + 'sentry.dart': { + version: '1.99.9', + }, + }, + }); -describe('GettingStartedWithDart', function () { - it('renders doc correctly', function () { - render(); + // Renders main headings + expect(screen.getByRole('heading', {name: 'Install'})).toBeInTheDocument(); + expect(screen.getByRole('heading', {name: 'Configure SDK'})).toBeInTheDocument(); + expect(screen.getByRole('heading', {name: 'Verify'})).toBeInTheDocument(); + expect(screen.getByRole('heading', {name: 'Performance'})).toBeInTheDocument(); - // Steps - for (const step of steps()) { - expect( - screen.getByRole('heading', {name: step.title ?? StepTitle[step.type]}) - ).toBeInTheDocument(); - } + // Renders SDK version from registry + expect( + await screen.findByText(textWithMarkupMatcher(/sentry: \^1\.99\.9/)) + ).toBeInTheDocument(); }); }); diff --git a/static/app/gettingStartedDocs/dart/dart.tsx b/static/app/gettingStartedDocs/dart/dart.tsx index a3f7ccfde68669..4ce2db9b64f4f4 100644 --- a/static/app/gettingStartedDocs/dart/dart.tsx +++ b/static/app/gettingStartedDocs/dart/dart.tsx @@ -1,95 +1,34 @@ import ExternalLink from 'sentry/components/links/externalLink'; -import {Layout, LayoutProps} from 'sentry/components/onboarding/gettingStartedDoc/layout'; -import {ModuleProps} from 'sentry/components/onboarding/gettingStartedDoc/sdkDocumentation'; import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step'; +import type { + Docs, + DocsParams, + OnboardingConfig, +} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {t, tct} from 'sentry/locale'; +import {getPackageVersion} from 'sentry/utils/gettingStartedDocs/getPackageVersion'; -// Configuration Start -export const steps = ({ - dsn, - sourcePackageRegistries, -}: Partial< - Pick -> = {}): LayoutProps['steps'] => [ - { - type: StepType.INSTALL, - description: ( -

- {tct( - 'Sentry captures data by using an SDK within your application’s runtime. Add the following to your [pubspec: pubspec.yaml]', - { - pubspec: , - } - )} -

- ), - configurations: [ - { - language: 'yml', - partialLoading: sourcePackageRegistries?.isLoading, - code: ` +type Params = DocsParams; + +const getInstallSnipet = (params: Params) => ` dependencies: - sentry: ^${ - sourcePackageRegistries?.isLoading - ? t('\u2026loading') - : sourcePackageRegistries?.data?.['sentry.dart']?.version ?? '7.8.0' - } - `, - }, - ], - }, - { - type: StepType.CONFIGURE, - description: ( -

- {tct('Import [sentry: sentry] and initialize it', { - sentry: , - })} -

- ), - configurations: [ - { - language: 'dart', - code: ` + sentry: ^${getPackageVersion(params, 'sentry.dart', '7.8.0')}`; + +const getConfigureSnippet = (params: Params) => ` import 'package:sentry/sentry.dart'; Future main() async { await Sentry.init((options) { - options.dsn = '${dsn}'; - // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring. - // We recommend adjusting this value in production. - options.tracesSampleRate = 1.0; - }); + options.dsn = '${params.dsn}'; + // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring. + // We recommend adjusting this value in production. + options.tracesSampleRate = 1.0; + }); // or define SENTRY_DSN via Dart environment variable (--dart-define) -} - `, - additionalInfo: ( -

- {tct( - 'You can configure the [sentryDsn: SENTRY_DSN], [sentryRelease: SENTRY_RELEASE], [sentryDist: SENTRY_DIST], and [sentryEnv: SENTRY_ENVIRONMENT] via the Dart environment variables passing the [dartDefine: --dart-define] flag to the compiler, as noted in the code sample.', - { - sentryDsn: , - sentryRelease: , - sentryDist: , - sentryEnv: , - dartDefine: , - } - )} -

- ), - }, - ], - }, - { - type: StepType.VERIFY, - description: t( - 'Create an intentional error, so you can test that everything is working:' - ), - configurations: [ - { - language: 'dart', - code: ` +}`; + +const getVerifySnippet = () => ` import 'package:sentry/sentry.dart'; try { @@ -99,31 +38,11 @@ try { exception, stackTrace: stackTrace, ); -} - `, - additionalInfo: ( -

- {tct( - "If you're new to Sentry, use the email alert to access your account and complete a product tour.[break] If you're an existing user and have disabled alerts, you won't receive this email.", - { - break:
, - } - )} -

- ), - }, - ], - }, - { - title: t('Performance'), - description: t( - "You'll be able to monitor the performance of your app using the SDK. For example:" - ), - configurations: [ - { - language: 'dart', - code: ` +}`; + +const getPerfomanceSnippet = () => ` import 'package:sentry/sentry.dart'; +import { getPackageVersion } from 'sentry/utils/gettingStartedDocs/getPackageVersion'; final transaction = Sentry.startTransaction('processOrderBatch()', 'task'); @@ -148,32 +67,95 @@ Future processOrderBatch(ISentrySpan span) async { } finally { await innerSpan.finish(); } -} - `, - additionalInfo: ( -

- {tct( - 'To learn more about the API and automatic instrumentations, check out the [perfDocs: performance documentation].', - { - perfDocs: ( - - ), - } - )} -

- ), - }, - ], - }, -]; -// Configuration End +}`; -export function GettingStartedWithDart({ - dsn, - sourcePackageRegistries, - ...props -}: ModuleProps) { - return ; -} +const onboarding: OnboardingConfig = { + install: params => [ + { + type: StepType.INSTALL, + description: tct( + 'Sentry captures data by using an SDK within your application’s runtime. Add the following to your [pubspec: pubspec.yaml]', + { + pubspec: , + } + ), + configurations: [ + { + language: 'yml', + partialLoading: params.sourcePackageRegistries.isLoading, + code: getInstallSnipet(params), + }, + ], + }, + ], + configure: params => [ + { + type: StepType.CONFIGURE, + description: tct('Import [sentry: sentry] and initialize it', { + sentry: , + }), + configurations: [ + { + language: 'dart', + code: getConfigureSnippet(params), + additionalInfo: tct( + 'You can configure the [sentryDsn: SENTRY_DSN], [sentryRelease: SENTRY_RELEASE], [sentryDist: SENTRY_DIST], and [sentryEnv: SENTRY_ENVIRONMENT] via the Dart environment variables passing the [dartDefine: --dart-define] flag to the compiler, as noted in the code sample.', + { + sentryDsn: , + sentryRelease: , + sentryDist: , + sentryEnv: , + dartDefine: , + } + ), + }, + ], + }, + ], + verify: () => [ + { + type: StepType.VERIFY, + description: t( + 'Create an intentional error, so you can test that everything is working:' + ), + configurations: [ + { + language: 'dart', + code: getVerifySnippet(), + additionalInfo: tct( + "If you're new to Sentry, use the email alert to access your account and complete a product tour.[break] If you're an existing user and have disabled alerts, you won't receive this email.", + { + break:
, + } + ), + }, + ], + }, + { + title: t('Performance'), + description: t( + "You'll be able to monitor the performance of your app using the SDK. For example:" + ), + configurations: [ + { + language: 'dart', + code: getPerfomanceSnippet(), + additionalInfo: tct( + 'To learn more about the API and automatic instrumentations, check out the [perfDocs: performance documentation].', + { + perfDocs: ( + + ), + } + ), + }, + ], + }, + ], +}; + +const docs: Docs = { + onboarding, +}; -export default GettingStartedWithDart; +export default docs;