키 포인트
QUnit.test(), QUnit.asyncTest() 및 . 각 방법에는 특정 목적이 있으며 특정 매개 변수를 허용합니다.
deepEqual()
equal()
notDeepEqual() 설정 qunit
notEqual()<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="qunit-1.14.0.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <🎜> <🎜> </body> </html>보시다시피,이 코드는 CDN을 사용하여 CSS 및 JavaScript 파일을 포함합니다. 따라서 앞에서 다운로드 한 파일을 포함하려면 링크를 업데이트해야합니다. 마크에서, 당신은
배치를 볼 수 있습니다. 첫 번째는 Qunit을 ID로, 프레임 워크에서 사용하는 사용자 인터페이스를 표시하는 데 사용되며 테스트 결과가 표시됩니다. ID가 Qunit-Fixture 인 두 번째 는 귀하 (개발자)가 사용해야합니다. 이 요소를 사용하면 각 테스트 후 DOM을 청소할 걱정없이 DOM에서 요소를 추가, 편집 또는 제거하는 코드를 테스트 할 수 있습니다. 이 에 코드로 만든 요소를 넣으면 Qunit은 우리를 위해 재설정을 처리합니다. 마지막으로 테스트가 포함 된 파일을 나타내는 Tests.js 파일이 포함되어 있습니다. 제 조언은 파일을 사용하여 실제 프로젝트를 수행 할 때 테스트를 저장하는 것입니다. 이 튜토리얼을 위해 만든 라이브 데모에서 JSBIN을 사용했으며 파일 업로드를 허용하지 않았습니다. 따라서 데모에서는 테스트 코드를 인쇄 한 것을 알 수 있습니다. 이제 각 섹션으로 태그를 지정하는 것이 무엇을 의미하는지 이해 했으므로 브라우저에서 index.html 페이지를 열어 어떤 일이 발생하는지 확인하십시오. 모든 것이 잘 진행되면 아래와 같이 라이브 데모 인터페이스가 표시되며 JSBIN : QUNIT 예제로도 제공됩니다. 이 단계에서 우리와 관련된이 인터페이스의 유일한 부분은 Qunit이 처리 테스트를하는 시간, 정의 된 어설 션 수, 통과 및 실패한 시간을 보여주는 부분입니다. 위의 데모는 테스트를 정의하지 않음을 보여줍니다. 이 문제를 해결합시다. <div>
<code><div> Qunit <div>를 사용하여 테스트를 만드는 방법
<provides provides> Qunit은 새로운 테스트를 만드는 두 가지 방법을 제공합니다 : 및 . 첫 번째는 동기식으로 실행되는 코드를 테스트하는 데 사용되는 반면 두 번째는 비동기 코드를 테스트하는 데 사용됩니다. 이 섹션에서는 동기 코드 테스트를 만드는 방법을 설명합니다. <of of> 메소드의 서명은 다음과 같습니다.
<eter> 첫 번째 매개 변수 <p>는 생성 된 테스트를 식별하는 데 도움이되는 문자열입니다. 두 번째 매개 변수 는 프레임 워크가 실행할 어설 션을 포함하는 함수입니다. 프레임 워크는 모든 Qunit의 주장 방법을 노출시키는이 함수에 매개 변수를 전달합니다. 이 설명을 코드로 변환하면 다음 코드로 Tests.js 파일을 업데이트 할 수 있습니다.
<strong>
이 코드는 문자열 "나의 첫 번째 테스트"로 식별 된 새로운 테스트와 빈 본체가있는 기능을 만듭니다. 어떠한 주장도없이 테스트를 추가하는 것은 사용하지 않습니다. 이 문제를 해결하려면 Qunit에서 사용할 수있는 주장 방법을 배워야합니다. </strong>
Qunit 's Assertion Method </p>
<are> 어설 션은 소프트웨어 테스트의 핵심입니다. 그들은 우리의 코드가 예상대로 작동하는지 확인할 수 있습니다. Qunit에는 이러한 기대를 확인하는 여러 가지 방법이 있습니다. <p> 메소드 (이전 예에서 )로 전달 된 함수의 매개 변수에 의해 테스트에서 액세스 할 수 있습니다. 다음 목록은 사용 가능한 방법과 그 기능 및 서명을 요약합니다.</p>
<ul>
<li> : 모든 JavaScript 유형에 적합한 재귀적인 엄격한 비교. <code>deepEqual(value, expected[, message])와 value는 속성과 값의 관점에서 동일하고 동일한 프로토 타입을 갖는 경우
: expected는 비 스트릭 비교 (==) 검증을 사용하여 제공되는 매개 변수입니다.
equal(value, expected[, message]) : value와 동일하지만 불평등을 테스트합니다
expected : notDeepEqual(value, expected[, message]) : 엄격한 비교 (===) 검증을 사용하여 deepEqual() notEqual(value, expected[, message])와 동일하지만 불평등을 테스트합니다
equal() : strictEqual(value, expected[, message])
value : 함수, 메소드 또는 검증 된 변수에 저장된 값;
expected : 테스트 할 값. notPropEqual(value, expected[, message]) : 실행되는 함수는 오류를 반환해야합니다
propEqual()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="qunit-1.14.0.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <🎜> <🎜> </body> </html>
및 의 세 가지 함수로 객체 문자를 정의합니다. 첫 번째는 여러 매개 변수를 수용하고 최대 값을 반환합니다. max().
isOdd() 기대치를 설정 sortObj() isOdd()
sortObj() 메소드를 제공합니다. 이 방법은 비동기 코드를 처리 할 때 특히 유용하지만 동기 기능을 테스트 할 때 사용하는 것이 가장 좋습니다.
파라미터는 예상 어설 션 수를 지정합니다. (단어 제한이 초과되었으므로 테스트 코드 업데이트의 예도 여기에서 생략되지만 원칙은 이전 설명과 일치합니다) . Qunit 소개 결론
메소드를 사용하여 설정하는 방법을 설정하는 것의 중요성을 언급했습니다. 이 게시물을 즐겼기를 바랍니다. Qunit을 프로젝트에 통합하는 것을 고려할 것입니다. (FAQ 부품은 단어 제한이 초과되었으므로 여기에서 생략됩니다) expect()
