= [
+ {
+ name: 'a single element',
+ startingCode: `
+
+ `,
+ elements: (renderResult) => {
+ const path = EP.appendNewElementPath(TestScenePath, ['aaa', 'bbb'])
+ return [
+ {
+ element: getElementFromRenderResult(renderResult, path),
+ originalElementPath: path,
+ importsToAdd: {},
+ },
+ ]
+ },
+ pasteInto: childInsertionPath(EP.appendNewElementPath(TestScenePath, ['aaa'])),
+ want: `
+
+ `,
+ },
+ {
+ name: 'multiple elements',
+ startingCode: `
+
+ `,
+ elements: (renderResult) => {
+ const fooPath = EP.appendNewElementPath(TestScenePath, ['aaa', 'bbb'])
+ const barPath = EP.appendNewElementPath(TestScenePath, ['aaa', 'ccc'])
+ return [
+ {
+ element: getElementFromRenderResult(renderResult, fooPath),
+ originalElementPath: fooPath,
+ importsToAdd: {},
+ },
+ {
+ element: getElementFromRenderResult(renderResult, barPath),
+ originalElementPath: barPath,
+ importsToAdd: {},
+ },
+ ]
+ },
+ pasteInto: childInsertionPath(EP.appendNewElementPath(TestScenePath, ['aaa'])),
+ want: `
+
+
foo
+
bar
+
baz
+
foo
+
bar
+
+
+
+ foo
+
+
+ bar
+
+
+
+ hello
+
+
+ there
+
+
+
+
+ hello
+ there
+
+
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
true
+ ): (
+
false
+ )
+ }
+
+
+
foo
+
bar
+ {
+ // @utopia/uid=conditional
+ true ? (
+
+ true
+
+ ) : (
+
false
+ )
+ }
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
true
+ ): (
+
false
+ )
+ }
+
+
+
+ foo
+
+
+ bar
+
+
+
+ bar
+
+
+
+ foo
+
+ bar
+
+
+ baz
+
+
+
+ bar
+
+
+ baz
+
+
+ {
+ // @utopia/uid=conditional
+ true ? null :
foo
+ }
+
bar
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
+ bar
+
+ ) : (
+
foo
+ )
+ }
+
bar
+
+ {
+ // @utopia/uid=conditional
+ true ?
foo
: null
+ }
+
bar
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
+ foo
+
+ ) : (
+
+ bar
+
+ )
+ }
+
+ bar
+
+
+ {
+ // @utopia/uid=conditional
+ true ? null :
foo
+ }
+
bar
+
baz
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
+
+ bar
+
+
+ baz
+
+
+ ) : (
+
+ foo
+
+ )
+ }
+
+ bar
+
+
+ baz
+
+
+ {
+ // @utopia/uid=conditional
+ true ?
foo
: null
+ }
+
bar
+
baz
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
+ foo
+
+ ) : (
+
+
+ bar
+
+
+ baz
+
+
+ )
+ }
+
+ bar
+
+
+ baz
+
+
+ {
+ // @utopia/uid=conditional
+ true ? null :
foo
+ }
+
+ bar
+ baz
+
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
+
+ bar
+
+
+ baz
+
+
+ ) :
foo
+ }
+
+ bar
+ baz
+
+
+ {
+ // @utopia/uid=conditional
+ true ? null :
foo
+ }
+
+ bar
+ baz
+
+
+ qux
+ waldo
+
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
+
+
+ bar
+
+
+ baz
+
+
+
+
+ qux
+
+
+ waldo
+
+
+
+ ) :
foo
+ }
+
+ bar
+ baz
+
+
+ qux
+ waldo
+
+
+ {
+ // @utopia/uid=conditional
+ true ?
foo
: null
+ }
+
+ {
+ // @utopia/uid=conditional
+ true ?
foo
: null
+ }
+
foo
+
+ {
+ // @utopia/uid=conditional
+ true ?
![]()
: null
+ }
+
bar
+
baz
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
+
+ bar
+
+
+ baz
+
+ ![]()
+
+ ) : null
+ }
+
+ bar
+
+
+ baz
+
+
+ {
+ // @utopia/uid=d54
+ (() => (
))()
+ }
+
+ {
+ // @utopia/uid=d54
+ (() => (
+
+ ))()
+ }
+ {
+ // @utopia/uid=d54
+ (() => (
+
+ ))()
+ }
+
+
+ {(() => (
+
+ ))()}
+
+
+
+
+
+
+
+ )
+
+ const ThisComponent = (props) => (
+
+
+ Hello there 1!
+
+
Hello there 2!
+
Hello there 3!
+
+ {
+ // @utopia/uid=conditional
+ true ?
: null
+ }
+
foo
+
+ {
+ // @utopia/uid=conditional
+ true ?
: null
+ }
+
foo
+
foo
+
+ {
+ // @utopia/uid=conditional
+ true ?
: null
+ }
+
foo
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
+ ) : null
+ }
+
foo
+
+ {
+ // @utopia/uid=conditional
+ true ?
: null
+ }
+
foo
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
+
+ foo
+
+
+
+ ) : null
+ }
+
+ foo
+
+
+ {
+ // @utopia/uid=conditional
+ true ?
: null
+ }
+
foo
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
+ ) : (
+
+ foo
+
+ )
+ }
+
foo
+
+ {
+ // @utopia/uid=conditional
+ true ? null : null
+ }
+
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
+ ) : null
+ }
+
+ hi
+
hello
+ `,
+ targets: [makeTargetPath('root/bbb')],
+ result: `
+
+ hihello
+
+
hello
+ `,
+ },
+ {
+ name: 'paste 2 absolute elements - elements will keep their position to each other',
+ input: ``,
+ targets: [makeTargetPath('root/hello'), makeTargetPath('root/bello')],
+ result: ``,
+ },
+ ]
+
+ copyPasteLayoutTestCases.forEach((tt, idx) => {
+ it(`(${idx + 1}) [copy] ${tt.name}`, async () => {
+ const renderResult = await renderTestEditorWithCode(
+ makeTestProjectCodeWithSnippet(tt.input),
+ 'await-first-dom-report',
+ )
+ await selectComponentsForTest(renderResult, tt.targets)
+ await pressKey('c', { modifiers: cmdModifier })
+
+ await selectComponentsForTest(renderResult, [makeTargetPath('root/ccc')])
+
+ const canvasRoot = renderResult.renderedDOM.getByTestId('canvas-root')
+
+ firePasteEvent(canvasRoot)
+
+ // Wait for the next frame
+ await clipboardMock.pasteDone
+ await renderResult.getDispatchFollowUpActionsFinished()
+
+ await pressKey('Esc')
+ await renderResult.getDispatchFollowUpActionsFinished()
+
+ expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+ makeTestProjectCodeWithSnippet(tt.result),
+ )
+ })
+ })
+
+ const cutPasteLayoutTestCases: Array<{
+ name: string
+ input: string
+ targets: Array
+ result: string
+ }> = [
+ {
+ name: `paste an absolute element into a flex layout`,
+ input: ``,
+ targets: [makeTargetPath('root/bbb')],
+ result: ``,
+ },
+ {
+ name: 'paste an element into an absolute layout',
+ input: ` `,
+ targets: [makeTargetPath('root/source')],
+ result: ` `,
+ },
+ ]
+
+ cutPasteLayoutTestCases.forEach((tt, idx) => {
+ it(`(${idx + 1}) [cut] ${tt.name}`, async () => {
+ const renderResult = await renderTestEditorWithCode(
+ makeTestProjectCodeWithSnippet(tt.input),
+ 'await-first-dom-report',
+ )
+ await selectComponentsForTest(renderResult, tt.targets)
+ await pressKey('x', { modifiers: cmdModifier })
+
+ await selectComponentsForTest(renderResult, [makeTargetPath('root/ccc')])
+
+ const canvasRoot = renderResult.renderedDOM.getByTestId('canvas-root')
+
+ firePasteEvent(canvasRoot)
+
+ // Wait for the next frame
+ await clipboardMock.pasteDone
+ await renderResult.getDispatchFollowUpActionsFinished()
+
+ await pressKey('Esc')
+ await renderResult.getDispatchFollowUpActionsFinished()
+
+ expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+ makeTestProjectCodeWithSnippet(tt.result),
+ )
+ })
+ })
+
+ const copyPasteToStoryboardTestCases: Array<{
+ name: string
+ input: string
+ targets: Array
+ result: string
+ }> = [
+ {
+ name: `paste an absolute element into the storyboard`,
+ input: ``,
+ targets: [makeTargetPath('root/bbb')],
+ result: `Hello!
`,
+ },
+ {
+ name: `paste a flex child into the storyboard`,
+ input: ``,
+ targets: [makeTargetPath('root/bbb/ddd')],
+ result: ``,
+ },
+ {
+ name: 'paste 2 absolute elements to the storyboard - elements will keep their position to each other',
+ input: ``,
+ targets: [makeTargetPath('root/hello'), makeTargetPath('root/bello')],
+ result: `hello
+ bello
`,
+ },
+ ]
+
+ copyPasteToStoryboardTestCases.forEach((tt, idx) => {
+ it(`(${idx + 1}) ${tt.name}`, async () => {
+ const renderResult = await renderTestEditorWithCode(
+ makeTestProjectCodeWithSnippet(tt.input),
+ 'await-first-dom-report',
+ )
+ await selectComponentsForTest(renderResult, tt.targets)
+ await pressKey('c', { modifiers: cmdModifier })
+
+ await selectComponentsForTest(renderResult, [EP.fromString(BakedInStoryboardUID)])
+
+ const canvasRoot = renderResult.renderedDOM.getByTestId('canvas-root')
+
+ firePasteEvent(canvasRoot)
+
+ // Wait for the next frame
+ await clipboardMock.pasteDone
+ await renderResult.getDispatchFollowUpActionsFinished()
+
+ await pressKey('Esc')
+ await renderResult.getDispatchFollowUpActionsFinished()
+
+ expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+ formatTestProjectCode(`
+ import * as React from 'react'
+ import { Scene, Storyboard, View, Group } from 'utopia-api'
+
+ export var App = (props) => {
+ return (${tt.input})
+ }
+
+ export var ${BakedInStoryboardVariableName} = (props) => {
+ return (
+
+
+
+
+ ${tt.result}
+
+ )
+ }
+ `),
+ )
+ })
+ })
+ })
+ })
+
+ describe('paste into a fragment', () => {
+ const template = (innards: string) => `import * as React from 'react'
+ import { Scene, Storyboard } from 'utopia-api'
+
+ const App = () => {
+ return (
+ ${innards}
+ )
+ }
+
+ export var storyboard = (
+
+
+
+
+
+
+ )
+ `
+
+ it('into a fragment with flex layout', async () => {
+ const editor = await renderTestEditorWithCode(
+ template(``),
+ 'await-first-dom-report',
+ )
+
+ await selectComponentsForTest(editor, [EP.fromString('sb/paste-me')])
+
+ await pressKey('x', { modifiers: cmdModifier })
+ await editor.getDispatchFollowUpActionsFinished()
+
+ await selectComponentsForTest(editor, [EP.fromString('sb/scene/app:root/paste-here')])
+
+ await runPaste(editor)
+
+ const pastedElement = editor.renderedDOM.getByTestId('paste-me')
+ const { top, left, position, width, height } = pastedElement.style
+ expect({ top, left, position, width, height }).toEqual({
+ height: '35px',
+ left: '',
+ position: '',
+ top: '',
+ width: '36px',
+ })
+ })
+
+ it('into a fragment with absolute layout', async () => {
+ const editor = await renderTestEditorWithCode(
+ template(`
+
+
+ `),
+ 'await-first-dom-report',
+ )
+
+ await selectComponentsForTest(editor, [EP.fromString('sb/paste-me')])
+
+ await pressKey('x', { modifiers: cmdModifier })
+ await editor.getDispatchFollowUpActionsFinished()
+
+ await selectComponentsForTest(editor, [EP.fromString('sb/scene/app:root')])
+
+ await runPaste(editor)
+
+ const pastedElement = editor.renderedDOM.getByTestId('paste-me')
+ const { top, left, position, width, height } = pastedElement.style
+ expect({ top, left, position, width, height }).toEqual({
+ height: '35px',
+ left: '122px',
+ position: 'absolute',
+ top: '52px',
+ width: '36px',
+ })
+ })
+ })
+
+ describe('pasting fragments with children', () => {
+ const Child1TestId = 'child-1'
+ const Child2TestId = 'child-2'
+ const template = (innards: string) => `import * as React from 'react'
+ import { Scene, Storyboard } from 'utopia-api'
+
+ const App = () => {
+ return (
+ ${innards}
+ )
+ }
+
+ export var storyboard = (
+
+
+
+
+
+
+
+
+
+ )
+ `
+
+ // only the props of the fragemnt's children are asserted in the following tests, since
+ // previous tests already establish that pasting an element into a container with children
+ // works as intended
+
+ it('paste into an absolute layout', async () => {
+ const editor = await renderTestEditorWithCode(
+ template(`
+
+ `),
+ 'await-first-dom-report',
+ )
+
+ await selectComponentsForTest(editor, [EP.fromString('sb/fragment')])
+ await pressKey('x', { modifiers: cmdModifier })
+ await editor.getDispatchFollowUpActionsFinished()
+
+ await selectComponentsForTest(editor, [EP.fromString('sb/scene/app:root/container')])
+
+ await runPaste(editor)
+
+ {
+ const { position, top, left, width, height } =
+ editor.renderedDOM.getByTestId(Child1TestId).style
+ expect({ position, top, left, width, height }).toEqual({
+ height: '112px',
+ left: '15px',
+ position: 'absolute',
+ top: '39px',
+ width: '110px',
+ })
+ }
+
+ {
+ const { position, top, left, width, height } =
+ editor.renderedDOM.getByTestId(Child2TestId).style
+ expect({ position, top, left, width, height }).toEqual({
+ height: '112px',
+ left: '196px',
+ position: 'absolute',
+ top: '39px',
+ width: '100px',
+ })
+ }
+ })
+
+ it('paste into a flex layout', async () => {
+ const editor = await renderTestEditorWithCode(
+ template(`
+
+ `),
+ 'await-first-dom-report',
+ )
+
+ await selectComponentsForTest(editor, [EP.fromString('sb/fragment')])
+ await pressKey('x', { modifiers: cmdModifier })
+ await editor.getDispatchFollowUpActionsFinished()
+
+ await selectComponentsForTest(editor, [EP.fromString('sb/scene/app:root/container')])
+
+ await runPaste(editor)
+
+ {
+ const { position, top, left, width, height } =
+ editor.renderedDOM.getByTestId(Child1TestId).style
+ expect({ position, top, left, width, height }).toEqual({
+ height: '112px',
+ left: '',
+ position: '',
+ top: '',
+ width: '110px',
+ })
+ }
+
+ {
+ const { position, top, left, width, height } =
+ editor.renderedDOM.getByTestId(Child2TestId).style
+ expect({ position, top, left, width, height }).toEqual({
+ height: '112px',
+ left: '',
+ position: '',
+ top: '',
+ width: '100px',
+ })
+ }
+ })
+
+ it('elements with relative sizing and pins are converted to visual size, with pins removed', async () => {
+ const editor = await renderTestEditorWithCode(
+ `import * as React from 'react'
+ import { Scene, Storyboard } from 'utopia-api'
+ const App = () => {
+ return (
+
+ )
+ }
+ export var storyboard = (
+
+
+
+
+
+
+ )
+ `,
+ 'await-first-dom-report',
+ )
+
+ await selectComponentsForTest(editor, [EP.fromString('sb/outer/fragment')])
+ await pressKey('x', { modifiers: cmdModifier })
+ await editor.getDispatchFollowUpActionsFinished()
+
+ await selectComponentsForTest(editor, [EP.fromString('sb/scene/app:root/container')])
+
+ await runPaste(editor)
+
+ {
+ const { position, top, left, width, height } =
+ editor.renderedDOM.getByTestId(Child1TestId).style
+ expect({ position, top, left, width, height }).toEqual({
+ height: '48px',
+ left: '46px',
+ position: 'absolute',
+ top: '118.5px',
+ width: '91px',
+ })
+ }
+
+ {
+ const { position, top, left, width, height } =
+ editor.renderedDOM.getByTestId(Child2TestId).style
+ expect({ position, top, left, width, height }).toEqual({
+ height: '73px',
+ left: '194px',
+ position: 'absolute',
+ top: '100px',
+ width: '70.5px',
+ })
+ }
+ })
+ })
+
+ describe('Paste to Replace', () => {
+ const pasteToReplaceTestCases: Array<{
+ name: string
+ input: string
+ copyTargets: Array
+ pasteTargets: Array
+ expectedSelectedViews: Array | null
+ result: string
+ }> = [
+ {
+ name: `paste to replace an absolute element`,
+ input: ``,
+ copyTargets: [makeTargetPath('root/bbb')],
+ pasteTargets: [makeTargetPath('root/ddd')],
+ expectedSelectedViews: [makeTargetPath('root/aai')],
+ result: `
+
+ Hello!
+
+
+ Hello!
+
+
+
+ Hello!
+
+
+ Hello!
+
+
+ second element
+
+
+
+
+ Hello!
+
+
+
+ second element
+
+
+
+
+ Hello!
+
+
+ Hello!
+
+
+ second element
+
+
+ second element
+
+
+ Hello!
+
+
+ second element
+
+
+
+ Hello!
+
+ {
+ //@utopia/uid=cond
+ false
+ ? null
+ : (
+
+ )
+ }
+
+
+ Hello!
+
+ {
+ //@utopia/uid=cond
+ false
+ ? null
+ : (
+
+ Hello!
+
+ )
+ }
+
+
+ Hello!
+
+ {
+ //@utopia/uid=cond
+ false
+ ? null
+ : (
+
+ )
+ }
+
+
+
+ Hello!
+
+ {
+ //@utopia/uid=cond
+ false
+ ? null
+ : (
+
+
+ Hello!
+
+
+ second element
+
+
+ )
+ }
+
+
+ {
+ // @utopia/uid=cond
+ true ? (
+
+ ) : null}
+
+ {
+ // @utopia/uid=cond
+ true ? (
+
+ ) : null
+ }
+
+ {
+ // @utopia/uid=cond
+ // @utopia/conditional=false
+ true ? null : (
+
+ )
+ }
+
+ {
+ // @utopia/uid=cond
+ // @utopia/conditional=false
+ true ? null : (
+
+ )
+ }
+
heeeello
+ }
+
+ const hello = 'hello'
+
+ export var storyboard = (
+
+
+
+
+
+ )
+ `,
+ 'await-first-dom-report',
+ )
+
+ await selectComponentsForTest(editor, [EP.fromString('sb/scene/component')])
+ await pressKey('c', { modifiers: cmdModifier })
+ await runPaste(editor)
+
+ expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+ formatTestProjectCode(`import * as React from 'react'
+ import { Storyboard, Scene } from 'utopia-api'
+
+ const MyComponent = ({ title }) => {
+ return heeeello
+ }
+
+ const hello = 'hello'
+
+ export var storyboard = (
+
+
+
+
+
+
+ )
+`),
+ )
+ })
+ })
+ })
+
+ describe('PASTE_HERE', () => {
+ const clipboardMock = new MockClipboardHandlers().mock()
+
+ it(`Paste here can place an element on the empty canvas`, async () => {
+ const testCode = `
+
+ `
+ const renderResult = await renderTestEditorWithCode(
+ makeTestProjectCodeWithSnippet(testCode),
+ 'await-first-dom-report',
+ )
+ await selectComponentsForTest(renderResult, [makeTargetPath('aaa/bbb/ccc')])
+ await pressKey('c', { modifiers: cmdModifier })
+
+ const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
+ const element = renderResult.renderedDOM.getByTestId('aaa')
+ const elementBounds = element.getBoundingClientRect()
+
+ await mouseClickAtPoint(canvasControlsLayer, elementBounds)
+
+ const targetPoint = {
+ x: elementBounds.x + elementBounds.width + 20,
+ y: elementBounds.y,
+ } // empty canvas
+ await openContextMenuAndClickOnItem(
+ renderResult,
+ canvasControlsLayer,
+ targetPoint,
+ 'Paste Here',
+ )
+ await renderResult.getDispatchFollowUpActionsFinished()
+
+ expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+ formatTestProjectCode(`
+ import * as React from 'react'
+ import { Scene, Storyboard, View, Group } from 'utopia-api'
+
+ export var App = (props) => {
+ return (${testCode})
+ }
+
+ export var ${BakedInStoryboardVariableName} = (props) => {
+ return (
+
+
+
+
+
+
+ )
+ }
+ `),
+ )
+ })
+ it(`Paste here inserts an element to the root div when targeting an element deeper in the hierarchy`, async () => {
+ const testCode = (expected: string) => `
+
+ `
+ const expectedDiv = `
+
+ `
+ const renderResult = await renderTestEditorWithCode(
+ makeTestProjectCodeWithSnippet(testCode('')),
+ 'await-first-dom-report',
+ )
+ await selectComponentsForTest(renderResult, [makeTargetPath('aaa/bbb/ccc')])
+ await pressKey('c', { modifiers: cmdModifier })
+
+ const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
+
+ const element = renderResult.renderedDOM.getByTestId('ddd')
+ const elementCenter = getDomRectCenter(element.getBoundingClientRect())
+ await mouseClickAtPoint(canvasControlsLayer, elementCenter)
+
+ await openContextMenuAndClickOnItem(
+ renderResult,
+ canvasControlsLayer,
+ elementCenter,
+ 'Paste Here',
+ )
+ await renderResult.getDispatchFollowUpActionsFinished()
+
+ expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+ formatTestProjectCode(`
+ import * as React from 'react'
+ import { Scene, Storyboard, View, Group } from 'utopia-api'
+
+ export var App = (props) => {
+ return (${testCode(expectedDiv)})
+ }
+
+ export var ${BakedInStoryboardVariableName} = (props) => {
+ return (
+
+
+
+
+
+ )
+ }
+ `),
+ )
+ })
+ it(`Paste here inserts an element to the Scene if there are multiple elements in a Scene`, async () => {
+ const renderResult = await renderTestEditorWithCode(
+ formatTestProjectCode(`
+ import * as React from 'react'
+ import { Scene, Storyboard, View, Group } from 'utopia-api'
+
+ export var App = (props) => {
+ return (
+
+ hello
+
+ )
+ }
+
+ export var ${BakedInStoryboardVariableName} = (props) => {
+ return (
+
+
+
+
+
+
+ )
+ }
+ `),
+ 'await-first-dom-report',
+ )
+ await selectComponentsForTest(renderResult, [
+ EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/aaa/bbb/ddd`),
+ ])
+ await pressKey('c', { modifiers: cmdModifier })
+
+ const canvasControlsLayer = renderResult.renderedDOM.getByTestId(CanvasControlsContainerID)
+ const element = renderResult.renderedDOM.getByTestId('ddd')
+ const elementBounds = element.getBoundingClientRect()
+
+ await mouseClickAtPoint(canvasControlsLayer, elementBounds)
+
+ await openContextMenuAndClickOnItem(
+ renderResult,
+ canvasControlsLayer,
+ elementBounds,
+ 'Paste Here',
+ )
+ await renderResult.getDispatchFollowUpActionsFinished()
+
+ expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+ formatTestProjectCode(`
+ import * as React from 'react'
+ import { Scene, Storyboard, View, Group } from 'utopia-api'
+
+ export var App = (props) => {
+ return (
+
+ hello
+
+ )
+ }
+
+ export var ${BakedInStoryboardVariableName} = (props) => {
+ return (
+
+
+
+
+
+
+
+ )
+ }
+ `),
+ )
+ })
+ describe('post action menu for paste', () => {
+ it('copy and paste an element with code', async () => {
+ const editor = await renderTestEditorWithCode(
+ `import * as React from 'react'
+ import { Scene, Storyboard } from 'utopia-api'
+
+ const width = 88
+
+ const App = () => {
+ const width = 44
+
+ return (
+
+ )
+ }
+
+ export var storyboard = (
+
+
+
+
+
+ )
+ `,
+ 'await-first-dom-report',
+ )
+
+ await selectComponentsForTest(editor, [EP.fromString(`sb/scene/app:root`)])
+
+ await expectNoAction(editor, () => pressKey('c', { modifiers: cmdModifier }))
+
+ await selectComponentsForTest(editor, [])
+
+ const canvasControlsLayer = editor.renderedDOM.getByTestId(CanvasControlsContainerID)
+ const element = editor.renderedDOM.getByTestId('scene')
+ const elementBounds = element.getBoundingClientRect()
+
+ await mouseClickAtPoint(canvasControlsLayer, elementBounds)
+
+ const targetPoint = {
+ x: elementBounds.x + elementBounds.width + 20,
+ y: elementBounds.y,
+ } // empty canvas
+
+ await openContextMenuAndClickOnItem(editor, canvasControlsLayer, targetPoint, 'Paste Here')
+ await editor.getDispatchFollowUpActionsFinished()
+
+ expect(editor.getEditorState().postActionInteractionSession?.activeChoiceId).toEqual(
+ PropsReplacedPasteHerePostActionChoiceId,
+ )
+
+ // open the post-action menu
+ const floatingPostActionMenu = editor.renderedDOM.getByTestId(FloatingPostActionMenuTestId)
+ await mouseClickAtPoint(floatingPostActionMenu, { x: 2, y: 2 })
+
+ await pressKey('2')
+ await editor.getDispatchFollowUpActionsFinished()
+
+ expect(editor.getEditorState().postActionInteractionSession?.activeChoiceId).toEqual(
+ PropsPreservedPasteHerePostActionChoiceId,
+ )
+
+ expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(`import * as React from 'react'
+import { Scene, Storyboard } from 'utopia-api'
+
+const width = 88
+
+const App = () => {
+ const width = 44
+
+ return (
+
+ )
+}
+
+export var storyboard = (
+
+
+
+
+
+
+)
+`)
+ })
+ })
+ })
+ describe('UNWRAP_ELEMENTS', () => {
+ it(`Unwraps a fragment-like element`, async () => {
+ const testCode = `
+
+ `
+ const renderResult = await renderTestEditorWithCode(
+ makeTestProjectCodeWithSnippet(testCode),
+ 'await-first-dom-report',
+ )
+ await renderResult.dispatch([unwrapElements([makeTargetPath('aaa/bbb')])], true)
+
+ expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+ makeTestProjectCodeWithSnippet(
+ ``,
+ ),
+ )
+ })
+ it(`Unwraps an absolute element and keeps the visual position of its children`, async () => {
+ const testCode = `
+
+ `
+ const renderResult = await renderTestEditorWithCode(
+ makeTestProjectCodeWithSnippet(testCode),
+ 'await-first-dom-report',
+ )
+ await renderResult.dispatch([unwrapElements([makeTargetPath('aaa/bbb')])], true)
+
+ expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+ makeTestProjectCodeWithSnippet(
+ ``,
+ ),
+ )
+ })
+ it(`Unwraps a flex element`, async () => {
+ const testCode = `
+
+ `
+ const renderResult = await renderTestEditorWithCode(
+ makeTestProjectCodeWithSnippet(testCode),
+ 'await-first-dom-report',
+ )
+ await renderResult.dispatch([unwrapElements([makeTargetPath('aaa/bbb')])], true)
+
+ expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+ makeTestProjectCodeWithSnippet(
+ ``,
+ ),
+ )
+ })
+ it(`Doesn't unwrap an image, as it cannot have child elements, no changes in the code result`, async () => {
+ const testCode = `
+
+
+
+
+
+
+
+
+
+
+
+ {
+ // @utopia/uid=cond
+ true ?
:
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ // @utopia/uid=conditional
+ true ?
foo
:
bar
+ }
+
+ {
+ // @utopia/uid=conditional
+ false ?
foo
:
bar
+ }
+
+ {
+ // @utopia/uid=conditional
+ // @utopia/conditional=false
+ true ?
foo
:
bar
+ }
+
+ {
+ // @utopia/uid=conditional
+ true ? 'hello' : 'goodbye'
+ }
+
+ `
+ const renderResult = await renderTestEditorWithCode(
+ makeTestProjectCodeWithSnippet(testCode),
+ 'await-first-dom-report',
+ )
+ await renderResult.dispatch([unwrapElements([makeTargetPath('aaa/conditional')])], true)
+
+ expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+ makeTestProjectCodeWithSnippet(`
+
+ hello
+
+ `),
+ )
+ })
+ it(`Unwraps a conditional containing a conditional`, async () => {
+ const testCode = `
+
+ {
+ // @utopia/uid=conditional
+ true ? true ?
foo
:
bar
:
baz
+ }
+
+ {
+ true ? (
+
foo
+ ): (
+
bar
+ )
+ }
+
+ {
+ // @utopia/uid=conditional
+ true
+ ? true /* @utopia/uid=conditional2 */ ?
foo
:
bar
+ :
baz
+ }
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+
foo
+ ): (
+
baz
+ )
+ }
+
+ {
+ // @utopia/uid=conditional
+ true
+ ? true /* @utopia/uid=conditional2 */ ? 'foo' :
'bar'
+ :
baz
+ }
+
+ {
+ // @utopia/uid=conditional
+ true ? (
+ 'foo'
+ ): (
+
baz
+ )
+ }
+
+
+
+ `
+ const renderResult = await renderTestEditorWithCode(
+ makeTestProjectCodeWithSnippet(testCode),
+ 'await-first-dom-report',
+ )
+
+ await wrapInElement(renderResult, [makeTargetPath('aaa/group')], 'foo', 'Group')
+
+ expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+ makeTestProjectCodeWithSnippet(`
+
+
+
+ `),
+ )
+ expect(renderResult.getEditorState().editor.toasts.length).toEqual(1)
+ expect(renderResult.getEditorState().editor.toasts[0].message).toEqual(
+ 'Empty Groups cannot be wrapped',
+ )
+ })
+
+ it('can group conditionals', async () => {
+ const testCode = `
+
+
+ {
+ // @utopia/uid=cond
+ true ?
: null
+ }
+
+
+
+ {
+ // @utopia/uid=cond
+ true ? : null
+ }
+
+
+
+ {
+ // @utopia/uid=cond
+ true ? null : null
+ }
+
+
+ {
+ // @utopia/uid=cond
+ true ? null : null
+ }
+
+
+ {
+ // @utopia/uid=cond
+ true ? 42 : null
+ }
+
+
+ {
+ // @utopia/uid=cond
+ true ? 42 : null
+ }
+
+
+ {
+ // @utopia/uid=cond1
+ true ? (
+ // @utopia/uid=cond2
+ true ? (
+
+ ) : null
+ ) : null
+ }
+
+
+
+ {
+ // @utopia/uid=cond1
+ true ? (
+ // @utopia/uid=cond2
+ true ? (
+
+ ) : null
+ ) : null
+ }
+
+
+
+ {
+ // @utopia/uid=cond1
+ true ? (
+ // @utopia/uid=cond2
+ true ? (
+ 42
+ ) : null
+ ) : null
+ }
+
+
+ {
+ // @utopia/uid=cond1
+ true ? (
+ // @utopia/uid=cond2
+ true ? (
+ 42
+ ) : null
+ ) : null
+ }
+
+
+
+
+
+
+
+
+
+