Sencha Architect 및 Sencha Test를 통한 개발 환경 구축

Sencha Archeitect와 Sencha Test에 개발 환경을 구축하는 절차를 기억하세요.
이 글은 응용 프로그램의 항목과 테스트 항목을 작업 공간으로 분리합니다.이렇게 하면 모든 구성 요소의 테스트를 작성하여 테스트 실행의 안정성과 속도를 높일 수 있다.
전제 조건
이 글은 다음 버전의 센치 도구군을 사용했다.
Tool
Version
Sencha Architect
4.2.7
Sencha Ext JS
7.1.0.48
Sencha Cmd
7.1.0.16
Sencha Test
2.3.0.328
작업공간 만들기
Sencha Cmd를 사용하여 작업공간을 생성합니다.

$ sencha generate workspace example
$ cd example
$ git init
$ git add .
$ git commit -m "Generate workspace"

새 Sencha Archeitect 프로젝트
Sencha Archeitect를 사용하여 새 프로젝트를 만듭니다.프레임으로 Ext JS7.1x Modern 을 선택하고 Blank Project 를 템플릿으로 선택합니다.

프로젝트 설정(Project settings)에서 포트 번호를 1842로 지정합니다.Sencha Archeitect의 프로젝트 파일에 저장된 포트 번호의 동적 변화를 방지하기 위해서입니다.

Sencha Archeitect 항목은 다음 설정에 따라 저장됩니다.Save Path를 작업공간으로 지정하는 것을 잊기 쉽습니다.

Save Path: <작업공간>

Project Name: main

App Name: Example

Sencha Archeitect에서 생성한 로컬 파일을 설정하여 Giit를 무시합니다.

$ cat << EOS >> .gitignore
.architect
.arch-internal-preview.css
EOS
$ git add .
$ git commit -m "Generate main project"

Sencha Test 프로젝트 생성
Sencha Cmd에서 테스트 항목을 생성합니다.작업공간에서 SDK로 Ext JS를 지정합니다.또한 이니시에이터 템플릿을 비활성화하고 Modern 툴킷을 사용하도록 지정합니다.

$ sencha -sdk=ext generate app -starter=false -modern ExampleTest test

app.json의 클래스 경로에 대한 설정 "../main/app" 을 다시 쓰는 설정 "../main/overrides" 을 추가합니다.

$ sed -i "" 's|"app"$|"app", "../main/app"|' test/app.json
$ sed -i "" 's|"overrides"$|"overrides", "../main/overrides"|' test/app.json

test/app.js 메시지 상자를 표시하는 처리를 삭제합니다.
test/app.js

/*
 * This call registers your application to be launched when the browser is ready.
 */
Ext.application({
    name: 'ExampleTest'
});

테스트를 수행할 때 브라우저 형식을 표시하기 위해 코드를 추가합니다.테스트 실행을 위한 프레젠테이션을 진행할 때 매우 편리하다.꼭 필요한 건 아니야.
test/app.js

/*
 * This call registers your application to be launched when the browser is ready.
 */
Ext.application({
    name: 'ExampleTest',

    requires: [
        'Ext.Panel'
    ],

    launch: () => {
        var config = { floated: true, right: 0, bottom: 0 };
        if (Ext.isChrome) Ext.merge(config, { iconCls: 'x-fab fa-chrome',  title: 'Chrome'  });
        if (Ext.isEdge  ) Ext.merge(config, { iconCls: 'x-fab fa-edge',    title: 'Edge'    });
        if (Ext.isGecko ) Ext.merge(config, { iconCls: 'x-fab fa-firefox', title: 'Firefox' });
        if (Ext.isOpera ) Ext.merge(config, { iconCls: 'x-fab fa-opera',   title: 'Opera'   });
        if (Ext.isSafari) Ext.merge(config, { iconCls: 'x-fab fa-safari',  title: 'Safari'  });
        Ext.create('Ext.Panel', config).show();
    }
});

Sencha Studio에서 작업공간을 엽니다.New Project가 아니라 Open Project입니다.Example 작업공간의 ExampleTest 응용 프로그램을 통해 테스트 프로젝트의 초기화(Initialize Test Project)를 구현합니다.레이블이 ExampleTest Tests인지 확인한 후 Initialize Test Project 버튼을 클릭합니다.

테스트 항목을 다음 설정으로 저장합니다.코드 덮어쓰기 필터(Code Coverage Filters)도 코드를 정상적으로 덮어쓰도록 미리 설정되어 있습니다.

Location (URL): http://localhost:1841/test/

Automatically start app watch: Enable

Code Coverage Filters:

^/ext/.*?$

^/build/.*?$

^/test/.*?$

다음 설정에서 새 구성 요소 테스트를 위한 방안입니다.

Name: Component

Test type: In-browser

Directory: component

Additional Libraries: 모두 삭제

$ git add .
$ git commit -m "Generate test project"

실현 가능성 및 테스트 확인
Sencha Archeitect를 사용하여 오른쪽 위에 있는 도구상자(Toolbox)에서 끌어다 놓기 버튼(Buton)을 추가합니다.

도구막대의 저장 버튼 저장을 클릭하고, 저장 버튼 오른쪽 옆에 있는 아이콘을 클릭하고, 항목 미리보기(Preview Project) 대화상자의 미리보기(Preview) 버튼 미리보기를 클릭합니다.다음 그림에서 보듯이 전체 화면의 MyButon이 모두 나타나면 잘 실현될 수 있다.

센카스튜디오에서 마이 버턴티스트라는 이름으로 재스민 테스트 키트를 제작한다.

MyButon을 클릭하여 확인tap 이벤트 발생 테스트를 설명합니다.
여기에 beforeEach 방법을 통해 테스트 대상의 MyButton 구성 요소를 생성하여 테스트 응용의 시야 포트에 추가합니다.테스트에서 이 단추를 얻어 이벤트 처리 프로그램에 동적으로 부여하고 tap 이벤트가 발생할 때 done 방법을 호출하여 테스트를 성공시킨다.따라서 다음 방법 호출click에서 발생tap 이벤트가 발생하고 상기 이벤트 처리 프로그램을 실행하여 테스트에 성공했다.afterEach 테스트에 사용할 구성 요소를 버리고 테스트 용례를 완성합니다.
test/test/component/MyButtonTest.js

describe("MyButtonTest", function () {
    let component;

    beforeEach(function () {
        component = Ext.create("Example.view.MyButton");
        Ext.getApplication().viewport.add(component);
    });

    afterEach(function () {
        component.destroy();
    });

    it("fires \"tap\" event after clicking", function (done) {
        ST.button("[text=MyButton]")
            .and(button => button.on("tap", () => done()))
            .click();
    });
});

Component 테스트 방안을 선택하고 브라우저에서 테스트할 브라우저를 선택하십시오.이렇게 되면 Sencha Studio에서 응용 프로그램 시작 여부를 확인하는 대화 상자가 나타납니다. Sencha Studio에서 응용 프로그램을 시작하십시오.그런 다음 테스트 실행(Run) 단추를 누릅니다.

테스트가 순조롭게 끝나면 개발 환경이 정상적으로 구축될 수 있다.
이 글은 센카아치텍트와 센카테스트로 개발 환경을 구축하는 방법을 설명한다.생산성이 매우 높은 스파 제조 환경이라 관심 있는 사람은 시험판을 시도해 볼 수 있다고 생각합니다.