CSS 단위 테스트

CSS 단위 테스트

---

몇 번의 빠른 검색 을 통해 "내 CSS를 단위 테스트 할 수 있습니까?"라는 생각을 가진 최초의 사람 이 아님이 분명 합니다. .

여기 누군가가 CSS 단위 테스트를 성공적으로 수행했는지 궁금합니다. 시도했지만 실패했거나 자신의 이론이 있다면, 왜 (분명히) 아직 완료되지 않았는지 알려주세요.

---

웹 테스트 프레임 워크 인 Selenium을 사용할 수 있습니다. 이런 식으로 DOM 등의 요소에 어떤 스타일을 적용할지 주장 할 수 있습니다.

셀렌

그렇지 않으면 목표가 무엇인지 확실하지 않습니다. 단위 테스트는 이름에서 알 수 있듯이 '단위'를 테스트하는 것이며, 나에게 이것은 CSS가 아닌 코드에서만 의미가 있습니다.

---

Quixote 라는 새로운 CSS 단위 테스트 라이브러리가 있습니다. 이미지를 시각적으로 비교하는 대신 코드를 살펴 봅니다. Selenium과 달리 특정 스타일을 주장 할 필요가 없습니다. 대신 "중앙에 있어야합니다"또는 "왼쪽이이 다른 요소의 오른쪽에서 10px 더 멀리 있어야합니다"와 같이 말할 수 있습니다.

---

나는 우리가 CSS 단위 테스트를 할 수 없었거나하지 말아야하는 이유를 이해할 수 없습니다. 내가 염두에 둔 시나리오는 다음과 같습니다.

여러 모듈 식 CSS 파일로 구성된 CSS 프레임 워크가 있으며 내 사이트 중 5 개를 구동합니다.

Ex : base.css / form.css / article.css etc.

Site # 1에만 적용되는 요구 사항에 대해 base.css를 변경했다고 가정 해보십시오. => Site # 2 스타일링 없이도 스타일링을 깰 수 있습니다.

내 CSS 프레임 워크가 LESS또는 위에 빌드 된 경우 CSS 단위 테스트가 훨씬 더 적절할 것 SASS입니다. 매크로를 변경하면 모든 스타일이 손상 될 수 있습니다. .

---

브라우저 (클라이언트 측)에서 "단위 테스트"CSS가 가능할 것이라고 생각합니다. 단위 테스트 라기보다 자동화 된 검사기와 비슷합니다.

1. 특정 CSS 클래스 또는 ID (결과)에 대해 보존하려는 최종 CSS 속성 조건을 평가합니다.
2. 정적 콘텐츠와 CSS를 렌더링하려면 테스트 문서 HTML이 필요합니다. 모든 요소는 별도의 컨테이너에 콘텐츠에 포함되어야합니다.
3. 렌더링 후 선택한 대상의 최종 또는 결과 최종 속성을 자바 스크립트로 확인하고 일치하지 않는 요소를 출력합니다.

단위 테스트 사례 :

DOM 선택기 :

.test1
.test2
#test3

이것은 항상 최종 속성이어야합니다.

CSSAttribute1, CSSFinalValue1
CSSAttribute2, CSSFinalValue2
CSSAttribute3, CSSFinalValue3

JS에서 테스트 규칙을 설정하는 함수는 다음과 같습니다.

addCSSUnitTest(".test1, .test2, #test3", "margin-left: 4px; font-size: 8px");

그런 다음 DOM 요소에이 최종 속성이 있는지 확인합니다.

렌더링 후 모두 자바 스크립트로 수행됩니다. 그러나 어쨌든 이것은 코드를 크게 증가시킬 많은 단위 테스트 케이스를 구성해야하기 때문에 실용적이지 않습니다.

또한 브라우저 간 "호환성"을 위해 항상 reset.css가 있어야합니다.

대안은 당신이 그들의 전체 속성을 유지해야한다 알고 CSS 클래스를 지정하는 것입니다. DOM 선택기 목록을 만듭니다. jQuery를 사용하여 CSS 클래스 속성 (CSS 클래스에서 직접)을 가져오고 대상 DOM 요소에 유지되는지 확인합니다. 이 마지막 방법은 거의 완전히 자동화 될 수 있지만 더 복잡한 자바 스크립트 검사기가 필요합니다. 마지막은 CSS에서 ID 선택자 (예 : "# test3")를 확인하지 않고 클래스 (예 : ".test1") 만 확인합니다.

---

자동 시각적 비교를 위해 PhantomCSS를 사용할 수 있습니다. 그런 다음 기본 CSS 스타일 만로드하고 구성 요소를 모든 상태로 표시하지만 다른 구성 요소에서 CSS를로드하지 않는 CSS 모듈 단위 테스트 페이지를 만들 수 있습니다. 그런 다음 모든 모듈이로드 된 전체 CSS 파일과 비교할 수 있습니다.

---

UI가 많은 대규모 프로젝트에서 단위 테스트를 설정했으며 훌륭하게 작동했습니다! 보기보다 훨씬 쉬웠습니다.

getBoundingClientRect또는 같은 간단한 도구 를 사용 getComputedStyle하여 하이퍼 스크립트 와 쌍을 이루어 빠른 임시 DOM 트리를 생성하면됩니다. 우리가 작성한 테이프 CSS를 함께 테스트 할 때 보일러를 줄이기 위해 테이프 하지만 스택은 테스트 설정에는 변함이 없을 것입니다.

어제 저는 새로운 워크 플로우에 대한 간단한 자습서와 라이브 예제가 포함 된 자세한 블로그 게시물을 게시했으며 이로 인해 생산성이 향상된 방법 : CSS 단위 테스트를 통해 빠르게 진행하는 방법 .

---

내가 시도한 적이 없지만 작동 할 수있는 흥미로운 접근 방식이 있습니다.

1. 모든 구성 요소 등을 제공하는 샘플 페이지 ( https://getboostrap.com )를 만듭니다 .
2. Huxley로 테스트합니다.

Et voilà :)

---

단위 테스트 CSS는 프레임 워크와 CSS에 대한 접근 방식에 따라 다릅니다.

물어볼 질문 :

CSS에서 주어진 클래스 (예 : Assert.IsNotNull) 테스트

CSS 속성을 가져오고 속성을 확인합니다.

먼저 CSS 파일이 있는지 확인한 다음 특정 클래스를 찾은 다음 지정된 클래스 내의 속성을 찾습니다.

회귀 테스트 중에 누락 된 수업을 경험했으며 이전 결과에서 즉시 수정할 수있었습니다.

---

현재 CSS가 제대로 작동하는지 여부를 시각적으로 파악하고 있습니다. 지금까지 테스트하는 가장 좋은 방법은 개발 컴퓨터에 여러 브라우저를 설치하는 것입니다. Firefox에서 Firebug 및 Web Developer와 같은 도구를 사용하고 Turing이 완료 될 때까지 CSS 단위 테스트는 잊어 버리십시오. :-)

참조 URL : https://stackoverflow.com/questions/342579/css-unit-testing