-
Notifications
You must be signed in to change notification settings - Fork 171
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(editor): right pane * feature(collaboration) Handle imports and exports correctly in collaboration. (#4565) - Added `UPDATE_EXPORTS_DETAIL_FROM_COLLABORATION_UPDATE` and `UPDATE_IMPORTS_FROM_COLLABORATION_UPDATE` editor actions. - `addHookForProjectChanges` now collates potentially many actions to dispatch at once. - Reworked `ArrayChanges` as it didn't work very well in its original form. - Refactored `updateEntireProjectContents` to produce a multitude of editor actions and dispatch all at once. - Created `updateEditorWithArrayChanges` and `updateEditorWithMapChanges` utility functions. - Implemented `updateTopLevelElementsOfFile`, `updateExportsDetailOfFile` and `updateImportsOfFile` to carry changes from the yjs types into the editor. - `calculateArrayChanges` now produces step by step changes. - Implemented `syncArrayChanges` and `syncMapChanges` utility functions. - `synchroniseParseSuccesToCollabFile` now much more simplified than the original implementations. - Reworked `updateEntireProjectContents` to handle key changes instead of using the `currentTarget` value so that file deletions are handled correctly. - Strip source maps from the outgoing top level elements. (#4566) * Make comment popups/indicators ignore zoom (#4568) * right pane * variables menu * right pane * right pane * icons * insert first-level values of objects * insert first-level values of objects * insert first-level values of objects * insert first-level values of objects * insert first-level values of objects * fix tests * fix tests * tests --------- Co-authored-by: Sean Parsons <[email protected]> Co-authored-by: Federico Ruggi <[email protected]>
- Loading branch information
3 people
authored
Nov 28, 2023
1 parent
75de236
commit b29c247
Showing
10 changed files
with
741 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
227 changes: 227 additions & 0 deletions
227
editor/src/components/editor/variablesmenu.spec.browser2.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,227 @@ | ||
| import { act, fireEvent, screen } from '@testing-library/react' | ||
| import type { EditorRenderResult } from '../canvas/ui-jsx.test-utils' | ||
| import { | ||
| TestAppUID, | ||
| TestSceneUID, | ||
| getPrintedUiJsCode, | ||
| makeTestProjectCodeWithComponentInnards, | ||
| makeTestProjectCodeWithSnippet, | ||
| renderTestEditorWithCode, | ||
| } from '../canvas/ui-jsx.test-utils' | ||
| import * as EP from '../../core/shared/element-path' | ||
| import { setPanelVisibility, setRightMenuTab } from './actions/action-creators' | ||
| import { RightMenuTab } from './store/editor-state' | ||
| import { selectComponentsForTest } from '../../utils/utils.test-utils' | ||
| import { BakedInStoryboardUID } from '../../core/model/scene-utils' | ||
| import { forceNotNull } from '../../core/shared/optional-utils' | ||
| import { InsertMenuFilterTestId } from './insertmenu' | ||
|
|
||
| function getInsertItems() { | ||
| return screen.queryAllByTestId(/^insert-item-/gi) | ||
| } | ||
|
|
||
| function openVariablesMenu(renderResult: EditorRenderResult) { | ||
| return renderResult.dispatch( | ||
| [setPanelVisibility('rightmenu', true), setRightMenuTab(RightMenuTab.Variables)], | ||
| true, | ||
| ) | ||
| } | ||
|
|
||
| describe('variables menu', () => { | ||
| describe('filter search', () => { | ||
| it('can filter by variable name', async () => { | ||
| const editor = await renderTestEditorWithCode( | ||
| makeTestProjectCodeWithComponentInnards(` | ||
| const myObj = { test: 'test', num: 5, image: 'img.png' } | ||
| return ( | ||
| <div | ||
| style={{ | ||
| backgroundColor: '#aaaaaa33', | ||
| position: 'absolute', | ||
| left: 57, | ||
| top: 168, | ||
| width: 247, | ||
| height: 402, | ||
| }} | ||
| data-uid='container' | ||
| > | ||
| <div data-uid='a3d' /> | ||
| </div> | ||
| )`), | ||
| 'await-first-dom-report', | ||
| ) | ||
|
|
||
| await selectComponentsForTest(editor, [ | ||
| EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container`), | ||
| ]) | ||
|
|
||
| await openVariablesMenu(editor) | ||
|
|
||
| expect(getInsertItems().length).toEqual(3) | ||
|
|
||
| document.execCommand('insertText', false, 'myObj.im') | ||
|
|
||
| expect(getInsertItems().length).toEqual(1) | ||
| expect(getInsertItems()[0].innerText).toEqual('myObj.image') | ||
| }) | ||
|
|
||
| describe('no match', () => { | ||
| it('shows all elements', async () => { | ||
| const renderResult = await renderTestEditorWithCode( | ||
| makeTestProjectCodeWithSnippet(`<div />`), | ||
| 'await-first-dom-report', | ||
| ) | ||
|
|
||
| await openVariablesMenu(renderResult) | ||
|
|
||
| expect(getInsertItems().length).toEqual(0) | ||
| }) | ||
| }) | ||
|
|
||
| it('does not show insertables that cannot be inserted', async () => { | ||
| const editor = await renderTestEditorWithCode( | ||
| makeTestProjectCodeWithComponentInnards(` | ||
| const myObj = { test: 'test', num: 5, image: 'img.png' } | ||
| return ( | ||
| <div | ||
| style={{ | ||
| backgroundColor: '#aaaaaa33', | ||
| position: 'absolute', | ||
| left: 57, | ||
| top: 168, | ||
| width: 247, | ||
| height: 402, | ||
| }} | ||
| data-uid='container' | ||
| > | ||
| <div data-uid='a3d' /> | ||
| </div> | ||
| )`), | ||
| 'await-first-dom-report', | ||
| ) | ||
|
|
||
| await openVariablesMenu(editor) | ||
|
|
||
| expect(getInsertItems().length).toEqual(0) | ||
| }) | ||
| }) | ||
|
|
||
| describe('insertion', () => { | ||
| it('inserts an image from within an object', async () => { | ||
| const editor = await renderTestEditorWithCode( | ||
| makeTestProjectCodeWithComponentInnards(` | ||
| const myObj = { test: 'test', num: 5, image: 'img.png' } | ||
| return ( | ||
| <div | ||
| style={{ | ||
| backgroundColor: '#aaaaaa33', | ||
| position: 'absolute', | ||
| left: 57, | ||
| top: 168, | ||
| width: 247, | ||
| height: 402, | ||
| }} | ||
| data-uid='container' | ||
| > | ||
| <div data-uid='a3d' /> | ||
| </div> | ||
| )`), | ||
| 'await-first-dom-report', | ||
| ) | ||
|
|
||
| await selectComponentsForTest(editor, [ | ||
| EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container`), | ||
| ]) | ||
|
|
||
| await openVariablesMenu(editor) | ||
|
|
||
| document.execCommand('insertText', false, 'myObj.image') | ||
|
|
||
| const filterBox = await screen.findByTestId(InsertMenuFilterTestId) | ||
| forceNotNull('the filter box must not be null', filterBox) | ||
|
|
||
| await act(async () => { | ||
| fireEvent.keyDown(filterBox, { key: 'Enter', keycode: 13 }) | ||
| }) | ||
|
|
||
| expect(getPrintedUiJsCode(editor.getEditorState())).toEqual( | ||
| makeTestProjectCodeWithComponentInnards(` | ||
| const myObj = { test: 'test', num: 5, image: 'img.png' } | ||
| return ( | ||
| <div | ||
| style={{ | ||
| backgroundColor: '#aaaaaa33', | ||
| position: 'absolute', | ||
| left: 57, | ||
| top: 168, | ||
| width: 247, | ||
| height: 402, | ||
| }} | ||
| data-uid='container' | ||
| > | ||
| <div data-uid='a3d' /> | ||
| <img src={myObj.image} style={{width: 100, height: 100, top:0, left: 0, position: 'absolute'}} data-uid='ele'/> | ||
| </div> | ||
| )`), | ||
| ) | ||
| }) | ||
| it('inserts a text', async () => { | ||
| const editor = await renderTestEditorWithCode( | ||
| makeTestProjectCodeWithComponentInnards(` | ||
| const myText = '' | ||
| return ( | ||
| <div | ||
| style={{ | ||
| backgroundColor: '#aaaaaa33', | ||
| position: 'absolute', | ||
| left: 57, | ||
| top: 168, | ||
| width: 247, | ||
| height: 402, | ||
| }} | ||
| data-uid='container' | ||
| > | ||
| <div data-uid='a3d' /> | ||
| </div> | ||
| )`), | ||
| 'await-first-dom-report', | ||
| ) | ||
|
|
||
| await selectComponentsForTest(editor, [ | ||
| EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:container`), | ||
| ]) | ||
|
|
||
| await openVariablesMenu(editor) | ||
|
|
||
| document.execCommand('insertText', false, 'myText') | ||
|
|
||
| const filterBox = await screen.findByTestId(InsertMenuFilterTestId) | ||
| forceNotNull('the filter box must not be null', filterBox) | ||
|
|
||
| await act(async () => { | ||
| fireEvent.keyDown(filterBox, { key: 'Enter', keycode: 13 }) | ||
| }) | ||
|
|
||
| expect(getPrintedUiJsCode(editor.getEditorState())).toEqual( | ||
| makeTestProjectCodeWithComponentInnards(` | ||
| const myText = '' | ||
| return ( | ||
| <div | ||
| style={{ | ||
| backgroundColor: '#aaaaaa33', | ||
| position: 'absolute', | ||
| left: 57, | ||
| top: 168, | ||
| width: 247, | ||
| height: 402, | ||
| }} | ||
| data-uid='container' | ||
| > | ||
| <div data-uid='a3d' /> | ||
| <span style={{ width: 100, height: 100, top: 0, left: 0, position: 'absolute' }} data-uid='ele'>{myText}</span> | ||
| </div> | ||
| )`), | ||
| ) | ||
| }) | ||
| }) | ||
| }) |
Oops, something went wrong.