diff --git a/entry_types/scrolled/package/spec/frontend/features/sectionPadding-spec.js b/entry_types/scrolled/package/spec/frontend/features/sectionPadding-spec.js index 94060f391a..9db4c5b6c2 100644 --- a/entry_types/scrolled/package/spec/frontend/features/sectionPadding-spec.js +++ b/entry_types/scrolled/package/spec/frontend/features/sectionPadding-spec.js @@ -1,4 +1,4 @@ -import {renderEntry, useInlineEditingPageObjects} from 'support/pageObjects'; +import {renderEntry, usePageObjects} from 'support/pageObjects'; import {act} from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; @@ -9,7 +9,7 @@ jest.mock('frontend/usePortraitOrientation'); jest.mock('frontend/useMotifAreaState'); describe('section padding', () => { - useInlineEditingPageObjects(); + usePageObjects(); it('does not suppress top padding by default', () => { const {getSectionByPermaId} = renderEntry({ @@ -83,51 +83,6 @@ describe('section padding', () => { expect(getSectionByPermaId(6).hasSuppressedBottomPadding()).toBe(true); }); - it('forces padding below full width element if section is selected', () => { - const {getSectionByPermaId} = renderEntry({ - seed: { - sections: [{id: 5, permaId: 6}], - contentElements: [{sectionId: 5, configuration: {width: 3}}] - } - }); - - const section = getSectionByPermaId(6); - section.select(); - - expect(section.hasForcedPadding()).toBe(true); - }); - - it('forces padding below full width element if element is selected', () => { - const {getSectionByPermaId, getContentElementByTestId} = renderEntry({ - seed: { - sections: [{id: 5, permaId: 6}], - contentElements: [{ - sectionId: 5, - typeName: 'withTestId', - configuration: {testId: 10, width: 3} - }] - } - }); - - getContentElementByTestId(10).select(); - - expect(getSectionByPermaId(6).hasForcedPadding()).toBe(true); - }); - - it('does not force padding if padding is selected', () => { - const {getSectionByPermaId} = renderEntry({ - seed: { - sections: [{id: 5, permaId: 6}], - contentElements: [{sectionId: 5, configuration: {width: 3}}] - } - }); - - const section = getSectionByPermaId(6); - section.selectPadding('bottom'); - - expect(section.hasForcedPadding()).toBe(false); - }); - it('does not set inline padding styles when no paddingTop/paddingBottom set', () => { const {getSectionByPermaId} = renderEntry({ seed: { diff --git a/entry_types/scrolled/package/spec/frontend/features/useContentElementEditorCommandSubscription-spec.js b/entry_types/scrolled/package/spec/frontend/features/useContentElementEditorCommandSubscription-spec.js new file mode 100644 index 0000000000..fb3838db38 --- /dev/null +++ b/entry_types/scrolled/package/spec/frontend/features/useContentElementEditorCommandSubscription-spec.js @@ -0,0 +1,23 @@ +import React from 'react'; + +import {useContentElementEditorCommandSubscription} from 'pageflow-scrolled/frontend'; +import {renderEntry, usePageObjects} from 'support/pageObjects'; + +import '@testing-library/jest-dom/extend-expect'; + +describe('useContentElementEditorCommandSubscription', () => { + usePageObjects(); + + it('is noop', () => { + function Test() { + useContentElementEditorCommandSubscription(() => {}); + return null; + } + + expect(() => + renderEntry({ + contentElement: {ui: } + }) + ).not.toThrow(); + }); +}); diff --git a/entry_types/scrolled/package/spec/frontend/features/useContentElementEditorState-spec.js b/entry_types/scrolled/package/spec/frontend/features/useContentElementEditorState-spec.js new file mode 100644 index 0000000000..420c09b992 --- /dev/null +++ b/entry_types/scrolled/package/spec/frontend/features/useContentElementEditorState-spec.js @@ -0,0 +1,63 @@ +import React, {useEffect} from 'react'; +import {fireEvent} from '@testing-library/react'; + +import {useContentElementEditorState} from 'pageflow-scrolled/frontend'; +import {renderEntry, usePageObjects} from 'support/pageObjects'; + +import '@testing-library/jest-dom/extend-expect'; + +describe('useContentElementEditorState', () => { + usePageObjects(); + + it('returns false for isSelected', () => { + function Test() { + const {isSelected} = useContentElementEditorState(); + + return ( +
+ {isSelected ? 'Selected' : 'Unselected'} +
+ ); + } + + const {getByTestId} = renderEntry({ + contentElement: {ui: } + }); + fireEvent.click(getByTestId('contentElement')); + + expect(getByTestId('contentElement')).toHaveTextContent('Unselected'); + }); + + it('returns false for isEditable', () => { + function Test() { + const {isEditable} = useContentElementEditorState(); + + return ( +
+ {isEditable ? 'Edit me' : 'Read only'} +
+ ); + } + + const {getByTestId} = renderEntry({ + contentElement: {ui: } + }); + + expect(getByTestId('contentElement')).toHaveTextContent('Read only'); + }); + + it('provides noop setTransientState function', () => { + function Test() { + const {setTransientState} = useContentElementEditorState(); + + useEffect(() => setTransientState({some: 'state'})); + return null; + } + + expect(() => + renderEntry({ + contentElement: {ui: } + }) + ).not.toThrow(); + }); +}); diff --git a/entry_types/scrolled/package/spec/frontend/features/editorCommentBadges-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/commentBadges-spec.js similarity index 96% rename from entry_types/scrolled/package/spec/frontend/features/editorCommentBadges-spec.js rename to entry_types/scrolled/package/spec/frontend/inlineEditing/features/commentBadges-spec.js index 20bc4741ba..b9276af769 100644 --- a/entry_types/scrolled/package/spec/frontend/features/editorCommentBadges-spec.js +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/commentBadges-spec.js @@ -2,11 +2,11 @@ import '@testing-library/jest-dom/extend-expect'; import {act, waitFor} from '@testing-library/react'; import {features} from 'pageflow/frontend'; -import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects'; +import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects/inlineEditing'; import badgeStyles from 'review/Badge.module.css'; -describe('editor comment badges', () => { +describe('inline editing comment badges', () => { useInlineEditingPageObjects(); beforeEach(() => { diff --git a/entry_types/scrolled/package/spec/frontend/features/contentElementSelection-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/contentElementSelection-spec.js similarity index 97% rename from entry_types/scrolled/package/spec/frontend/features/contentElementSelection-spec.js rename to entry_types/scrolled/package/spec/frontend/inlineEditing/features/contentElementSelection-spec.js index 85b1f21023..99e8897919 100644 --- a/entry_types/scrolled/package/spec/frontend/features/contentElementSelection-spec.js +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/contentElementSelection-spec.js @@ -2,12 +2,12 @@ import React from 'react'; import {frontend} from 'frontend'; import {features} from 'pageflow/frontend'; -import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects'; +import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects/inlineEditing'; import {changeLocationHash} from 'support/changeLocationHash'; import '@testing-library/jest-dom/extend-expect' import {act, fireEvent, waitFor} from '@testing-library/react'; -describe('content element selection', () => { +describe('inline editing content element selection', () => { useInlineEditingPageObjects(); beforeEach(() => { diff --git a/entry_types/scrolled/package/spec/frontend/inlineEditing/features/forcedSectionPadding-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/forcedSectionPadding-spec.js new file mode 100644 index 0000000000..d7de9de9b2 --- /dev/null +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/forcedSectionPadding-spec.js @@ -0,0 +1,52 @@ +import {renderEntry, useInlineEditingPageObjects} from 'support/pageObjects/inlineEditing'; + +import '@testing-library/jest-dom/extend-expect'; + +describe('inline editing forced section padding', () => { + useInlineEditingPageObjects(); + + it('forces padding below full width element if section is selected', () => { + const {getSectionByPermaId} = renderEntry({ + seed: { + sections: [{id: 5, permaId: 6}], + contentElements: [{sectionId: 5, configuration: {width: 3}}] + } + }); + + const section = getSectionByPermaId(6); + section.select(); + + expect(section.hasForcedPadding()).toBe(true); + }); + + it('forces padding below full width element if element is selected', () => { + const {getSectionByPermaId, getContentElementByTestId} = renderEntry({ + seed: { + sections: [{id: 5, permaId: 6}], + contentElements: [{ + sectionId: 5, + typeName: 'withTestId', + configuration: {testId: 10, width: 3} + }] + } + }); + + getContentElementByTestId(10).select(); + + expect(getSectionByPermaId(6).hasForcedPadding()).toBe(true); + }); + + it('does not force padding if padding is selected', () => { + const {getSectionByPermaId} = renderEntry({ + seed: { + sections: [{id: 5, permaId: 6}], + contentElements: [{sectionId: 5, configuration: {width: 3}}] + } + }); + + const section = getSectionByPermaId(6); + section.selectPadding('bottom'); + + expect(section.hasForcedPadding()).toBe(false); + }); +}); diff --git a/entry_types/scrolled/package/spec/frontend/features/insertContentElementMessage-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/insertContentElementMessage-spec.js similarity index 92% rename from entry_types/scrolled/package/spec/frontend/features/insertContentElementMessage-spec.js rename to entry_types/scrolled/package/spec/frontend/inlineEditing/features/insertContentElementMessage-spec.js index 2a39169f91..49558a3eca 100644 --- a/entry_types/scrolled/package/spec/frontend/features/insertContentElementMessage-spec.js +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/insertContentElementMessage-spec.js @@ -1,7 +1,7 @@ -import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects'; +import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects/inlineEditing'; import '@testing-library/jest-dom/extend-expect' -describe('INSERT_CONTENT_ELEMENT message', () => { +describe('inline editing INSERT_CONTENT_ELEMENT message', () => { useInlineEditingPageObjects(); diff --git a/entry_types/scrolled/package/spec/frontend/features/marginIndicator-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/marginIndicator-spec.js similarity index 98% rename from entry_types/scrolled/package/spec/frontend/features/marginIndicator-spec.js rename to entry_types/scrolled/package/spec/frontend/inlineEditing/features/marginIndicator-spec.js index 3e70c3b6fb..f9cf11d858 100644 --- a/entry_types/scrolled/package/spec/frontend/features/marginIndicator-spec.js +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/marginIndicator-spec.js @@ -1,7 +1,7 @@ -import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects'; +import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects/inlineEditing'; import '@testing-library/jest-dom/extend-expect'; -describe('MarginIndicator', () => { +describe('inline editing MarginIndicator', () => { useInlineEditingPageObjects(); it('displays scale translation for top margin when element is selected', () => { diff --git a/entry_types/scrolled/package/spec/frontend/features/moveContentElementMessage-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/moveContentElementMessage-spec.js similarity index 95% rename from entry_types/scrolled/package/spec/frontend/features/moveContentElementMessage-spec.js rename to entry_types/scrolled/package/spec/frontend/inlineEditing/features/moveContentElementMessage-spec.js index e171d3a928..6541524035 100644 --- a/entry_types/scrolled/package/spec/frontend/features/moveContentElementMessage-spec.js +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/moveContentElementMessage-spec.js @@ -1,7 +1,7 @@ -import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects'; +import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects/inlineEditing'; import '@testing-library/jest-dom/extend-expect' -describe('MOVE_CONTENT_ELEMENT message', () => { +describe('inline editing MOVE_CONTENT_ELEMENT message', () => { useInlineEditingPageObjects(); diff --git a/entry_types/scrolled/package/spec/frontend/features/paddingIndicator-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/paddingIndicator-spec.js similarity index 98% rename from entry_types/scrolled/package/spec/frontend/features/paddingIndicator-spec.js rename to entry_types/scrolled/package/spec/frontend/inlineEditing/features/paddingIndicator-spec.js index d48ac557bf..8fa263cff3 100644 --- a/entry_types/scrolled/package/spec/frontend/features/paddingIndicator-spec.js +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/paddingIndicator-spec.js @@ -1,10 +1,10 @@ -import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects'; +import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects/inlineEditing'; import {useMotifAreaState} from 'frontend/useMotifAreaState'; import '@testing-library/jest-dom/extend-expect'; jest.mock('frontend/useMotifAreaState'); -describe('PaddingIndicator', () => { +describe('inline editing PaddingIndicator', () => { useInlineEditingPageObjects(); it('displays scale translation for top padding when section is selected', () => { diff --git a/entry_types/scrolled/package/spec/frontend/features/scrollPointMessages-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/scrollPointMessages-spec.js similarity index 96% rename from entry_types/scrolled/package/spec/frontend/features/scrollPointMessages-spec.js rename to entry_types/scrolled/package/spec/frontend/inlineEditing/features/scrollPointMessages-spec.js index 10c74d6af1..fbdc651cf2 100644 --- a/entry_types/scrolled/package/spec/frontend/features/scrollPointMessages-spec.js +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/scrollPointMessages-spec.js @@ -1,8 +1,8 @@ -import {renderEntry, useInlineEditingPageObjects} from 'support/pageObjects'; +import {renderEntry, useInlineEditingPageObjects} from 'support/pageObjects/inlineEditing'; import {asyncHandlingOf} from 'support/asyncHandlingOf'; -describe('scroll point messages', () => { +describe('inline editing scroll point messages', () => { useInlineEditingPageObjects(); beforeEach(() => { diff --git a/entry_types/scrolled/package/spec/frontend/features/selectedMessage-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/selectedMessage-spec.js similarity index 98% rename from entry_types/scrolled/package/spec/frontend/features/selectedMessage-spec.js rename to entry_types/scrolled/package/spec/frontend/inlineEditing/features/selectedMessage-spec.js index 44171d4a46..41f220067f 100644 --- a/entry_types/scrolled/package/spec/frontend/features/selectedMessage-spec.js +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/selectedMessage-spec.js @@ -2,11 +2,11 @@ import React from 'react'; import {frontend, WidgetSelectionRect} from 'frontend'; import {features} from 'pageflow/frontend'; -import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects'; +import {useInlineEditingPageObjects, renderEntry} from 'support/pageObjects/inlineEditing'; import {act, fireEvent, waitFor} from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect' -describe('SELECTED message', () => { +describe('inline editing SELECTED message', () => { useInlineEditingPageObjects(); diff --git a/entry_types/scrolled/package/spec/frontend/features/useContentElementConfigurationUpdate-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/useContentElementConfigurationUpdate-spec.js similarity index 96% rename from entry_types/scrolled/package/spec/frontend/features/useContentElementConfigurationUpdate-spec.js rename to entry_types/scrolled/package/spec/frontend/inlineEditing/features/useContentElementConfigurationUpdate-spec.js index e4034ad6f4..ba1401f1cd 100644 --- a/entry_types/scrolled/package/spec/frontend/features/useContentElementConfigurationUpdate-spec.js +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/useContentElementConfigurationUpdate-spec.js @@ -2,10 +2,10 @@ import React, {useEffect} from 'react'; import {frontend, useContentElementConfigurationUpdate} from 'frontend'; -import {renderEntry, useInlineEditingPageObjects} from 'support/pageObjects'; +import {renderEntry, useInlineEditingPageObjects} from 'support/pageObjects/inlineEditing'; import '@testing-library/jest-dom/extend-expect' -describe('useContentElementConfigurationUpdate', () => { +describe('inline editing useContentElementConfigurationUpdate', () => { useInlineEditingPageObjects(); diff --git a/entry_types/scrolled/package/spec/frontend/inlineEditing/features/useContentElementEditorCommandSubscription-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/useContentElementEditorCommandSubscription-spec.js new file mode 100644 index 0000000000..4e03d2ea67 --- /dev/null +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/useContentElementEditorCommandSubscription-spec.js @@ -0,0 +1,36 @@ +import React from 'react'; + +import {useContentElementEditorCommandSubscription} from 'pageflow-scrolled/frontend'; +import {tick} from 'support'; +import {renderEntry, useInlineEditingPageObjects} from 'support/pageObjects/inlineEditing'; + +import '@testing-library/jest-dom/extend-expect'; + +describe('inline editing useContentElementEditorCommandSubscription', () => { + useInlineEditingPageObjects(); + + it('invokes callback for content element commands sent via post message', async () => { + const callback = jest.fn(); + + function Test() { + useContentElementEditorCommandSubscription(callback); + return null; + } + + renderEntry({ + contentElement: {ui: } + }); + + const command = {type: 'SOME_COMMAND'}; + window.postMessage({ + type: 'CONTENT_ELEMENT_EDITOR_COMMAND', + payload: { + contentElementId: 1, + command + } + }, '*'); + await tick(); + + expect(callback).toHaveBeenCalledWith(command); + }); +}); diff --git a/entry_types/scrolled/package/spec/frontend/inlineEditing/features/useContentElementEditorState-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/useContentElementEditorState-spec.js new file mode 100644 index 0000000000..c00ed50241 --- /dev/null +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/useContentElementEditorState-spec.js @@ -0,0 +1,133 @@ +import React, {useEffect} from 'react'; +import {act, fireEvent} from '@testing-library/react'; + +import {frontend, useContentElementEditorState} from 'pageflow-scrolled/frontend'; +import {useEditorSelection} from 'frontend/inlineEditing/EditorState'; +import {renderEntry, useInlineEditingPageObjects} from 'support/pageObjects/inlineEditing'; + +import '@testing-library/jest-dom/extend-expect'; + +describe('inline editing useContentElementEditorState', () => { + useInlineEditingPageObjects(); + + it('lets content elements determine whether they are selected', () => { + frontend.contentElementTypes.register('test', { + component: function Test({configuration}) { + const {isSelected} = useContentElementEditorState(); + + return ( +
+ {isSelected ? 'Selected' : 'Unselected'} +
+ ); + } + }); + + const {getByTestId} = renderEntry({ + seed: { + contentElements: [ + {id: 1, typeName: 'test', configuration: {testId: 'one'}}, + {id: 2, typeName: 'test', configuration: {testId: 'two'}} + ] + } + }); + fireEvent.click(getByTestId('two')); + + expect(getByTestId('one')).toHaveTextContent('Unselected'); + expect(getByTestId('two')).toHaveTextContent('Selected'); + }); + + it('exposes type matching the active selection', () => { + let captured = {}; + let setSelectionRef; + + function Test() { + const state = useContentElementEditorState(); + const {select} = useEditorSelection(); + + captured = state; + useEffect(() => { + setSelectionRef = select; + }, [select]); + + return null; + } + + renderEntry({ + contentElement: {ui: } + }); + + expect(captured.type).toBeNull(); + + act(() => setSelectionRef({type: 'contentElement', id: 1})); + expect(captured.type).toBe('contentElement'); + expect(captured.isSelected).toBe(true); + + act(() => setSelectionRef({type: 'contentElementComments', id: 1})); + expect(captured.type).toBe('contentElementComments'); + expect(captured.isSelected).toBe(true); + + act(() => setSelectionRef({type: 'newThread', id: 10})); + expect(captured.type).toBe('newThread'); + expect(captured.isSelected).toBe(true); + }); + + it('returns true for isEditable', () => { + function Test() { + const {isEditable} = useContentElementEditorState(); + + return ( +
+ {isEditable ? 'Edit me' : 'Read only'} +
+ ); + } + + const {getByTestId} = renderEntry({ + contentElement: {ui: } + }); + + expect(getByTestId('contentElement')).toHaveTextContent('Edit me'); + }); + + it('lets content elements publish transient state via post message', () => { + + function Test() { + const {setTransientState} = useContentElementEditorState(); + + useEffect(() => setTransientState({some: 'state'})); + return null; + } + + renderEntry({ + contentElement: {ui: } + }); + + expect(window.parent.postMessage).toHaveBeenCalledWith({ + type: 'UPDATE_TRANSIENT_CONTENT_ELEMENT_STATE', + payload: { + id: 1, + state: {some: 'state'} + } + }, expect.anything()); + }); + + it('does not send message if transient state is shallow equal to previous transient state', () => { + + function Test() { + const {setTransientState} = useContentElementEditorState(); + + useEffect(() => setTransientState({some: 'state'})); + return null; + } + + const {rerender} = renderEntry({ + contentElement: {ui: } + }); + + window.parent.postMessage.mockClear(); + rerender(); + + expect(window.parent.postMessage).not.toHaveBeenCalled(); + }); +}); diff --git a/entry_types/scrolled/package/spec/frontend/features/useWidgetConfigurationUpdate-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/useWidgetConfigurationUpdate-spec.js similarity index 96% rename from entry_types/scrolled/package/spec/frontend/features/useWidgetConfigurationUpdate-spec.js rename to entry_types/scrolled/package/spec/frontend/inlineEditing/features/useWidgetConfigurationUpdate-spec.js index 90462063cc..51c2e62c12 100644 --- a/entry_types/scrolled/package/spec/frontend/features/useWidgetConfigurationUpdate-spec.js +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/features/useWidgetConfigurationUpdate-spec.js @@ -2,10 +2,10 @@ import React, {useEffect} from 'react'; import {frontend, useWidgetConfigurationUpdate} from 'frontend'; -import {renderEntry, useInlineEditingPageObjects} from 'support/pageObjects'; +import {renderEntry, useInlineEditingPageObjects} from 'support/pageObjects/inlineEditing'; import '@testing-library/jest-dom/extend-expect' -describe('useWidgetConfigurationUpdate', () => { +describe('inline editing useWidgetConfigurationUpdate', () => { useInlineEditingPageObjects(); diff --git a/entry_types/scrolled/package/spec/frontend/useContentElementCommandSubscription/inEditorPreview-spec.js b/entry_types/scrolled/package/spec/frontend/useContentElementCommandSubscription/inEditorPreview-spec.js deleted file mode 100644 index 7835622914..0000000000 --- a/entry_types/scrolled/package/spec/frontend/useContentElementCommandSubscription/inEditorPreview-spec.js +++ /dev/null @@ -1,39 +0,0 @@ -import {frontend, Entry, useContentElementEditorCommandSubscription} from 'pageflow-scrolled/frontend'; -import {renderInEntry, fakeParentWindow, tick} from 'support'; - -import React from 'react'; -import '@testing-library/jest-dom/extend-expect' - -import {loadInlineEditingExtensions} from 'frontend/inlineEditing'; - -describe('useContentElementEditorCommandSubscription in editor preview', () => { - beforeAll(loadInlineEditingExtensions); - - it('invokes callback for content element commands sent via post message', async () => { - fakeParentWindow(); - const callback = jest.fn(); - frontend.contentElementTypes.register('test', { - component: function Test({configuration}) { - useContentElementEditorCommandSubscription(callback); - return null; - } - }); - - renderInEntry(, { - seed: { - contentElements: [{id: 5, typeName: 'test'}] - } - }); - const command = {type: 'SOME_COMMAND'}; - window.postMessage({ - type: 'CONTENT_ELEMENT_EDITOR_COMMAND', - payload: { - contentElementId: 5, - command - } - }, '*'); - await tick(); - - expect(callback).toHaveBeenCalledWith(command); - }); -}); diff --git a/entry_types/scrolled/package/spec/frontend/useContentElementCommandSubscription/inFrontend-spec.js b/entry_types/scrolled/package/spec/frontend/useContentElementCommandSubscription/inFrontend-spec.js deleted file mode 100644 index 154cb69b9d..0000000000 --- a/entry_types/scrolled/package/spec/frontend/useContentElementCommandSubscription/inFrontend-spec.js +++ /dev/null @@ -1,24 +0,0 @@ -import {frontend, Entry, useContentElementEditorCommandSubscription} from 'pageflow-scrolled/frontend'; -import {renderInEntry} from 'support'; - -import React from 'react'; -import '@testing-library/jest-dom/extend-expect' - -describe('useContentElementEditorCommandSubscription in frontend', () => { - it('is noop', async () => { - frontend.contentElementTypes.register('test', { - component: function Test({configuration}) { - useContentElementEditorCommandSubscription(() => {}); - return null; - } - }); - - expect(() => - renderInEntry(, { - seed: { - contentElements: [{id: 5, typeName: 'test'}] - } - }) - ).not.toThrow(); - }); -}); diff --git a/entry_types/scrolled/package/spec/frontend/useContentElementEditorState/inEditorPreview-spec.js b/entry_types/scrolled/package/spec/frontend/useContentElementEditorState/inEditorPreview-spec.js deleted file mode 100644 index 0650c64012..0000000000 --- a/entry_types/scrolled/package/spec/frontend/useContentElementEditorState/inEditorPreview-spec.js +++ /dev/null @@ -1,152 +0,0 @@ -import {frontend, Entry, useContentElementEditorState} from 'pageflow-scrolled/frontend'; -import {renderInEntry} from 'support'; -import {useFakeParentWindow} from 'support/fakeWindows'; -import {useEditorSelection} from 'frontend/inlineEditing/EditorState'; - -import React, {useEffect} from 'react'; -import {act, fireEvent} from '@testing-library/react'; -import '@testing-library/jest-dom/extend-expect' - -import {loadInlineEditingExtensions} from 'frontend/inlineEditing'; - -describe('useContentElementEditorState in editor preview', () => { - beforeAll(loadInlineEditingExtensions); - useFakeParentWindow(); - - it('lets content elements determine whether they are selected', () => { - frontend.contentElementTypes.register('test', { - component: function Test({configuration}) { - const {isSelected} = useContentElementEditorState(); - - return ( -
- {isSelected ? 'Selected' : 'Unselected'} -
- ); - } - }); - - const {getByTestId} = renderInEntry(, { - seed: { - contentElements: [ - {id: 1, typeName: 'test', configuration: {testId: 'one'}}, - {id: 2, typeName: 'test', configuration: {testId: 'two'}} - ] - } - }); - fireEvent.click(getByTestId('two')); - - expect(getByTestId('one')).toHaveTextContent('Unselected'); - expect(getByTestId('two')).toHaveTextContent('Selected'); - }); - - it('exposes type matching the active selection', () => { - let captured = {}; - let setSelectionRef; - - frontend.contentElementTypes.register('test', { - component: function Test() { - const state = useContentElementEditorState(); - const {select} = useEditorSelection(); - - captured = state; - useEffect(() => { - setSelectionRef = select; - }, [select]); - - return null; - } - }); - - renderInEntry(, { - seed: {contentElements: [{id: 7, permaId: 70, typeName: 'test'}]} - }); - - expect(captured.type).toBeNull(); - - act(() => setSelectionRef({type: 'contentElement', id: 7})); - expect(captured.type).toBe('contentElement'); - expect(captured.isSelected).toBe(true); - - act(() => setSelectionRef({type: 'contentElementComments', id: 7})); - expect(captured.type).toBe('contentElementComments'); - expect(captured.isSelected).toBe(true); - - act(() => setSelectionRef({type: 'newThread', id: 70})); - expect(captured.type).toBe('newThread'); - expect(captured.isSelected).toBe(true); - }); - - it('returns true for isEditable', () => { - frontend.contentElementTypes.register('test', { - component: function Test({configuration}) { - const {isEditable} = useContentElementEditorState(); - - return ( -
- {isEditable ? 'Edit me' : 'Read only'} -
- ); - } - }); - - const {getByTestId} = renderInEntry(, { - seed: { - contentElements: [{typeName: 'test'}] - } - }); - - expect(getByTestId('contentElement')).toHaveTextContent('Edit me'); - }); - - it('lets content elements publish transient state via post message', () => { - frontend.contentElementTypes.register('test', { - component: function Test() { - const {setTransientState} = useContentElementEditorState(); - - useEffect(() => setTransientState({some: 'state'})); - return null; - } - }); - - renderInEntry(, { - seed: { - contentElements: [ - {id: 5, typeName: 'test'} - ] - } - }); - - expect(window.parent.postMessage).toHaveBeenCalledWith({ - type: 'UPDATE_TRANSIENT_CONTENT_ELEMENT_STATE', - payload: { - id: 5, - state: {some: 'state'} - } - }, expect.anything()); - }); - - it('does not send message if transient state is shallow equal to previous transient state', () => { - frontend.contentElementTypes.register('test', { - component: function Test() { - const {setTransientState} = useContentElementEditorState(); - - useEffect(() => setTransientState({some: 'state'})); - return null; - } - }); - - const {rerender} = renderInEntry(, { - seed: { - contentElements: [ - {id: 5, typeName: 'test'} - ] - } - }); - - window.parent.postMessage.mockClear(); - rerender(); - - expect(window.parent.postMessage).not.toHaveBeenCalled(); - }); -}); diff --git a/entry_types/scrolled/package/spec/frontend/useContentElementEditorState/inFrontend-spec.js b/entry_types/scrolled/package/spec/frontend/useContentElementEditorState/inFrontend-spec.js deleted file mode 100644 index 866a876425..0000000000 --- a/entry_types/scrolled/package/spec/frontend/useContentElementEditorState/inFrontend-spec.js +++ /dev/null @@ -1,74 +0,0 @@ -import {frontend, Entry, useContentElementEditorState} from 'pageflow-scrolled/frontend'; -import {renderInEntry} from 'support'; - -import React, {useEffect} from 'react'; -import {fireEvent} from '@testing-library/react'; -import '@testing-library/jest-dom/extend-expect' - -describe('useContentElementEditorState in frontend', () => { - it('returns false for isSelected', () => { - frontend.contentElementTypes.register('test', { - component: function Test({configuration}) { - const {isSelected} = useContentElementEditorState(); - - return ( -
- {isSelected ? 'Selected' : 'Unselected'} -
- ); - } - }); - - const {getByTestId} = renderInEntry(, { - seed: { - contentElements: [{typeName: 'test'}] - } - }); - fireEvent.click(getByTestId('contentElement')); - - expect(getByTestId('contentElement')).toHaveTextContent('Unselected'); - }); - - it('returns false for isEditable', () => { - frontend.contentElementTypes.register('test', { - component: function Test({configuration}) { - const {isEditable} = useContentElementEditorState(); - - return ( -
- {isEditable ? 'Edit me' : 'Read only'} -
- ); - } - }); - - const {getByTestId} = renderInEntry(, { - seed: { - contentElements: [{typeName: 'test'}] - } - }); - - expect(getByTestId('contentElement')).toHaveTextContent('Read only'); - }); - - it('provides noop setTransientState function', () => { - frontend.contentElementTypes.register('test', { - component: function Test({configuration}) { - const {setTransientState} = useContentElementEditorState(); - - useEffect(() => setTransientState({some: 'state'})); - return null; - } - }); - - expect(() => - renderInEntry(, { - seed: { - contentElements: [ - {typeName: 'test'} - ] - } - }) - ).not.toThrow(); - }); -}); diff --git a/entry_types/scrolled/package/spec/support/pageObjects/index.js b/entry_types/scrolled/package/spec/support/pageObjects/index.js index bb353f7187..708e7c394b 100644 --- a/entry_types/scrolled/package/spec/support/pageObjects/index.js +++ b/entry_types/scrolled/package/spec/support/pageObjects/index.js @@ -91,8 +91,6 @@ export function renderContentElement({typeName, configuration = {}, ...seedOptio }; } -export {useInlineEditingPageObjects} from './inlineEditing'; - export function usePageObjects() { beforeEach(() => { jest.restoreAllMocks();