add tests

getsentry · Jul 13, 2023 · 172ab44 · 172ab44
1 parent 76e845c
commit 172ab44
Show file tree

Hide file tree

Showing 6 changed files with 343 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
  "@sentry/browser": "7.55.2",
  "@sentry/webpack-plugin": "2.2.2",
  "@types/dompurify": "^3.0.2",
+ "@types/js-cookie": "^3.0.3",
  "@types/jest": "^29.5.3",
  "@types/js-yaml": "^3.0.0",
  "@types/node": "^20.3.1",

diff --git a/src/components/__tests__/__snapshots__/codeBlock.test.js.snap b/src/components/__tests__/__snapshots__/codeBlock.test.js.snap
@@ -0,0 +1,250 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CodeWrapper renders multiple placeholders 1`] = `
+<code>
+ process.env.MY_ENV = 
+ <span
+ className="css-1rhw0e5"
+ onClick={[Function]}
+ onKeyDown={[Function]}
+ role="button"
+ tabIndex={0}
+ title="example-org / example-project"
+ >
+ <svg
+ className="css-1i93cgw"
+ fill="none"
+ height="12px"
+ stroke="currentColor"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ viewBox="0 0 24 24"
+ width="12px"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <line
+ x1="12"
+ x2="12"
+ y1="5"
+ y2="19"
+ />
+ <polyline
+ points="19 12 12 19 5 12"
+ />
+ </svg>
+ <span
+ style={
+ {
+ "display": undefined,
+ }
+ }
+ >
+ <span
+ className="css-1f5vc5"
+ style={
+ {
+ "opacity": 1,
+ "position": "relative",
+ "transform": "none",
+ }
+ }
+ >
+ example-org
+ </span>
+ </span>
+ </span>
+ + 
+ <span
+ className="css-1rhw0e5"
+ onClick={[Function]}
+ onKeyDown={[Function]}
+ role="button"
+ tabIndex={0}
+ title="example-org / example-project"
+ >
+ <svg
+ className="css-1i93cgw"
+ fill="none"
+ height="12px"
+ stroke="currentColor"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ viewBox="0 0 24 24"
+ width="12px"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <line
+ x1="12"
+ x2="12"
+ y1="5"
+ y2="19"
+ />
+ <polyline
+ points="19 12 12 19 5 12"
+ />
+ </svg>
+ <span
+ style={
+ {
+ "display": undefined,
+ }
+ }
+ >
+ <span
+ className="css-1f5vc5"
+ style={
+ {
+ "opacity": 1,
+ "position": "relative",
+ "transform": "none",
+ }
+ }
+ >
+ example-project
+ </span>
+ </span>
+ </span>
+</code>
+`;
+
+exports[`CodeWrapper renders org auth token placeholder when not signed in 1`] = `
+<code>
+ process.env.MY_ENV = 
+ sntrys_YOUR_TOKEN_HERE
+</code>
+`;
+
+exports[`CodeWrapper renders org auth token placeholder when signed in 1`] = `
+<code>
+ process.env.MY_ENV = 
+ <span
+ className="css-1rhw0e5"
+ onClick={[Function]}
+ >
+ Click to generate token
+ </span>
+</code>
+`;
+
+exports[`CodeWrapper renders with placeholder 1`] = `
+<code>
+ process.env.MY_ENV = 
+ <span
+ className="css-1rhw0e5"
+ onClick={[Function]}
+ onKeyDown={[Function]}
+ role="button"
+ tabIndex={0}
+ title="example-org / example-project"
+ >
+ <svg
+ className="css-1i93cgw"
+ fill="none"
+ height="12px"
+ stroke="currentColor"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ viewBox="0 0 24 24"
+ width="12px"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <line
+ x1="12"
+ x2="12"
+ y1="5"
+ y2="19"
+ />
+ <polyline
+ points="19 12 12 19 5 12"
+ />
+ </svg>
+ <span
+ style={
+ {
+ "display": undefined,
+ }
+ }
+ >
+ <span
+ className="css-1f5vc5"
+ style={
+ {
+ "opacity": 1,
+ "position": "relative",
+ "transform": "none",
+ }
+ }
+ >
+ example-org
+ </span>
+ </span>
+ </span>
+</code>
+`;
+
+exports[`CodeWrapper renders with placeholder in middle of text 1`] = `
+<code>
+ process.env.MY_ENV = https://
+ <span
+ className="css-1rhw0e5"
+ onClick={[Function]}
+ onKeyDown={[Function]}
+ role="button"
+ tabIndex={0}
+ title="example-org / example-project"
+ >
+ <svg
+ className="css-1i93cgw"
+ fill="none"
+ height="12px"
+ stroke="currentColor"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ viewBox="0 0 24 24"
+ width="12px"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <line
+ x1="12"
+ x2="12"
+ y1="5"
+ y2="19"
+ />
+ <polyline
+ points="19 12 12 19 5 12"
+ />
+ </svg>
+ <span
+ style={
+ {
+ "display": undefined,
+ }
+ }
+ >
+ <span
+ className="css-1f5vc5"
+ style={
+ {
+ "opacity": 1,
+ "position": "relative",
+ "transform": "none",
+ }
+ }
+ >
+ example-org
+ </span>
+ </span>
+ </span>
+ .sentry.io
+</code>
+`;
+
+exports[`CodeWrapper renders without placeholder 1`] = `
+<code>
+ process.env.MY_ENV = 'foo'
+</code>
+`;
diff --git a/src/components/__tests__/codeBlock.test.js b/src/components/__tests__/codeBlock.test.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import {create} from 'react-test-renderer';
+
+import {CodeWrapper} from '../codeBlock';
+import {_setCachedCodeKeywords, CodeContextProvider, DEFAULTS} from '../codeContext';
+
+describe('CodeWrapper', () => {
+ beforeEach(() => {
+ _setCachedCodeKeywords(DEFAULTS);
+ });
+
+ it('renders without placeholder', () => {
+ const tree = create(
+ <CodeContextProvider>
+ <CodeWrapper>process.env.MY_ENV = 'foo'</CodeWrapper>
+ </CodeContextProvider>
+ );
+
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+
+ it('renders with placeholder', () => {
+ const tree = create(
+ <CodeContextProvider>
+ <CodeWrapper>process.env.MY_ENV = ___ORG_SLUG___</CodeWrapper>
+ </CodeContextProvider>
+ );
+
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+
+ it('renders with placeholder in middle of text', () => {
+ const tree = create(
+ <CodeContextProvider>
+ <CodeWrapper>process.env.MY_ENV = https://___ORG_SLUG___.sentry.io</CodeWrapper>
+ </CodeContextProvider>
+ );
+
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+
+ it('renders org auth token placeholder when not signed in', () => {
+ const tree = create(
+ <CodeContextProvider>
+ <CodeWrapper>process.env.MY_ENV = ___ORG_AUTH_TOKEN___</CodeWrapper>
+ </CodeContextProvider>
+ );
+
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+ it('renders org auth token placeholder when signed in', () => {
+ _setCachedCodeKeywords({...DEFAULTS, USER: {ID: 123, NAME: 'test@sentry.io'}});
+
+ const tree = create(
+ <CodeContextProvider>
+ <CodeWrapper>process.env.MY_ENV = ___ORG_AUTH_TOKEN___</CodeWrapper>
+ </CodeContextProvider>
+ );
+
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+
+ it('renders multiple placeholders', () => {
+ const tree = create(
+ <CodeContextProvider>
+ <CodeWrapper>
+ process.env.MY_ENV = ___ORG_SLUG___ + ___PROJECT_SLUG___
+ </CodeWrapper>
+ </CodeContextProvider>
+ );
+
+ expect(tree.toJSON()).toMatchSnapshot();
+ });
+});
diff --git a/src/components/basePage.tsx b/src/components/basePage.tsx
@@ -3,7 +3,7 @@ import React, {Fragment, useState} from 'react';
 import {getCurrentTransaction} from '../utils';
 
 import {Banner} from './banner';
-import {CodeContext, useCodeContextState} from './codeContext';
+import {CodeContextProvider} from './codeContext';
 import {GitHubCTA} from './githubCta';
 import {Layout} from './layout';
 import {SEO} from './seo';
@@ -77,9 +77,7 @@ export function BasePage({
  >
  <h1 className="mb-3">{title}</h1>
  <div id="main" ref={setContentElement}>
- <CodeContext.Provider value={useCodeContextState()}>
- {children}
- </CodeContext.Provider>
+ <CodeContextProvider>{children}</CodeContextProvider>
 
  {file && (
  <GitHubCTA