메뉴

Jasmine Jquery와 예제를 포함하는 Jasmine Framework 자습서

  • 메인
  • 다른
  • Jasmine Jquery와 예제를 포함하는 Jasmine Framework 자습서

jasmine framework tutorial including jasmine jquery with examples

문제를 제거하기 위해 도구를 사용해보십시오

이 기사에서는 Jasmine 테스트 프레임 워크 및 그 구성을 다룹니다. 또한 Jasmine을 확장하여 Jquery 응용 프로그램을 테스트하는 Jasmine-Jquery 패키지에 대해 알아보십시오.

우리는 업 이 시리즈의 이전 튜토리얼에서.

이 튜토리얼에서는 Jasmine을 사용하여 JavaScript 웹 응용 프로그램에 대한 테스트를 작성하는 방법을 배우고 노드 기반 패키지 Jasmine-Jquery를 사용하여 Jquery 웹 응용 프로그램을 테스트하는 방법을 알아 봅니다.

여기서는 주로 테스트 작성을위한 기본 Jasmine 구성에 초점을 맞출 것입니다.

온라인에서 볼 수있는 무료 애니메이션 쇼

시작하자!!

Jasmine 프레임 워크

학습 내용 :

테스트 프레임 워크 란?

테스트 프레임 워크는 품질을 보장하기 위해 다른 프로그램의 테스트를 용이하게하는 프로그램 또는 패키지 모음입니다. 모든 프로그래밍 플랫폼에는 이전 튜토리얼에서 배웠어야하는 자체 테스트 프레임 워크가 있습니다.

모든 소프트웨어 시스템에서 수행 할 수있는 다양한 테스트 세트가 있습니다. 예 이러한 테스트에는 단위 테스트, 종단 간 (e2e) 테스트 등이 포함됩니다. 여기 상세 사항은.

예 JavaScript 애플리케이션을위한 테스트 프레임 워크에는 Mocha, Jasmine, intern, jest, Qunit 등이 포함됩니다.

Jasmine Framework 소개

Jasmine 로고

현재 시나리오에서 사용할 수있는 다양한 개발 방법이 있습니다. 이 중에서 가장 널리 사용되는 두 가지 개발 방식에는 TDD (Test-Driven Development)와 BDD (Behavior Driven Development)가 있습니다.

Test-Driven Development는 테스트를 먼저 작성한 다음 실행하는 개발 접근 방식입니다. 사용하는 함수가 아직 작성되지 않았기 때문에 각 테스트는 첫 번째 실행에서 실패합니다.

그런 다음 함수를 작성하고 테스트를 다시 실행합니다. 여기서 일부 테스트는 실패하고 다른 테스트는 통과합니다. 모든 테스트를 통과하도록 코드를 계속 리팩토링합니다.

행동 주도 개발도 동일한 접근 방식을 따릅니다. 유일한 차이점은 BDD는 소프트웨어 소유자 (고객 / 비즈니스 지향), 즉 비즈니스 요구 사항 또는 예상되는 동작과 함께 소프트웨어 기능을 충족하도록 작성되었다는 것입니다.

TDD는 소프트웨어 개발자를 만족시키기 위해 작성되었으므로 기능을 구축하는 데 사용되는 소프트웨어 기능이 정확한 결과, 안정적이고 신뢰할 수있는 결과를 생성하고 있음을 확신 할 수 있습니다.

보다 여기 TDD 대 BDD에 대해 더 많이 알고 싶습니다.

Jasmine은 동작 중심의 자바 스크립트 테스트 프레임 워크로, 테스트 작성이 쉽고 다른 프레임 워크에 의존하지 않습니다.

Jasmine을 사용하여 테스트를 작성하는 방법에는 두 가지가 있습니다. 한 가지 방법은 specRunner.html (브라우저에 테스트 결과를 표시 함)과 함께 제공되는 독립형 버전을 사용하는 것입니다. 다른 방법은 Jasmine을 설치하고 테스트를 작성하고 Karma와 같은 테스트 실행기로 실행하여 콘솔 창에 결과를 표시하는 것입니다.

다음 튜토리얼에서 Jasmine을 사용하는 두 가지 방법을 모두 살펴볼 것입니다.

테스트 작성을위한 기본 Jasmine 구성

아래에 나열된 것은 테스트 작성을위한 Jasmine의 다양한 구성입니다.

보자 !!

# 1) 설명 : 이 구조는 테스트 스위트를 작성하는 데 사용됩니다. 테스트 스위트는 여러 테스트의 모음입니다. '설명'은 그 자체로 두 개의 매개 변수를 취하는 함수입니다. 스위트 및 기능의 이름 .

배열에 값을 추가하는 가장 쉬운 방법은

함수 매개 변수에는 테스트 스위트 아래에 그룹화 된 테스트 모음이 포함됩니다.

# 2) 그것 : 이 구성은 테스트 사양을 작성하는 데 사용됩니다. 테스트 사양은 시스템에 대한 특정 또는 가장 미세한 기대치를 테스트하는 일련의 구성입니다.

describe 구문과 마찬가지로 두 개의 매개 변수도 사용합니다. 테스트의 이름과 기대가 충족되었는지 여부를 평가하는 어설 션이 포함 된 기능입니다.

# 3) 기대 :이 구성은 소프트웨어 시스템의 기대가 충족되는지 여부를 테스트하는 데 도움이됩니다.

실제 (소프트웨어 시스템이 반환하는 결과)라는 매개 변수를 취한 다음 일치 자 (예상 결과)라는 다른 구성과 연결됩니다.

# 4) 경기 : 이것은 expect 구문이 연결되는 구문 모음입니다. 기대가 충족되었는지 여부를 결정합니다.

이러한 구성은 수행되는 가장 가까운 테스트의 예상 값을 가져와 테스트 실행시 얻은 실제 값과 일치시킵니다. 딸깍 하는 소리 여기 Jasmine matcher 구조의 전체 목록은

# 5) beforeEach : 이것은 테스트를 건조하게 유지하는 데 도움이되도록 Jasmine에서 제공하는 글로벌 구성입니다 (반복하지 마십시오). 이 구조는 일반적으로 describe 구조의 함수 매개 변수에서 사용됩니다.

내부의 모든 코드는 제품군의 사양이 실행되기 전에 한 번 실행됩니다. 따라서 제품군의 모든 사양이 여기에 배치되기 전에 먼저 실행하려는 코드가 있어야합니다.

# 6) afterEach : 이 구조는 beforeEach와 동일하며, 설명 구조가 실행되면 포함 된 코드가 모든 코드 후에 실행된다는 차이점이 있습니다.

# 7)이 :이 구성은 모든 테스트 스위트의 'beforeEach', 'afterEach'및 'it'구성에서 값을 공유하는 데 사용할 수있는 빈 개체입니다. 모든 테스트 스위트에는 자체 오브젝트가 있으며 테스트 스위트가 실행되기 전에 오브젝트가 비어있는 상태로 재설정됩니다.

# 8) xdescribe :이 구성은 소프트웨어 제품군을 비활성화하는 데 사용됩니다. 단순히 테스트 실행자에게 테스트 스위트를 건너 뛰도록 지시하므로 결과가 표시되지 않고 고려되지 않습니다.

# 9) 히트 :이 구성은 제품군의 사양을 보류중인 사양으로 표시하는 데 사용됩니다. 보류중인 사양은 실행되지 않지만 테스트 결과에 해당 이름이 보류 중으로 표시되는 사양입니다.

또한 사양에서 보류중인 함수가 호출되면 해당 사양은 보류중인 사양으로 표시됩니다. 함수 본문없이 선언 된 모든 사양도 보류 중으로 태그가 지정됩니다.

# 10) 스파이 온 :이 구조는 Jasmine 스파이를 만드는 데 사용됩니다. 스파이는 조롱입니다. 모의 개체는 실제 개체를 표현하거나 모방하기 위해 만들어진 가짜 개체입니다. 모의는 그들이 나타내는 실제 개체를 만드는 데 드는 오버 헤드 비용을 방지하기 위해 필요합니다.

코드 단위 테스트의 본질은 연결된 다른 단위와 독립적으로 여러 조건에서 함수가 어떻게 작동하는지 확인하는 것입니다.

따라서 소프트웨어 제품의 프런트 엔드 장치가 연결되거나 연결될 다른 프런트 엔드 장치와 독립적으로 작동하는지 확인하기 위해 프런트 엔드 단위 테스트를 수행합니다.

이 테스트 동안 우리는 네트워크 연결, 데이터 소스 및 파일과 같은 다른 함수 및 개체에 종속 될 수있는 다양한 인수 및 함수를 호출합니다.

이러한 종속성을 충족하려면 (프런트 엔드 단위 테스트를 수행 할 수 있도록) 필요한 리소스를 사용할 수 있도록해야합니다. 따라서 우리는 실제 개체를 모방하고 실제로 개체를 만드는 오버 헤드 비용을 피하기 위해 모의를 채택합니다.

단순한 수준에서 spyOn은 종속 함수가 실제로 호출되는지 테스트하는 데 사용되며이 종속 함수는 우리가 감시하는 객체에 정의 된 단순한 함수일 수 있습니다.

spyOn 함수는 감시 대상 객체와 함수가 호출하는지 확인하는 종속성 함수라는 두 가지 매개 변수를 사용합니다.

스파이는 정의 된 제품군 또는 사양에 존재합니다. 제품군 또는 사양이 실행 된 후 스파이는 존재하지 않습니다.

# 11) createSpy : 이 구조는 spyOn과 동일한 목적으로 사용되지만이 기능을 사용하면 테스트를 위해 종속 함수를 가짜 함수로 대체 할 수 있다는 차이점이 있습니다.

왜 이렇게해야합니까? 이는 원래 종속성이 테스트 컨텍스트에서 사용할 수없는 다른 리소스에도 종속 될 때 유용합니다.

이 함수는 점이있는 Jasmine 객체 (예 : Jasmine.createSpy (parameters))를 사용하여 액세스합니다. 모의 객체를 생성하는 종속성의 이름을 나타내는 문자열 인 하나의 매개 변수 만 사용합니다.

스파이를 만든 후 첫 번째 호출이 훈련으로 간주되므로 첫 번째 호출의 스파이는 undefined를 반환합니다. 그런 다음 후속 호출 후 함수는 실제 값을 반환합니다. 아래에서 자세히 살펴보면서 자세한 내용을 확인하세요.

재스민 테스트 이중 기능 기능

spyOn 및 createSpy 구성은 모의 생성 (종속성)을 가능하게합니다. 이것은 하나의 테스트에서 두 개의 함수를 테스트하는 것입니다. 따라서 '테스트 이중 함수'라는 문입니다.

조롱을 가리키는 데 사용할 수있는 다른 단어는‘스텁’입니다.

스파이 매처 : 스파이와 상호 작용해야하는 요구 사항을 충족하는 여러 매 처가 있습니다. 여기에는 다음이 포함됩니다. ‘toHaveBeenCalled’및‘toHaveBeenCalledWith’ .

    • toHaveBeenCalled : 이것은 감시중인 종속성이 호출되었는지 확인하기 위해 사양에서 사용됩니다.
    • toHaveBeenCalledWith : 이것은 특정 매개 변수 세트를 사용하여 감시중인 종속성이 호출되었는지 확인하기 위해 스펙에서 사용됩니다.

방문 여기 모든 Jasmine 구조에 대한 자세한 개요는

자바에서 이진 검색 트리 구현

재스민을 사용하는 두 가지 방법

Jasmine 테스트를 작성하는 방법에는 두 가지가 있습니다. 하나는 specRunner를 통해 독립형 배포로 Jasmine을 사용하는 것이고 다른 하나는 테스트 러너와 함께 Jasmine을 사용하는 것입니다.

먼저 specRunner를 통해 Jasmine 테스트를 실행하는 방법을 살펴 보겠습니다.

Jasmine 독립형 배포를 사용하는 방법?

딸깍 하는 소리 여기 을 클릭 한 다음 클릭하여 독립 실행 형 배포를 다운로드합니다. Jasmine 독립형 .

프로젝트 폴더에 파일의 압축을 풉니 다. 프로젝트 디렉토리에 lib, src, spec 디렉토리를 추가한다는 것을 알게 될 것입니다. 또한 specRunner.html 및 MIT.LICENSE 파일을 추가합니다.

lib 디렉토리에는 specRunner.html 파일에 추가 된 테스트 파일에 포함 된 테스트를 실행하는 Jasmine 라이브러리가 포함되어 있습니다. specRunner.html 파일을 사용하면 콘솔 창이 아닌 웹 페이지 형식으로 브라우저에서 테스트를 실행하고 결과를 볼 수 있습니다.

src 디렉토리에는 프런트 엔드 소스 코드가 포함되어 있고 spec 디렉토리에는 Jasmine 테스트 스위트를 사용하여 작성된 테스트 파일이 포함되어 있습니다. 기본적으로 디렉터리 내에서 일부 테스트 스위트와 파일을 볼 수 있지만이를 사용하지 않을 것입니다. 이후 튜토리얼에서 자체 테스트를 작성합니다.

테스트 러너와 함께 Jasmine 사용

이것은 Jasmine을 사용하는 두 번째 방법으로 Karma와 같은 테스트 실행기를 구성하고 소스 파일과 테스트 사양 파일을 제공하여 테스트를 실행하는 것입니다.

그런 다음 이스탄불을 사용하여 결과를 표시하고 보고서를 생성하거나 테스트 결과를 coveralls.io에 게시 할 수 있습니다.

Jasmine-Jquery 소개

Jasmine-Jquery는 jquery로 빌드 된 프런트 엔드 코드의 테스트를 지원하는 노드 패키지입니다. 어떤면에서 Jquery의 프런트 엔드 테스트에 적합하도록 Jasmine 프레임 워크를 확장합니다.

Jasmine 프레임 워크에 추가하는 확장은 다음과 같습니다.

  • toBeChecked, toBeDisabled, toBeEmpty 등과 같은 Jquery 프레임 워크에 대한 사용자 정의 매처 세트입니다.
  • 사양에서 HTML, CSS 및 JSON 픽스처를 처리하기위한 API입니다.

이제 질문은 'API 란 무엇입니까?'입니다. API (애플리케이션 프로그래밍 인터페이스)는 처음부터 빌드하는 데 시간과 리소스가 소요될 수있는 특정 기능에 대한 액세스 권한을 부여하는 인터페이스입니다.

또 다른 질문은 비품이란 무엇입니까? Fixture는 결과를 반복 할 수 있도록 테스트가 실행되는 기준선 (잘 알려진 고정 환경)을 설정하기 위해 일반적으로 테스트를 작성하는 동안 생성하는 객체의 미리 정의 된 상태입니다.

보다 여기 맞춤 매처 및 API에 대한 자세한 내용은

결론

이 튜토리얼에서 우리는 테스트 프레임 워크가 무엇인지 이해하려고 노력했고 자바 스크립트 테스트 프레임 워크로 Jasmine을 소개했습니다. 테스트 사양을 작성하는 데 사용할 수있는 다양한 Jasmine의 구성을 살펴본 후 마침내 Jquery 애플리케이션을 테스트 할 수 있도록 Jasmine을 확장하는 노드 기반 패키지 인 Jasmine-Jquery를 도입했습니다.

테이크 아웃

  • 테스트 프레임 워크는 개발 된 소프트웨어의 품질을 보장하기 위해 소프트웨어 테스트를 용이하게하는 프로그램 또는 패키지 모음입니다.
  • Jasmine은 JavaScript 애플리케이션에 대한 테스트 사양 작성을 용이하게하는 구성을 제공하는 동작 기반 개발 도구입니다.
  • Test-Driven Development는 테스트를 먼저 작성한 다음 실행하는 개발 접근 방식입니다. 사용하는 함수가 아직 작성되지 않았기 때문에 각 테스트는 첫 번째 실행에서 실패합니다. 그런 다음 함수를 작성하고 테스트를 다시 실행합니다. 여기서 일부 테스트는 실패하고 다른 테스트는 통과합니다. 그런 다음 모든 테스트가 통과 될 때까지 코드를 계속 리팩토링합니다.
  • 행동 기반 개발 접근 방식은 소프트웨어 기능이 모든 이해 관계자가 예상 한대로 동작하는지 확인하기 위해 테스트를 작성하는 개발 접근 방식입니다.
  • Jasmine-Jquery는 Jquery로 빌드 된 프런트 엔드 코드의 테스트를 지원하는 노드 패키지입니다.

다음 튜토리얼

다가오는 튜토리얼에서는이 두 도구 (Jasmine 및 Karma)를 사용하여 일반적인 프로젝트에 대한 테스트 사양을 작성하는 방법을 살펴볼 것입니다. 또한 테스트를 시작하고 실행하는 데 필요한 gulp, browserify 등과 같은 다른 도구를 사용하는 방법도 알아 봅니다.

이전 튜토리얼 | NEXT 튜토리얼

추천 도서

^