Angular: TestComponentBuilder.createAsync()๋Š” ์•ฝ์†์„ ํ™•์ธํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2016๋…„ 05์›” 07์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: angular/angular

๋ฐ๋ชจ ๋ชฉ์ ์œผ๋กœ ๋‹จ์ˆœํ•œ API๋ฅผ ๋…ธ์ถœํ•˜๊ณ  ์ผ๋ฐ˜์ ์ธ ๊ตฌ์„ฑ ์š”์†Œ ํ…Œ์ŠคํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๊ธฐํ˜ธ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ตฌ์„ฑ ์š”์†Œ MyComponent ๊ฐ€ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

import MyComponent from './my.component';
import {
  describe,
  expect,
  it,
  inject,
  beforeEach,
  beforeEachProviders } from '@angular/core/testing';
import { TestComponentBuilder } from '@angular/compiler/testing';

๋‹ค์Œ๊ณผ ๊ฐ™์ด MyComponent ์œ ํ˜•์˜ ๊ณ ์ • ์žฅ์น˜ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด TestComponentBuilder๋ฅผ ์ฃผ์ž…ํ•˜๊ณ  ์ธ์Šคํ„ด์Šคํ™”ํ•˜๋Š” ๊ธฐ๋ณธ ํ…Œ์ŠคํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

describe('MyComponent', () => {
  let testComponentBuilder: TestComponentBuilder;

  beforeEachProviders(() => [TestComponentBuilder]);

  beforeEach(inject([TestComponentBuilder],  (_testComponentBuilder: TestComponentBuilder) => {
      testComponentBuilder = _testComponentBuilder;
    }
  ));

  it('should feature this or that behavior', done => {
    // We create a test component fixture on runtime out from the component symbol
    testComponentBuilder.createAsync(MyComponent).then(componentFixture => {

      // Here we proceed to run assertions on the componentFixture
      // ...

      done();
    })
    .catch(e => done.fail(e));
  });

๋‚ด ์ฝ”๋“œ๋ฅผ RC.1๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•œ ํ›„ ํ•ญ์ƒ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

Error: No precompiled component MyComponent found

๊ธฐ๋ณธ์ ์œผ๋กœ testComponentBuilder.createAsync(MyComponent) ์˜ํ•ด ๋ฐ˜ํ™˜๋œ ์•ฝ์†์€ ํ•ด๊ฒฐ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋Š” TestComponentBuilder ์‚ฌ์šฉ์„ ํฌํ•จํ•˜๋Š” ๋ชจ๋“  ํ…Œ์ŠคํŠธ์—์„œ ์ผ๊ด€๋ฉ๋‹ˆ๋‹ค.

๊ธฐ๋ก์„ ์œ„ํ•ด ๊ทธ๋ฆฌ๊ณ  ํ…Œ์ŠคํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์ „์— ์ด์ „์— ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ…Œ์ŠคํŠธ ๊ณต๊ธ‰์ž๋ฅผ ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

import { setBaseTestProviders } from '@angular/core/testing';
import {
  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
  TEST_BROWSER_STATIC_APPLICATION_PROVIDERS
} from '@angular/platform-browser/testing';

setBaseTestProviders(
  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
  TEST_BROWSER_STATIC_APPLICATION_PROVIDERS
);

๋‚˜๋Š” ์ด๊ฒƒ์ด RC.1์˜ ์‹ค์ œ ๋ฒ„๊ทธ์ธ์ง€ ์•„๋‹ˆ๋ฉด ์„ฑ๊ณตํ•˜์ง€ ๋ชปํ•œ ๋‚ด ํ…Œ์ŠคํŠธ ์„ค์ •์˜ ๋ฌธ์ œ์ธ์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด ๋†’์€ ์ˆ˜์ค€๊ณผ ๋‚ฎ์€ ์ˆ˜์ค€์˜ ์ฝ”๋“œ๋ฅผ ์Šค์บ”ํ–ˆ์Šต๋‹ˆ๋‹ค. RC.1 ์ด์ „์—๋Š” ๋‚ด ํ…Œ์ŠคํŠธ ์„ค์ •์ด ๋ชจ๋“  ์‚ฌ์–‘ ํ…Œ์ŠคํŠธ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์›ํ™œํ•˜๊ฒŒ ์ž‘๋™ํ–ˆ์Šต๋‹ˆ๋‹ค.

์–ด๋–ค ํฌ์ธํ„ฐ?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‚˜๋Š” ์ด๊ฒƒ์„ ์Šค์Šค๋กœ ๊ณ ์น  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๋‚ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐ ํ”Œ๋žซํผ ํ…Œ์ŠคํŠธ ์ œ๊ณต์—…์ฒด ์„ค์ •์ด ์ž˜๋ชป๋œ ๊ฒƒ์œผ๋กœ ๋‚˜ํƒ€๋‚ฌ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ค์ • ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋ฉด ํŠธ๋ฆญ์„ ์ˆ˜ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

import { resetBaseTestProviders, setBaseTestProviders } from '@angular/core/testing';
import { BROWSER_APP_DYNAMIC_PROVIDERS } from "@angular/platform-browser-dynamic";
import {
  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
  ADDITIONAL_TEST_BROWSER_PROVIDERS
} from '@angular/platform-browser/testing';

resetBaseTestProviders();
setBaseTestProviders(
  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
  [
    BROWSER_APP_DYNAMIC_PROVIDERS,
    ADDITIONAL_TEST_BROWSER_PROVIDERS
  ]
);

๋‚ด ์ž˜๋ชป์ด์•ผ! ;)

๋ชจ๋“  3 ๋Œ“๊ธ€

๋‚˜๋Š” ์ด๊ฒƒ์„ ์Šค์Šค๋กœ ๊ณ ์น  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ๋‚ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐ ํ”Œ๋žซํผ ํ…Œ์ŠคํŠธ ์ œ๊ณต์—…์ฒด ์„ค์ •์ด ์ž˜๋ชป๋œ ๊ฒƒ์œผ๋กœ ๋‚˜ํƒ€๋‚ฌ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ค์ • ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋ฉด ํŠธ๋ฆญ์„ ์ˆ˜ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

import { resetBaseTestProviders, setBaseTestProviders } from '@angular/core/testing';
import { BROWSER_APP_DYNAMIC_PROVIDERS } from "@angular/platform-browser-dynamic";
import {
  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
  ADDITIONAL_TEST_BROWSER_PROVIDERS
} from '@angular/platform-browser/testing';

resetBaseTestProviders();
setBaseTestProviders(
  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
  [
    BROWSER_APP_DYNAMIC_PROVIDERS,
    ADDITIONAL_TEST_BROWSER_PROVIDERS
  ]
);

๋‚ด ์ž˜๋ชป์ด์•ผ! ;)

@deeleman ng-cli ๋ฐ https://github.com/juliemr/ng2-test-seed/blob/master/karma-test-shim.js ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋ณธ ์„ค์ •๊ณผ ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. (

/*global jasmine, __karma__, window*/
Error.stackTraceLimit = Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

__karma__.loaded = function () {
};

var distPath = '/base/.test/';
var appPath = distPath + 'app/';

function isJsFile(path) {
  return path.slice(-3) == '.js';
}

function isSpecFile(path) {
  return path.slice(-8) == '.spec.js';
}

function isAppFile(path) {
  return isJsFile(path) && (path.substr(0, appPath.length) == appPath);
}

var allSpecFiles = Object.keys(window.__karma__.files)
  .filter(isSpecFile)
  .filter(isAppFile);

// Load our SystemJS configuration.
System.config({
  baseURL: distPath,
});


System.import('system.config.js').then(function(e) {
  // Load and configure the TestComponentBuilder.
  return Promise.all([
    System.import('@angular/core/testing'),
    System.import('@angular/platform-browser-dynamic/testing')
  ]).then(function (providers) {
    var testing = providers[0];
    var testingBrowser = providers[1];
    testing.setBaseTestProviders(
      testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
      testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
    );
  });
}).then(function() {
  return Promise.all(
    allSpecFiles.map(function (moduleName) {
      return System.import(moduleName);
    }));
}).then(__karma__.start, __karma__.error);

์ด ๋ฌธ์ œ๋Š” ํ™œ๋™์ด ์—†์–ด ์ž๋™์œผ๋กœ ์ž ๊ฒผ์Šต๋‹ˆ๋‹ค.
์œ ์‚ฌํ•˜๊ฑฐ๋‚˜ ๊ด€๋ จ๋œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ƒˆ ๋ฌธ์ œ๋ฅผ ์ œ์ถœํ•˜์‹ญ์‹œ์˜ค.

์ž๋™ ๋Œ€ํ™” ์ž ๊ธˆ ์ •์ฑ… ์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด์„ธ์š”.

_์ด ์ž‘์—…์€ ๋ด‡์— ์˜ํ•ด ์ž๋™์œผ๋กœ ์ˆ˜ํ–‰๋˜์—ˆ์Šต๋‹ˆ๋‹ค._

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰