JavaScript Testing

1장 자바스크립트 테스팅
자바스크립트는 웹 페이지의 어느 부분에 적합한가?
___HTML의 내용
실습 예제 - HTML 문서 작성
______속성을 이용하여 HTML 엘리먼트에 스타일 적용하기
______HTML 엘리먼트에 id와 class 이름 지정하기
___CSS
실습 예제 | CSS로 HTML 문서에 스타일 적용하기
______ID와 클래스 이름을 이용해 HTML 엘리먼트를 참조하고 스타일 적용하기
______클래스 선택자와 ID 선택자의 차이점
______클래스 선택자와 ID 선택자의 다른 용도
______모든 CSS 속성의 목록
___자바스크립트로 웹 페이지에 동적인 요소 가미하기
실습 예제 | HTML 문서에 동작 부여하기
______자바스크립트 문법
______자바스크립트 이벤트
______문서에서 엘리먼트 찾기
______정리
자바스크립트와 서버 측 언어의 차이점
웹 페이지가 자바스크립트 없이도 동작해야 하는 이유
테스팅이란 무엇인가
왜 테스트를 해야 하는가
오류의 종류
___불러오기 오류
실습 예제 | 불러오기 오류 체험하기
______부분적으로 올바른 자바스크립트
실습 예제 | 불러오기 오류 체험하기
______실행시간 오류
실습 예제 | 실행시간 오류 체험하기
______논리 오류
실습 예제 | 논리 오류 체험하기
오류 없는 자바스크립트 코드 작성을 위한 조언
___객체와 변수, 함수의 이름이 올바른지 확인하라
___문법이 올바른지 확인하라
___코드를 작성하기 전에 계획을 세워라
___코드의 정확성을 확인하라
___적절한 텍스트 편집기를 선택해 오류를 방지하라
요약

2장 자바스크립트에서의 임시 테스팅과 디버깅
임시 테스팅의 목적: 스크립트가 제대로 실행되게 만들자!
웹 브라우저에서 자바스크립트 오류가 발생하면 어떤 일이 일어나는가?
웹 브라우저 간의 차이점과 웹 브라우저 호환성 테스팅의 필요성
실습 예제 | 웹 브라우저의 기능을 비롯한 정보 가로채기
___기능 테스트를 이용해 웹 브라우저 간의 차이점 테스트하기
실습 예제 | 서로 다른 웹 브라우저 간의 기능 테스트
적합한 곳에서 출력을 얻고 값을 설정하고 있는가
___폼 값에 접근하기
실습 예제 | 폼 값에 접근하기
______폼의 값에 접근하는 그밖의 기법
___웹 페이지의 다른 부분에 접근하기
실습 예제 | 알맞은 곳에서 올바른 값 가져오기
스크립트가 기대한 결과를 내는가?
스크립트가 동작하지 않을 때 취할 수 있는 조치
___코드를 시각적으로 검사하기
___alert()을 이용해 코드의 동작 확인하기
___alert()을 이용해 어떤 값이 사용되는지 확인하기
실습 예제 | alert()을 이용하여 코드 검사하기
___덜 요란한 방법으로 어떤 코드에서 어떤 값을 사용하는지 알아내기
실습 예제 | 사용 중인 변수 값을 '조용히' 확인하기
스크립트의 일부를 주석 처리해 테스팅 단순화하기
실습 예제 | 검사 과정 단순화하기
시간 차이 문제 : HTML과 상호작용 하기 전에 HTML을 불러왔는지 확인하자
임시 테스팅만으로 충분하지 않은 이유
요약

3장 문법 검증
검증과 테스팅의 차이점
___유효하지만 잘못 된 코드 | 검증으로 찾을 수 없는 오류
___유효하지 않지만 원하는 대로 동작하는 코드
___유효하지 않고 제대로 동작하지도 않는 코드 | 검증이 아니면 찾아내기 힘든 오류
코드의 품질
___자바스크립트를 작성하기 전에 HTML과 CSS를 먼저 검증하자
______코드를 검증하지 않으면 어떤 일이 생길까?
___컬러 코딩 편집기로 검증 오류 찾기
검증으로 찾을 수 있는 일반적인 오류
온라인 검증기 JS린트
실습 예제 | JS린트를 이용해서 검증 오류 찾아내기
유효한 코드에서 발생하는 검증 경고
___유효한 코드의 검증 경고를 수정해야 할까?
___검증 경고를 수정하지 않으면 어떻게 될까?
검증 오류 고치기
___use strict 구문 누락 오류
실습 예제 | 'use strict' 오류 고치기
___++의 잘못된 사용
실습 예제 | ++의 잘못된 사용 오류 고치기
___정의하지 않은 함수 오류
실습 예제 | 정의하지 않은 함수 오류 고치기
___너무 많은 var 구문 사용
실습 예제 | 너무 많은 var 구문 사용 고치기
___<\/를 사용해야 할 곳에 실습 예제 | ___===를 사용해야 할 곳에 == 사용하기
실습 예제 | ==를 ===로 대체하기
___정의하지 않은 alert
실습 예제 | 정의하지 않은 alert 오류 고치기
___HTML 이벤트 핸들러 사용 지양하기
실습 예제 | HTML 이벤트 핸들러 사용 지양하기
___수정 사항 요약
자바스크립트 린트 다운로드하기
요약

4장 테스트 계획하기
소프트웨어 생명주기 훑어보기
___애자일 방법론
______실전에서의 애자일 방법론과 소프트웨어 생명주기
______분석과 설계
______구현과 테스팅
______배치
______유지보수
테스트를 하려면 반드시 테스트 계획을 세워야 할까
테스트 계획은 언제 수립할까
얼마나 많은 테스트가 필요할까
___코드가 의도하는 바가 무엇인가
___코드가 요구사항을 만족하는지 테스트하기
___사용자의 잘못된 행동 테스트하기
정리
주요 테스팅 관련 개념과 전략
___기능적 요구사항 테스트
___비기능적 요구사항 테스트
___수용 테스트
___블랙 박스 테스트
______사용성 테스트
______경계 값 테스트
______등가 분할
______베타 테스트
___화이트 박스 테스트
______분기 테스트
______파레토 테스트
___단위 테스트
___웹 페이지 테스트
___성능 테스트
___통합 테스트
___회귀 테스트: 코드 변경 후에 테스트 적용하기
테스트 순서
테스트 계획 문서화하기
___테스트 계획
______버전 부여하기
______테스트 전략
______버그 보고 양식
___예제 테스트 계획 정리
요약

5장 테스트 계획 실행하기
순서대로 테스트 계획 적용하기
___테스트 케이스 1: 유효하고 적절한 값으로 테스트하기
실습 예제 | 테스트 케이스 1a : 화이트 박스 테스트를 바탕으로 유효하고 적절한 값 테스트하기
___테스트 케이스 1b: 블랙박스 테스트를 바탕으로 유효하지만 적절하지 않은 값 테스트하기
실습 예제 | 테스트 케이스 1bi : 경계 값 테스트를 바탕으로 유효하지만 ___적절하지 않은 값 테스트하기
실습 예제 | 테스트 케이스 1bii : 예측된 유효하지 않은 값 테스트
______테스트 케이스 2 : 프로그램 논리 테스트하기
실습 예제 | 프로그램 논리 테스트
___테스트 케이스 3 : 통합 테스트와 유효하지 않은 값 테스트
실습 예제 | 테스트 케이스 3 : 기대했던 값으로 프로그램 전체 테스트하기
실습 예제 | 테스트 케이스 3b | 두 번째 폼의 견고성 테스트
___기대하지 않은 테스트 결과가 나올 때 어떻게 해야 할까
회귀 테스트 수행하기
실습 예제 | 버그 수정과 회귀 테스트 수행
___성능 문제 | 코드를 압축하여 불러오기 속도 높이기
___Ajax의 사용이 테스트에 미치는 영향
___서버 측 테스트의 차이점
___웹 사이트 방문자가 자바스크립트를 비활성화 했을 때 벌어지는 일
요약

6장 더 복잡한 코드 테스트하기
여러 개의 자바스크립트 파일을 사용할 때 발생하는 문제
___이벤트 핸들러 결합하기
___이름 충돌
자바스크립트 라이브러리 사용하기
___다른 사람이 만든 라이브러리도 테스트해야 할까?
___라이브러리 코드에 수행하는 테스트의 종류
______성능 테스트
______프로파일링 테스트
___라이브러리의 GUI와 위젯 부가 기능 테스트
고의적으로 자바스크립트 오류 던지기
___throw 구문
___try catch, finally 구문
내장 객체로 오류 잡아내기
___오류 객체
___RangeError 객체
___ReferenceError 객체
___TypeError 객체
___SyntaxError 객체
___URIError 객체
___EvalError 객체
오류 콘솔 로그 활용하기
___오류 메시지
___임의의 메시지 작성하기
스크립트 수정하고 테스트하기
실습 예제 | 코딩, 수정, 그리고 오류 던지고 잡기
요약

7장 디버깅 도구
IE8 개발자 도구(그리고 IE6과 IE7의 개발자 툴바 플러그인)
IE 개발자 도구 사용하기
___열기
___사용자 인터페이스 훑어보기
___IE 디버깅 도구를 활용한 디버깅 기초
실습 예제 | IE8 개발자 도구를 활용한 HTML 디버깅
실습 예제 | IE8 개발자 도구를 활용한 CSS 디버깅
___자바스크립트 디버깅하기
실습 예제 | IE8 개발자 도구를 활용한 자바스크립트 디버깅
사파리나 구글 크롬의 웹 검사기와 자바스크립트 디버거
사파리와 구글 크롬의 차이점
___크롬을 이용한 디버깅
___사용자 인터페이스 훑어보기
실습 예제 | 구글 크롬을 이용한 디버깅
오페라 자바스크립트 디버거 [드래곤플라이]
___드래곤플라이 사용하기
______드래곤플라이 시작하기
실습 예제 | 오페라 드래곤플라이를 활용한 디버깅
___Inspection과 Call Stack
___Continue, Step Into, Step Over, Step Out과 오류 시 정지하기
___드래곤플라이 설정
파이어폭스와 뱅크맨 확장 기능
___파이어폭스의 뱅크맨 확장기능 사용하기
______뱅크맨 자바스크립트 디버거 확장기능 설치하기
______뱅크맨 실행
______사용자 인터페이스 훑어보기
실습 예제 | 파이어폭스의 뱅크맨 확장기능을 이용한 디버깅
___Breakpoints와 Call Stack
___Local Variables와 Watches
실습 예제 | 뱅크맨을 활용한 고급 디버깅
파이어폭스와 파이어버그 확장 기능
요약

8장 테스팅 도구
Sahi
실습 예제 | Sahi를 사용한 사용자 인터페이스 테스팅
___Sahi로 더 복잡한 테스팅 수행하기
QUnit
실습 예제 | QUnit로 자바스크립트 테스팅하기
___실제 상황에서 QUnit 적용하기
___다양한 상황에서의 고급 경고 테스트
JSLitmus
실습 예제 | 임시 자바스크립트 벤치마크 테스트 만들기
___JSLitmus로 더 복잡한 테스팅하기
좀 더 살펴봐야 할 테스팅 도구
요약