Возможно ли сбросить и восстановить window.angular для создания восстановимого моментального снимка

Мое приложение требует сложных шагов в UX для достижения некоторых из его многочисленных состояний. Это делает цикл dev/test чрезвычайно громоздким для простых изменений компоновки, которые должны быть визуально проверены для широкого диапазона состояний.

Итак, я изучаю практичность принятия дампа/моментального снимка работающего приложения (например, window.angular или, возможно, $rootcope) таким образом, что я могу быстро восстановить из этого моментального снимка, запустить $$ digest() и et voila.

Любые предложения о том, как это можно достичь?

Я не ищу, чтобы восстановленный моментальный снимок был функциональным, например, он не должен иметь активных наблюдателей или широковещательных подписчиков. Ему просто нужно добросовестно визуализировать визуальный осмотр.

- изменить -

Я начинаю думать, что этого не может быть сделано.

Я понял, что все мои проекты Angular теперь будут иметь одну услугу VmStateService и, в основном, каждый отдельный элемент данных VM, который влияет на отображаемый вид должен жить в этой единой службе, которая вводится в каждый контроллер. Таким образом, у меня есть только один чистый объект (он не имеет функций), я могу сбросить строку или сохранить в локальное хранилище и восстановить для создания любого представления, которое я хочу проверить.

Я догадываюсь, что это печально, что все учатся AngularJS, делая $scope.foo = "bar", а затем проводит остаток своей карьеры, понимая, что создает беспорядок.

Ответ 1

Если вы проводите тестирование с помощью karma, вы можете использовать karma-fixtures-preprocessor.

Суть:

создать службу, которая возвращает макет или создать тестовые приборы
используя инъекция зависимостей (angular для победы); вставляйте свои макет/данные и проверяйте свою логику изолированно.

Если у вас есть проблемы с этим подходом; то вы, скорее всего, слабое разделение проблем.

Ознакомьтесь с этими замечательными ресурсами:

мой анализ $0,02

Мое приложение требует сложных шагов в UX для достижения некоторых из его многочисленных состояний. Это делает цикл dev/test чрезвычайно громоздким для простых изменений компоновки, которые должны быть визуально проверены для широкого диапазона состояний.

Это очень похоже на слабое разделение проблем. Если вам даны все данные; это должно быть легко вызвать просмотр или перейти в состояние.

Итак, я изучаю практичность принятия дампа/моментального снимка работающего приложения (например, window.angular или, возможно, $rootcope) таким образом, что я могу быстро восстановить из этого моментального снимка, запустить $$ digest() и et voila.

Это очень похоже на использование светильников. Что касается данных, которые вам нужно будет записывать; используя http-перехватчики, чтобы регистрировать контент, может работать на вас (не делайте этого в prod). Затем вы можете использовать контент, который вы только что запустили, для использования в ваших данных с макетами.

проверка вида с различными входами

Это обычно означает, что вы хотите протестировать пользовательские директивы с разными данными. Вы можете сделать это с помощью:

столько приборов, сколько необходимо для каждой тестовой системы,
beforeEach, чтобы загрузить соответствующие данные для группы тестовых ящиков,
с помощью $digest(), чтобы обновить представление,
проверка обновленной разметки с помощью .find() или .attr() и т.д. на элементе.
проверка рендеринга с помощью .clientHeight, .clientWidth и т.д.

проверка (визуально) множества различных элементов пользовательского интерфейса

Существует много возможностей для ручной проверки элементов.

Добавление "тестовой страницы", где одни и те же элементы отображаются с разными данными, классами, стилями и т.д. Когда некоторые данные предоставляются как пользовательский ввод, и его сложно проверить автоматическим способом; это может быть ценным подходом. Примеры: Bootswatch, который позволяет проверять многие элементы пользовательского интерфейса bootstrap под разными темами. jquery UI ThemeRoller, который позволяет быстро проверять многие элементы под разными темами.

функция дампа/восстановления

В этом вопросе есть несколько хороших вопросов о доступе к дочерним областям из родительской области: AngularJS - доступ к охвату пользователя

Дополнительные пункты:

вам нужно знать, что такое разметка, прежде чем она обновится,
Демпинг может быть легким, если вам удастся получить данные из всех необходимых областей,
однако выполнение восстановления может вообще не работать из-за того, как вы будете делать обновления. например выполнение одного элемента за один раз может инициировать обновления, а не делать его в правильном порядке, может инициировать обновления, которые могут изменять элементы и т.д.

Это становится очень волосатым. Я не знаю библиотеки, которая предоставляет общие функции дампа/восстановления.

Ответ 2

Проблема с простое использование JSON.Stringify заключается в том, что он не будет правильно записывать функции и не будет захватывать законные значения undefined или круговые ссылки. Что-то, что вы можете использовать в качестве отправной точки, это Node JS util.inspect():

https://github.com/nodejs/node/blob/master/lib/util.js#L87

Это уже делает половину работы - читает объект, форматирует его правильно, управляет всеми нюансами. Также читает функции и круговые ссылки. Вы должны сделать вторую половину работы в переводе, но вы должны уметь.

(И это условия лицензии Node - лицензия MIT для самого Node, другие библиотеки могут быть немного более строгими (но не намного)):

https://raw.githubusercontent.com/nodejs/node/master/LICENSE

Ответ 3

Edit

Во-первых, если все, что вам интересно, это получить визуальный контроль, почему бы не сделать это?

document.body.parentNode.innerHTML

Но вам, скорее всего, понадобится больше, особенно если вы хотите зафиксировать значение любых полей ввода и т.д., то, что не представлено статическим HTML DOM.

Чтобы решить вашу проблему, вы должны захватить любую требуемую информацию, чтобы воссоздать свое состояние просмотра. В Angular это, вероятно, означает:

Текущий URL
Любые значения на $rootScope
Внутреннее состояние любых служб, которые предоставляют данные на ваш уровень представления.

Это трудно сделать, если вы не планируете архитектуру приложения вокруг этой функции. Независимо от того, как вы нарезаете его, вам нужно будет сделать рефакторинг. Вам также понадобится архитектура, которая поощряет состояние, которое вы можете сделать снимок, так что будущая разработка также может быть сохранена/восстановлена.

Похоже, вы могли бы воспользоваться архитектурой FLUX. Если вы не знакомы с FLUX, я рекомендую вам посмотреть на веб-сайте flux.

Я реализовал версию FLUX в моем приложении Enterprise Angular, используя RxJS для действий и сервисы для магазинов (я просто назову их <Feature>Store, и они вставляются через module.service('<Feature>Store', /*Definition*/)).

Однако существует реализация Flux, которая может решить то, что вы ищете, https://github.com/rackt/redux. Redux построен вокруг React, поэтому вам нужно будет построить мост из уровня состояния приложения, в представление (которое можно контролировать с помощью Angular).

Redux сохраняет состояние приложения в одном объекте JS и отслеживает каждое атомное изменение этого объекта. Теоретически вы сможете мгновенно сохранять/загружать состояние приложения.

Ответ 4

Здесь наивный ориентировочный.

Использование:

serialize($rootScope), чтобы получить строку, сериализованную версию корневой области и дочерних элементов, которые вы сохраните в файле, localStorage и т.д.
restore(myCopy, $rootScope), чтобы вернуть все обратно в $rootScope. myCopy - это строка, сериализованная версия, ранее возвращаемая методом копирования.

Сегментируются только настраиваемые свойства (а не функции). Все, начиная со знака доллара, считается закрытым для angular и его не следует путать. Если у вас есть пользовательские свойства, начинающиеся с знака $, вы можете настроить функцию, чтобы игнорировать только одну из них, закрытую для angular.

function serialize(target, source) {
  source = source || {};
  for (var key in target) {
    if (!target.hasOwnProperty(key)) { continue; }
    if (key[0] === '$' || key === 'constructor') continue;

    if (typeof target[key] !== 'function') {
      try {
        source[key] = JSON.stringify( target[key] );
      } catch(e) {}
    }
  }

  if (target.$$nextSibling) {
    source.$$nextSibling = {};
    serialize(target.$$nextSibling, source.$$nextSibling);
  }

  if (target.$$childHead) {
    source.$$childHead = {};
    serialize(target.$$childHead, source.$$childHead);
  }

  return JSON.stringify(source);
}

function restore(copy, $rootScope) {
  try {
    copy = JSON.parse(copy);
  } catch(e) {}

  for (var key in copy) {
    if (!copy.hasOwnProperty(key)) { continue; }

    try {
      $rootScope[key] = JSON.parse(copy[key]);
    } catch(e) {
      $rootScope[key] = copy[key];
    }
  }

  if (copy.$$nextSibling) {
    $rootScope.$$nextSibling = $rootScope.$$nextSibling || {};
    restore(copy.$$nextSibling, $rootScope.$$nextSibling);
  }

  if (copy.$$childHead) {
    $rootScope.$$childHead = $rootScope.$$childHead || {};
    restore(copy.$$childHead, $rootScope.$$childHead);
  }
}

// Create a $rootScope serialized copy that can be stored in local storage, etc
var copy = serialize($rootScope);

// Restore a serialized copy into $rootScope
restore(copy, $rootScope);

Ответ 5

Я вижу, что мой небольшой проект может частично удовлетворить ваши требования.

https://github.com/vorachet/angular-state-manager

Он еще молод, и цель дизайна - быть инструментом обслуживания, помогающим пониманию Angular. Я рад изучить ваши подробные требования и попытаться продолжить разработку, чтобы решить вашу проблему.