WIP add test??

src/components/__tests__/codeBlock.test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import {CodeWrapper} from '../codeBlock';
+import {CodeContextProvider, DEFAULTS} from '../codeContext';
+
+describe('CodeWrapper', () => {
+ it('renders without placeholder', () => {
+ const tree = renderer
+ .create(
+ <CodeContextProvider fetcher={() => DEFAULTS}>
+ <CodeWrapper>process.env.MY_ENV = 'foo'</CodeWrapper>
+ </CodeContextProvider>
+ )
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ /* it('renders with placeholder', () => {
+ const tree = renderer
+ .create(<CodeWrapper>process.env.MY_ENV = ___ORG_SLUG___</CodeWrapper>)
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('renders with placeholder in middle of text', () => {
+ const tree = renderer
+ .create(
+ <CodeWrapper>process.env.MY_ENV = https://___ORG_SLUG___.sentry.io</CodeWrapper>
+ )
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('renders org auth token placeholder', () => {
+ const tree = renderer
+ .create(<CodeWrapper>process.env.MY_ENV = ___ORG_AUTH_TOKEN___</CodeWrapper>)
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('renders multiple placeholders', () => {
+ const tree = renderer
+ .create(
+ <CodeWrapper>
+ process.env.MY_ENV = ___ORG_SLUG___ + ___PROJECT_SLUG___
+ </CodeWrapper>
+ )
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+ }); */
+});

src/components/basePage.tsx

@@ -3,7 +3,7 @@ import React, {Fragment, useRef} 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={contentRef}>
- <CodeContext.Provider value={useCodeContextState()}>
- {children}
- </CodeContext.Provider>
+ <CodeContextProvider>{children}</CodeContextProvider>
 
  {file && (
  <GitHubCTA

src/components/codeContext.tsx

@@ -59,7 +59,7 @@ type UserApiResult = {
 // only fetch them once
 let cachedCodeKeywords: CodeKeywords | null = null;
 
-const DEFAULTS: CodeKeywords = {
+export const DEFAULTS: CodeKeywords = {
  PROJECT: [
  {
  DSN: 'https://examplePublicKey@o0.ingest.sentry.io/0',
@@ -240,21 +240,29 @@ export async function createOrgAuthToken({
  }
 }
 
-export function useCodeContextState(fetcher = fetchCodeKeywords): CodeContextType {
+export function CodeContextProvider({
+ children,
+ fetcher,
+}: {
+ children: React.ReactNode;
+ fetcher?: () => Promise<CodeKeywords>;
+}) {
  const [codeKeywords, setCodeKeywords] = useState(cachedCodeKeywords ?? DEFAULTS);
 
  const [isLoading, setIsLoading] = useState<boolean>(cachedCodeKeywords ? false : true);
 
+ const _fetcher = fetcher || fetchCodeKeywords;
+
  useEffect(() => {
  if (cachedCodeKeywords === null) {
  setIsLoading(true);
- fetcher().then((config: CodeKeywords) => {
+ _fetcher().then((config: CodeKeywords) => {
  cachedCodeKeywords = config;
  setCodeKeywords(config);
  setIsLoading(false);
  });
  }
- }, [setIsLoading, setCodeKeywords, fetcher]);
+ }, [setIsLoading, setCodeKeywords, _fetcher]);
 
  // sharedKeywordSelection maintains a global mapping for each "keyword"
  // namespace to the index of the selected item.
@@ -273,5 +281,5 @@ export function useCodeContextState(fetcher = fetchCodeKeywords): CodeContextTyp
  isLoading,
  };
 
- return result;
+ return <CodeContext.Provider value={result}>{children}</CodeContext.Provider>;
 }