@codecademy/codebytes 0.7.2 → 0.7.3

package/dist/MonacoEditor/index.js

@@ -1,3 +1,6 @@
+var _jsxFileName = "/home/runner/work/mono/mono/libs/codebytes/src/MonacoEditor/index.tsx",
+    _this = this;
+
 // DO NOT CHANGE ANYTHING HERE
 // This component is part of the Codebytes MVP and only includes basic configuration around theming
 // We are working on a monaco package in client-modules that has more configuration around themes and languages
@@ -6,6 +9,8 @@ import ReactMonacoEditor from '@monaco-editor/react';
 import React, { useCallback, useRef } from 'react';
 import ResizeObserver from 'react-resize-observer';
 import { dark } from './theme';
+import { jsxDEV as _jsxDEV } from "@emotion/react/jsx-dev-runtime";
+import { Fragment as _Fragment } from "@emotion/react/jsx-dev-runtime";
 export var SimpleMonacoEditor = function SimpleMonacoEditor(_ref) {
   var value = _ref.value,
       language = _ref.language,
@@ -16,27 +21,37 @@ export var SimpleMonacoEditor = function SimpleMonacoEditor(_ref) {
     monaco.editor.defineTheme('dark', dark);
     monaco.editor.setTheme('dark');
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
-    onResize: function onResize(_ref2) {
-      var _editorRef$current;
+  return _jsxDEV(_Fragment, {
+    children: [_jsxDEV(ResizeObserver, {
+      onResize: function onResize(_ref2) {
+        var _editorRef$current;
 
-      var height = _ref2.height,
-          width = _ref2.width;
-      (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.layout({
-        height: height,
-        width: width
-      });
-    }
-  }), /*#__PURE__*/React.createElement(ReactMonacoEditor, {
-    onMount: editorWillMount,
-    onChange: onChange,
-    options: {
-      minimap: {
-        enabled: false
+        var height = _ref2.height,
+            width = _ref2.width;
+        (_editorRef$current = editorRef.current) == null ? void 0 : _editorRef$current.layout({
+          height: height,
+          width: width
+        });
       }
-    },
-    theme: "vs-dark",
-    value: value,
-    language: language
-  }));
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 38,
+      columnNumber: 7
+    }, _this), _jsxDEV(ReactMonacoEditor, {
+      onMount: editorWillMount,
+      onChange: onChange,
+      options: {
+        minimap: {
+          enabled: false
+        }
+      },
+      theme: "vs-dark",
+      value: value,
+      language: language
+    }, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 46,
+      columnNumber: 7
+    }, _this)]
+  }, void 0, true);
 };

package/dist/MonacoEditor/types.js

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/codebyte.test.tsx

@@ -0,0 +1,179 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+import { act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { CodeByteEditor } from '..';
+import { helloWorld, validLanguages } from '../consts';
+import { trackClick } from '../helpers';
+import { trackUserImpression } from '../libs/eventTracking';
+
+const mockEditorTestId = 'mock-editor-test-id';
+
+jest.mock('react-resize-observer');
+jest.mock('../libs/eventTracking');
+jest.mock('../helpers', () => ({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  ...jest.requireActual('../helpers'),
+  trackClick: jest.fn(),
+}));
+
+// 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', () => {
+  const initialUrl = window.location.href;
+
+  afterEach(() => {
+    window.history.replaceState(null, '', initialUrl);
+    (trackClick as any).mockReset();
+    (trackUserImpression as any).mockReset();
+  });
+
+  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', async () => {
+    const { view } = renderWrapper();
+    const selectedLanguage = view.getByRole('combobox') as Element;
+    await act(async () => {
+      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', async () => {
+    const testString = 'yes hello';
+    const { view } = renderWrapper({ text: testString });
+    const selectedLanguage = view.getByRole('combobox') as Element;
+    await act(async () => {
+      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('Change Handlers', () => {
+    it('triggers onEdit on text edit', async () => {
+      const onEdit = jest.fn();
+      const { view } = renderWrapper({
+        text: '',
+        language: 'javascript',
+        onEdit,
+      });
+
+      const editor = view.getByTestId(mockEditorTestId);
+      await act(async () => {
+        userEvent.type(editor, 'dog');
+      });
+      expect(onEdit).toHaveBeenCalledTimes(3);
+      expect(onEdit).toHaveBeenLastCalledWith('dog', 'javascript');
+    });
+
+    it('triggers onLanguageChange on language selection', async () => {
+      const onLanguageChange = jest.fn();
+      const { view } = renderWrapper({
+        onLanguageChange,
+      });
+
+      const selectedLanguage = view.getByRole('combobox') as Element;
+      await act(async () => {
+        userEvent.selectOptions(selectedLanguage, ['javascript']);
+      });
+      expect(onLanguageChange).toHaveBeenCalledWith(
+        "console.log('Hello world!');",
+        'javascript'
+      );
+    });
+  });
+
+  describe('Tracking', () => {
+    it('triggers trackClick on clicking the logo', async () => {
+      const { view } = renderWrapper({});
+      const logo = view.getByLabelText('visit codecademy.com');
+      await act(async () => {
+        userEvent.click(logo);
+      });
+      expect(trackClick).toHaveBeenCalledWith('logo', undefined);
+    });
+
+    it('triggers trackClick on language selection', async () => {
+      const { view } = renderWrapper();
+      const selectedLanguage = view.getByRole('combobox') as Element;
+      await act(async () => {
+        userEvent.selectOptions(selectedLanguage, ['javascript']);
+      });
+      expect(trackClick).toHaveBeenCalledWith('lang_select', undefined);
+    });
+
+    it('triggers trackClick for the first edit', async () => {
+      const testString = 'original-value';
+      const { view } = renderWrapper({
+        text: testString,
+        language: 'javascript',
+        trackFirstEdit: true,
+      });
+
+      const editor = view.getByTestId(mockEditorTestId);
+      await act(async () => {
+        userEvent.type(editor, 'd');
+      });
+      expect(trackClick).toHaveBeenCalledWith('edit', undefined);
+    });
+
+    it('triggers trackUserImpression', () => {
+      renderWrapper({
+        text: 'some-value',
+        language: 'javascript',
+        trackingData: {
+          page_name: 'forum_compose',
+          context: 'https://discuss.codecademy.com/some-interesting/post',
+        },
+      });
+
+      expect(trackUserImpression).toHaveBeenCalledWith({
+        page_name: 'forum_compose',
+        context: 'https://discuss.codecademy.com/some-interesting/post',
+        target: 'codebyte',
+      });
+    });
+  });
+});

package/dist/__tests__/editor.test.tsx

@@ -0,0 +1,108 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+import { act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Editor } from '../editor';
+import { trackClick } from '../helpers';
+
+jest.mock('react-resize-observer');
+jest.mock('../libs/eventTracking');
+jest.mock('../helpers', () => ({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  ...jest.requireActual('../helpers'),
+  trackClick: jest.fn(),
+}));
+
+jest.mock('../MonacoEditor', () => ({
+  SimpleMonacoEditor: ({ value }: { value: string }) => value,
+}));
+
+const renderWrapper = setupRtl(Editor, {
+  hideCopyButton: false,
+  language: 'javascript',
+  text: 'hello world',
+  onChange: jest.fn(),
+  snippetsBaseUrl: '',
+});
+
+Object.defineProperty(navigator, 'clipboard', {
+  value: {
+    writeText: jest.fn().mockImplementation(() => Promise.resolve()),
+  },
+});
+
+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', async () => {
+    const { view } = renderWrapper();
+    const copyBtn = view.getByTestId('copy-codebyte-btn');
+    await act(async () => {
+      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('Tracking', () => {
+    it('tracks clicks on the run button', async () => {
+      (global as any).fetch.mockResolvedValue({
+        json: () =>
+          Promise.resolve({
+            stderr: [],
+            exit_code: 0,
+            stdout: '',
+          }),
+      });
+      const { view } = renderWrapper({
+        onChange: jest.fn(),
+        text: 'test',
+        language: 'javascript',
+      });
+
+      const runButton = view.getByText('Run');
+      await act(async () => {
+        userEvent.click(runButton);
+      });
+
+      expect(trackClick).toHaveBeenCalledWith('run', undefined);
+    });
+
+    it('tracks clicks on the copy codebyte button', async () => {
+      const { view } = renderWrapper({
+        onChange: jest.fn(),
+        text: 'test',
+        language: 'javascript',
+      });
+
+      const copyButton = view.getByTestId('copy-codebyte-btn');
+      await act(async () => {
+        userEvent.click(copyButton);
+      });
+      expect(trackClick).toHaveBeenCalledWith('copy', undefined);
+    });
+  });
+});

package/dist/__tests__/{helpers-test.js → helpers.test.tsx}

@@ -1,36 +1,39 @@
 import { trackClick } from '../helpers';
 import { trackUserClick } from '../libs/eventTracking';
+
 jest.mock('../libs/eventTracking');
-var initialUrl = window.location.href;
 
-var resetCodebytesParams = function resetCodebytesParams() {
-  return window.history.replaceState(null, '', initialUrl);
-};
+const initialUrl = window.location.href;
+const resetCodebytesParams = () =>
+  window.history.replaceState(null, '', initialUrl);
 
-describe('trackClick', function () {
-  afterEach(function () {
+describe('trackClick', () => {
+  afterEach(() => {
     resetCodebytesParams();
-    trackUserClick.mockReset();
+    (trackUserClick as any).mockReset();
   });
-  it('tracks user click when tracking data is provided', function () {
-    var target = 'foobar';
-    var trackingData = {
+
+  it('tracks user click when tracking data is provided', () => {
+    const target = 'foobar';
+    const trackingData = {
       page_name: 'forum',
       context: 'https://discuss.codecademy.com/some-interesting/post',
-      target: target
+      target,
     };
+
     trackClick(target, trackingData);
     expect(trackUserClick).toHaveBeenCalledWith({
       page_name: 'forum',
       context: 'https://discuss.codecademy.com/some-interesting/post',
-      target: target
+      target,
     });
   });
-  it('tracks user click when tracking data is not provided', function () {
-    var target = 'foobar';
+
+  it('tracks user click when tracking data is not provided', () => {
+    const target = 'foobar';
     trackClick(target);
     expect(trackUserClick).toHaveBeenCalledWith({
-      target: target
+      target,
     });
   });
-});
+});

package/dist/__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('Which language do you want to code in?');
+  });
+});

package/dist/api.js

@@ -1,9 +1,7 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
+import _asyncToGenerator from "/home/runner/work/mono/mono/node_modules/@babel/runtime/helpers/asyncToGenerator.js";
+import _regeneratorRuntime from "/home/runner/work/mono/mono/node_modules/@babel/runtime/regenerator/index.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.promise.js";
 export var postSnippet = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, snippetsBaseUrl) {
     var snippetsEndpoint, response;
@@ -11,7 +9,7 @@ export var postSnippet = /*#__PURE__*/function () {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            snippetsEndpoint = "https://".concat(snippetsBaseUrl, "/snippets");
+            snippetsEndpoint = "https://" + snippetsBaseUrl + "/snippets";
             _context.next = 3;
             return fetch(snippetsEndpoint, {
               method: 'POST',