Reorganize inline editing features

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: {

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: <Test />}
+      })
+    ).not.toThrow();
+  });
+});

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 (
+        <div data-testid="contentElement">
+          {isSelected ? 'Selected' : 'Unselected'}
+        </div>
+      );
+    }
+
+    const {getByTestId} = renderEntry({
+      contentElement: {ui: <Test />}
+    });
+    fireEvent.click(getByTestId('contentElement'));
+
+    expect(getByTestId('contentElement')).toHaveTextContent('Unselected');
+  });
+
+  it('returns false for isEditable', () => {
+    function Test() {
+      const {isEditable} = useContentElementEditorState();
+
+      return (
+        <div data-testid="contentElement">
+          {isEditable ? 'Edit me' : 'Read only'}
+        </div>
+      );
+    }
+
+    const {getByTestId} = renderEntry({
+      contentElement: {ui: <Test />}
+    });
+
+    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: <Test />}
+      })
+    ).not.toThrow();
+  });
+});

entry_types/scrolled/package/spec/frontend/features/editorCommentBadges-spec.js → 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(() => {

entry_types/scrolled/package/spec/frontend/features/contentElementSelection-spec.js → 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(() => {

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);
+  });
+});

entry_types/scrolled/package/spec/frontend/features/insertContentElementMessage-spec.js → 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();
 
 

entry_types/scrolled/package/spec/frontend/features/marginIndicator-spec.js → 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', () => {

entry_types/scrolled/package/spec/frontend/features/moveContentElementMessage-spec.js → 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();
 
 

entry_types/scrolled/package/spec/frontend/features/paddingIndicator-spec.js → 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', () => {

entry_types/scrolled/package/spec/frontend/features/scrollPointMessages-spec.js → 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(() => {

entry_types/scrolled/package/spec/frontend/features/selectedMessage-spec.js → 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();
 
 

entry_types/scrolled/package/spec/frontend/features/useContentElementConfigurationUpdate-spec.js → 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();
 
 

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: <Test />}
+    });
+
+    const command = {type: 'SOME_COMMAND'};
+    window.postMessage({
+      type: 'CONTENT_ELEMENT_EDITOR_COMMAND',
+      payload: {
+        contentElementId: 1,
+        command
+      }
+    }, '*');
+    await tick();
+
+    expect(callback).toHaveBeenCalledWith(command);
+  });
+});