restore 가능한 스냅숏을 작성하기 위해 window.down 및 restore가 가능합니다.

restore 가능한 스냅숏을 작성하기 위해 window.down 및 restore가 가능합니다.

내 앱은 UX 내의 여러 상태에 도달하기 위해 복잡한 단계를 거쳐야 합니다.이로 인해 개발/테스트 사이클은 광범위한 상태를 육안으로 확인해야 하는 단순한 레이아웃 변경에 매우 번거롭게 됩니다.

따라서 실행 중인 앱(윈도우.angular 또는 $rootscope)의 덤프/스냅샷을 촬영하여 해당 스냅샷에서 $rootscope를 빠르게 복원할 수 있도록 하는 방법을 검토하고 있습니다.$voila() 및 et voila.

어떻게 하면 좋을까요?

복원된 스냅샷에 액티브 워처나 브로드캐스트 구독이 필요 없는 경우 등, 기능하기 위한 스냅샷은 필요 없습니다.육안 검사를 위한 뷰를 충실하게 렌더링하기만 하면 됩니다.

--편집--

이건 불가능하다고 생각하기 시작했어

이제 모든 Angular 프로젝트에는 VmStateService라는 이름의 단일 서비스가 제공되며 기본적으로 렌더링된 뷰에 영향을 미치는 VM 데이터의 모든 항목은 모든 컨트롤러에 삽입되는 이 단일 서비스에 저장되어야 합니다.이렇게 하면 문자열에 덤프하거나 로컬 스토리지에 저장하고 테스트할 뷰를 만들기 위해 복원할 수 있는 깨끗한 개체(기능이 없음)가 하나밖에 없습니다.

다들 앵글을 배우는 게 아쉬운 것 같아요.$scope를 실행하여 JS를 만듭니다.foo = "술집" 그리고 나서 남은 커리어를 얼마나 엉망진창이 되는지 깨닫고 보냅니다.

「 」로 .karma를 사용할 수 있습니다.

요점:

1. 목품을 반환하는 서비스 작성 또는 테스트 픽스처 작성
2. 의존성 주입 사용(승리를 위해 추가); 모의/모의 데이터를 주입하고 논리를 격리하여 테스트합니다.

이 어프로치에 문제가 있는 경우는, 우려의 구분이 약한 경우가 대부분입니다.

다음의 훌륭한 자원을 확인해 주세요.

• Karma+Angular 내에서 모의 JSON 파일 로드JS 테스트
• http://angular-tips.com/blog/categories/unit-test/
• https://docs.angularjs.org/guide/services#unit-testing
• https://docs.angularjs.org/guide/unit-testing
• https://docs.angularjs.org/guide/e2e-testing
• https://github.com/kbaltrinic/http-backend-proxy

0.02달러 분석

내 앱은 UX 내의 여러 상태에 도달하기 위해 복잡한 단계를 거쳐야 합니다.이로 인해 개발/테스트 사이클은 광범위한 상태를 육안으로 확인해야 하는 단순한 레이아웃 변경에 매우 번거롭게 됩니다.

이것은 우려의 약한 분리처럼 들린다.모든 데이터가 제공되면 보기를 트리거하거나 상태로 전환하기가 쉬울 것입니다.

따라서 실행 중인 앱(윈도우.angular 또는 $rootscope)의 덤프/스냅샷을 촬영하여 해당 스냅샷에서 $rootscope를 빠르게 복원할 수 있도록 하는 방법을 검토하고 있습니다.$voila() 및 et voila.

꼭 고정장치를 사용하는 것 같네요.기록할 필요가 있는 데이터에 대해서는 http 인터셉터를 사용하여 콘텐츠를 기록할 수 있습니다(프로덕트에서는 기록하지 마십시오).그러면 방금 기록한 콘텐츠를 모의 데이터에 사용할 수 있습니다.

다른 입력으로 보기 테스트

이는 일반적으로 다른 데이터로 사용자 지정 지시사항을 검정하려는 것을 의미합니다.다음을 사용하여 이 작업을 수행할 수 있습니다.

• 각 테스트 케이스에 필요한 만큼의 고정 장치,
• beforeEach케이스 하려면 , 테스트 케이스 그룹에 적절한 데이터를 로드합니다.
• 를 사용합니다.$digest()
• , " " " " 에서의.find() ★★★★★★★★★★★★★★★★★」.attr()
• , ""로 표시".clientHeight,.clientWidth 등등.

다양한 UI 요소 검증(시각적)

요소를 수동으로 확인하는 데 많은 작업을 수행할 수 있습니다.

동일한 요소가 다른 데이터, 클래스, 스타일 등과 함께 표시되는 "테스트 페이지" 추가일부 데이터가 사용자 입력으로 제공되어 자동 확인이 어려운 경우, 이는 중요한 접근법이 될 수 있습니다.예를 들어 다음과 같은 다양한 UI 요소를 확인할 수 있습니다.bootstrap다른 주제로요.jquery UI ThemeRoller 다양한 테마에서 많은 요소를 빠르게 확인할 수 있습니다.

덤프/복원 기능

이 질문에는 상위 범위에서 하위 범위에 액세스할 때 몇 가지 장점이 있습니다.각진JS - 하위 범위에 대한 액세스

추가 사항:

• 업데이트하기 전에 마크업이 무엇인지 알아야 합니다.
• 필요한 모든 범위에서 데이터를 얻을 수 있다면 덤프가 쉬워질 수 있습니다.
• 단, restore는 업데이트 방법에 따라서는 전혀 동작하지 않을 수 있습니다.예를 들어 한 번에 1개의 요소를 실행하면 업데이트가 트리거될 수 있습니다.또한 올바른 순서로 실행하지 않으면 요소를 변경할 수 있는 업데이트가 트리거될 수 있습니다.

이건 털이 아주 많네요.일반적인 덤프/복원 기능을 제공하는 라이브러리를 모릅니다.

단순한 사용의 문제JSON.Stringify기능을 제대로 캡처하지 못하거나 합법적인 기능을 캡처하지 못할 수 있습니다.undefined값 또는 순환 참조.시작점으로 사용할 수 있는 것은 노드 JS의util.inspect():

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

이 작업은 이미 절반의 작업만 수행되고 있습니다. 객체 읽기, 올바른 형식 지정, 모든 미묘한 차이 관리 등입니다.함수 및 순환 참조도 읽습니다.나머지 절반은 번역을 해야 하는데, 번역을 할 수 있을 거예요.

(노드의 라이센스 조항은 다음과 같습니다.노드 자체에 대한 MIT 라이센스입니다.다른 라이브러리는 조금 더 엄격할 수 있습니다(단, 그 이상은 아닙니다).

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

편집

첫째, 육안 검사를 위해 시야 확보에만 관심이 있다면 이렇게 하는 것이 어떨까요?

document.body.parentNode.innerHTML

단, DOM의 정적 HTML로 표현되지 않는 입력 필드 등의 값을 캡처하고 싶은 경우에는 그 이상을 원할 수 있습니다.

문제를 해결하려면 필요한 정보를 캡처하여 보기 상태를 다시 만들어야 합니다.Angular에서 이것은 다음을 의미합니다.

• 현재 URL
• $rootScope 값
• 뷰 계층에 데이터를 제공하는 서비스의 내부 상태입니다.

이 기능을 중심으로 애플리케이션 아키텍처를 계획하지 않는 한 이 작업은 어렵습니다.어떻게 자르든 리팩터링을 해야 할 것 같아요.또한 스냅샷을 작성할 수 있는 상태를 촉진하는 아키텍처가 필요하므로 향후 개발도 저장/복원할 수 있습니다.

FLUS 아키텍처의 이점을 얻을 수 있을 것 같습니다.FLUS에 익숙하지 않다면 FLUS 웹사이트를 보는 것을 추천합니다.

을 위해 RxJs를 하고 스토어를 위한 서비스를 제공함으로써 했습니다(그냥 이름을 붙입니다).<Feature>Store를 통해 됩니다.module.service('<Feature>Store', /*Definition*/)를 참조해 주세요.

그러나 원하는 것을 해결할 수 있는 Flux 구현이 있습니다. https://github.com/rackt/redux.Redex는 React를 기반으로 구축되므로 애플리케이션 상태 계층에서 뷰(Angular에 의해 제어 가능)로의 브리지를 구축해야 합니다.

Redux는 응용 프로그램 상태를 단일 JS 개체로 유지하고 해당 개체에 대한 모든 원자 변경을 추적합니다.이론상으로는 애플리케이션 상태를 즉시 저장/로드할 수 있습니다.

여기 순진한 잠정안이 있습니다.

사용방법:

• serialize($rootScope)파일, localStorage 등에 저장할 루트 범위의 문자열, 직렬화된 버전 및 하위 버전을 가져옵니다.

• restore(myCopy, $rootScope)모든 것을 $rootScope로 되돌립니다.myCopy는 이전 복사 메서드에서 반환된 문자열, 시리얼 버전입니다.

커스텀 속성(함수가 아닌)만 시리얼화 됩니다.달러 기호로 시작하는 모든 것은 사적인 것으로 간주되므로 함부로 다루어서는 안 됩니다.「」로하는 커스텀프로퍼티가 $부호는 프라이빗에서 앵귤러로만 무시하도록 함수를 조정할 수 있습니다.

---

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

제 작은 프로젝트가 당신의 요구를 부분적으로 충족시킬 수 있을 것 같습니다.

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

아직 초기 단계이며, 설계 목표는 Angular 어플리케이션의 이해를 돕기 위한 유지보수 툴이 되는 것입니다.귀사의 세부 요구 사항을 검토하고 문제를 해결하기 위해 개발을 계속하는 것을 환영합니다.

언급URL : https://stackoverflow.com/questions/34309373/is-it-possible-to-dump-and-restore-window-angular-to-create-a-restorable-snapsho