diff --git a/entry_types/scrolled/package/spec/contentElements/counter/Counter-spec.js b/entry_types/scrolled/package/spec/contentElements/counter/Counter-spec.js index 1b4c9058e7..3df729fa03 100644 --- a/entry_types/scrolled/package/spec/contentElements/counter/Counter-spec.js +++ b/entry_types/scrolled/package/spec/contentElements/counter/Counter-spec.js @@ -27,9 +27,7 @@ describe('Counter', () => { contentElementId={5} contentElementWidth={contentElementWidths.md} sectionProps={{}} - />, { - editorState: {isEditable: false} - } + /> ); } @@ -199,9 +197,7 @@ describe('Counter', () => { contentElementId={5} contentElementWidth={width || contentElementWidths.md} sectionProps={sectionProps || {}} - />, { - editorState: {isEditable: false} - } + /> ); } diff --git a/entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLink-spec.js b/entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLink-spec.js index 0c0e225c12..6b4e03808c 100644 --- a/entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLink-spec.js +++ b/entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLink-spec.js @@ -497,7 +497,7 @@ describe('ExternalLink', () => { const {container} = renderInContentElement( , - {editorState: {isEditable: true}} + {inlineEditing: true} ); expect(container.querySelector(`.${styles.titleLink}`)).toBeNull(); @@ -510,7 +510,7 @@ describe('ExternalLink', () => { const {container} = renderInContentElement( , - {editorState: {isEditable: true}} + {inlineEditing: true} ); expect(container.querySelector(`.${styles.moreLink}`)).toBeNull(); diff --git a/entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLinkList/editorSelection-spec.js b/entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLinkList/editorSelection-spec.js index 000c43e03e..e825a15dc8 100644 --- a/entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLinkList/editorSelection-spec.js +++ b/entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLinkList/editorSelection-spec.js @@ -33,7 +33,7 @@ describe('ExternalLinkList', () => { renderInContentElement( , { - editorState: {isEditable: true, isSelected: true, setTransientState} + inlineEditing: {isSelected: true, transientState: setTransientState} } ); await user.click(screen.getByText('Some link').closest('li')); @@ -60,7 +60,7 @@ describe('ExternalLinkList', () => { const {container} = renderInContentElement( , { - editorState: {isEditable: true, isSelected: true} + inlineEditing: {isSelected: true} } ); await user.click(screen.getByText('Some link').closest('li')); @@ -88,7 +88,7 @@ describe('ExternalLinkList', () => { const {container} = renderInContentElement( , { - editorState: {isEditable: true} + inlineEditing: true } ); await user.click(screen.getByText('Some link').closest('li')); @@ -117,7 +117,7 @@ describe('ExternalLinkList', () => { const {container} = renderInContentElement( , { - editorState: {isEditable: true, isSelected: true, setTransientState} + inlineEditing: {isSelected: true, transientState: setTransientState} } ); const link = screen.getByText('Some link').closest('li'); @@ -139,7 +139,7 @@ describe('ExternalLinkList', () => { const {container, triggerEditorCommand} = renderInContentElement( , { - editorState: {isSelected: true, isEditable: true} + inlineEditing: {isSelected: true} } ); triggerEditorCommand({type: 'HIGHLIGHT_ITEM', index: 0}); @@ -157,7 +157,7 @@ describe('ExternalLinkList', () => { const {container, triggerEditorCommand} = renderInContentElement( , { - editorState: {isSelected: true, isEditable: true} + inlineEditing: {isSelected: true} } ); @@ -177,7 +177,7 @@ describe('ExternalLinkList', () => { const {container, triggerEditorCommand} = renderInContentElement( , { - editorState: {isSelected: true, isEditable: true} + inlineEditing: {isSelected: true} } ); triggerEditorCommand({type: 'SET_SELECTED_ITEM', index: 0}); diff --git a/entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLinkList/placeholder-spec.js b/entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLinkList/placeholder-spec.js index b754d2c887..c8a2c71865 100644 --- a/entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLinkList/placeholder-spec.js +++ b/entry_types/scrolled/package/spec/contentElements/externalLinkList/frontend/ExternalLinkList/placeholder-spec.js @@ -12,7 +12,7 @@ describe('ExternalLinkList placeholder', () => { const {container} = renderInContentElement( , - {editorState: {isEditable: true}} + {inlineEditing: true} ); expect(container.querySelector(`.${styles.placeholder}`)).not.toBeNull(); @@ -21,8 +21,7 @@ describe('ExternalLinkList placeholder', () => { it('does not render placeholder in published entry', () => { const {container} = renderInContentElement( , - {editorState: {isEditable: false}} + sectionProps={{}} /> ); expect(container.querySelector(`.${styles.placeholder}`)).toBeNull(); diff --git a/entry_types/scrolled/package/spec/contentElements/heading/Heading-spec.js b/entry_types/scrolled/package/spec/contentElements/heading/Heading-spec.js index 2f38bfae49..c4cab1f0a5 100644 --- a/entry_types/scrolled/package/spec/contentElements/heading/Heading-spec.js +++ b/entry_types/scrolled/package/spec/contentElements/heading/Heading-spec.js @@ -20,9 +20,7 @@ describe('Heading', () => { contentElementId={5} contentElementWidth={width || contentElementWidths.md} sectionProps={{sectionIndex: 1, ...sectionProps}} - />, { - editorState: {isEditable: false} - } + /> ); } diff --git a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/areaOutlines-spec.js b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/areaOutlines-spec.js index c50a83d977..5d703196b4 100644 --- a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/areaOutlines-spec.js +++ b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/areaOutlines-spec.js @@ -42,7 +42,7 @@ describe('Hotspots', () => { , { seed, - editorState: {isSelected: true, isEditable: true} + inlineEditing: {isSelected: true} } ); diff --git a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/editorCommands-spec.js b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/editorCommands-spec.js index 83349addc1..2a6f85fedf 100644 --- a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/editorCommands-spec.js +++ b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/editorCommands-spec.js @@ -28,7 +28,7 @@ describe('Hotspots', () => { , { seed, - editorState: {isSelected: true, isEditable: true} + inlineEditing: {isSelected: true} } ); triggerEditorCommand({type: 'HIGHLIGHT_AREA', index: 0}); @@ -52,7 +52,7 @@ describe('Hotspots', () => { , { seed, - editorState: {isSelected: true, isEditable: true} + inlineEditing: {isSelected: true} } ); triggerEditorCommand({type: 'HIGHLIGHT_AREA', index: 0}); @@ -80,7 +80,7 @@ describe('Hotspots', () => { , { seed, - editorState: {isSelected: true, isEditable: true} + inlineEditing: {isSelected: true} } ); simulateScrollPosition('near viewport'); diff --git a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/editorTransientState-spec.js b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/editorTransientState-spec.js index 63202a881c..ed1f498383 100644 --- a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/editorTransientState-spec.js +++ b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/editorTransientState-spec.js @@ -31,7 +31,7 @@ describe('Hotspots', () => { , { seed, - editorState: {isEditable: true, isSelected: true, setTransientState} + inlineEditing: {isSelected: true, transientState: setTransientState} } ); await user.click(clickableArea(container)); diff --git a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/indicators-spec.js b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/indicators-spec.js index 3256062f35..bd83b45e0b 100644 --- a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/indicators-spec.js +++ b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/indicators-spec.js @@ -109,7 +109,7 @@ describe('Hotspots', () => { const {container} = renderInContentElement( , { seed, - editorState: {isSelected: true, isEditable: true} + inlineEditing: {isSelected: true} } ); diff --git a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/panZoomScroller-spec.js b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/panZoomScroller-spec.js index 9f232e9fd5..4d14fcc8bf 100644 --- a/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/panZoomScroller-spec.js +++ b/entry_types/scrolled/package/spec/contentElements/hotspots/Hotspots/panZoomScroller-spec.js @@ -421,7 +421,7 @@ describe('Hotspots', () => { , { seed, - editorState: {isSelected: true, isEditable: true} + inlineEditing: {isSelected: true} } ); simulateScrollPosition('near viewport'); diff --git a/entry_types/scrolled/package/spec/frontend/ContentElementFigure-spec.js b/entry_types/scrolled/package/spec/frontend/ContentElementFigure-spec.js index 2b2c68c62a..8a0cd413db 100644 --- a/entry_types/scrolled/package/spec/frontend/ContentElementFigure-spec.js +++ b/entry_types/scrolled/package/spec/frontend/ContentElementFigure-spec.js @@ -52,7 +52,7 @@ describe('ContentElementFigure', () => { , { seed: {}, - editorState: {isEditable: true, setTransientState} + inlineEditing: {transientState: setTransientState} } ); @@ -73,7 +73,7 @@ describe('ContentElementFigure', () => { , { seed: {}, - editorState: {isEditable: true, setTransientState} + inlineEditing: {transientState: setTransientState} } ); unmount(); @@ -95,7 +95,7 @@ describe('ContentElementFigure', () => { , { seed: {}, - editorState: {isEditable: false, setTransientState} + inlineEditing: {isEditable: false, transientState: setTransientState} } ); diff --git a/entry_types/scrolled/package/spec/frontend/inlineEditing/EditableLink-spec.js b/entry_types/scrolled/package/spec/frontend/inlineEditing/EditableLink-spec.js index 590d64d2c9..840deffb8f 100644 --- a/entry_types/scrolled/package/spec/frontend/inlineEditing/EditableLink-spec.js +++ b/entry_types/scrolled/package/spec/frontend/inlineEditing/EditableLink-spec.js @@ -73,7 +73,7 @@ describe('EditableLink', () => { renderInContentElement( Some text, { - editorState: {isSelected: true} + inlineEditing: {isSelected: true} } ); @@ -84,7 +84,7 @@ describe('EditableLink', () => { renderInContentElement( Some text, { - editorState: {isSelected: true} + inlineEditing: {isSelected: true} } ); diff --git a/entry_types/scrolled/package/spec/widgets/textInlineFileRights/TextInlineFileRights-spec.js b/entry_types/scrolled/package/spec/widgets/textInlineFileRights/TextInlineFileRights-spec.js index 585455c8ea..92407adbab 100644 --- a/entry_types/scrolled/package/spec/widgets/textInlineFileRights/TextInlineFileRights-spec.js +++ b/entry_types/scrolled/package/spec/widgets/textInlineFileRights/TextInlineFileRights-spec.js @@ -27,7 +27,7 @@ describe('TextInlineFileRights', () => { , { seed: {}, - editorState: {isEditable: true, setTransientState} + inlineEditing: {transientState: setTransientState} } ); @@ -41,7 +41,7 @@ describe('TextInlineFileRights', () => { , { seed: {}, - editorState: {isEditable: true, setTransientState} + inlineEditing: {transientState: setTransientState} } ); unmount(); @@ -56,7 +56,7 @@ describe('TextInlineFileRights', () => { , { seed: {}, - editorState: {isEditable: true, setTransientState} + inlineEditing: {transientState: setTransientState} } ); unmount(); diff --git a/entry_types/scrolled/package/src/testHelpers/renderInContentElement.js b/entry_types/scrolled/package/src/testHelpers/renderInContentElement.js index 4304349b48..2332c83c7c 100644 --- a/entry_types/scrolled/package/src/testHelpers/renderInContentElement.js +++ b/entry_types/scrolled/package/src/testHelpers/renderInContentElement.js @@ -1,4 +1,4 @@ -import React, {useContext, useEffect, useState} from 'react'; +import React, {useEffect, useState} from 'react'; import {DndProvider} from 'react-dnd'; import {HTML5Backend} from 'react-dnd-html5-backend'; import BackboneEvents from 'backbone-events-standalone'; @@ -25,7 +25,17 @@ import {renderInEntryWithScrollPositionLifecycle} from './scrollPositionLifecycl * * @param {Function} callback - React component or function returning a React component. * @param {Object} [options] - Supports all options supported by {@link `renderInEntry`}. - * @param {Object} [options.editorState] - Fake result of `useContentElementEditorState`. + * @param {boolean|Object} [options.inlineEditing] - + * Opt the content element into an inline-editing context (matching + * what's available when inline editing is loaded in production). + * Pass `true` for editable defaults, or an object to override: + * `{isEditable, isSelected, transientState}`. `transientState` is + * installed as the `setTransientState` function on the editor state + * context — pass a jest spy to assert on it. Omitting the option + * gives the frontend-mode defaults (`isEditable: false, isSelected: + * false, setTransientState: noop`) without wrapping any + * inline-editing-only providers (DndProvider, editor command + * emitter). * @param {Object} [options.phonePlatform] - Fake result of `usePhonePlatform`. * @param {Object} [options.consentState] - Pass 'undecided' to render third party consent opt in. * @@ -33,13 +43,14 @@ import {renderInEntryWithScrollPositionLifecycle} from './scrollPositionLifecycl * * const {getByRole, simulateScrollPosition, triggerEditorCommand, simulateStorylineMode} = * renderInContentElement(, { - * seed: {...} + * seed: {...}, + * inlineEditing: {isSelected: true} * }); * simulateScrollPosition('near viewport'); * triggerEditorCommand({type: 'HIGHLIGHT'}); * simulateStorylineMode('background'); */ -export function renderInContentElement(ui, {editorState, +export function renderInContentElement(ui, {inlineEditing, phonePlatform = false, wrapper: OriginalWrapper, consentState = 'accepted', @@ -48,8 +59,9 @@ export function renderInContentElement(ui, {editorState, const emitter = Object.assign({}, BackboneEvents); const storylineEmitter = Object.assign({}, BackboneEvents); + const inlineEditingConfig = resolveInlineEditing(inlineEditing); + function Wrapper({children}) { - const defaultEditorState = useContext(ContentElementEditorStateContext); const [storylineMode, setStorylineMode] = useState('active'); useEffect(() => { @@ -57,19 +69,25 @@ export function renderInContentElement(ui, {editorState, return () => storylineEmitter.off('storylineMode', setStorylineMode); }, []); - return ( - + let tree = OriginalWrapper ? : children; + + if (inlineEditingConfig) { + tree = ( - - - - {OriginalWrapper ? : children} - - - + + + {tree} + + + ); + } + + return ( + + + {tree} + ); } @@ -102,6 +120,20 @@ export function renderInContentElement(ui, {editorState, }; } +function resolveInlineEditing(option) { + if (!option) return null; + + const overrides = option === true ? {} : option; + + return { + isEditable: overrides.isEditable ?? true, + isSelected: overrides.isSelected ?? false, + setTransientState: overrides.transientState ?? (() => {}), + select: () => {}, + selectNewThread: () => {} + }; +} + function createConsent(consentState) { const consent = Consent.create();