pageflow 15.1.1 → 15.3.0

data/{packages/pageflow → package}/package.json

@@ -13,6 +13,7 @@
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jest": "^23.0.4",
     "jest": "^24.9.0",
+    "jest-css-modules-processor": "^0.0.9",
     "jest-jquery-matchers": "^2.1.0",
     "jest-sinon": "^1.0.0",
     "sinon": "^7.5.0"
@@ -22,6 +23,9 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "core-js": "^3.4.1"
+    "backbone-events-standalone": "^0.2.7",
+    "classlist.js": "^1.1.20150312",
+    "core-js": "^3.4.1",
+    "i18n-js": "^3.5.1"
   }
 }

data/package/testHelpers.js

@@ -0,0 +1,732 @@
+import $ from 'jquery';
+import _ from 'underscore';
+import { Object as Object$1 } from 'pageflow/ui';
+import Backbone from 'backbone';
+import { Entry, Theme, FileTypes, FilesCollection, SubsetCollection, ImageFile, WidgetTypes, EditorApi, VideoFile, TextTrackFile } from 'pageflow/editor';
+import I18n from 'i18n-js';
+
+var Base = Object$1.extend({
+  initialize: function initialize($el) {
+    this.$el = $el;
+  }
+});
+
+Base.classMethods = function (Constructor) {
+  return {
+    find: function find(viewOrParentElement) {
+      var selector = Constructor.prototype.selector;
+      var parentElement = viewOrParentElement.$el || viewOrParentElement;
+      var element = parentElement.find(selector);
+
+      if (element.length > 1) {
+        throw new Error('Selector "' + selector + '" matches multiple elements in view. Expected only one');
+      }
+
+      if (element.length === 0) {
+        throw new Error('Selector "' + selector + '" did not match any elements in view.');
+      }
+
+      return new Constructor(element);
+    },
+    findAll: function findAll(viewOrParentElement) {
+      var selector = Constructor.prototype.selector;
+      var parentElement = viewOrParentElement.$el || viewOrParentElement;
+      var elements = parentElement.find(selector);
+      return elements.map(function () {
+        return new Constructor($(this));
+      }).get();
+    },
+    findBy: function findBy(predicate, options) {
+      var predicateString = options.predicateName ? ' filtered by ' + options.predicateName : '';
+      var selector = Constructor.prototype.selector;
+      var selectorString = 'Selector "' + selector + '"' + predicateString;
+      var elements = options.inView.$el.find(selector);
+      var element = elements.filter(function () {
+        return predicate($(this));
+      });
+
+      if (element.length > 1) {
+        throw new Error(selectorString + ' matches multiple elements in view. Expected only one');
+      }
+
+      if (element.length === 0) {
+        throw new Error(selectorString + ' did not match any elements in view.');
+      }
+
+      return new Constructor(element);
+    },
+    render: function render(view, options) {
+      view.render();
+
+      if (options && options.appendTo) {
+        options.appendTo.append(view.$el);
+      }
+
+      return new Constructor(view.$el);
+    }
+  };
+};
+
+Base.extend = function ()
+/* arguments */
+{
+  var result = Object$1.extend.apply(this, arguments);
+
+  _.extend(result, Base.classMethods(result));
+
+  return result;
+};
+
+var DropDownButton = Base.extend({
+  selector: '.drop_down_button',
+  menuItemNames: function menuItemNames() {
+    return this.$el.find('li').map(function () {
+      return $(this).data('name');
+    }).get();
+  },
+  menuItemLabels: function menuItemLabels() {
+    return this.$el.find('li a').map(function () {
+      return $(this).text();
+    }).get();
+  },
+  selectMenuItemByName: function selectMenuItemByName(name) {
+    var menuItem = this.$el.find('li').filter(function () {
+      return $(this).data('name') == name;
+    });
+
+    if (!menuItem.length) {
+      throw new Error('Could not find menu item with name "' + name + '"');
+    }
+
+    menuItem.find('a').trigger('click');
+  },
+  selectMenuItemByLabel: function selectMenuItemByLabel(label) {
+    var menuItemLink = this.$el.find('li a').filter(function () {
+      return $(this).text() == label;
+    });
+
+    if (!menuItemLink.length) {
+      throw new Error('Could not find menu item with label "' + label + '"');
+    }
+
+    menuItemLink.trigger('click');
+  }
+});
+
+var FileMetaDataTable = Base.extend({
+  selector: '.file_meta_data table',
+  values: function values() {
+    return this.$el.find('.value').map(function () {
+      return $(this).text();
+    }).get();
+  }
+});
+
+var FileStageItem = Base.extend({
+  selector: '.file_stage_item'
+});
+
+var FileThumbnail = Base.extend({
+  selector: '.file_thumbnail',
+  backgroundImage: function backgroundImage() {
+    return this.$el.css('backgroundImage');
+  }
+});
+
+var ReferenceInput = Base.extend({
+  clickChooseButton: function clickChooseButton() {
+    this.$el.find('.choose').trigger('click');
+  }
+});
+
+var StaticThumbnail = Base.extend({
+  selector: '.static_thumbnail',
+  backgroundImage: function backgroundImage() {
+    return this.$el.css('backgroundImage');
+  }
+});
+
+var ThemeItem = Base.extend({
+  selector: '.theme_item',
+  hover: function hover() {
+    this.$el.trigger('mouseenter');
+  },
+  click: function click() {
+    this.$el.trigger('click');
+  },
+  clickUseButton: function clickUseButton() {
+    this.$el.find('.use_theme').trigger('click');
+  }
+});
+
+ThemeItem.findByName = function (themeName, options) {
+  return this.findBy(function ($el) {
+    return $el.data('themeName') === themeName;
+  }, _.extend({
+    predicateName: 'theme name ' + themeName
+  }, options));
+};
+
+var ConfigurationEditorTab = Base.extend({
+  selector: '.configuration_editor_tab',
+  inputPropertyNames: function inputPropertyNames() {
+    return this.$el.find('.input').map(function () {
+      return $(this).data('inputPropertyName');
+    }).get();
+  },
+  inputLabels: function inputLabels() {
+    return this.$el.find('.input').map(function () {
+      return $(this).data('labelText');
+    }).get();
+  },
+  inlineHelpTexts: function inlineHelpTexts() {
+    return this.$el.find('.input').map(function () {
+      return $(this).data('inlineHelpText');
+    }).get();
+  }
+});
+
+var Tabs = Base.extend({
+  selector: '.tabs_view',
+  tabNames: function tabNames() {
+    return this.$el.find('[data-tab-name]').map(function () {
+      return $(this).data('tabName');
+    }).get();
+  },
+  tabLabels: function tabLabels() {
+    return this.$el.find('[data-tab-name]').map(function () {
+      return $(this).text();
+    }).get();
+  }
+});
+
+var ConfigurationEditor = Base.extend({
+  selector: '.configuration_editor',
+  tabNames: function tabNames() {
+    return Tabs.find(this.$el).tabNames();
+  },
+  tabLabels: function tabLabels() {
+    return Tabs.find(this.$el).tabLabels();
+  },
+  inputPropertyNames: function inputPropertyNames() {
+    return ConfigurationEditorTab.find(this.$el).inputPropertyNames();
+  },
+  inputLabels: function inputLabels() {
+    return ConfigurationEditorTab.find(this.$el).inputLabels();
+  },
+  inlineHelpTexts: function inlineHelpTexts() {
+    return ConfigurationEditorTab.find(this.$el).inlineHelpTexts();
+  }
+});
+
+var Table = Base.extend({
+  selector: '.table_view',
+  columnNames: function columnNames() {
+    return this.$el.find('th').map(function () {
+      return $(this).data('columnName');
+    }).get();
+  }
+});
+
+var ColorInput = Base.extend({
+  value: function value() {
+    return this._input().val();
+  },
+  fillIn: function fillIn(value, clock) {
+    this._input().val(value);
+
+    this._input().trigger('keyup');
+
+    clock.tick(500);
+  },
+  swatches: function swatches() {
+    return this.$el.find('.minicolors-swatches span').map(function () {
+      return window.getComputedStyle(this)['background-color'];
+    }).get();
+  },
+  _input: function _input() {
+    return this.$el.find('input');
+  }
+});
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  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);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    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));
+      });
+    }
+  }
+
+  return target;
+}
+
+var Base$1 = Base.extend({
+  selector: '.input'
+});
+
+Base$1.findByPropertyName = function (propertyName, options) {
+  return this.findBy(function (el) {
+    return el.data('inputPropertyName') === propertyName;
+  }, _objectSpread2({
+    predicateName: "input property name '".concat(propertyName, "'")
+  }, options));
+};
+
+var RadioButtonGroupInput = Base$1.extend({
+  values: function values() {
+    return this.$el.find('input').map(function () {
+      return $(this).attr('value');
+    }).get();
+  },
+  enabledValues: function enabledValues() {
+    return this.$el.find('input:not([disabled])').map(function () {
+      return $(this).attr('value');
+    }).get();
+  }
+});
+
+var SelectInput = Base$1.extend({
+  value: function value() {
+    return this.$el.find('select').val();
+  },
+  values: function values() {
+    return this.$el.find('option').map(function () {
+      return $(this).attr('value');
+    }).get();
+  },
+  enabledValues: function enabledValues() {
+    return this.$el.find('option:not([disabled])').map(function () {
+      return $(this).attr('value');
+    }).get();
+  }
+});
+
+/**
+ * Build editor Backbone models for tests.
+ */
+
+var factories = {
+  /**
+   * Build an entry model.
+   *
+   * @param {Function} model - Entry type specific entry model
+   * @param {Object} [attributes] - Model attributes
+   * @param {Object} [options]
+   * @param {Object} [options.entryTypeSeed] - Seed data passed to `Entry#setupFromEntryTypeSeed`.
+   * @param {FileTypes} [options.fileTypes] - Use {@link #factoriesfiletypes factories.fileTypes} to construct this object.
+   * @param {Object} [options.filesAttributes] - An object mapping (underscored) file collection names to arrays of file attributes.
+   * @returns {Entry} - An entry Backbone model.
+   *
+   * @example
+   *
+   * import {factories} from 'pageflow/testHelpers';
+   * import {PagedEntry} from 'editor/models/PagedEntry';
+   *
+   * const entry = factories.entry(PagedEntry, {slug: 'some-entry'}, {
+   *   entryTypeSeed: {some: 'data'},
+   *   fileTypes: factories.fileTypes(f => f.withImageFileType()),
+   *   filesAttributes: {
+   *     image_files: [{id: 100, perma_id: 1, basename: 'image'}]
+   *   }
+   * });
+   */
+  entry: function entry(model, attributes) {
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+    if (typeof model !== 'function') {
+      return factories.entry(Entry, model, attributes);
+    }
+
+    ensureFileTypes(options);
+    ensureFilesCollections(options);
+    var entry = new model(_objectSpread2({
+      id: 1
+    }, attributes), _.extend({
+      storylines: new Backbone.Collection(),
+      chapters: new Backbone.Collection()
+    }, options));
+
+    if (entry.setupFromEntryTypeSeed && options.entryTypeSeed) {
+      entry.setupFromEntryTypeSeed(options.entryTypeSeed);
+    }
+
+    return entry;
+  },
+  theme: function theme(attributes, options) {
+    return new Theme(attributes, options);
+  },
+
+  /**
+   * Construct a file type registry that can be passed to {@link
+   * #factoriesentry factories.entry}.
+   *
+   * The passed function receives a builder object with the following
+   * methods that register a corresponding file type:
+   *
+   * - `withImageFileType([options])`: Registers a file type with collection name `image_files`.
+   * - `withVideoFileType([options])`: Registers a file type with collection name `video_files`.
+   * - `withTextTrackFileType([options])`: Registers a file type with collection name `text_track_files`.
+   *
+   * @param {Function} fn - Build function.
+   * @returns {FileTypes} - A file Type registry
+   */
+  fileTypes: function fileTypes(fn) {
+    var fileTypes = new FileTypes();
+    var fileTypesSetupArray = [];
+    var builder = {
+      withImageFileType: function withImageFileType(options) {
+        fileTypes.register('image_files', _.extend({
+          model: ImageFile,
+          matchUpload: /^image/,
+          topLevelType: true
+        }, options));
+        fileTypesSetupArray.push({
+          collectionName: 'image_files',
+          typeName: 'Pageflow::ImageFile',
+          i18nKey: 'pageflow/image_files'
+        });
+        return this;
+      },
+      withVideoFileType: function withVideoFileType(options) {
+        fileTypes.register('video_files', _.extend({
+          model: VideoFile,
+          matchUpload: /^video/,
+          topLevelType: true
+        }, options));
+        fileTypesSetupArray.push({
+          collectionName: 'video_files',
+          typeName: 'Pageflow::VideoFile',
+          i18nKey: 'pageflow/video_files',
+          nestedFileTypes: [{
+            collectionName: 'text_track_files'
+          }]
+        });
+        return this;
+      },
+      withTextTrackFileType: function withTextTrackFileType(options) {
+        fileTypes.register('text_track_files', _.extend({
+          model: TextTrackFile,
+          matchUpload: /vtt$/
+        }, options));
+        fileTypesSetupArray.push({
+          collectionName: 'text_track_files',
+          typeName: 'Pageflow::TextTrackFile',
+          i18nKey: 'pageflow/text_track_files'
+        });
+        return this;
+      }
+    };
+    fn.call(builder, builder);
+    fileTypes.setup(fileTypesSetupArray);
+    return fileTypes;
+  },
+
+  /**
+  * Shorthand for calling {@link #factoriesfiletypes
+  * factories.fileTypes} with a builder function that calls
+  * `withImageFileType`.
+  *
+  * @param {Object} options - File type options passed to withImageFileType,
+  * @returns {FileTypes} - A file Type registry.
+  */
+  fileTypesWithImageFileType: function fileTypesWithImageFileType(options) {
+    return this.fileTypes(function () {
+      this.withImageFileType(options);
+    });
+  },
+  imageFileType: function imageFileType(options) {
+    return factories.fileTypesWithImageFileType(options).first();
+  },
+  fileType: function fileType(options) {
+    return factories.imageFileType(options);
+  },
+  filesCollection: function filesCollection(options) {
+    return FilesCollection.createForFileType(options.fileType, [{}, {}]);
+  },
+  nestedFilesCollection: function nestedFilesCollection(options) {
+    return new SubsetCollection({
+      parentModel: factories.file({
+        file_name: options.parentFileName
+      }),
+      filter: function filter() {
+        return true;
+      },
+      parent: factories.filesCollection({
+        fileType: options.fileType
+      })
+    });
+  },
+  videoFileWithTextTrackFiles: function videoFileWithTextTrackFiles(options) {
+    var fileTypes = this.fileTypes(function () {
+      this.withVideoFileType(options.videoFileTypeOptions);
+      this.withTextTrackFileType(options.textTrackFileTypeOptions);
+    });
+    var fileAttributes = {
+      video_files: [_.extend({
+        id: 1,
+        state: 'encoded'
+      }, options.videoFileAttributes)],
+      text_track_files: _.map(options.textTrackFilesAttributes, function (attributes) {
+        return _.extend({
+          parent_file_id: 1,
+          parent_file_model_type: 'Pageflow::VideoFile'
+        }, attributes);
+      })
+    };
+    var entry = factories.entry({}, {
+      files: FilesCollection.createForFileTypes(fileTypes, fileAttributes || {}),
+      fileTypes: fileTypes
+    });
+    var videoFiles = entry.getFileCollection(fileTypes.findByCollectionName('video_files'));
+    var textTrackFiles = entry.getFileCollection(fileTypes.findByCollectionName('text_track_files'));
+    return {
+      entry: entry,
+      videoFile: videoFiles.first(),
+      videoFiles: videoFiles,
+      textTrackFiles: textTrackFiles
+    };
+  },
+  imageFilesFixture: function imageFilesFixture(options) {
+    var fileTypes = this.fileTypes(function () {
+      this.withImageFileType(options.fileTypeOptions);
+    });
+    var fileAttributes = {
+      image_files: [_.extend({
+        id: 1,
+        state: 'processed'
+      }, options.imageFileAttributes)]
+    };
+    var entry = factories.entry({}, {
+      files: FilesCollection.createForFileTypes(fileTypes, fileAttributes || {}),
+      fileTypes: fileTypes
+    });
+    var imageFiles = entry.getFileCollection(fileTypes.findByCollectionName('image_files'));
+    return {
+      entry: entry,
+      imageFile: imageFiles.first(),
+      imageFiles: imageFiles
+    };
+  },
+  imageFile: function imageFile(attributes, options) {
+    return new ImageFile(attributes, _.extend({
+      fileType: this.imageFileType()
+    }, options));
+  },
+  file: function file(attributes, options) {
+    return this.imageFile(attributes, options);
+  },
+  widgetTypes: function widgetTypes(attributesList, beforeSetup) {
+    var widgetTypes = new WidgetTypes();
+    var attributesListsByRole = {};
+
+    _(attributesList).each(function (attributes) {
+      attributesListsByRole[attributes.role] = attributesListsByRole[attributes.role] || [];
+      attributesListsByRole[attributes.role].push(_.extend({
+        translationKey: 'widget_name.' + attributes.name
+      }, attributes));
+    });
+
+    if (beforeSetup) {
+      beforeSetup(widgetTypes);
+    }
+
+    widgetTypes.setup(attributesListsByRole);
+    return widgetTypes;
+  },
+  editorApi: function editorApi(beforeSetup) {
+    var api = new EditorApi({
+      router: {
+        navigate: function navigate(path, _ref) {
+          var trigger = _ref.trigger;
+
+          if (trigger) {
+            api.trigger('navigate', path);
+          }
+        }
+      }
+    });
+
+    if (beforeSetup) {
+      beforeSetup(api);
+    }
+
+    api.pageTypes.setup(_.map(api.pageTypes.clientSideConfigs, function (config, name) {
+      return {
+        name: name,
+        translation_key_prefix: 'pageflow.' + name,
+        translation_key: 'pageflow.' + name + '.name',
+        category_translation_key: 'pageflow.' + name + '.category',
+        description_translation_key: 'pageflow.' + name + '.description'
+      };
+    }));
+    return api;
+  }
+};
+
+function ensureFileTypes(options) {
+  if (!options.fileTypes) {
+    options.fileTypes = new FileTypes();
+    options.fileTypes.setup([]);
+  }
+}
+
+function ensureFilesCollections(options) {
+  if (!options.files) {
+    options.files = FilesCollection.createForFileTypes(options.fileTypes, options.filesAttributes);
+  }
+}
+
+var state = window.pageflow || {};
+
+/**
+ * Setup global state for testing Backbone editro components.
+ *
+ * For some editor components like (some views or models) it's easier
+ * to depend on the global mutable state (available via the `$state`
+ * module alias) instead of injecting dependencies. This helper can be
+ * used to test these components in isolation.
+ *
+ * @param {Object} mapping -
+ *   Properties to set on the global state. Functions as values will
+ *   be evaluated and the return value will be assigned instead.
+ */
+
+var setupGlobals = function setupGlobals(mapping) {
+  var globalsBackup;
+  beforeEach(function () {
+    if (globalsBackup) {
+      throw new Error('There can only be one setupGlobals call per test.');
+    }
+
+    globalsBackup = {};
+
+    _.each(mapping, function (value, key) {
+      globalsBackup[key] = state[key];
+      state[key] = typeof value === 'function' ? value.call(this) : value;
+    });
+  });
+  afterEach(function () {
+    _.each(mapping, function (_, key) {
+      state[key] = globalsBackup[key];
+    });
+
+    globalsBackup = null;
+  });
+};
+
+/**
+ * Define translations to use in tests.
+ *
+ * @param {Object} translations -
+ *   A mapping of either the form `(translation key => translated
+ *   text)`.  Translation keys can contains dots.
+ * @param {Object} [options]
+ * @param {boolean} [options.multiLocale] -
+ *   Set to `true` if keys include the locale name.
+ *
+ * @example
+ * import {useFakeTranslations} from 'pageflow/testHelpers';
+ * import I18n from 'i18n-js';
+ *
+ * describe('...', () => {
+ *   useFakeTranslations({
+ *     'some.key': 'some translation'
+ *   });
+ *
+ *   it('...', () => {
+ *     I18n.t('some.key') // => 'some translation'
+ *   });
+ * });
+ *
+ * @example
+ * import {useFakeTranslations} from 'pageflow/testHelpers';
+ * import I18n from 'i18n-js';
+ *
+ * describe('...', () => {
+ *   useFakeTranslations({
+ *     'en.some.key': 'some text',
+ *     'de.some.key': 'etwas Text'
+ *   }, {multiLocale: true});
+ *
+ *   it('...', () => {
+ *     I18n.locale = 'de';
+ *     I18n.t('some.key') // => 'etwas Text'
+ *   });
+ * });
+ */
+
+function useFakeTranslations(translations) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      multiLocale = _ref.multiLocale;
+
+  var originalTranslations;
+  beforeEach(function () {
+    originalTranslations = I18n.translations;
+
+    if (multiLocale) {
+      I18n.translations = keysWithDotsToNestedObjects(translations);
+    } else {
+      I18n.translations = {
+        en: keysWithDotsToNestedObjects(translations)
+      };
+    }
+  });
+  afterEach(function () {
+    I18n.translations = originalTranslations;
+  });
+}
+
+function keysWithDotsToNestedObjects(translations) {
+  return _(translations).reduce(function (result, value, key) {
+    var keys = key.split('.');
+    var last = keys.pop();
+
+    var inner = _(keys).reduce(function (r, key) {
+      r[key] = r[key] || {};
+      return r[key];
+    }, result);
+
+    inner[last] = value;
+    return result;
+  }, {});
+}
+
+export { ColorInput, ConfigurationEditor, ConfigurationEditorTab, DropDownButton, FileMetaDataTable, FileStageItem, FileThumbnail, RadioButtonGroupInput, ReferenceInput, SelectInput, StaticThumbnail, Table, Tabs, ThemeItem, factories, setupGlobals, useFakeTranslations };