@codecademy/codebytes 0.7.3 → 0.7.4-alpha.1a54e4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/CHANGELOG.md +243 -0
  2. package/dist/MonacoEditor/colorsDark.d.ts +32 -0
  3. package/dist/MonacoEditor/index.d.ts +7 -0
  4. package/dist/MonacoEditor/index.js +21 -36
  5. package/dist/MonacoEditor/theme.d.ts +2 -0
  6. package/dist/MonacoEditor/types.d.ts +1 -0
  7. package/dist/MonacoEditor/types.js +0 -1
  8. package/dist/__tests__/codebyte-test.d.ts +1 -0
  9. package/dist/__tests__/codebyte-test.js +155 -0
  10. package/dist/__tests__/editor-test.d.ts +1 -0
  11. package/dist/__tests__/editor-test.js +133 -0
  12. package/dist/__tests__/helpers-test.d.ts +1 -0
  13. package/dist/__tests__/{helpers.test.tsx → helpers-test.js} +16 -19
  14. package/dist/__tests__/language-selection-test.d.ts +1 -0
  15. package/dist/__tests__/language-selection-test.js +15 -0
  16. package/dist/__tests__/mocks.d.ts +0 -0
  17. package/dist/__tests__/mocks.js +13 -0
  18. package/dist/api.d.ts +12 -0
  19. package/dist/api.js +7 -5
  20. package/dist/codeByteEditor.d.ts +4 -0
  21. package/dist/codeByteEditor.js +73 -81
  22. package/dist/consts.d.ts +23 -0
  23. package/dist/consts.js +0 -3
  24. package/dist/drawers.d.ts +6 -0
  25. package/dist/drawers.js +81 -124
  26. package/dist/editor.d.ts +15 -0
  27. package/dist/editor.js +66 -107
  28. package/dist/helpers/index.d.ts +2 -0
  29. package/dist/helpers/index.js +7 -2
  30. package/dist/index.d.ts +3 -0
  31. package/dist/languageSelection.d.ts +6 -0
  32. package/dist/languageSelection.js +12 -30
  33. package/dist/libs/eventTracking.d.ts +1 -0
  34. package/dist/libs/eventTracking.js +1 -1
  35. package/dist/theme.d.ts +4 -0
  36. package/dist/types.d.ts +22 -0
  37. package/dist/types.js +0 -1
  38. package/package.json +48 -22
  39. package/dist/__tests__/codebyte.test.tsx +0 -179
  40. package/dist/__tests__/editor.test.tsx +0 -108
  41. package/dist/__tests__/language-selection.test.tsx +0 -14
  42. package/dist/theme.d.js +0 -1
package/CHANGELOG.md ADDED
@@ -0,0 +1,243 @@
1
+ # Change Log
2
+
3
+ All notable changes to this project will be documented in this file.
4
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
+
6
+ ### [0.7.4-alpha.1a54e4.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.7.3...@codecademy/codebytes@0.7.4-alpha.1a54e4.0) (2022-10-20)
7
+
8
+ **Note:** Version bump only for package @codecademy/codebytes
9
+
10
+
11
+
12
+
13
+
14
+ ### [0.7.3](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.7.2...@codecademy/codebytes@0.7.3) (2022-09-16)
15
+
16
+ **Note:** Version bump only for package @codecademy/codebytes
17
+
18
+
19
+
20
+
21
+
22
+ ### [0.7.2](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.7.1...@codecademy/codebytes@0.7.2) (2022-08-24)
23
+
24
+ **Note:** Version bump only for package @codecademy/codebytes
25
+
26
+
27
+
28
+
29
+
30
+ ### [0.7.1](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.7.0...@codecademy/codebytes@0.7.1) (2022-05-24)
31
+
32
+ **Note:** Version bump only for package @codecademy/codebytes
33
+
34
+
35
+
36
+
37
+
38
+ ## [0.7.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.16...@codecademy/codebytes@0.7.0) (2022-05-19)
39
+
40
+
41
+ ### ⚠ BREAKING CHANGES
42
+
43
+ * **CodeByteEditor:** Add copyFormatter prop (#51)
44
+
45
+ ### Features
46
+
47
+ * **CodeByteEditor:** Add copyFormatter prop ([#51](https://github.com/Codecademy/client-modules/issues/51)) ([39b5229](https://github.com/Codecademy/client-modules/commit/39b52291c3db6307203100bb216b852e7e07bc9e))
48
+
49
+
50
+
51
+ ### [0.6.16](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.15...@codecademy/codebytes@0.6.16) (2022-05-16)
52
+
53
+ **Note:** Version bump only for package @codecademy/codebytes
54
+
55
+
56
+
57
+
58
+
59
+ ### [0.6.15](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.14...@codecademy/codebytes@0.6.15) (2022-05-13)
60
+
61
+ **Note:** Version bump only for package @codecademy/codebytes
62
+
63
+
64
+
65
+
66
+
67
+ ### [0.6.14](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.13...@codecademy/codebytes@0.6.14) (2022-05-13)
68
+
69
+ **Note:** Version bump only for package @codecademy/codebytes
70
+
71
+
72
+
73
+
74
+
75
+ ### [0.6.13](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.12...@codecademy/codebytes@0.6.13) (2022-04-11)
76
+
77
+ **Note:** Version bump only for package @codecademy/codebytes
78
+
79
+
80
+
81
+
82
+
83
+ ### [0.6.12](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.11...@codecademy/codebytes@0.6.12) (2022-03-10)
84
+
85
+ **Note:** Version bump only for package @codecademy/codebytes
86
+
87
+
88
+
89
+
90
+
91
+ ### [0.6.11](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.10...@codecademy/codebytes@0.6.11) (2022-03-07)
92
+
93
+
94
+ ### Bug Fixes
95
+
96
+ * fixes a monaco editor display bug for lines below 14-17 ([9780410](https://github.com/Codecademy/client-modules/commit/97804100dea13fe92b6e4d58bfbec4667af5d96c))
97
+
98
+
99
+
100
+ ### [0.6.10](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.9...@codecademy/codebytes@0.6.10) (2022-02-09)
101
+
102
+
103
+ ### Bug Fixes
104
+
105
+ * remove get options from client modules ([6bf7b94](https://github.com/Codecademy/client-modules/commit/6bf7b94876f1c6c1e15b0da2b5393bc1f8151535))
106
+
107
+
108
+
109
+ ### [0.6.9](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.8...@codecademy/codebytes@0.6.9) (2022-02-07)
110
+
111
+
112
+ ### Bug Fixes
113
+
114
+ * **codebytes:** style tweaks ([#33](https://github.com/Codecademy/client-modules/issues/33)) ([6722a8a](https://github.com/Codecademy/client-modules/commit/6722a8accb9dcf88b7508903fdec1f155b010d96))
115
+
116
+
117
+
118
+ ### [0.6.8](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.7...@codecademy/codebytes@0.6.8) (2022-02-05)
119
+
120
+ **Note:** Version bump only for package @codecademy/codebytes
121
+
122
+
123
+
124
+
125
+
126
+ ### [0.6.7](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.6...@codecademy/codebytes@0.6.7) (2022-02-05)
127
+
128
+
129
+ ### Bug Fixes
130
+
131
+ * **codebytes:** semantic text color ([8c5e59b](https://github.com/Codecademy/client-modules/commit/8c5e59b25af3e7f92e4bf3f6bb9de198eec5a3e0))
132
+
133
+
134
+
135
+ ### [0.6.6](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.5...@codecademy/codebytes@0.6.6) (2022-02-03)
136
+
137
+ **Note:** Version bump only for package @codecademy/codebytes
138
+
139
+
140
+
141
+
142
+
143
+ ### [0.6.5](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.4...@codecademy/codebytes@0.6.5) (2022-02-03)
144
+
145
+
146
+ ### Bug Fixes
147
+
148
+ * **Codebytes:** tracking tweaks for monolith ([#31](https://github.com/Codecademy/client-modules/issues/31)) ([4d309d0](https://github.com/Codecademy/client-modules/commit/4d309d0f57c7c30bf672d8ed02193e9d5b2a27a9))
149
+
150
+
151
+
152
+ ### [0.6.4](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.3...@codecademy/codebytes@0.6.4) (2022-02-02)
153
+
154
+ **Note:** Version bump only for package @codecademy/codebytes
155
+
156
+
157
+
158
+
159
+
160
+ ### [0.6.3](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.2...@codecademy/codebytes@0.6.3) (2022-02-02)
161
+
162
+ **Note:** Version bump only for package @codecademy/codebytes
163
+
164
+
165
+
166
+
167
+
168
+ ### [0.6.2](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.1...@codecademy/codebytes@0.6.2) (2022-02-02)
169
+
170
+ **Note:** Version bump only for package @codecademy/codebytes
171
+
172
+
173
+
174
+
175
+
176
+ ### [0.6.1](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.0...@codecademy/codebytes@0.6.1) (2022-02-01)
177
+
178
+ **Note:** Version bump only for package @codecademy/codebytes
179
+
180
+
181
+
182
+
183
+
184
+ ## [0.6.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.5.1...@codecademy/codebytes@0.6.0) (2022-01-31)
185
+
186
+
187
+ ### Features
188
+
189
+ * **Codebytes:** add tests for codebytes package disc 399 ([#21](https://github.com/Codecademy/client-modules/issues/21)) ([df3f780](https://github.com/Codecademy/client-modules/commit/df3f780237cbe31b620f7d88870612e1109ffb5b))
190
+
191
+
192
+
193
+ ### [0.5.1](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.5.0...@codecademy/codebytes@0.5.1) (2022-01-29)
194
+
195
+
196
+ ### Reverts
197
+
198
+ * Revert "add yarn build task for codebytes (#23)" (#24) ([209a493](https://github.com/Codecademy/client-modules/commit/209a4935066ed1cf7e6932281218338c67ab088b)), closes [#23](https://github.com/Codecademy/client-modules/issues/23) [#24](https://github.com/Codecademy/client-modules/issues/24)
199
+
200
+
201
+
202
+ ## [0.5.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.4.0...@codecademy/codebytes@0.5.0) (2022-01-27)
203
+
204
+
205
+ ### Features
206
+
207
+ * **Codebytes:** Refactor tracking in Codebytes ([#19](https://github.com/Codecademy/client-modules/issues/19)) ([494a944](https://github.com/Codecademy/client-modules/commit/494a94441cfbc1ea563f997607821131a7f1e007))
208
+
209
+
210
+
211
+ ## [0.4.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.3.0...@codecademy/codebytes@0.4.0) (2022-01-21)
212
+
213
+
214
+ ### Features
215
+
216
+ * **Codebytes:** move language selection component disc 354 ([#17](https://github.com/Codecademy/client-modules/issues/17)) ([040553d](https://github.com/Codecademy/client-modules/commit/040553dcc7867b6e331712365bcc19ea2df306d5))
217
+
218
+
219
+
220
+ ## [0.3.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.2.0...@codecademy/codebytes@0.3.0) (2022-01-12)
221
+
222
+
223
+ ### Features
224
+
225
+ * **Codebytes:** add simple monaco editor disc 353 ([#16](https://github.com/Codecademy/client-modules/issues/16)) ([eec98ba](https://github.com/Codecademy/client-modules/commit/eec98ba9aad45f07fb5f3417e3da1e1935985deb))
226
+
227
+
228
+
229
+ ## [0.2.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.1.0...@codecademy/codebytes@0.2.0) (2022-01-04)
230
+
231
+
232
+ ### Features
233
+
234
+ * **Codebytes:** add editor and drawers disc 351 ([#14](https://github.com/Codecademy/client-modules/issues/14)) ([e84e265](https://github.com/Codecademy/client-modules/commit/e84e265e4cf4bf8360830ebf2dbea930ab503c9c))
235
+
236
+
237
+
238
+ ## 0.1.0 (2021-12-17)
239
+
240
+
241
+ ### Features
242
+
243
+ * **Codebytes:** move codebytes parent disc 351 ([#11](https://github.com/Codecademy/client-modules/issues/11)) ([30edd2b](https://github.com/Codecademy/client-modules/commit/30edd2b7a0e50c27d3adcf231b56441b8e8f6b81))
@@ -0,0 +1,32 @@
1
+ export declare const syntax: {
2
+ attribute: "#b4d353";
3
+ annotation: "#e85d7f";
4
+ atom: "#cc7bc2";
5
+ basic: "#ffffff";
6
+ comment: "#939598";
7
+ constant: "#ff8973";
8
+ decoration: "#e85d7f";
9
+ invalid: "#e85d7f";
10
+ key: "#83fff5";
11
+ keyword: "#b3ccff";
12
+ number: "#e85d7f";
13
+ operator: "#e85d7f";
14
+ predefined: "#ffffff";
15
+ property: "#e85d7f";
16
+ regexp: "#b4d353";
17
+ string: "#ffe083";
18
+ tag: "#e85d7f";
19
+ text: "#ff8973";
20
+ value: "#ffe083";
21
+ variable: "#b4d353";
22
+ };
23
+ export declare const ui: {
24
+ background: string;
25
+ text: "#ffffff";
26
+ indent: {
27
+ active: string;
28
+ inactive: string;
29
+ };
30
+ };
31
+ export declare type SyntaxColors = typeof syntax;
32
+ export declare type UIColors = typeof ui;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ export declare type SimpleMonacoEditorProps = {
3
+ value: string;
4
+ language: string;
5
+ onChange?: (value: string) => void;
6
+ };
7
+ export declare const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps>;
@@ -1,6 +1,3 @@
1
- var _jsxFileName = "/home/runner/work/mono/mono/libs/codebytes/src/MonacoEditor/index.tsx",
2
- _this = this;
3
-
4
1
  // DO NOT CHANGE ANYTHING HERE
5
2
  // This component is part of the Codebytes MVP and only includes basic configuration around theming
6
3
  // We are working on a monaco package in client-modules that has more configuration around themes and languages
@@ -9,8 +6,6 @@ import ReactMonacoEditor from '@monaco-editor/react';
9
6
  import React, { useCallback, useRef } from 'react';
10
7
  import ResizeObserver from 'react-resize-observer';
11
8
  import { dark } from './theme';
12
- import { jsxDEV as _jsxDEV } from "@emotion/react/jsx-dev-runtime";
13
- import { Fragment as _Fragment } from "@emotion/react/jsx-dev-runtime";
14
9
  export var SimpleMonacoEditor = function SimpleMonacoEditor(_ref) {
15
10
  var value = _ref.value,
16
11
  language = _ref.language,
@@ -21,37 +16,27 @@ export var SimpleMonacoEditor = function SimpleMonacoEditor(_ref) {
21
16
  monaco.editor.defineTheme('dark', dark);
22
17
  monaco.editor.setTheme('dark');
23
18
  }, []);
24
- return _jsxDEV(_Fragment, {
25
- children: [_jsxDEV(ResizeObserver, {
26
- onResize: function onResize(_ref2) {
27
- var _editorRef$current;
19
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
20
+ onResize: function onResize(_ref2) {
21
+ var _editorRef$current;
28
22
 
29
- var height = _ref2.height,
30
- width = _ref2.width;
31
- (_editorRef$current = editorRef.current) == null ? void 0 : _editorRef$current.layout({
32
- height: height,
33
- width: width
34
- });
23
+ var height = _ref2.height,
24
+ width = _ref2.width;
25
+ (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.layout({
26
+ height: height,
27
+ width: width
28
+ });
29
+ }
30
+ }), /*#__PURE__*/React.createElement(ReactMonacoEditor, {
31
+ onMount: editorWillMount,
32
+ onChange: onChange,
33
+ options: {
34
+ minimap: {
35
+ enabled: false
35
36
  }
36
- }, void 0, false, {
37
- fileName: _jsxFileName,
38
- lineNumber: 38,
39
- columnNumber: 7
40
- }, _this), _jsxDEV(ReactMonacoEditor, {
41
- onMount: editorWillMount,
42
- onChange: onChange,
43
- options: {
44
- minimap: {
45
- enabled: false
46
- }
47
- },
48
- theme: "vs-dark",
49
- value: value,
50
- language: language
51
- }, void 0, false, {
52
- fileName: _jsxFileName,
53
- lineNumber: 46,
54
- columnNumber: 7
55
- }, _this)]
56
- }, void 0, true);
37
+ },
38
+ theme: "vs-dark",
39
+ value: value,
40
+ language: language
41
+ }));
57
42
  };
@@ -0,0 +1,2 @@
1
+ import type * as monaco from 'monaco-editor';
2
+ export declare const dark: monaco.editor.IStandaloneThemeData;
@@ -0,0 +1 @@
1
+ export declare type Monaco = typeof import('monaco-editor');
@@ -1 +0,0 @@
1
- export {};
@@ -0,0 +1 @@
1
+ import './mocks';
@@ -0,0 +1,155 @@
1
+ import './mocks';
2
+ import { setupRtl } from '@codecademy/gamut-tests';
3
+ import userEvent from '@testing-library/user-event';
4
+ import React from 'react';
5
+ import { CodeByteEditor } from '..';
6
+ import { helloWorld, validLanguages } from '../consts';
7
+ import { trackClick } from '../helpers';
8
+ import { trackUserImpression } from '../libs/eventTracking';
9
+ var mockEditorTestId = 'mock-editor-test-id'; // This is a super simplified mock capable of render value and trigger onChange.
10
+
11
+ jest.mock('../MonacoEditor', function () {
12
+ return {
13
+ SimpleMonacoEditor: function SimpleMonacoEditor(_ref) {
14
+ var value = _ref.value,
15
+ _onChange = _ref.onChange;
16
+ return /*#__PURE__*/React.createElement(React.Fragment, null, value, /*#__PURE__*/React.createElement("input", {
17
+ "data-testid": mockEditorTestId,
18
+ type: "text",
19
+ onChange: function onChange(e) {
20
+ _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
21
+ },
22
+ value: value
23
+ }));
24
+ }
25
+ };
26
+ });
27
+ var renderWrapper = setupRtl(CodeByteEditor, {});
28
+ describe('CodeBytes', function () {
29
+ var initialUrl = window.location.href;
30
+ afterEach(function () {
31
+ window.history.replaceState(null, '', initialUrl);
32
+ trackClick.mockReset();
33
+ trackUserImpression.mockReset();
34
+ });
35
+ it('has a language-specific "hello world" program defined for each language', function () {
36
+ validLanguages.forEach(function (language) {
37
+ expect(helloWorld[language]).toBeDefined();
38
+ });
39
+ });
40
+ it('initializes with a language-specific "hello world" program when there is no language prop', function () {
41
+ var _renderWrapper = renderWrapper(),
42
+ view = _renderWrapper.view;
43
+
44
+ var selectedLanguage = view.getByRole('combobox');
45
+ userEvent.selectOptions(selectedLanguage, ['javascript']);
46
+ view.getByText(helloWorld.javascript);
47
+ });
48
+ it('initializes with a language-specific "hello world" program when there is a language prop but no text prop', function () {
49
+ var _renderWrapper2 = renderWrapper({
50
+ language: 'javascript'
51
+ }),
52
+ view = _renderWrapper2.view;
53
+
54
+ view.getByText(helloWorld.javascript);
55
+ });
56
+ it('initializes with deserialized text when there is a text prop but no language prop', function () {
57
+ var testString = 'yes hello';
58
+
59
+ var _renderWrapper3 = renderWrapper({
60
+ text: testString
61
+ }),
62
+ view = _renderWrapper3.view;
63
+
64
+ var selectedLanguage = view.getByRole('combobox');
65
+ userEvent.selectOptions(selectedLanguage, ['javascript']);
66
+ view.getByText(testString);
67
+ });
68
+ it('initializes with deserialized text when there is both a language and text prop', function () {
69
+ var testString = 'yes hello';
70
+
71
+ var _renderWrapper4 = renderWrapper({
72
+ text: testString,
73
+ language: 'javascript'
74
+ }),
75
+ view = _renderWrapper4.view;
76
+
77
+ view.getByText(testString);
78
+ });
79
+ describe('Change Handlers', function () {
80
+ it('triggers onEdit on text edit', function () {
81
+ var onEdit = jest.fn();
82
+
83
+ var _renderWrapper5 = renderWrapper({
84
+ text: '',
85
+ language: 'javascript',
86
+ onEdit: onEdit
87
+ }),
88
+ view = _renderWrapper5.view;
89
+
90
+ var editor = view.getByTestId(mockEditorTestId);
91
+ userEvent.type(editor, 'dog');
92
+ expect(onEdit).toHaveBeenCalledTimes(3);
93
+ expect(onEdit).toHaveBeenLastCalledWith('dog', 'javascript');
94
+ });
95
+ it('triggers onLanguageChange on language selection', function () {
96
+ var onLanguageChange = jest.fn();
97
+
98
+ var _renderWrapper6 = renderWrapper({
99
+ onLanguageChange: onLanguageChange
100
+ }),
101
+ view = _renderWrapper6.view;
102
+
103
+ var selectedLanguage = view.getByRole('combobox');
104
+ userEvent.selectOptions(selectedLanguage, ['javascript']);
105
+ expect(onLanguageChange).toHaveBeenCalledWith("console.log('Hello world!');", 'javascript');
106
+ });
107
+ });
108
+ describe('Tracking', function () {
109
+ it('triggers trackClick on clicking the logo', function () {
110
+ var _renderWrapper7 = renderWrapper({}),
111
+ view = _renderWrapper7.view;
112
+
113
+ var logo = view.getByLabelText('visit codecademy.com');
114
+ userEvent.click(logo);
115
+ expect(trackClick).toHaveBeenCalledWith('logo', undefined);
116
+ });
117
+ it('triggers trackClick on language selection', function () {
118
+ var _renderWrapper8 = renderWrapper(),
119
+ view = _renderWrapper8.view;
120
+
121
+ var selectedLanguage = view.getByRole('combobox');
122
+ userEvent.selectOptions(selectedLanguage, ['javascript']);
123
+ expect(trackClick).toHaveBeenCalledWith('lang_select', undefined);
124
+ });
125
+ it('triggers trackClick for the first edit', function () {
126
+ var testString = 'original-value';
127
+
128
+ var _renderWrapper9 = renderWrapper({
129
+ text: testString,
130
+ language: 'javascript',
131
+ trackFirstEdit: true
132
+ }),
133
+ view = _renderWrapper9.view;
134
+
135
+ var editor = view.getByTestId(mockEditorTestId);
136
+ userEvent.type(editor, 'd');
137
+ expect(trackClick).toHaveBeenCalledWith('edit', undefined);
138
+ });
139
+ it('triggers trackUserImpression', function () {
140
+ renderWrapper({
141
+ text: 'some-value',
142
+ language: 'javascript',
143
+ trackingData: {
144
+ page_name: 'forum_compose',
145
+ context: 'https://discuss.codecademy.com/some-interesting/post'
146
+ }
147
+ });
148
+ expect(trackUserImpression).toHaveBeenCalledWith({
149
+ page_name: 'forum_compose',
150
+ context: 'https://discuss.codecademy.com/some-interesting/post',
151
+ target: 'codebyte'
152
+ });
153
+ });
154
+ });
155
+ });
@@ -0,0 +1 @@
1
+ import './mocks';
@@ -0,0 +1,133 @@
1
+ import _regeneratorRuntime from "@babel/runtime/regenerator";
2
+
3
+ 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); } }
4
+
5
+ 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); }); }; }
6
+
7
+ import './mocks';
8
+ import { setupRtl } from '@codecademy/gamut-tests';
9
+ import { act } from '@testing-library/react';
10
+ import userEvent from '@testing-library/user-event';
11
+ import React from 'react';
12
+ import { Editor } from '../editor';
13
+ import { trackClick } from '../helpers';
14
+ jest.mock('../MonacoEditor', function () {
15
+ return {
16
+ SimpleMonacoEditor: function SimpleMonacoEditor(_ref) {
17
+ var value = _ref.value;
18
+ return /*#__PURE__*/React.createElement(React.Fragment, null, value);
19
+ }
20
+ };
21
+ });
22
+ var renderWrapper = setupRtl(Editor, {
23
+ hideCopyButton: false,
24
+ language: 'javascript',
25
+ text: 'hello world',
26
+ onChange: jest.fn(),
27
+ snippetsBaseUrl: ''
28
+ });
29
+ Object.defineProperty(navigator, 'clipboard', {
30
+ value: {
31
+ writeText: jest.fn().mockImplementation(function () {
32
+ return Promise.resolve();
33
+ })
34
+ }
35
+ });
36
+ describe('Editor', function () {
37
+ global.fetch = jest.fn();
38
+ afterEach(function () {
39
+ global.fetch.mockClear();
40
+ });
41
+ it('shows a prompt tooltip when the CodeByte has __not__ been copied via the button', function () {
42
+ var _renderWrapper = renderWrapper(),
43
+ view = _renderWrapper.view;
44
+
45
+ expect(view.queryByTestId('copy-confirmation-tooltip')).toBeFalsy();
46
+ view.getByTestId('copy-prompt-tooltip');
47
+ });
48
+ it('shows a confirmation tooltip when the CodeByte has been copied via the button', function () {
49
+ var _renderWrapper2 = renderWrapper(),
50
+ view = _renderWrapper2.view;
51
+
52
+ var copyBtn = view.getByTestId('copy-codebyte-btn');
53
+ userEvent.click(copyBtn);
54
+ expect(view.queryByTestId('copy-prompt-tooltip')).toBeFalsy();
55
+ view.getByTestId('copy-confirmation-tooltip');
56
+ });
57
+ it('hides the copy codebyte button if hideCopyButton prop is true"', function () {
58
+ var _renderWrapper3 = renderWrapper({
59
+ hideCopyButton: true
60
+ }),
61
+ view = _renderWrapper3.view;
62
+
63
+ expect(view.queryByTestId('copy-codebyte-btn')).toBeNull();
64
+ });
65
+ it('shows the copy codebyte button if hideCopyButton prop is not set', function () {
66
+ var _renderWrapper4 = renderWrapper(),
67
+ view = _renderWrapper4.view;
68
+
69
+ view.getByTestId('copy-codebyte-btn');
70
+ });
71
+ describe('Tracking', function () {
72
+ it('tracks clicks on the run button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
73
+ var _renderWrapper5, view, runButton;
74
+
75
+ return _regeneratorRuntime.wrap(function _callee2$(_context2) {
76
+ while (1) {
77
+ switch (_context2.prev = _context2.next) {
78
+ case 0:
79
+ global.fetch.mockResolvedValue({
80
+ json: function json() {
81
+ return Promise.resolve({
82
+ stderr: [],
83
+ exit_code: 0,
84
+ stdout: ''
85
+ });
86
+ }
87
+ });
88
+ _renderWrapper5 = renderWrapper({
89
+ onChange: jest.fn(),
90
+ text: 'test',
91
+ language: 'javascript'
92
+ }), view = _renderWrapper5.view;
93
+ runButton = view.getByText('Run');
94
+ _context2.next = 5;
95
+ return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
96
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
97
+ while (1) {
98
+ switch (_context.prev = _context.next) {
99
+ case 0:
100
+ userEvent.click(runButton);
101
+
102
+ case 1:
103
+ case "end":
104
+ return _context.stop();
105
+ }
106
+ }
107
+ }, _callee);
108
+ })));
109
+
110
+ case 5:
111
+ expect(trackClick).toHaveBeenCalledWith('run', undefined);
112
+
113
+ case 6:
114
+ case "end":
115
+ return _context2.stop();
116
+ }
117
+ }
118
+ }, _callee2);
119
+ })));
120
+ it('tracks clicks on the copy codebyte button', function () {
121
+ var _renderWrapper6 = renderWrapper({
122
+ onChange: jest.fn(),
123
+ text: 'test',
124
+ language: 'javascript'
125
+ }),
126
+ view = _renderWrapper6.view;
127
+
128
+ var copyButton = view.getByTestId('copy-codebyte-btn');
129
+ userEvent.click(copyButton);
130
+ expect(trackClick).toHaveBeenCalledWith('copy', undefined);
131
+ });
132
+ });
133
+ });
@@ -0,0 +1 @@
1
+ export {};