@codecademy/codebytes 0.2.1-alpha.547196.0 → 0.2.1-alpha.62069b.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.547196.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.2.1-alpha.547196.0) (2022-01-13)
+### [0.2.1-alpha.62069b.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.2.1-alpha.62069b.0) (2022-01-14)
 
 **Note:** Version bump only for package @codecademy/codebytes
 

package/jest.config.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.2.1-alpha.547196.0",
+  "version": "0.2.1-alpha.62069b.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -26,9 +26,8 @@
     "@codecademy/variance": "*",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "@loadable/component": "^5.13.1",
-    "monaco-editor": "0.20.0",
-    "react-monaco-editor": "0.34.0",
+    "@monaco-editor/react": "4.3.1",
+    "monaco-editor": ">= 0.25.0 < 1",
     "react-resize-observer": "1.1.1"
   },
   "scripts": {
@@ -47,11 +46,10 @@
     "@testing-library/react": "^11.0.4",
     "@testing-library/react-hooks": "3.2.1",
     "@testing-library/user-event": "13.1.1",
-    "@types/loadable__component": "^5.13.2",
     "monaco-editor-webpack-plugin": "1.9.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bb68468f760bc1b81d2f0c179a2974196993cf39"
+  "gitHead": "644608025776c10ef5db464c2cbc8e2c00da48f2"
 }

package/src/__tests__/codebyte-test.tsx

@@ -44,12 +44,12 @@ describe('CodeBytes', () => {
     const { view } = renderWrapper();
     const selectedLanguage = view.getByRole('combobox') as Element;
     userEvent.selectOptions(selectedLanguage, ['javascript']);
-    view.getByText(helloWorld.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!);
+    view.getByText(helloWorld.javascript);
   });
 
   it('initializes with deserialized text when there is a text prop but no language prop', () => {

package/src/__tests__/editor-test.tsx

@@ -0,0 +1,59 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+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');
+  });
+});

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

@@ -0,0 +1,14 @@
+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');
+  });
+});

package/src/consts.ts

@@ -1,7 +1,7 @@
 // key = language param to send to snippets service
 // val = label in language selection drop down
 export const languageOptions = {
-  '': 'Select your language',
+  '': 'Select a language',
   cpp: 'C++',
   csharp: 'C#',
   golang: 'Go',
@@ -16,7 +16,7 @@ export type languageOption = keyof typeof languageOptions;
 
 export const validLanguages = Object.keys(languageOptions).filter(
   (option) => !!option
-) as languageOption[];
+) as Exclude<languageOption, ''>[];
 
 const cpp = `#include <iostream>
 int main() {
@@ -52,7 +52,7 @@ const scheme = `(begin
   (display "Hello world!")
   (newline))`;
 
-export const helloWorld: { [key in languageOption]?: string } = {
+export const helloWorld = {
   cpp,
   csharp,
   golang,
@@ -61,4 +61,4 @@ export const helloWorld: { [key in languageOption]?: string } = {
   python,
   ruby,
   scheme,
-};
+} as const;

package/src/editor.tsx

@@ -9,11 +9,11 @@ import { CopyIcon } from '@codecademy/gamut-icons';
 import styled from '@emotion/styled';
 import React, { useState } from 'react';
 
-import { CodebytesChangeHandlerMap } from '.';
 import { postSnippet } from './api';
 import type { languageOption } from './consts';
 import { Drawers } from './drawers';
 import { SimpleMonacoEditor } from './MonacoEditor';
+import { CodebytesChangeHandlerMap } from './types';
 
 const Output = styled.pre<{ hasError: boolean }>`
   width: 100%;
@@ -39,9 +39,8 @@ type EditorProps = {
   hideCopyButton: boolean;
   language: languageOption;
   text: string;
-
   onChange: (text: string) => void;
-  on?: Pick<CodebytesChangeHandlerMap, 'copy' | 'run'>;
+  on?: CodebytesChangeHandlerMap;
   snippetsBaseUrl?: string;
 };
 
@@ -49,7 +48,7 @@ export const Editor: React.FC<EditorProps> = ({
   language,
   text,
   hideCopyButton,
-  on,
+  on = {},
   onChange,
   snippetsBaseUrl,
 }) => {
@@ -58,11 +57,9 @@ export const Editor: React.FC<EditorProps> = ({
   const [isCodeByteCopied, setIsCodeByteCopied] = useState(false);
   const onCopyClick = () => {
     if (!isCodeByteCopied) {
-      navigator.clipboard
-        .writeText(text)
-        // eslint-disable-next-line no-console
-        .catch(() => console.error('Failed to copy'));
-      on?.copy?.(text, language);
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      navigator.clipboard.writeText(text);
+      on.copy?.(text, language);
       setIsCodeByteCopied(true);
     }
   };
@@ -82,7 +79,7 @@ export const Editor: React.FC<EditorProps> = ({
     };
     setStatus('waiting');
     setOutput('');
-    on?.run?.();
+    on.run?.();
 
     try {
       const response = await postSnippet(data, snippetsBaseUrl);
@@ -133,15 +130,20 @@ 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 role="alert">Copied!</span>
+              <span data-testid="copy-confirmation-tooltip" role="alert">
+                Copied!
+              </span>
             ) : (
-              <span>Copy to your clipboard</span>
+              <span data-testid="copy-prompt-tooltip">
+                Copy to your clipboard
+              </span>
             )}
           </ToolTip>
         ) : null}

package/src/index.tsx

@@ -8,24 +8,7 @@ import React, { useEffect, useState } from 'react';
 import { helloWorld, languageOption } from './consts';
 import { Editor } from './editor';
 import { LanguageSelection } from './languageSelection';
-
-type CodebytesChangeHandler = (text: string, language: languageOption) => void;
-export type CodebytesChangeHandlerMap = {
-  logoClick?: () => void;
-  edit?: CodebytesChangeHandler;
-  languageChange?: CodebytesChangeHandler;
-  copy?: CodebytesChangeHandler;
-  run?: () => void;
-};
-
-export interface CodeByteEditorProps {
-  text?: string;
-  language?: languageOption;
-  hideCopyButton?: boolean;
-  isIFrame?: boolean;
-  snippetsBaseUrl?: string;
-  on?: CodebytesChangeHandlerMap;
-}
+import { CodeByteEditorProps } from './types';
 
 const editorStates = states({
   isIFrame: { height: '100vh' },
@@ -54,7 +37,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   language: initialLanguage,
   hideCopyButton = false,
   isIFrame = false,
-  on,
+  on = {},
   snippetsBaseUrl = process.env.CONTAINER_API_BASE,
 }) => {
   const [text, setText] = useState<string>(initialText ?? '');
@@ -62,7 +45,6 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
     initialLanguage ?? ''
   );
 
-  /* Resetting the state when the props change. If the language changes and the text is not provided output helloworld  */
   useEffect(() => {
     if (language) {
       setText(initialText ?? (helloWorld[language] || ''));
@@ -79,7 +61,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           target="_blank"
           rel="noreferrer"
           aria-label="visit codecademy.com"
-          onClick={() => on?.logoClick?.()}
+          onClick={() => on.logoClick?.()}
         />
       </Box>
       {language ? (
@@ -89,7 +71,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
           hideCopyButton={hideCopyButton}
           onChange={(newText: string) => {
             setText(newText);
-            on?.edit?.(newText, language);
+            on.edit?.(newText, language);
           }}
           on={on}
           snippetsBaseUrl={snippetsBaseUrl}
@@ -97,10 +79,11 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
       ) : (
         <LanguageSelection
           onChange={(newLanguage) => {
-            const newText: string = text || helloWorld[newLanguage] || '';
+            const newText: string =
+              text || (newLanguage ? helloWorld[newLanguage] : '');
             setLanguage(newLanguage);
             setText(newText);
-            on?.languageChange?.(newText, newLanguage);
+            on.languageChange?.(newText, newLanguage);
           }}
         />
       )}

package/src/types.ts

@@ -0,0 +1,20 @@
+import { languageOption } from './consts';
+
+type CodebytesChangeHandler = (text: string, language: languageOption) => void;
+
+export type CodebytesChangeHandlerMap = {
+  logoClick?: () => void;
+  edit?: CodebytesChangeHandler;
+  languageChange?: CodebytesChangeHandler;
+  copy?: CodebytesChangeHandler;
+  run?: () => void;
+};
+
+export interface CodeByteEditorProps {
+  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. */;
+  on?: CodebytesChangeHandlerMap;
+}