Angular 회로도를 테스트하는 방법은 무엇입니까?

회로도는 코드를 생성하거나 수정하여 소프트웨어 프로젝트를 변환하기 위한 일련의 지침입니다. 출처 : Angular docs .

인터넷에서 Angular 회로도에 대한 정보는 약간 부족하여 테스트를 작성하는 모든 개발자에게 필요한 도구입니다.

다음과 같은 몇 가지 방법으로 테스트 회로도에 접근할 수 있습니다.

통합 테스트

로컬로 게시

디버깅

통합 테스트 🧪

이는 사양 파일을 생성하고 메모리 내 회로도를 테스트하는 것으로 귀결됩니다.

example은 Angular의 CLI 소스 코드에서 찾을 수 있습니다.

  let appTree: UnitTestTree;
  beforeEach(async () => {
    appTree = await schematicRunner.runSchematicAsync('workspace', workspaceOptions).toPromise();
    appTree = await schematicRunner
      .runSchematicAsync('application', appOptions, appTree)
      .toPromise();
  });

  it('should create just the class file', async () => {
    const tree = await schematicRunner
      .runSchematicAsync('class', defaultOptions, appTree)
      .toPromise();
    expect(tree.files).toContain('/projects/bar/src/app/foo.ts');
    expect(tree.files).not.toContain('/projects/bar/src/app/foo.spec.ts');
  });

위의 코드 스니펫에서 먼저 beforeEach에서 테스트를 설정합니다.

runSchematicAsync('workspace', ...)는 비어 있는 npm 프로젝트를 스캐폴드하고 angular.json를 추가하는 회로도 작업 공간을 준비합니다.

schematicRunner.runSchematicAsync('application', ...) - 생성된 작업 공간 내부에 Angular 응용 프로그램을 만듭니다.

참고로 under the hood workspace 및 application 회로도는 ng new 명령의 일부로 실행됩니다.

그런 다음 테스트 중인 회로도runSchematicAsync('class', ...)를 실행하고 실행 결과를 확인할 수 있습니다.

📖 이 접근 방식은 매우 표준적이고 간단하며 메모리 내에서 실행되므로 매우 빠릅니다.

💡 테스트 프레임워크로 Jest을 사용하는 경우 생성된 파일의 콘텐츠를 어설션하기 위해 해당 프레임워크snapshot testing를 활용할 수 있습니다. 🤯

로컬 게시 📣

야생에 게시하기 전에 먼저 회로도를 사용해 보는 것이 좋습니다.

📖 이러한 방식의 테스트는 테스트를 위해 작업 영역/응용 프로그램 상태를 너무 잘 준비하여 통합 테스트 중에 수행된 일부 실수를 드러낼 수 있습니다.
회로도를 실제로 게시하기 전에 열심히 작업한 모습을 보는 것도 매우 만족스럽습니다. 😉

이를 달성하는 한 가지 방법은 npm link에 설명된 대로 angular docs 명령을 사용하는 것입니다.

💡 또 다른 방법이 있습니다 - verdaccio을 사용하는 것 . 이것은 스크립트를 생성하여 자동화할 수 있습니다.

import { exec, execSync } from "child_process";

// 1. run verdaccio with a pre-defined configuration
exec(
  "./node_modules/verdaccio/bin/verdaccio --config ./scripts/config.yaml"
);
// 2. point to verdaccio only for our `@test` scope
execSync(`npm config set @test:registry http://localhost:4873/`);
// 3. build schematics
execSync("yarn build:schematics");
// 4. publish schematics to verdaccio
execSync(
  `yarn publish --cwd dist/schematics-testing/schematics/package.json --new-version 0.0.1 --registry=http://localhost:4873/`
);

그건 그렇고, 전체 스크립트는 내 schematics-testing repo에서 찾을 수 있습니다.

이제 테스트 애플리케이션( ng new 을 통해 생성됨)으로 전환하고 회로도(예: ng add @somescope/somepackagename )를 실행할 수 있습니다. verdaccio가 실행되는 한 로컬에서 게시된 회로도를 사용할 수 있습니다.

테스트를 마친 후 스크립트를 닫으면 npmjs 레지스트리를 다시 가리킬 것입니다.

process.once("SIGINT", function () {
  execSync(`npm config set @test:registry https://registry.npmjs.org/`);
  verdaccioProcess?.kill();
  process.exit();
});

이 접근 방식은 많은 라이브러리에 대한 회로도를 생성하는 경우 더 확장 가능합니다.

디버깅 🐞

항상 코드의 상태만console.log 확인할 수 있지만 상황이 복잡해지면 진행 상황을 더 잘 이해하기 위해 코드를 단계별로 살펴봐야 합니다.

📖 VSCode를 사용하는 경우 회로도를 디버그하는 것처럼debug any other Node application 회로도를 디버깅할 수 있습니다(결국 회로도는 노드에서 실행되기 때문입니다).

💡다음은 테스트 앱의 파일launch.json에 붙여넣을 수 있는 스니펫입니다.

    {
      "type": "node",
      "request": "launch",
      "name": "Debug schematics",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
      "args": [
        "add",
        "@somescope/somepackagename@latest",
        "--skip-confirmation",
        "--param1=value1",
        "--param2=value2"
      ],
      "console": "integratedTerminal",
      "outFiles": ["${workspaceFolder}/node_modules/@somescope/**/*.js"]
    }

실제로 중단점을 설정하고 디버그하기 전에 회로도가 테스트 앱의 node_modules에 설치되어 있는지 확인하십시오. ng add @somescope/somepackagename를 실행하면 이를 확인할 수 있습니다.
그런 다음 .js에서 node_modules/@somescope/** 파일을 열고 중단점을 추가할 수 있습니다.
회로도를 다시 실행하려면 Run and Debug view 으로 전환하고 구성 드롭다운 메뉴에서 Debug Schematics 를 선택하고 실행하면 짜잔 - 중단점에서 실행이 중지됩니다. 🎉

결론 🎬

myschematics-testing repo 에 구성된 세 가지 접근 방식을 모두 볼 수 있습니다.

설계도 테스트는 두려워할 대상이 아닙니다.
각 접근 방식에는 고유한 이점이 있습니다.

통합 테스트가 빠르고 CI에서 실행할 수 있습니다.

로컬로 게시하는 것이 좋습니다. 예상대로 작동하지 않는 항목이 있는 경우 다시 게시하지 않아도 됩니다.

디버깅은 무슨 일이 일어나고 있는지 의아해하고 더 잘 이해하기 위해 코드를 자세히 살펴봐야 하는 상황에 매우 유용합니다.