creevey/lib/client/addon/Manager.js

Cross-browser screenshot testing tool for Storybook with fancy UI Runner

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CreeveyManager = void 0;

var _coreEvents = require("@storybook/core-events");

var _types = require("../../types");

var _creeveyClientApi = require("../shared/creeveyClientApi");

var _helpers = require("../shared/helpers");

var _register = require("./register");

var _utils = require("./utils");

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

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

var CreeveyManager = /*#__PURE__*/function () {
  function CreeveyManager(storybookApi) {
    var _this = this;

    _classCallCheck(this, CreeveyManager);

    _defineProperty(this, "storyId", '');

    _defineProperty(this, "activeBrowser", '');

    _defineProperty(this, "selectedTestId", '');

    _defineProperty(this, "status", {
      isRunning: false,
      tests: {},
      browsers: []
    });

    _defineProperty(this, "creeveyApi", null);

    _defineProperty(this, "stories", {});

    _defineProperty(this, "updateStatusListeners", []);

    _defineProperty(this, "changeTestListeners", []);

    _defineProperty(this, "initAll", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
      return regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _this.storybookApi.on(_coreEvents.STORY_RENDERED, _this.onStoryRendered);

              _this.storybookApi.on(_coreEvents.SET_STORIES, _this.onSetStories);

              _context.next = 4;
              return (0, _creeveyClientApi.initCreeveyClientApi)();

            case 4:
              _this.creeveyApi = _context.sent;

              _this.creeveyApi.onUpdate(_this.handleCreeveyUpdate);

              _context.next = 8;
              return _this.creeveyApi.status;

            case 8:
              _this.status = _context.sent;

            case 9:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    })));

    _defineProperty(this, "handleCreeveyUpdate", function (update) {
      var tests = update.tests,
          _update$removedTests = update.removedTests,
          removedTests = _update$removedTests === void 0 ? [] : _update$removedTests,
          isRunning = update.isRunning;

      if ((0, _types.isDefined)(isRunning)) {
        _this.status.isRunning = isRunning;
      }

      if ((0, _types.isDefined)(tests)) {
        var prevTests = _this.status.tests;
        var prevStories = _this.stories || {};
        Object.values(tests).filter(_types.isDefined).forEach(function (update) {
          var _test$results;

          var id = update.id,
              skip = update.skip,
              status = update.status,
              results = update.results,
              approved = update.approved,
              storyId = update.storyId;
          var test = prevTests[id];

          if (!test) {
            return prevTests[id] = update;
          }

          if ((0, _types.isDefined)(skip)) test.skip = skip;

          if ((0, _types.isDefined)(status)) {
            test.status = status;

            if ((0, _types.isDefined)(storyId) && (0, _types.isDefined)(prevStories[storyId])) {
              var story = prevStories[storyId];

              var storyStatus = _this.getStoryTests(storyId);

              var oldStatus = storyStatus.map(function (x) {
                return x.id === id ? status : x.status;
              }).reduce(function (oldStatus, newStatus) {
                return (0, _helpers.calcStatus)(oldStatus, newStatus);
              }, undefined);
              story.name = _this.addStatusToStoryName(story.name, (0, _helpers.calcStatus)(oldStatus, status), skip || false);
            }
          }

          if ((0, _types.isDefined)(results)) test.results ? (_test$results = test.results).push.apply(_test$results, _toConsumableArray(results)) : test.results = results;

          if ((0, _types.isDefined)(approved)) {
            Object.entries(approved).forEach(function (_ref2) {
              var _ref3 = _slicedToArray(_ref2, 2),
                  image = _ref3[0],
                  retry = _ref3[1];

              return retry !== undefined && test && ((test.approved = (test === null || test === void 0 ? void 0 : test.approved) || {})[image] = retry);
            });
          }
        });
        removedTests.forEach(function (_ref4) {
          var id = _ref4.id;
          return delete prevTests[id];
        });
        _this.status.tests = prevTests;
        _this.stories = prevStories;

        _this.setPanelsTitle();

        void _this.storybookApi.setStories(_this.stories);
      }

      _this.updateStatusListeners.forEach(function (x) {
        return x(update);
      });
    });

    _defineProperty(this, "getCurrentTest", function () {
      return _this.status.tests[_this.selectedTestId];
    });

    _defineProperty(this, "onStoryRendered", function (storyId) {
      if (_this.storyId === '') void _this.addStatusesToSideBar();

      if (_this.storyId !== storyId) {
        var _this$getTestsByStory, _this$getTestsByStory2;

        _this.storyId = storyId;
        _this.selectedTestId = (_this$getTestsByStory = (_this$getTestsByStory2 = _this.getTestsByStoryIdAndBrowser(_this.activeBrowser)[0]) === null || _this$getTestsByStory2 === void 0 ? void 0 : _this$getTestsByStory2.id) !== null && _this$getTestsByStory !== void 0 ? _this$getTestsByStory : '';

        _this.setPanelsTitle();

        _this.changeTestListeners.forEach(function (x) {
          return x(_this.selectedTestId);
        });
      }
    });

    _defineProperty(this, "onStart", function () {
      var _this$creeveyApi;

      (_this$creeveyApi = _this.creeveyApi) === null || _this$creeveyApi === void 0 ? void 0 : _this$creeveyApi.start([_this.selectedTestId]);
    });

    _defineProperty(this, "onStop", function () {
      var _this$creeveyApi2;

      (_this$creeveyApi2 = _this.creeveyApi) === null || _this$creeveyApi2 === void 0 ? void 0 : _this$creeveyApi2.stop();
    });

    _defineProperty(this, "onImageApprove", function (id, retry, image) {
      var _this$creeveyApi3;

      return (_this$creeveyApi3 = _this.creeveyApi) === null || _this$creeveyApi3 === void 0 ? void 0 : _this$creeveyApi3.approve(id, retry, image);
    });

    _defineProperty(this, "onStartAllStoryTests", function () {
      var _this$creeveyApi4;

      var ids = Object.values(_this.status.tests).filter(_types.isDefined).filter(function (x) {
        return x.storyId === _this.storyId;
      }).map(function (x) {
        return x.id;
      });
      (_this$creeveyApi4 = _this.creeveyApi) === null || _this$creeveyApi4 === void 0 ? void 0 : _this$creeveyApi4.start(ids);
    });

    _defineProperty(this, "onStartAllTests", function () {
      var _this$creeveyApi5;

      var ids = Object.values(_this.status.tests).filter(_types.isDefined).map(function (x) {
        return x.id;
      });
      (_this$creeveyApi5 = _this.creeveyApi) === null || _this$creeveyApi5 === void 0 ? void 0 : _this$creeveyApi5.start(ids);
    });

    _defineProperty(this, "onSetStories", function (data) {
      // TODO: Send PR to storybook to fix this
      var stories = data.v ? (0, _utils.denormalizeStoryParameters)(data) : data;
      _this.stories = stories;
    });

    _defineProperty(this, "setActiveBrowser", function (browser) {
      var _this$getTestsByStory3, _this$getTestsByStory4;

      _this.activeBrowser = browser;
      _this.selectedTestId = (_this$getTestsByStory3 = (_this$getTestsByStory4 = _this.getTestsByStoryIdAndBrowser(_this.activeBrowser)[0]) === null || _this$getTestsByStory4 === void 0 ? void 0 : _this$getTestsByStory4.id) !== null && _this$getTestsByStory3 !== void 0 ? _this$getTestsByStory3 : '';

      _this.changeTestListeners.forEach(function (x) {
        return x(_this.selectedTestId);
      });
    });

    _defineProperty(this, "setSelectedTestId", function (testId) {
      _this.selectedTestId = testId;

      _this.changeTestListeners.forEach(function (x) {
        return x(_this.selectedTestId);
      });
    });

    _defineProperty(this, "getStoryTests", function (storyId) {
      if (!_this.status || !_this.status.tests) return [];
      return Object.values(_this.status.tests).filter(function (result) {
        return (result === null || result === void 0 ? void 0 : result.storyId) === storyId;
      }).filter(_types.isDefined);
    });

    _defineProperty(this, "getBrowsers", function () {
      return _this.status.browsers;
    });

    _defineProperty(this, "getTestsByStoryIdAndBrowser", function (browser) {
      return Object.values(_this.status.tests).filter(function (x) {
        return (x === null || x === void 0 ? void 0 : x.browser) === browser && x.storyId === _this.storyId;
      }).filter(_types.isDefined);
    });

    _defineProperty(this, "getTabTitle", function (browser) {
      var tests = _this.getTestsByStoryIdAndBrowser(browser);

      var browserStatus = tests.map(function (x) {
        return x && x.status;
      }).reduce(function (oldStatus, newStatus) {
        return (0, _helpers.calcStatus)(oldStatus, newStatus);
      }, undefined);
      var browserSkip = tests.length > 0 ? tests.every(function (x) {
        return x && x.skip;
      }) : false;
      var emojiStatus = (0, _utils.getEmojiByTestStatus)(browserStatus, browserSkip);
      return "".concat(emojiStatus ? "".concat(emojiStatus, " ") : '', "Creevey/").concat(browser);
    });

    _defineProperty(this, "setPanelsTitle", function () {
      var _this$storybookApi;

      var panels = (_this$storybookApi = _this.storybookApi) === null || _this$storybookApi === void 0 ? void 0 : _this$storybookApi.getPanels();
      if (!panels) return;
      var firstPanelBrowser = _this.activeBrowser;

      for (var p in panels) {
        var _panel$id;

        var panel = panels[p];

        if (((_panel$id = panel.id) === null || _panel$id === void 0 ? void 0 : _panel$id.indexOf(_register.ADDON_ID)) === 0 && panel.paramKey) {
          panel.title = _this.getTabTitle(panel.paramKey);
          if (!firstPanelBrowser) firstPanelBrowser = panel.paramKey;
        }
      }

      _this.storybookApi.setSelectedPanel("".concat(_register.ADDON_ID, "/panel/").concat(firstPanelBrowser));
    });

    this.storybookApi = storybookApi;
  }

  _createClass(CreeveyManager, [{
    key: "onUpdateStatus",
    value: function onUpdateStatus(listener) {
      var _this2 = this;

      this.updateStatusListeners.push(listener);
      return function () {
        return void (_this2.updateStatusListeners = _this2.updateStatusListeners.filter(function (x) {
          return x != listener;
        }));
      };
    }
  }, {
    key: "onChangeTest",
    value: function onChangeTest(listener) {
      var _this3 = this;

      this.changeTestListeners.push(listener);
      return function () {
        return void (_this3.changeTestListeners = _this3.changeTestListeners.filter(function (x) {
          return x != listener;
        }));
      };
    }
  }, {
    key: "addStatusesToSideBar",
    value: function () {
      var _addStatusesToSideBar = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
        var _this4 = this;

        var stories;
        return regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                if (Object.keys(this.stories).length) {
                  _context2.next = 2;
                  break;
                }

                return _context2.abrupt("return");

              case 2:
                stories = this.stories;
                Object.keys(this.stories).forEach(function (storyId) {
                  var storyStatus = _this4.getStoryTests(storyId);

                  var status = storyStatus.map(function (x) {
                    return x.status;
                  }).reduce(function (oldStatus, newStatus) {
                    return (0, _helpers.calcStatus)(oldStatus, newStatus);
                  }, undefined);
                  var skip = storyStatus.length > 0 ? storyStatus.every(function (x) {
                    return x.skip;
                  }) : false;
                  _this4.stories[storyId].name = _this4.addStatusToStoryName(stories[storyId].name, status, skip);
                });
                _context2.next = 6;
                return this.storybookApi.setStories(this.stories);

              case 6:
              case "end":
                return _context2.stop();
            }
          }
        }, _callee2, this);
      }));

      function addStatusesToSideBar() {
        return _addStatusesToSideBar.apply(this, arguments);
      }

      return addStatusesToSideBar;
    }()
  }, {
    key: "addStatusToStoryName",
    value: function addStatusToStoryName(name, status, skip) {
      name = name.replace(/^(❌|✔|🟡|🕗|⏸) /, '');
      var emojiStatus = (0, _utils.getEmojiByTestStatus)(status, skip);
      return "".concat(emojiStatus ? "".concat(emojiStatus, " ") : '', " ").concat(name);
    }
  }]);

  return CreeveyManager;
}();

exports.CreeveyManager = CreeveyManager;