pageflow 17.0.5 → 17.2.0

data/entry_types/scrolled/package/testHelpers.js

@@ -1,56 +1,351 @@
-import React, { useEffect } from 'react';
-import { render } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks/dom';
+import { ConfigurationEditorTabView } from 'pageflow/ui';
+import { FileInputView } from 'pageflow/editor';
+import { render, act } from '@testing-library/react';
+import { renderBackboneView, ConfigurationEditor } from 'pageflow/testHelpers';
+export { renderBackboneView as renderReactBasedBackboneView } from 'pageflow/testHelpers';
+import { EditContentElementView, editor } from 'pageflow-scrolled/editor';
+import React, { useEffect, useState } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import BackboneEvents from 'backbone-events-standalone';
+import { PhonePlatformContext, RootProviders, useEntryStateDispatch, ContentElementLifecycleContext, ContentElementEditorCommandEmitterContext, ContentElementEditorStateContext, MainStorylineActivity, ContentElementAttributesProvider, ContentElementViewTimelineContext } from 'pageflow-scrolled/frontend';
 import { Consent } from 'pageflow/frontend';
-import { RootProviders, useEntryStateDispatch } from 'pageflow-scrolled/frontend';
+import { renderHook } from '@testing-library/react-hooks/dom';
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
   } else {
-    obj[key] = value;
+    head.appendChild(style);
   }
 
-  return obj;
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
 }
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+var css = ".ContentElementBox-module_properties__1ljc9 {\n  --content-element-box-box-shadow:\n    var(--content-element-box-shadow, 0 0 #000),\n    0 0 0 1px var(--content-element-box-outline-color, transparent);\n}\n\n.ContentElementBox-module_wrapper__3wZgP {\n  overflow: hidden;\n  border-radius: var(--content-element-box-border-radius,\n                     var(--theme-content-element-box-border-radius));\n  box-shadow: var(--content-element-box-box-shadow);\n}\n\n.ContentElementBox-module_full__AfWPr {\n  border-radius: var(--content-element-box-border-radius,\n                     var(--theme-content-element-full-box-border-radius,\n                     var(--theme-content-element-box-border-radius)));\n}\n\n.ContentElementBox-module_positioned__3R1dq {\n  position: relative;\n  height: 100%;\n}\n";
+var styles = {"properties":"ContentElementBox-module_properties__1ljc9","wrapper":"ContentElementBox-module_wrapper__3wZgP","full":"ContentElementBox-module_full__AfWPr","positioned":"ContentElementBox-module_positioned__3R1dq"};
+styleInject(css);
 
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
+function getElement(subject) {
+  var _subject$el;
+  return (_subject$el = subject === null || subject === void 0 ? void 0 : subject.el) !== null && _subject$el !== void 0 ? _subject$el : subject;
+}
 
-  return keys;
+/**
+ * Assert that the subject contains a `ContentElementBox` and, optionally,
+ * that the box has specific theme styles applied. Registered via
+ * {@link useContentElementMatchers}.
+ *
+ * The subject is a DOM element, e.g. the `container` returned by
+ * {@link renderInContentElement}. Negate with `.not` to assert that no
+ * box is present.
+ *
+ * @param {Object} [options]
+ * @param {string} [options.boxShadow] - Expected box shadow theme scale, e.g. `'md'`.
+ * @param {string} [options.borderRadius] - Expected border radius theme scale, e.g. `'circle'`.
+ * @param {string} [options.outlineColor] - Expected outline color.
+ *
+ * @example
+ * expect(container).toContainContentElementBox();
+ * expect(container).toContainContentElementBox({borderRadius: 'circle', boxShadow: 'md'});
+ * expect(container).not.toContainContentElementBox();
+ */
+function toContainContentElementBox(subject, options = {}) {
+  const wrapper = getElement(subject).querySelector(`.${styles.wrapper}`);
+  if (!wrapper) {
+    return {
+      pass: false,
+      message: () => 'expected element to contain a content element box, but found none'
+    };
+  }
+  const mismatches = boxPropertyMismatches(wrapper, options);
+  return {
+    pass: mismatches.length === 0,
+    message: () => mismatches.length ? `expected content element box to have ${mismatches.join(', ')}` : `expected element not to contain a content element box${describeOptions(options)}`
+  };
+}
+const boxProperties = {
+  boxShadow: {
+    customProperty: '--content-element-box-shadow',
+    expectedValue: value => `var(--theme-content-element-box-shadow-${value})`
+  },
+  borderRadius: {
+    customProperty: '--content-element-box-border-radius',
+    expectedValue: value => `var(--theme-content-element-box-border-radius-${value})`
+  },
+  outlineColor: {
+    customProperty: '--content-element-box-outline-color',
+    expectedValue: value => value
+  }
+};
+function boxPropertyMismatches(wrapper, options) {
+  return Object.keys(options).reduce((mismatches, name) => {
+    const property = boxProperties[name];
+    if (property) {
+      const expected = property.expectedValue(options[name]);
+      const actual = wrapper.style.getPropertyValue(property.customProperty);
+      if (actual !== expected) {
+        mismatches.push(`${name} ${JSON.stringify(options[name])} (found ${JSON.stringify(actual)})`);
+      }
+    }
+    return mismatches;
+  }, []);
+}
+function describeOptions(options) {
+  const names = Object.keys(options).filter(name => boxProperties[name]);
+  return names.length ? ` with ${names.join(', ')}` : '';
 }
 
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
+var css$1 = ".FitViewport-module_container__-awVj {\n  width: 100%;\n  margin: 0 auto;\n  max-width: var(\n    --theme-fit-viewport,\n    calc(100 * var(--vh) / var(--fit-viewport-aspect-ratio) * var(--fit-viewport-scale, 1))\n  );\n}\n\n.FitViewport-module_content__1_K5a {\n  position: relative;\n}\n\n.FitViewport-module_content__1_K5a > div:first-child {\n  padding-top: calc(100% * var(--fit-viewport-aspect-ratio));\n}\n\n.FitViewport-module_inner__3psd1 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n@media print {\n  .FitViewport-module_container__-awVj {\n    page-break-inside: avoid;\n  }\n}\n";
+var styles$1 = {"container":"FitViewport-module_container__-awVj","content":"FitViewport-module_content__1_K5a","inner":"FitViewport-module_inner__3psd1"};
+styleInject(css$1);
 
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
+/**
+ * Assert that the subject contains a `FitViewport` and, optionally, that
+ * it has a specific aspect ratio. Registered via
+ * {@link useContentElementMatchers}.
+ *
+ * The subject is a DOM element, e.g. the `container` returned by
+ * {@link renderInContentElement}. Negate with `.not` to assert that no
+ * `FitViewport` is present.
+ *
+ * @param {Object} [options]
+ * @param {string} [options.aspectRatio] -
+ *   Expected aspect ratio: a theme scale name (e.g. `'square'`) or a raw
+ *   ratio value (e.g. `'0.75'`).
+ *
+ * @example
+ * expect(container).toContainFitViewport();
+ * expect(container).toContainFitViewport({aspectRatio: 'square'});
+ */
+function toContainFitViewport(subject, {
+  aspectRatio
+} = {}) {
+  const container = getElement(subject).querySelector(`.${styles$1.container}`);
+  if (!container) {
+    return {
+      pass: false,
+      message: () => 'expected element to contain a FitViewport, but found none'
+    };
+  }
+  if (aspectRatio !== undefined) {
+    const actual = getAspectRatio(container);
+    if (actual !== aspectRatio) {
+      return {
+        pass: false,
+        message: () => `expected FitViewport to have aspect ratio ${JSON.stringify(aspectRatio)} ` + `(found ${JSON.stringify(actual)})`
+      };
     }
   }
+  return {
+    pass: true,
+    message: () => 'expected element not to contain a FitViewport'
+  };
+}
+function getAspectRatio(container) {
+  const cssValue = container.style.getPropertyValue('--fit-viewport-aspect-ratio');
+  const match = cssValue.match(/var\(--theme-aspect-ratio-(.+)\)/);
+  return match ? match[1] : cssValue;
+}
 
-  return target;
+/**
+ * Assert that all inputs rendered by a configuration editor are
+ * described by a configuration schema. Registered via
+ * {@link useConfigurationEditorMatchers}.
+ *
+ * The subject is a function that renders the configuration editor. Only
+ * inputs of the rendered form are seen. Views on nested routes render a
+ * form of their own and are checked against the part of the schema that
+ * describes the object they configure.
+ *
+ * @param {Object} schema - Configuration schema of the subject.
+ * @param {Object} [options]
+ * @param {Array<string>} [options.path] - Path of the configuration the
+ *   rendered form writes, if it is not the root. `*` stands for array
+ *   items and map values.
+ *
+ * @example
+ * expect(() => renderContentElementConfigurationEditor({entry, contentElement}))
+ *   .toRenderInputsMatching(require('./schema.json'));
+ *
+ * @example
+ * expect(() => renderBackboneView(new SidebarEditAreaView(options)))
+ *   .toRenderInputsMatching(require('../schema.json'), {path: ['areas', '*']});
+ */
+function toRenderInputsMatching(render, schema, {
+  path = []
+} = {}) {
+  const subschema = subschemaAt(schema, path);
+  if (!subschema) {
+    return {
+      pass: false,
+      message: () => `expected schema to describe configuration at ${path.join('/')}`
+    };
+  }
+  const inputs = recordInputs(render);
+  if (!inputs.length) {
+    return {
+      pass: false,
+      message: () => 'expected configuration editor to render inputs, but it rendered none'
+    };
+  }
+  const mismatches = inputs.flatMap(input => mismatchesOf(input, subschema));
+  return {
+    pass: mismatches.length === 0,
+    message: () => mismatches.length ? `expected rendered inputs to match schema:\n  ${mismatches.join('\n  ')}` : 'expected rendered inputs not to match schema'
+  };
+}
+function subschemaAt(schema, path) {
+  return path.reduce((current, segment) => dereference(child(current, segment), schema), dereference(schema, schema));
+}
+function child(schema, segment) {
+  var _schema$properties;
+  if (!schema) {
+    return undefined;
+  }
+  return segment === '*' ? schema.items || schema.additionalProperties : (_schema$properties = schema.properties) === null || _schema$properties === void 0 ? void 0 : _schema$properties[segment];
+}
+function dereference(schema, document) {
+  var _schema2;
+  const seen = [];
+  while (((_schema = schema) === null || _schema === void 0 ? void 0 : _schema.$ref) && !seen.includes(schema.$ref)) {
+    var _schema;
+    seen.push(schema.$ref);
+    schema = localTarget(document, schema.$ref);
+  }
+  return ((_schema2 = schema) === null || _schema2 === void 0 ? void 0 : _schema2.$ref) ? undefined : schema;
+}
+function localTarget(document, ref) {
+  const [otherDocumentId, pointer] = ref.split('#');
+  if (otherDocumentId) {
+    return undefined;
+  }
+  return pointer.split('/').filter(Boolean).reduce((value, segment) => value === null || value === void 0 ? void 0 : value[segment], document);
+}
+function recordInputs(render) {
+  const inputs = [];
+  const input = ConfigurationEditorTabView.prototype.input;
+  jest.spyOn(ConfigurationEditorTabView.prototype, 'input').mockImplementation(function (propertyName, view, options = {}) {
+    inputs.push({
+      propertyName,
+      view,
+      options
+    });
+    return input.call(this, propertyName, view, options);
+  });
+  try {
+    render();
+  } finally {
+    ConfigurationEditorTabView.prototype.input.mockRestore();
+  }
+  return inputs;
+}
+const checks = [fileCollectionMismatch];
+function mismatchesOf({
+  propertyName,
+  view,
+  options
+}, schema) {
+  const property = (schema.properties || {})[propertyName];
+  return checks.flatMap(check => check({
+    propertyName,
+    view,
+    options,
+    property
+  }) || []);
+}
+function fileCollectionMismatch({
+  propertyName,
+  view,
+  options,
+  property
+}) {
+  if (!isFileInput(view) || !options.collection) {
+    return;
+  }
+  const declared = property && property['x-fileCollection'];
+  if (declared !== options.collection) {
+    return `${propertyName}: expected x-fileCollection ${JSON.stringify(options.collection)}, ` + `found ${JSON.stringify(declared)}`;
+  }
+}
+function isFileInput(view) {
+  return view === FileInputView || view.prototype instanceof FileInputView;
+}
+
+/**
+ * Register the public content element matchers for the surrounding
+ * `describe` block: {@link toContainContentElementBox} and
+ * {@link toContainFitViewport}.
+ *
+ * Call inside a `describe` block. Content element plugins can use this to
+ * assert that their component opts into the framework chrome correctly.
+ *
+ * @example
+ * import {renderInContentElement, useContentElementMatchers} from 'pageflow-scrolled/testHelpers';
+ *
+ * describe('MyContentElement', () => {
+ *   useContentElementMatchers();
+ *
+ *   it('renders inside a box', () => {
+ *     const {container} = renderInContentElement(<MyContentElement />);
+ *     expect(container).toContainContentElementBox();
+ *   });
+ * });
+ */
+function useContentElementMatchers() {
+  beforeEach(() => {
+    expect.extend({
+      toContainContentElementBox,
+      toContainFitViewport
+    });
+  });
+}
+
+/**
+ * Register the configuration editor matchers for the surrounding
+ * `describe` block: {@link toRenderInputsMatching}.
+ *
+ * Call inside a `describe` block. Content element plugins can use this to
+ * assert that their configuration schema keeps up with their editor
+ * integration.
+ *
+ * @example
+ * import {
+ *   renderContentElementConfigurationEditor, useConfigurationEditorMatchers
+ * } from 'pageflow-scrolled/testHelpers';
+ *
+ * describe('myContentElement/editor', () => {
+ *   useConfigurationEditorMatchers();
+ *
+ *   it('renders inputs described by schema', () => {
+ *     expect(() => renderContentElementConfigurationEditor({entry, contentElement}))
+ *       .toRenderInputsMatching(schema);
+ *   });
+ * });
+ */
+function useConfigurationEditorMatchers() {
+  beforeEach(() => {
+    expect.extend({
+      toRenderInputsMatching
+    });
+  });
 }
 
 /**
@@ -65,81 +360,110 @@ function _objectSpread2(target) {
  * @param {Object} [options.legalInfo] - imprint, copyright and privacy information of entry.
  * @param {Object} [options.themeOptions] - Options set via theme registration.
  * @param {Object} [options.themeAssets] - Paths to theme assets.
+ * @param {Object} [options.themeTranslations] - Pre-merged theme translations (e.g., scales).
  * @param {Object} [options.additionalSeedData] - Seed data by name.
  * @param {Array} [options.consentVendors] - Server rendered consent vendor data.
  * @param {Object} [options.contentElementConsentVendors] - Consent vendor name by content element id.
  * @param {Object} [options.entry] - attributes of entry.
+ * @param {Object} [options.fileModelTypes] - Mapping of file collection names to model types.
+ *   Only needed to associate nested files with their parent. Collections of file types
+ *   registered by plugins get a placeholder model type.
+ * @param {Object} [options.fileUrlTemplates] - Mapping of file collection names to mappings of
+ *   url template names to url templates.
  * @param {Array} [options.imageFiles] - Array of objects with image file attributes of entry.
  * @param {Array} [options.videoFiles] - Array of objects with video file attributes of entry.
  * @param {Array} [options.audioFiles] - Array of objects with audio file attributes of entry.
  * @param {Array} [options.textTrackFiles] - Array of objects with text track file attributes of entry.
+ * @param {Array} [options.storylines] - Array of objects with storyline attributes of entry.
  * @param {Array} [options.chapters] - Array of objects with chapter attributes of entry.
  * @param {Array} [options.sections] - Array of objects with section attributes of entry.
  * @param {Array} [options.contentElements] - Array of objects with content element attributes of entry.
  * @param {Array} [options.widgets] - Array of objects with widget attributes of entry.
  * @returns {Object} - Data that resembles seed generated by server side rendering.
  */
-function normalizeSeed() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      imageFileUrlTemplates = _ref.imageFileUrlTemplates,
-      fileUrlTemplates = _ref.fileUrlTemplates,
-      fileModelTypes = _ref.fileModelTypes,
-      prettyUrl = _ref.prettyUrl,
-      shareUrlTemplates = _ref.shareUrlTemplates,
-      defaultFileRights = _ref.defaultFileRights,
-      legalInfo = _ref.legalInfo,
-      themeOptions = _ref.themeOptions,
-      themeAssets = _ref.themeAssets,
-      entry = _ref.entry,
-      imageFiles = _ref.imageFiles,
-      videoFiles = _ref.videoFiles,
-      audioFiles = _ref.audioFiles,
-      textTrackFiles = _ref.textTrackFiles,
-      chapters = _ref.chapters,
-      sections = _ref.sections,
-      contentElements = _ref.contentElements,
-      widgets = _ref.widgets,
-      additionalSeedData = _ref.additionalSeedData,
-      consentVendors = _ref.consentVendors,
-      contentElementConsentVendors = _ref.contentElementConsentVendors,
-      fileLicenses = _ref.fileLicenses;
-
-  var entries = entry ? [entry] : [{}];
-  var normalizedEntries = normalizeCollection(entries);
-  var normalizedContentElements = normalizeCollection(contentElements, {
+function normalizeSeed({
+  imageFileUrlTemplates,
+  fileUrlTemplates,
+  fileModelTypes,
+  prettyUrl,
+  shareUrlTemplates,
+  defaultFileRights,
+  legalInfo,
+  themeOptions,
+  themeAssets,
+  themeTranslations,
+  entry,
+  imageFiles,
+  videoFiles,
+  audioFiles,
+  textTrackFiles,
+  storylines,
+  chapters,
+  sections,
+  contentElements,
+  widgets,
+  additionalSeedData,
+  consentVendors,
+  contentElementConsentVendors,
+  cutOff,
+  embed,
+  originUrl,
+  fileLicenses,
+  entryTranslations,
+  fileReferenceLocations,
+  ...customFiles
+} = {}) {
+  const customFileCollectionNames = [...new Set([...Object.keys(customFiles).filter(name => name.endsWith('Files')), ...Object.keys(fileModelTypes || {})])].filter(name => !builtInFileCollectionNames.includes(name));
+  const entries = entry ? [entry] : [{}];
+  const normalizedEntries = normalizeCollection(entries, {
+    locale: 'en',
+    configuration: {}
+  });
+  const normalizedContentElements = normalizeCollection(contentElements, {
     typeName: 'textBlock',
     configuration: {}
   });
-  var normalizedSections = normalizeSections(sections, normalizedContentElements);
-  var normalizedChapters = normalizeChapters(chapters, normalizedSections);
+  const normalizedSections = normalizeSections(sections, normalizedContentElements);
+  const normalizedChapters = normalizeChapters(chapters, normalizedSections);
+  const normalizedStorylines = normalizeStorylines(storylines, normalizedChapters);
   return {
     config: {
-      fileUrlTemplates: _objectSpread2({
-        imageFiles: _objectSpread2({}, imageFileUrlTemplates),
+      fileUrlTemplates: {
+        imageFiles: {
+          ...imageFileUrlTemplates
+        },
         videoFiles: {},
         audioFiles: {},
-        textTrackFiles: {}
-      }, fileUrlTemplates),
-      fileModelTypes: _objectSpread2({
+        textTrackFiles: {},
+        ...emptyUrlTemplates(customFileCollectionNames),
+        ...fileUrlTemplates
+      },
+      fileModelTypes: {
         audioFiles: 'Pageflow::AudioFile',
         imageFiles: 'Pageflow::ImageFile',
         textTrackFiles: 'Pageflow::TextTrackFile',
-        videoFiles: 'Pageflow::VideoFile'
-      }, fileModelTypes),
+        videoFiles: 'Pageflow::VideoFile',
+        ...placeholderModelTypes(customFileCollectionNames),
+        ...fileModelTypes
+      },
       prettyUrl: prettyUrl,
       shareUrlTemplates: normalizeShareUrlTemplates(shareUrlTemplates),
       defaultFileRights: defaultFileRights,
       legalInfo: normalizeLegalInfo(legalInfo),
       theme: normalizeTheme({
-        themeOptions: themeOptions,
-        themeAssets: themeAssets
+        themeOptions,
+        themeAssets,
+        themeTranslations
       }),
-      additionalSeedData: additionalSeedData || {
-        frontendVersion: 1
-      },
+      additionalSeedData: additionalSeedData || {},
       consentVendors: consentVendors || [],
       contentElementConsentVendors: contentElementConsentVendors || {},
-      fileLicenses: fileLicenses || {}
+      cutOff,
+      embed,
+      originUrl,
+      fileLicenses: fileLicenses || {},
+      entryTranslations: entryTranslations || [],
+      fileReferenceLocations: normalizeFileReferenceLocations(fileReferenceLocations)
     },
     collections: {
       entries: normalizedEntries,
@@ -166,6 +490,8 @@ function normalizeSeed() {
         parentFileType: null,
         configuration: {}
       }),
+      ...customFileCollections(customFileCollectionNames, customFiles),
+      storylines: normalizedStorylines,
       chapters: normalizedChapters,
       sections: normalizedSections,
       contentElements: normalizedContentElements,
@@ -173,11 +499,25 @@ function normalizeSeed() {
     }
   };
 }
+const builtInFileCollectionNames = ['imageFiles', 'videoFiles', 'audioFiles', 'textTrackFiles'];
 
-function normalizeSections() {
-  var sections = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var contentElements = arguments.length > 1 ? arguments[1] : undefined;
-  var sectionDefaults = {
+// Model types are only compared to associate nested files with their
+// parent. Specs that seed nested files need to pass the real model type
+// via the fileModelTypes option.
+function placeholderModelTypes(collectionNames) {
+  return Object.fromEntries(collectionNames.map(name => [name, name.replace(/Files$/, 'File').replace(/^./, letter => letter.toUpperCase())]));
+}
+function emptyUrlTemplates(collectionNames) {
+  return Object.fromEntries(collectionNames.map(name => [name, {}]));
+}
+function customFileCollections(collectionNames, customFiles) {
+  return Object.fromEntries(collectionNames.map(name => [name, normalizeCollection(customFiles[name], {
+    isReady: true,
+    configuration: {}
+  })]));
+}
+function normalizeSections(sections = [], contentElements) {
+  const sectionDefaults = {
     configuration: {
       transition: 'scroll',
       backdrop: {
@@ -185,62 +525,66 @@ function normalizeSections() {
       }
     }
   };
-
   if (contentElements.length && !sections.length) {
-    contentElements.forEach(function (contentElement) {
-      return contentElement.sectionId = 10;
-    });
-    return [_objectSpread2({
+    contentElements.forEach(contentElement => contentElement.sectionId = 10);
+    return [{
       id: 10,
-      permaId: 1
-    }, sectionDefaults)];
+      permaId: 1,
+      ...sectionDefaults
+    }];
   }
-
-  return normalizeCollection(sections, sectionDefaults).map(function (section) {
-    return _objectSpread2(_objectSpread2({}, section), {}, {
-      configuration: _objectSpread2({
-        transition: sectionDefaults.configuration.transition
-      }, section.configuration)
-    });
-  });
+  return normalizeCollection(sections, sectionDefaults).map(section => ({
+    ...section,
+    configuration: {
+      transition: sectionDefaults.configuration.transition,
+      ...section.configuration
+    }
+  }));
 }
-
-function normalizeChapters() {
-  var chapters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var sections = arguments.length > 1 ? arguments[1] : undefined;
-  var chapterDefaults = {
+function normalizeChapters(chapters = [], sections) {
+  const chapterDefaults = {
     configuration: {}
   };
-
   if (sections.length && !chapters.length) {
-    sections.forEach(function (section) {
-      return section.chapterId = 100;
-    });
-    return [_objectSpread2({
+    sections.forEach(section => section.chapterId = 100);
+    return [{
       id: 100,
-      permaId: 10
-    }, chapterDefaults)];
+      permaId: 10,
+      ...chapterDefaults
+    }];
   }
-
   return normalizeCollection(chapters, chapterDefaults);
 }
-
+function normalizeStorylines(storylines = [], chapters) {
+  if (!storylines.length) {
+    chapters.forEach(chapter => chapter.storylineId = 1000);
+    return [{
+      id: 1000,
+      permaId: 100,
+      configuration: {
+        main: true
+      }
+    }];
+  }
+  return normalizeCollection(storylines, {
+    configuration: {}
+  });
+}
 function normalizeShareUrlTemplates(shareUrlTemplates) {
   if (shareUrlTemplates) {
     return shareUrlTemplates;
   } else {
     return {
-      email: 'mailto:?body=%{url}',
-      facebook: 'http://www.facebook.com/sharer/sharer.php?u=%{url}',
-      google: 'https://plus.google.com/share?url=%{url}',
-      linked_in: 'https://www.linkedin.com/shareArticle?mini=true&url=%{url}',
-      telegram: 'tg://msg?text=%{url}',
-      twitter: 'https://x.com/intent/post?url=%{url}',
-      whats_app: 'WhatsApp://send?text=%{url}'
+      email: 'mailto:?body=%<url>s',
+      facebook: 'http://www.facebook.com/sharer/sharer.php?u=%<url>s',
+      google: 'https://plus.google.com/share?url=%<url>s',
+      linked_in: 'https://www.linkedin.com/shareArticle?mini=true&url=%<url>s',
+      telegram: 'tg://msg?text=%<url>s',
+      twitter: 'https://x.com/intent/post?url=%<url>s',
+      whats_app: 'WhatsApp://send?text=%<url>s'
     };
   }
 }
-
 function normalizeLegalInfo(legalInfo) {
   if (legalInfo) {
     return legalInfo;
@@ -261,75 +605,76 @@ function normalizeLegalInfo(legalInfo) {
     };
   }
 }
-
-function normalizeTheme(_ref2) {
-  var themeAssets = _ref2.themeAssets,
-      themeOptions = _ref2.themeOptions;
+function normalizeTheme({
+  themeAssets,
+  themeOptions,
+  themeTranslations
+}) {
   return {
-    assets: _objectSpread2({
-      icons: {}
-    }, themeAssets),
-    options: _objectSpread2({
-      colors: {}
-    }, themeOptions)
+    assets: {
+      icons: {},
+      ...themeAssets
+    },
+    options: {
+      colors: {},
+      ...themeOptions
+    },
+    translations: themeTranslations
   };
 }
-
-function normalizeWidgets() {
-  var widgets = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return widgets.map(function (widget) {
-    return _objectSpread2({
-      permaId: widget.role,
-      configuration: {}
-    }, widget);
-  });
+function normalizeWidgets(widgets = []) {
+  return widgets.map(widget => ({
+    permaId: widget.role,
+    configuration: {},
+    ...widget
+  }));
 }
-
-function normalizeCollection() {
-  var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var defaults = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return collection.map(function (item, index) {
-    return _objectSpread2(_objectSpread2({
-      id: index + 1,
-      permaId: index + 1
-    }, defaults), item);
-  });
+function normalizeCollection(collection = [], defaults = {}) {
+  return collection.map((item, index) => ({
+    id: index + 1,
+    permaId: index + 1,
+    ...defaults,
+    ...item
+  }));
 }
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
+function normalizeFileReferenceLocations(fileReferenceLocations) {
+  return {
+    contentElements: {},
+    sections: [],
+    entry: [],
+    ...fileReferenceLocations
+  };
 }
 
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
+/**
+ * Render the configuration editor of a content element. Content element
+ * packs can use this to assert how their editor integration behaves.
+ *
+ * @param {Object} options
+ * @param {Object} options.entry - Entry the content element belongs to.
+ * @param {Object} options.contentElement - Content element to configure.
+ *
+ * @example
+ * import {renderContentElementConfigurationEditor} from 'pageflow-scrolled/testHelpers';
+ */
+function renderContentElementConfigurationEditor({
+  entry,
+  contentElement
+}) {
+  // Normally contributed by the text inline file rights widget type
+  // once the widgets of the entry have been set up.
+  ConfigurationEditorTabView.groups.define('ContentElementInlineFileRightsSettings', () => {});
+  const view = new EditContentElementView({
+    model: contentElement,
+    editor,
+    entry
+  });
+  renderBackboneView(view);
+  return ConfigurationEditor.find(view);
 }
 
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/testHelpers/rendering.js";
+
 /**
  * Render a component that depends on entry state. Accepts all options
  * supported by [`render` of
@@ -366,20 +711,18 @@ function _objectWithoutProperties(source, excluded) {
  *   function. The normalized seed constructed from the `seed` option
  *   is passed as a second parameter.
  */
-
-function renderInEntry(ui) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      seed = _ref.seed,
-      setup = _ref.setup,
-      wrapper = _ref.wrapper,
-      _ref$consent = _ref.consent,
-      consent = _ref$consent === void 0 ? Consent.create() : _ref$consent,
-      options = _objectWithoutProperties(_ref, ["seed", "setup", "wrapper", "consent"]);
-
-  options = _objectSpread2({
-    wrapper: createWrapper(seed, setup, wrapper, consent)
-  }, options);
-
+function renderInEntry(ui, {
+  seed,
+  setup,
+  wrapper,
+  consent = Consent.create(),
+  phonePlatform,
+  ...options
+} = {}) {
+  options = {
+    wrapper: createWrapper(seed, setup, wrapper, consent, phonePlatform),
+    ...options
+  };
   if (typeof ui === 'function') {
     // Evaluate `ui` inside a React component to allow using hooks in
     // the test. We also could have used `ui` as a React component
@@ -394,25 +737,39 @@ function renderInEntry(ui) {
     // render call and mount a new one. We therefore define a single
     // component that is reused across rerenders to ensure
     // `MyComponent` stays mounted and just receives new props.
-    var HooksWrapper = function HooksWrapper(_ref2) {
-      var ui = _ref2.ui;
+    function HooksWrapper({
+      ui
+    }) {
       return ui();
-    };
-
-    var result = render( /*#__PURE__*/React.createElement(HooksWrapper, {
-      ui: ui
+    }
+    const result = render( /*#__PURE__*/React.createElement(HooksWrapper, {
+      ui: ui,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 71,
+        columnNumber: 27
+      }
     }), options);
-    return _objectSpread2(_objectSpread2({}, result), {}, {
-      rerender: function rerender(ui) {
+    return {
+      ...result,
+      rerender(ui) {
         result.rerender( /*#__PURE__*/React.createElement(HooksWrapper, {
-          ui: ui
+          ui: ui,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 76,
+            columnNumber: 25
+          }
         }));
       }
-    });
+    };
   } else {
     return render(ui, options);
   }
 }
+
 /**
  * Render a hook that depends on entry state.  Accepts all options
  * supported by [`renderHook` of
@@ -426,45 +783,75 @@ function renderInEntry(ui) {
  * @param {Object} [options.seed] - Seed data for entry state. Passed through {@link normalizeSeed}.
  * @param {Function} [options.setup] - See {@link renderInEntry}.
  */
-
-function renderHookInEntry(callback) {
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      seed = _ref3.seed,
-      setup = _ref3.setup,
-      wrapper = _ref3.wrapper,
-      options = _objectWithoutProperties(_ref3, ["seed", "setup", "wrapper"]);
-
-  return renderHook(callback, _objectSpread2({
-    wrapper: createWrapper(seed, setup, wrapper)
-  }, options));
+function renderHookInEntry(callback, {
+  seed,
+  setup,
+  wrapper,
+  phonePlatform,
+  ...options
+} = {}) {
+  return renderHook(callback, {
+    wrapper: createWrapper(seed, setup, wrapper, undefined, phonePlatform),
+    ...options
+  });
 }
-
-function createWrapper(seed, setup, originalWrapper, consent) {
-  var normalizedSeed = normalizeSeed(seed);
-
-  var OriginalWrapper = originalWrapper || function Noop(_ref4) {
-    var children = _ref4.children;
+function createWrapper(seed, setup, originalWrapper, consent, phonePlatform) {
+  const normalizedSeed = normalizeSeed(seed);
+  const OriginalWrapper = originalWrapper || function Noop({
+    children
+  }) {
     return children;
   };
-
-  return function Wrapper(_ref5) {
-    var children = _ref5.children;
+  return function Wrapper({
+    children
+  }) {
+    let content = /*#__PURE__*/React.createElement(Dispatcher, {
+      callback: setup,
+      seed: normalizedSeed,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 112,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React.createElement(OriginalWrapper, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 113,
+        columnNumber: 9
+      }
+    }, children));
+    if (phonePlatform !== undefined) {
+      content = /*#__PURE__*/React.createElement(PhonePlatformContext.Provider, {
+        value: phonePlatform,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 121,
+          columnNumber: 9
+        }
+      }, content);
+    }
     return /*#__PURE__*/React.createElement(RootProviders, {
       seed: normalizedSeed,
-      consent: consent
-    }, /*#__PURE__*/React.createElement(Dispatcher, {
-      callback: setup,
-      seed: normalizedSeed
-    }, /*#__PURE__*/React.createElement(OriginalWrapper, null, children)));
+      consent: consent,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 128,
+        columnNumber: 7
+      }
+    }, content);
   };
 }
-
-function Dispatcher(_ref6) {
-  var children = _ref6.children,
-      seed = _ref6.seed,
-      callback = _ref6.callback;
-  var dispatch = useEntryStateDispatch();
-  useEffect(function () {
+function Dispatcher({
+  children,
+  seed,
+  callback
+}) {
+  const dispatch = useEntryStateDispatch();
+  useEffect(() => {
     if (callback) {
       callback(dispatch, seed);
     }
@@ -472,4 +859,330 @@ function Dispatcher(_ref6) {
   return children;
 }
 
-export { normalizeSeed, renderHookInEntry, renderInEntry };
+var _jsxFileName$1 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/testHelpers/scrollPositionLifecycle.js";
+
+/**
+ * Takes the same options as {@link renderInEntry} but returns
+ * additional helper function to the return value of the
+ * {@link `useContentElementLifecycle`} hook:
+ *
+ *     const {simulateScrollPosition} = renderInEntry(...)
+ *     simulateScrollPosition('near viewport')
+ *     // => Turns `shouldLoad` and `shouldPrepare` to true
+ */
+function renderInEntryWithContentElementLifecycle(ui, options) {
+  return renderInEntryWithScrollPositionLifecycle(ui, {
+    lifecycleContext: ContentElementLifecycleContext,
+    ...options
+  });
+}
+function renderInEntryWithScrollPositionLifecycle(ui, {
+  lifecycleContext,
+  wrapper,
+  ...options
+} = {}) {
+  const emitter = createEmitter();
+  return withSimulateScrollPositionHelper(emitter, renderInEntry(ui, {
+    wrapper: createScrollPositionProvider(lifecycleContext, emitter, wrapper),
+    ...options
+  }));
+}
+function createScrollPositionProvider(Context, emitter, originalWrapper) {
+  const OriginalWrapper = originalWrapper || function Noop({
+    children
+  }) {
+    return children;
+  };
+  return function ScrollPositionProvider({
+    children
+  }) {
+    const [value, setValue] = useState({
+      shouldLoad: false,
+      shouldPrepare: false,
+      isVisible: false,
+      isActive: false
+    });
+    useEffect(() => {
+      function handle(scrollPosition) {
+        switch (scrollPosition) {
+          case 'near viewport':
+            setValue({
+              shouldLoad: true,
+              shouldPrepare: true,
+              isVisible: false,
+              isActive: false
+            });
+            break;
+          case 'in viewport':
+            setValue({
+              shouldLoad: true,
+              shouldPrepare: true,
+              isVisible: true,
+              isActive: false
+            });
+            break;
+          case 'center of viewport':
+            setValue({
+              shouldLoad: true,
+              shouldPrepare: true,
+              isVisible: true,
+              isActive: true
+            });
+            break;
+          default:
+            setValue({
+              isVisible: false,
+              isActive: false
+            });
+            break;
+        }
+      }
+      emitter.on('scroll', handle);
+      return () => emitter.off('scroll', handle);
+    });
+    return /*#__PURE__*/React.createElement(OriginalWrapper, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 69,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React.createElement(Context.Provider, {
+      value: value,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 70,
+        columnNumber: 9
+      }
+    }, children));
+  };
+}
+const allowedScrollPositions = ['outside viewport', 'near viewport', 'in viewport', 'center of viewport'];
+function withSimulateScrollPositionHelper(emitter, result) {
+  return {
+    ...result,
+    simulateScrollPosition(scrollPosition) {
+      if (!allowedScrollPositions.includes(scrollPosition)) {
+        throw new Error(`Invalid scrollPosition '${scrollPosition}'. ` + `Allowed values: ${allowedScrollPositions.join(', ')}`);
+      }
+      act(() => {
+        emitter.trigger('scroll', scrollPosition);
+      });
+    }
+  };
+}
+function createEmitter() {
+  return {
+    ...BackboneEvents
+  };
+}
+
+var _jsxFileName$2 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/testHelpers/renderInContentElement.js";
+
+/**
+ * Provide context as if component was rendered inside of a content element.
+ *
+ * Returns additional functions to control content element scroll
+ * lifecycle, view timeline progress, editor commands, and storyline
+ * mode: `simulateScrollPosition`, `simulateScrollProgress`,
+ * `triggerEditorCommand`, and `simulateStorylineMode`.
+ *
+ * `simulateScrollProgress` passes the given progress to all
+ * `useContentElementViewTimelineProgress` callbacks, no matter which
+ * range they observe. Pass a `range` option to only invoke callbacks
+ * observing that range.
+ *
+ * @param {Function} callback - React component or function returning a React component.
+ * @param {Object} [options] - Supports all options supported by {@link `renderInEntry`}.
+ * @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.
+ *
+ * @example
+ *
+ * const {getByRole, simulateScrollPosition, triggerEditorCommand, simulateStorylineMode} =
+ *   renderInContentElement(<MyContentElement />, {
+ *     seed: {...},
+ *     inlineEditing: {isSelected: true}
+ *   });
+ * simulateScrollPosition('near viewport');
+ * simulateScrollProgress(0.5);
+ * simulateScrollProgress(0.5, {range: 'pinned'});
+ * triggerEditorCommand({type: 'HIGHLIGHT'});
+ * simulateStorylineMode('background');
+ */
+function renderInContentElement(ui, {
+  inlineEditing,
+  phonePlatform = false,
+  wrapper: OriginalWrapper,
+  consentState = 'accepted',
+  seed,
+  ...options
+} = {}) {
+  const emitter = Object.assign({}, BackboneEvents);
+  const storylineEmitter = Object.assign({}, BackboneEvents);
+  const viewTimelineEmitter = Object.assign({}, BackboneEvents);
+  const viewTimeline = {
+    subscribe(range, callback) {
+      function handleProgress(progress, options) {
+        if (!options.range || options.range === range) {
+          callback(progress);
+        }
+      }
+      viewTimelineEmitter.on('progress', handleProgress);
+      return () => viewTimelineEmitter.off('progress', handleProgress);
+    }
+  };
+  const inlineEditingConfig = resolveInlineEditing(inlineEditing);
+  function Wrapper({
+    children
+  }) {
+    const [storylineMode, setStorylineMode] = useState('active');
+    useEffect(() => {
+      storylineEmitter.on('storylineMode', setStorylineMode);
+      return () => storylineEmitter.off('storylineMode', setStorylineMode);
+    }, []);
+    let tree = OriginalWrapper ? /*#__PURE__*/React.createElement(OriginalWrapper, {
+      children: children,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 95,
+        columnNumber: 34
+      }
+    }) : children;
+    if (inlineEditingConfig) {
+      tree = /*#__PURE__*/React.createElement(DndProvider, {
+        backend: HTML5Backend,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 99,
+          columnNumber: 9
+        }
+      }, /*#__PURE__*/React.createElement(ContentElementEditorCommandEmitterContext.Provider, {
+        value: emitter,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 100,
+          columnNumber: 11
+        }
+      }, /*#__PURE__*/React.createElement(ContentElementEditorStateContext.Provider, {
+        value: inlineEditingConfig,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 101,
+          columnNumber: 13
+        }
+      }, tree)));
+    }
+    return /*#__PURE__*/React.createElement(MainStorylineActivity, {
+      activeExcursion: storylineMode !== 'active' ? {
+        id: 1
+      } : null,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 110,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React.createElement(ContentElementAttributesProvider, {
+      id: 42,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 111,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React.createElement(ContentElementViewTimelineContext.Provider, {
+      value: viewTimeline,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 112,
+        columnNumber: 11
+      }
+    }, tree)));
+  }
+  return {
+    ...renderInEntryWithScrollPositionLifecycle(ui, {
+      lifecycleContext: ContentElementLifecycleContext,
+      wrapper: Wrapper,
+      consent: createConsent(consentState),
+      phonePlatform,
+      seed: {
+        ...consentSeed,
+        ...seed
+      },
+      ...options
+    }),
+    triggerEditorCommand(command) {
+      act(() => {
+        emitter.trigger(`command:42`, command);
+      });
+    },
+    simulateStorylineMode(mode) {
+      act(() => {
+        storylineEmitter.trigger('storylineMode', mode);
+      });
+    },
+    simulateScrollProgress(progress, {
+      range
+    } = {}) {
+      act(() => {
+        viewTimelineEmitter.trigger('progress', progress, {
+          range
+        });
+      });
+    }
+  };
+}
+function resolveInlineEditing(option) {
+  var _overrides$isEditable, _overrides$isSelected, _overrides$transientS;
+  if (!option) return null;
+  const overrides = option === true ? {} : option;
+  return {
+    isEditable: (_overrides$isEditable = overrides.isEditable) !== null && _overrides$isEditable !== void 0 ? _overrides$isEditable : true,
+    isSelected: (_overrides$isSelected = overrides.isSelected) !== null && _overrides$isSelected !== void 0 ? _overrides$isSelected : false,
+    setTransientState: (_overrides$transientS = overrides.transientState) !== null && _overrides$transientS !== void 0 ? _overrides$transientS : () => {},
+    select: () => {},
+    selectNewThread: () => {}
+  };
+}
+function createConsent(consentState) {
+  const consent = Consent.create();
+  consent.registerVendor('testVendor', {
+    displayName: 'Test Vendor',
+    description: 'Test embeds',
+    paradigm: 'lazy opt-in'
+  });
+  consent.closeVendorRegistration();
+  if (consentState === 'accepted') {
+    consent.accept('testVendor');
+  }
+  return consent;
+}
+const consentSeed = {
+  consentVendors: [{
+    name: 'testVendor',
+    paradigm: 'lazy opt-in'
+  }],
+  contentElementConsentVendors: {
+    42: 'testVendor'
+  }
+};
+
+export { normalizeSeed, renderContentElementConfigurationEditor, renderHookInEntry, renderInContentElement, renderInEntry, renderInEntryWithContentElementLifecycle, renderInEntryWithScrollPositionLifecycle, useConfigurationEditorMatchers, useContentElementMatchers };