programming html

Có một bài kiểm tra nội dung HTML

Trên trang này, chúng ta sẽ học cách kiểm tra các phần tử HTML trong ứng dụng Angular.
1. Angular

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

3 cung cấp phương pháp

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

4 để định cấu hình mô-đun ứng dụng để thử nghiệm

beforeEach[async [] => {
   await TestBed.configureTestingModule[{
     declarations: [ PersonComponent ],
   }].compileComponents[];
   fixture = TestBed.createComponent[PersonComponent];
   component = fixture.componentInstance;
}];

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

5 được tạo bằng phương thức

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

5 cung cấp các thuộc tính và phương thức để truy cập các thành phần.
2.

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

1 được gọi khi HTML và CSS được tải bằng các tệp bên ngoài.

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Nếu chúng tôi đang chạy thử nghiệm trong môi trường CLI, thì không cần gọi

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

1.
3. Chúng ta có thể truy cập các phần tử HTML bằng cách sử dụng tên phần tử hoặc lớp CSS của nó.
Tìm mã để truy cập phần tử HTML bằng tên phần tử.

it['should match H1 text', fakeAsync [[] => {
  const h1 = fixture.debugElement.nativeElement.querySelector['h1'];
  fixture.detectChanges[];
  expect[component.message].toBe[h1.textContent];
}]];

Tìm mã để truy cập phần tử HTML bằng lớp CSS

const ul = fixture.debugElement.query[By.css['.nameList']];

Công nghệ được sử dụng

Tìm các công nghệ đang được sử dụng trong ví dụ của chúng tôi.
1. Góc 13. 1. 0
2. Nút. js 12. hai mươi. 0
3. hoa nhài 3. 10
4. nghiệp chướng 6. 3

Hoàn thành ví dụ

Trong ứng dụng demo của mình, chúng tôi đang thử nghiệm các phần tử

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

3 và

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

4. Tìm tệp HTML có chứa các phần tử

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

3 và

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

4.
người. thành phần. html

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Tìm tệp thử nghiệm.
người. thành phần. thông số kỹ thuật. ts

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Tìm màn hình in của đầu ra

Thẩm quyền giải quyết

Kịch bản kiểm thử thành phần

Tải xuống mã nguồn

Trong phần hướng dẫn There's này, chúng ta sẽ tìm hiểu về các tính năng There's khác nhau, There's Matchers và cách sử dụng There's a framework for JavaScript Unit Testing

Có một Javascript Testing framework do Facebook xây dựng

Nó được thiết kế chủ yếu cho các ứng dụng dựa trên React [cũng được xây dựng bởi Facebook] nhưng có thể được sử dụng để viết các kịch bản tự động hóa cho bất kỳ cơ sở mã dựa trên Javascript nào

Trong hướng dẫn thử nghiệm Jest này, chúng ta sẽ tìm hiểu về các tính năng khác nhau của Jest, các công cụ đối sánh của nó và xem cách chúng ta có thể sử dụng Jest với ví dụ từ đầu đến cuối. Chúng tôi cũng sẽ khám phá về phạm vi bảo hiểm mã bằng cách sử dụng Có

Danh sách các hướng dẫn trong sê-ri IS này

Hướng dẫn số 1. Hướng dẫn - Kiểm tra đơn vị JavaScript với Framework
Hướng dẫn số 2. Cách kiểm tra ứng dụng React bằng Jest Framework
Hướng dẫn số 3. Cấu hình và gỡ lỗi dựa trên thử nghiệm

Bạn sẽ học được gì

Bắt đầu với thử nghiệm Jest

Một số ưu điểm/tính năng của Jest được đưa ra dưới đây

Không yêu cầu cấu hình
Nhanh. Có các thử nghiệm chạy song song – điều này giúp giảm đáng kể thời gian thực hiện thử nghiệm
Bảo hiểm mã tích hợp. Jest hỗ trợ khả năng bao phủ mã vượt trội – đây là một số liệu rất hữu ích cho tất cả các đường ống phân phối dựa trên CI và hiệu quả kiểm tra tổng thể của một dự án
Thử nghiệm cô lập và hộp cát. Mỗi bài kiểm tra Jest chạy trong hộp cát riêng, điều này đảm bảo không có hai bài kiểm tra nào có thể can thiệp hoặc tác động lẫn nhau
Hỗ trợ Mocking mạnh mẽ. Có các thử nghiệm hỗ trợ tất cả các loại chế độ mô phỏng – có thể là chế độ mô phỏng chức năng, chế độ hẹn giờ hoặc chế độ mô phỏng các lệnh gọi API riêng lẻ
Hỗ trợ kiểm tra ảnh chụp nhanh. Thử nghiệm ảnh chụp nhanh có liên quan từ phối cảnh React. Jest hỗ trợ chụp ảnh chụp nhanh thành phần phản ứng đang được thử nghiệm - điều này có thể xác thực với đầu ra thực tế của thành phần. Điều này giúp ích rất nhiều trong việc xác thực hành vi của thành phần

Có một khung cho kiểm tra đơn vị JavaScript

Trong phần này, chúng ta sẽ xem một ví dụ từ đầu đến cuối để viết các bài kiểm tra bằng cách sử dụng khung IS cho một chức năng Javascript đơn giản. Đầu tiên, hãy xem cách cài đặt khung IS trong dự án của chúng tôi

IS cài đặt

Nó chỉ đơn giản là một gói nút và có thể được cài đặt bằng bất kỳ trình quản lý gói dựa trên nút nào. Ví dụ, npm hoặc sợi.

Hãy xem một số lệnh mẫu có thể được sử dụng để cài đặt Có gói

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

2____13

Để cài đặt mô-đun Jest trên toàn cầu, bạn chỉ cần sử dụng cờ '-g' cùng với lệnh npm. Điều này sẽ cho phép bạn sử dụng trực tiếp các lệnh Jest mà không cần định cấu hình tệp gói cho các bài kiểm tra npm

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Sử dụng Jest trong một dự án dựa trên nút

Để sử dụng Jest trong dự án dựa trên nút, chỉ cần sử dụng các lệnh từ phần trên để cài đặt gói nút cho Jest

Thực hiện theo các bước bên dưới, để tạo một dự án nút từ đầu và sau đó cài đặt Nó vào đó

#1] Tạo một thư mục/thư mục có tên là tên dự án của bạn, ví dụ , myFirstNodeProject

#2] Bây giờ sử dụng thiết bị đầu cuối hoặc dòng lệnh, điều hướng đến dự án được tạo ở bước trên và thực thi tập lệnh init npm bằng lệnh bên dưới

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

#3] Khi lệnh trên được thực thi, nó sẽ nhắc các câu hỏi/thông số khác nhau

Ví dụ , tên dự án, phiên bản, v.v. Chỉ cần tiếp tục nhấn enter [và chấp nhận các giá trị mặc định]. Sau khi hoàn thành, bạn sẽ thấy một gói. tệp json được tạo trong dự án của bạn. Đây là tệp cấu hình bắt buộc đối với bất kỳ dự án dựa trên nút nào

#4] Bây giờ hãy thực hiện lệnh để cài đặt Có một gói vào dự án mới được tạo bằng lệnh bên dưới

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Điều này sẽ cài đặt mô-đun Jest [cũng như các phần phụ thuộc của nó]

#5] Bây giờ, chúng ta đã có một dự án nút sẵn sàng với Bindings. Hãy định cấu hình tập lệnh kiểm tra npm để chạy các bài kiểm tra Jest i. e. khi lệnh 'npm test' được thực thi, tập lệnh sẽ chạy tất cả các thử nghiệm dựa trên khung Jest

Để làm điều đó, hãy cập nhật gói. json và thêm đoạn script như hình bên dưới

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

gói cuối cùng. tệp json sẽ trông như hình bên dưới

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Viết bài kiểm tra cho một chức năng Javascript

Trong phần này, chúng ta sẽ tạo một mã hàm Javascript đơn giản để cộng, trừ và nhân 2 số và viết các bài kiểm tra dựa trên Jest tương ứng cho nó

Trước tiên, hãy xem mã cho ứng dụng [hoặc chức năng] của chúng tôi đang được thử nghiệm trông như thế nào

#1] Trong dự án nút được tạo ở phần trên, hãy tạo một tệp js có tên là máy tính. js với nội dung như hình bên dưới

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

#2] Bây giờ, hãy tạo một tệp kiểm tra trong cùng thư mục cho các kiểm tra này, có tên là máy tính. kiểm tra. js – đây là quy ước được mong đợi Có một khung để tìm kiếm tất cả các tệp chứa Có các bài kiểm tra dựa trên. Chúng tôi cũng sẽ nhập chức năng đang được kiểm tra để thực thi mã trong bài kiểm tra

Đây là giao diện của tệp chỉ với khai báo nhập/yêu cầu

________hai mươi

#3] Bây giờ, hãy viết các bài kiểm tra cho các phương thức khác nhau trong tệp chính i. e. tổng, hiệu và tích

Có các bài kiểm tra tuân theo các bài kiểm tra kiểu BDD, với mỗi bộ kiểm tra có một khối mô tả chính và có thể có nhiều khối kiểm tra. Ngoài ra, xin lưu ý rằng các bài kiểm tra cũng có thể có các khối mô tả lồng nhau

Hãy viết một bài kiểm tra để cộng 2 số và xác nhận kết quả mong đợi. Chúng tôi sẽ cung cấp các số là 1 & 2 và mong đợi đầu ra là 3

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Vui lòng tham khảo các điểm dưới đây w. r. bài kiểm tra trên

a] Khối mô tả là mô tả bên ngoài cho bộ thử nghiệm i. e nó đại diện cho một vùng chứa chung cho tất cả các bài kiểm tra mà chúng tôi sẽ viết cho máy tính trong tệp này

b] Tiếp theo, chúng tôi có một khối kiểm tra riêng lẻ - khối này đại diện cho một bài kiểm tra duy nhất. Chuỗi trong dấu ngoặc kép đại diện cho tên của bài kiểm tra

c] Tham khảo mã trong khối mong đợi – “mong đợi” không là gì ngoài một khẳng định. Câu lệnh đang gọi phương thức tổng trong hàm được kiểm tra với đầu vào 1 & 2 và mong đợi đầu ra là 3

Chúng ta cũng có thể viết lại điều này theo cách đơn giản hơn để hiểu rõ hơn

Vui lòng xem bên dưới, bây giờ chúng tôi đã tách lệnh gọi hàm và xác nhận thành 2 câu lệnh riêng biệt để làm cho nó ngắn gọn hơn

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

d] Để chạy thử nghiệm này, chỉ cần chạy lệnh “npm test” trong terminal hoặc dấu nhắc lệnh tại vị trí dự án

Bạn sẽ thấy đầu ra như hình bên dưới

#4] Hãy thử thêm một số bài kiểm tra

a] Đầu tiên, hãy viết một bài kiểm tra thất bại và xem chúng tôi nhận được kết quả gì. Hãy thay đổi kết quả thành một số giá trị không chính xác trong cùng một bài kiểm tra mà chúng tôi đã viết trong phần trước. Xem bài kiểm tra trông như thế nào

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Ở đây, chúng tôi đang mong đợi tổng của 1 và 2 trả về 10, điều này không chính xác

Hãy thử thực hiện điều này và xem những gì chúng ta nhận được

Bạn có thể xem đầu ra chi tiết khi thử nghiệm không thành công. e. những gì thực sự được trả về và những gì được mong đợi và dòng nào gây ra lỗi trong chức năng đang được kiểm tra, v.v.

b] Hãy viết thêm các phép thử cho các chức năng khác i. sự khác biệt và sản phẩm

Tệp kiểm tra với tất cả các bài kiểm tra sẽ có dạng như bên dưới

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Khi các kiểm tra trên được thực hiện, đầu ra dưới đây được tạo

Video hướng dẫn. Ở đó có gì vậy

Có người mai mối

Có các xác nhận sử dụng trình đối sánh để xác nhận theo một điều kiện. Có các công cụ so khớp sử dụng từ Api mong đợi. Tài liệu API mong đợi có thể được tham khảo tại đây

Hãy xem qua một số công cụ so khớp được sử dụng phổ biến nhất cùng với các bài kiểm tra Jest

#1] Bình đẳng

Đây là những công cụ so khớp được sử dụng phổ biến nhất. Chúng được sử dụng để kiểm tra đẳng thức hoặc bất đẳng thức và chủ yếu được sử dụng cho các phép tính số học

Hãy xem một số ví dụ dưới đây

Ở đây chúng tôi đã viết 2 trình so khớp sử dụng toBe và không. toBe tương tự như bằng và không bằng

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

#2] Sự thật

Ở đây chúng ta sẽ thấy, các đối sánh cho null, false và true tôi. e. giá trị sai và đúng. Điều quan trọng cần lưu ý là bất cứ điều gì không đúng về mặt logic đều sai

Ví dụ: số 0, null, chuỗi rỗng, NaN đều là các ví dụ sai trong. r. Javascript.

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

#3] Bộ so khớp số

Những công cụ đối sánh này có thể được sử dụng cho các phép tính số học chung

Ví dụ: lớn hơn, nhỏ hơn, lớn hơnOrEqual, v.v.

Kiểm tra các ví dụ dưới đây để biết thêm chi tiết

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

#4] Trình so khớp chuỗi

Rất nhiều lần chúng ta cần các chuỗi khớp với biểu thức chính quy như một xác nhận trong bài kiểm tra Đơn vị. Có cung cấp các trình so khớp để các chuỗi được so khớp với một biểu thức chính quy

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Video hướng dẫn. Có người mai mối

There's Hooks - Thiết lập và phá bỏ

Giống như tất cả các khung kiểm tra đơn vị dựa trên xUnit khác, Có một khung cũng cung cấp các móc nối cho các phương pháp thiết lập và dọn dẹp. Các phương thức hook này được thực thi trước và sau mỗi thử nghiệm trong bộ thử nghiệm hoặc trước và sau khi thực thi testSuite

Hoàn toàn có 4 móc có sẵn để sử dụng

beforeEach và afterEach. Các hook này được thực thi trước và sau mỗi lần kiểm tra trong bộ kiểm tra
beforeAll và afterAll. Các hook này chỉ được thực thi một lần cho mỗi bộ thử nghiệm. và. e. nếu một bộ thử nghiệm có 10 thử nghiệm, thì các hook này sẽ chỉ được thực hiện một lần cho mỗi lần thực hiện thử nghiệm

Hãy xem một ví dụ. Chúng ta sẽ thêm các móc này vào ví dụ thử nghiệm tương tự về cộng 2 số.

Chúng ta sẽ thiết lập các đầu vào trong hook beforeEach để minh họa. Tệp kiểm tra sẽ có các móc kiểm tra như hình bên dưới

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Mẹo & Thủ thuật

#1] Báo cáo dòng lệnh tốt nhưng không dễ đọc. Có sẵn các thư viện/mô-đun để tạo báo cáo thử nghiệm dựa trên HTML cho Có các thử nghiệm. Nó có thể đạt được như hình dưới đây

Thêm gói nút cho jest-html-reporter bằng lệnh bên dưới

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Bây giờ thêm Có cấu hình cho người báo cáo trong gói. tệp json của dự án nút

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Sau khi được định cấu hình ngay bây giờ, hãy thực hiện các kiểm tra bằng cách sử dụng lệnh “npm test”
Nếu thiết lập thành công, bạn sẽ có thể thấy báo cáo dựa trên Html được tạo trong thư mục dự án

#2] Tạo báo cáo phạm vi mã. Phạm vi mã là một trong những số liệu quan trọng nhất từ góc độ thử nghiệm đơn vị. Về cơ bản, nó đo lường bao nhiêu phần trăm câu lệnh/nhánh được bao phủ cho ứng dụng đang được thử nghiệm

Nó cung cấp hỗ trợ vượt trội cho phạm vi bảo hiểm mã. Để có được báo cáo mức độ phù hợp của Jest, cấu hình Jest cần được thêm vào gói. tập tin json

Thêm cấu hình như hình bên dưới

@Component[{
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
}]

Khi cấu hình này hoàn tất, hãy thử chạy thử nghiệm bằng lệnh “npm test”, và bạn có thể xem chi tiết phạm vi mã ngay bên dưới kết quả thực hiện thử nghiệm như hình bên dưới

Video hướng dẫn. Có Bảo hiểm & Tạo báo cáo HTML

phần kết luận

Trong hướng dẫn Is này, chúng ta đã tìm hiểu những kiến thức cơ bản về khung Is. Chúng tôi đã học cách cài đặt khung Jest và xem cách nó có thể được sử dụng để kiểm tra các tệp Javascript đơn giản

Cũng đọc =>> Khung Javascript tốt nhất

Chúng tôi cũng đã khám phá các loại công cụ đối sánh khác nhau được hỗ trợ bởi Jest và báo cáo trình báo cáo Html cũng như báo cáo phạm vi mã được đề cập

Làm cách nào để kiểm tra mã HTML trong Jest?

js 'sử dụng nghiêm ngặt'; . xuất khẩu = { process[src, filename] { return processFile[src, filename];

Làm cách nào để kiểm tra các phần tử DOM trong Yes?

Thử nghiệm DOM cũng vậy, chúng tôi cần những người chạy thử nghiệm như karma . Ngoài ra, chúng ta cũng có thể sử dụng Jest với jsdom để đạt được kết quả tương tự. Jsdom là một gói để tương tác với DOM trong nút. js.

Có thể được sử dụng để kiểm tra trình duyệt không?

Trọng tâm chính của chúng tôi là sử dụng Jest với Selenium . Selenium là một công cụ tuyệt vời để tự động hóa các bài kiểm tra chức năng của chúng tôi trên các trang web và ứng dụng web bằng ngôn ngữ yêu thích của chúng tôi. Với CrossBrowserTesting, bạn có thể sử dụng Selenium và JavaScript để chạy thử nghiệm trình duyệt tự động trên hàng nghìn trình duyệt trên máy tính để bàn và thiết bị di động thực trên đám mây.

Những hạn chế của Jest là gì?

Hạn chế của Thử nghiệm Jest . Đây có thể là một nhược điểm lớn đối với các nhà phát triển muốn chạy và gỡ lỗi các thử nghiệm của họ trong một IDE như WebStorm. Sử dụng các tính năng tự động mô phỏng có thể làm chậm bộ thử nghiệm của bạn. It has less tooling and library support available compared to more mature libraries [like Mocha]. This can be a big drawback for developers who want to run and debug their tests in an IDE like WebStorm. Using auto-mocking features can slow down your test suite.