에 대한 구성요소 테스트 가상 에이전트

사용자 지정 구성요소를 가상 에이전트 인스턴스에 배포하기 전에 테스트합니다.

시작하기 전에

• 환경 설정
• 프로젝트 설정
• 구성요소 개발
• 통신할 속성 추가 가상 에이전트

필요한 역할: virtual_agent_admin 또는 admin

이 태스크 정보

가상 에이전트 구성요소가 사용자 입력에 올바르게 응답하는지 확인하기 위해 클라이언트 채팅 내에서 가상 에이전트 구성요소를 테스트해야 합니다. 구성 요소 프로젝트에서 속성을 설정하여 모의 가상 에이전트 테스트 클라이언트 도구에서 구성 요소를 테스트할 수 있습니다.

프로시저

1. 테스트 클라이언트 도구에 대한 종속성을 구성 요소 프로젝트에 추가합니다.
   1. 구성 요소 프로젝트에서 <component-name>/package.json 파일을 엽니다.
   2. devDependencies 개체에 "@servicenow/sdk-ci": "1.0.8" 및 "@servicenow/library-translate": "^18.0.0"을 추가합니다.
   다음은 올바른 종속성 package.json 있는 파일의 예입니다.

   "dependencies": {
       "@servicenow/ui-renderer-snabbdom": "xanadu",
       "@servicenow/library-translate": "^18.0.0",
       "@servicenow/now-button": "xanadu",
       "@servicenow/now-dropdown": "xanadu",
       "@servicenow/sass-generic": "xanadu",
       "@servicenow/cli-archetype": "xanadu",
       "@servicenow/sdk-ci": "1.0.8"
   }

2. 테스트에서 구성요소의 초기 상태로 사용할 샘플 속성을 추가합니다.
   1. 테스트에서 렌더링할 초기 속성이 있는 <component-name>/example/sampleProps.json 파일을 추가합니다.
   다음은 슬라이더 구성 요소에 대해 초기 속성이 설정된 sampleProps.json 파일의 예입니다.

   {	
   	"label": "How many penguins do you want to buy?",
   	"defaultValue": 10,
   	"sliderMin": 20,
   	"sliderMax": 80,
   	"unitName": "penguins",
   	"unitIcon": "https://image.flaticon.com/icons/svg/141/141836.svg"  
   }

3. example.js 파일을 업데이트하여 사용자가 작성한 샘플 특성을 사용하여 테스트 클라이언트 도구를 통해 구성요소를 여십시오.
   1. 구성 요소 프로젝트에서 <component-name>/example/element.js 파일을 엽니다.
   2. @servicenow/sdk-ci 및 만든 샘플 속성 파일을 가져올 문을 추가합니다.
   3. 다음 문을 추가하고 <component-name> 을 구성 요소의 이름으로 바꿔 샘플 속성의 초기 데이터로 테스트 도구를 만듭니다.

      const el = document.createElement('tool-ci-custom-control-tester');
      el.componentTagName="<component-name>";
      el.initialExampleData=sampleProps;
      document.body.appendChild(el);

   다음은 테스트 클라이언트 도구를 사용하여 구성요소를 여는 example.js 파일의 예입니다.

   import '../src/now-chat-control-slider';
   
   import '@servicenow/sdk-ci';
   
   import sampleProps from './sampleProps.json';
   
   const el = document.createElement('tool-ci-custom-control-tester');
   el.componentTagName="<component-name>";
   el.initialExampleData=sampleProps;
   document.body.appendChild(el);

4. 개발 서버 명령을 실행하여 테스트 브라우저에서 컴포넌트를 보십시오.

   $ snc ui-component develop [--entry entry --open --port port --host host]

   이러한 매개변수의 값을 전달합니다.

   이름	설명
   항목	구성 요소 프로젝트의 테스트 모듈 경로입니다. 기본값: example/index.js.
   오픈	기본 브라우저를 열고 테스트 페이지로 이동합니다. 기본값: false.
   포트	개발 서버가 실행되는 포트입니다. 기본값: 8081.
   호스트	다른 사용자가 외부에서 로컬 개발 서버에 액세스할 수 있도록 하려는 경우 사용할 호스트 주소입니다. 일반적으로 0.0.0.0으로 설정됩니다.

   $ snc ui-component develop --entry example/hello.js --open --port 3000

   테스트 클라이언트 도구에서 구성요소가 열립니다. 사용자 지정 통제 JSON 입력 데이터 필드에서 제공된 초기 데이터와 사용자 지정 통제 반환 데이터 필드에서 구성요소의 출력을 볼 수 있습니다.

   

다음에 수행할 작업

구성요소가 예상대로 작동하면 인스턴스에 배포합니다. 인스턴스에 구성요소 배포 문서를 참조하십시오.

구성요소를 개발하고 인스턴스에 배포한 후에는 사용자 지정 컨트롤 및 정의 사용에 추가합니다 가상 에이전트 디자이너 . 자세한 내용은 가상 에이전트 사용자 지정 통제를 참조하십시오.

관련 개념

• 사용자 지정 구성요소 빌더