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

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

시작하기 전에

• 환경을 설정합니다. 자세한 내용은 ServiceNow® 개발자 사이트.
• 구성요소 프로젝트를 설정합니다. 자세한 내용은 ServiceNow® 개발자 사이트
• 구성 요소를 개발합니다. 자세한 내용은 ServiceNow® 개발자 사이트
• 통신할 속성 추가 가상 에이전트

필요한 역할: 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": "요코하마",
       "@servicenow/library-translate": "^18.0.0",
       "@servicenow/now-button": "요코하마",
       "@servicenow/now-dropdown": "요코하마",
       "@servicenow/sass-generic": "요코하마",
       "@servicenow/cli-archetype": "요코하마",
       "@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 입력 데이터 필드에 제공된 초기 데이터와 사용자 지정 컨트롤 반환 데이터 필드에 구성요소의 출력을 볼 수 있습니다.

   

다음에 수행할 작업

구성요소가 예상대로 작동하는 경우 인스턴스에 배포합니다. 자세한 내용은 ServiceNow® 개발자 사이트.

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

관련 개념

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