@codecademy/codebytes 0.2.1-alpha.f2f3f4.0 → 0.3.1-alpha.05abbb.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [0.2.1-alpha.f2f3f4.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.2.1-alpha.f2f3f4.0) (2022-01-14)
+### [0.3.1-alpha.05abbb.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.3.1-alpha.05abbb.0) (2022-01-19)
 
 **Note:** Version bump only for package @codecademy/codebytes
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.2.1-alpha.f2f3f4.0",
+  "version": "0.3.1-alpha.05abbb.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -40,16 +40,13 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@codecademy/gamut-tests": "*",
     "@emotion/jest": "^11.3.0",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/react": "^11.0.4",
-    "@testing-library/react-hooks": "3.2.1",
-    "@testing-library/user-event": "13.1.1",
-    "monaco-editor-webpack-plugin": "1.9.1"
+    "@types/loadable__component": "^5.13.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0217221d6e84fc50096aa400141ccaada0da3abf"
+  "gitHead": "743011037c7afca4bfbe8aa1cd7feda52b7d836d"
 }

package/src/consts.ts

@@ -16,7 +16,7 @@ export type languageOption = keyof typeof languageOptions;
 
 export const validLanguages = Object.keys(languageOptions).filter(
   (option) => !!option
-) as Exclude<languageOption, ''>[];
+) as languageOption[];
 
 const cpp = `#include <iostream>
 int main() {

package/src/editor.tsx

@@ -57,8 +57,10 @@ export const Editor: React.FC<EditorProps> = ({
   const [isCodeByteCopied, setIsCodeByteCopied] = useState(false);
   const onCopyClick = () => {
     if (!isCodeByteCopied) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      navigator.clipboard.writeText(text);
+      navigator.clipboard
+        .writeText(text)
+        // eslint-disable-next-line no-console
+        .catch(() => console.error('Failed to copy'));
       on.copy?.(text, language);
       setIsCodeByteCopied(true);
     }
@@ -130,20 +132,15 @@ export const Editor: React.FC<EditorProps> = ({
                 variant="secondary"
                 onClick={onCopyClick}
                 onBlur={() => setIsCodeByteCopied(false)}
-                data-testid="copy-codebyte-btn"
               >
                 <CopyIconStyled aria-hidden="true" /> Copy Codebyte
               </TextButton>
             }
           >
             {isCodeByteCopied ? (
-              <span data-testid="copy-confirmation-tooltip" role="alert">
-                Copied!
-              </span>
+              <span role="alert">Copied!</span>
             ) : (
-              <span data-testid="copy-prompt-tooltip">
-                Copy to your clipboard
-              </span>
+              <span>Copy to your clipboard</span>
             )}
           </ToolTip>
         ) : null}

package/src/index.tsx

@@ -3,7 +3,7 @@ import { FaviconIcon } from '@codecademy/gamut-icons';
 import { Background, states, system } from '@codecademy/gamut-styles';
 import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 
 import { helloWorld, languageOption } from './consts';
 import { Editor } from './editor';
@@ -35,22 +35,13 @@ const EditorContainer = styled(Background)<EditorStyleProps>(
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
   language: initialLanguage,
-  hideCopyButton = false,
+  hideCopyButton,
   isIFrame = false,
   on = {},
   snippetsBaseUrl = process.env.CONTAINER_API_BASE,
 }) => {
-  const [text, setText] = useState<string>(initialText ?? '');
-  const [language, setLanguage] = useState<languageOption>(
-    initialLanguage ?? ''
-  );
-
-  useEffect(() => {
-    if (language) {
-      setText(initialText ?? (helloWorld[language] || ''));
-    }
-  }, [language, initialText]);
-
+  const [text, setText] = useState<string>(initialText);
+  const [language, setLanguage] = useState<languageOption>(initialLanguage);
   return (
     <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
       <Box borderBottom={1} borderColor="gray-900" py={4} pl={8}>

package/src/types.ts

@@ -1,20 +1,20 @@
 import { languageOption } from './consts';
-
-type CodebytesChangeHandler = (text: string, language: languageOption) => void;
-
-export type CodebytesChangeHandlerMap = {
+interface CodebytesChangeHandler {
+  (text: string, language: languageOption): void;
+}
+export interface CodebytesChangeHandlerMap {
   logoClick?: () => void;
   edit?: CodebytesChangeHandler;
   languageChange?: CodebytesChangeHandler;
   copy?: CodebytesChangeHandler;
   run?: () => void;
-};
+}
 
 export interface CodeByteEditorProps {
-  text?: string;
-  language?: languageOption;
-  hideCopyButton?: boolean;
+  text: string;
+  language: languageOption;
+  hideCopyButton: boolean;
   isIFrame?: boolean;
-  snippetsBaseUrl?: string /* TODO in DISC-353: Determine best way to host and include snippets endpoint for both staging and production in both the monolith and next.js repo. */;
+  snippetsBaseUrl?: string;
   on?: CodebytesChangeHandlerMap;
 }

package/jest.config.js

@@ -1 +0,0 @@
-module.exports = require('../../jest.config.base')('codebytes');

package/src/__tests__/codebyte-test.tsx

@@ -1,121 +0,0 @@
-import { setupRtl } from '@codecademy/gamut-tests';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-
-import { CodeByteEditor } from '..';
-import { helloWorld, validLanguages } from '../consts';
-
-const mockEditorTestId = 'mock-editor-test-id';
-
-jest.mock('react-resize-observer');
-// This is a super simplified mock capable of render value and trigger onChange.
-jest.mock('../MonacoEditor', () => ({
-  SimpleMonacoEditor: ({
-    value,
-    onChange,
-  }: {
-    value: string;
-    onChange?: (value: string) => void;
-  }) => (
-    <>
-      {value}
-      <input
-        data-testid={mockEditorTestId}
-        type="text"
-        onChange={(e) => {
-          onChange?.(e.target.value);
-        }}
-        value={value}
-      />
-    </>
-  ),
-}));
-
-const renderWrapper = setupRtl(CodeByteEditor, {});
-
-describe('CodeBytes', () => {
-  it('has a language-specific "hello world" program defined for each language', () => {
-    validLanguages.forEach((language) => {
-      expect(helloWorld[language]).toBeDefined();
-    });
-  });
-
-  it('initializes with a language-specific "hello world" program when there is no language prop', () => {
-    const { view } = renderWrapper();
-    const selectedLanguage = view.getByRole('combobox') as Element;
-    userEvent.selectOptions(selectedLanguage, ['javascript']);
-    view.getByText(helloWorld.javascript);
-  });
-
-  it('initializes with a language-specific "hello world" program when there is a language prop but no text prop', () => {
-    const { view } = renderWrapper({ language: 'javascript' });
-    view.getByText(helloWorld.javascript);
-  });
-
-  it('initializes with deserialized text when there is a text prop but no language prop', () => {
-    const testString = 'yes hello';
-    const { view } = renderWrapper({ text: testString });
-    const selectedLanguage = view.getByRole('combobox') as Element;
-    userEvent.selectOptions(selectedLanguage, ['javascript']);
-    view.getByText(testString);
-  });
-
-  it('initializes with deserialized text when there is both a language and text prop', () => {
-    const testString = 'yes hello';
-    const { view } = renderWrapper({
-      text: testString,
-      language: 'javascript',
-    });
-    view.getByText(testString);
-  });
-
-  describe.only('Change Handlers', () => {
-    it('triggers onLogoClick upon clicking the logo', () => {
-      const onLogoClick = jest.fn();
-      const { view } = renderWrapper({
-        on: {
-          logoClick: onLogoClick,
-        },
-      });
-
-      const logo = view.getByLabelText('visit codecademy.com');
-      userEvent.click(logo);
-
-      expect(onLogoClick).toHaveBeenCalled();
-    });
-
-    it('triggers onEdit on text edit', () => {
-      const onEdit = jest.fn();
-      const { view } = renderWrapper({
-        text: '',
-        language: 'javascript',
-        on: {
-          edit: onEdit,
-        },
-      });
-
-      const editor = view.getByTestId(mockEditorTestId);
-      userEvent.type(editor, 'dog');
-
-      expect(onEdit).toHaveBeenCalledTimes(3);
-      expect(onEdit).toHaveBeenLastCalledWith('dog', 'javascript');
-    });
-
-    it('triggers onLanguageChange on language selection', () => {
-      const onLanguageChange = jest.fn();
-      const { view } = renderWrapper({
-        on: {
-          languageChange: onLanguageChange,
-        },
-      });
-
-      const selectedLanguage = view.getByRole('combobox') as Element;
-      userEvent.selectOptions(selectedLanguage, ['javascript']);
-
-      expect(onLanguageChange).toHaveBeenCalledWith(
-        "console.log('Hello world!');",
-        'javascript'
-      );
-    });
-  });
-});

package/src/__tests__/editor-test.tsx

@@ -1,103 +0,0 @@
-import { setupRtl } from '@codecademy/gamut-tests';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import { act } from 'react-test-renderer';
-
-import { Editor } from '../editor';
-
-jest.mock('../MonacoEditor', () => ({
-  SimpleMonacoEditor: ({ value }: { value: string }) => <>{value}</>,
-}));
-
-jest.mock('react-resize-observer');
-
-const renderWrapper = setupRtl(Editor, {
-  hideCopyButton: false,
-  language: 'javascript',
-  text: 'hello world',
-  onChange: jest.fn(),
-  snippetsBaseUrl: '',
-});
-
-Object.defineProperty(navigator, 'clipboard', {
-  value: {
-    writeText: jest.fn(),
-  },
-});
-
-describe('Editor', () => {
-  (global as any).fetch = jest.fn();
-  afterEach(() => {
-    (global as any).fetch.mockClear();
-  });
-
-  it('shows a prompt tooltip when the CodeByte has __not__ been copied via the button', () => {
-    const { view } = renderWrapper();
-    expect(view.queryByTestId('copy-confirmation-tooltip')).toBeFalsy();
-    view.getByTestId('copy-prompt-tooltip');
-  });
-
-  it('shows a confirmation tooltip when the CodeByte has been copied via the button', () => {
-    const { view } = renderWrapper();
-    const copyBtn = view.getByTestId('copy-codebyte-btn');
-    userEvent.click(copyBtn as HTMLButtonElement);
-    expect(view.queryByTestId('copy-prompt-tooltip')).toBeFalsy();
-    view.getByTestId('copy-confirmation-tooltip');
-  });
-
-  it('hides the copy codebyte button if hideCopyButton prop is true"', () => {
-    const { view } = renderWrapper({
-      hideCopyButton: true,
-    });
-    expect(view.queryByTestId('copy-codebyte-btn')).toBeNull();
-  });
-
-  it('shows the copy codebyte button if hideCopyButton prop is not set', () => {
-    const { view } = renderWrapper();
-
-    view.getByTestId('copy-codebyte-btn');
-  });
-
-  describe.only('Change Handlers', () => {
-    it('triggers onCopy upon clicking the copy button', () => {
-      const onCopy = jest.fn();
-      const { view } = renderWrapper({
-        on: {
-          copy: onCopy,
-        },
-      });
-
-      const copyButton = view.getByTestId('copy-codebyte-btn');
-      userEvent.click(copyButton);
-
-      expect(onCopy).toHaveBeenCalled();
-    });
-
-    it('triggers onRun upon clicking the run button', async () => {
-      (global as any).fetch.mockResolvedValue({
-        json: () =>
-          Promise.resolve({
-            stderr: [],
-            exit_code: 0,
-            stdout: '',
-          }),
-      });
-      const onRun = jest.fn();
-      const { view } = renderWrapper({
-        onChange: jest.fn(),
-        text: 'test',
-        language: 'javascript',
-        on: {
-          run: onRun,
-        },
-      });
-
-      const runButton = view.getByText('Run');
-      await act(async () => {
-        userEvent.click(runButton);
-      });
-
-      expect(onRun).toHaveBeenCalled();
-    });
-  });
-});

package/src/__tests__/language-selection-test.tsx

@@ -1,14 +0,0 @@
-import { setupRtl } from '@codecademy/gamut-tests';
-
-import { LanguageSelection } from '../languageSelection';
-
-const renderWrapper = setupRtl(LanguageSelection, {
-  onChange: () => null,
-});
-
-describe('LanguageSelection', () => {
-  it('has placeholder text', () => {
-    const { view } = renderWrapper();
-    view.getByText('Select your language');
-  });
-});