Hương thơm của hoa nhài từ tất cả những vòng hoa
trên đường phố đền thờ đang trôi qua không khí.
Thật là một cảm giác ổn định.
Chắc là nghiệp tốt từ cuộc sống quá khứ của tôi.
Xin lỗi, tôi đã ở đâu?
Tôi đang nói với anh về thử nghiệm góc cạnh, phải không?
Và chúng ta sẽ sử dụng điều chỉnh nghiệp chướng để kiểm tra góc cạnh của chúng ta.
Vì vậy, chúng ta hãy tiếp tục với nó.
Một điều tốt về việc sử dụng Angular CLI là nó thiết lập tất cả các giàn giáo cho
bạn để tự động bao gồm sự hỗ trợ cho việc
kiểm tra ứng dụng Angular của bạn.
Vì vậy, bạn sẽ nhận thấy rằng bất cứ khi nào bạn tạo ra một thành phần hoặc
một dịch vụ cùng với các thành phần của các tập tin s,
bạn cũng sẽ nhận thấy một tập tin được gọi là component.spect.t
đã được đưa vào các thư mục dự án của bạn.
Và cũng có thể, nếu bạn đi đến tập tin package.json,
bạn sẽ thấy rằng đã có hỗ trợ cho các thử nghiệm Angular bao gồm ở đó.
Vì vậy, nếu bạn đi vào các phụ thuộc dev, bạn sẽ thấy rằng lõi hoa
nhài, phóng viên spec hoa nhài, các
mô-đun npm nghiệp và nghiệp liên quan đã được cài đặt trong
ứng dụng góc cạnh của bạn được giàn giáo ra bởi Angular CLI.
Vì vậy, chúng tôi có tất cả mọi thứ và nơi
để chúng tôi chỉ cần tiếp tục làm thử nghiệm của chúng tôi cho ứng dụng góc cạnh của chúng tôi.
Vì vậy, nếu bạn nhìn xung quanh bạn sẽ thấy rằng có
một tập tin được gọi là test.t trong thư mục nguồn của bạn,
vì vậy hãy mở tập tin test.t.
Bạn cũng sẽ thấy rằng có một thư mục khác ở đây gọi là e2e.
Chúng ta sẽ trở lại với điều đó trong bài tập tiếp theo.
Nhưng trong thư mục test.t, bạn sẽ thấy rằng đây là nơi
hỗ trợ nghiệp chướng của bạn đang được cấu hình ở đây.
Vì vậy, đi vào tập tin thử nghiệm này, theo mặc định,
khi bạn sử dụng hỗ trợ CLS góc để kiểm tra,
nó sẽ chạy các bài kiểm tra cho tất cả các thành phần và
dịch vụ được bao gồm trong ứng dụng góc cạnh của bạn.
Bây giờ, tôi sẽ minh họa cho bạn làm thế nào để làm thử nghiệm cho
một thành phần cụ thể, MenuComponent.
Vì vậy, tôi muốn hạn chế bản thân mình để chỉ sử dụng tập tin .spec thành phần menu và
làm thử nghiệm cho chỉ là thành phần menu.
Vì vậy, đi vào tập tin test.s.
Một cách chúng ta có thể cấu hình các thử nghiệm CLI góc để chạy thử nghiệm chỉ cho
một thành phần cụ thể là để đi đến dòng này ở đây,
mà nói const bối cảnh và sau đó thay đổi này để menu,
bạn có thể thấy /menu\ .component và spec.tsfile.
Trước đó nó chỉ là tập tin/\ .spec.t, có nghĩa là bạn
sẽ chạy tất cả các tập tin spec có trong thư mục nguồn dự án của bạn.
Vì vậy, ngay bây giờ, bằng cách xác định điều này ở đây,
tôi quan tâm để chạy thử nghiệm chỉ cho các thành phần trình đơn tập tin spec ở đây.
Bây giờ điều này tôi tìm ra bằng cách tìm kiếm xung quanh trên
tràn ngăn xếp nơi tôi tìm thấy ai đó cho tôi câu trả lời cho điều này,
chỉ đến một số tài nguyên trên Angular CLI, và vì vậy
đó là cách tôi tìm ra rằng đây là cách để hạn chế
các thử nghiệm tập tin thử nghiệm của một thành phần cụ thể.
Vì vậy, sau khi thực hiện một thay đổi để các tập tin test.s, chúng ta hãy lưu các thay đổi.
Bây giờ, chúng tôi sẽ cố gắng chạy thử nghiệm của chúng tôi trên thành phần menu.
Vì vậy, như bạn thấy, trong thành phần menu, chúng tôi đã có các
thành phần menu .spec.t tập tin, trong đó có một số mã đã có.
Hãy thử chạy thử nghiệm này và xem điều gì sẽ xảy ra.
Đi đến thiết bị đầu cuối, thêm dấu nhắc, gõ thử nghiệm ng, và điều này
sẽ dẫn đến một CLI góc bắt đầu thử nghiệm cho thành phần menu.
Vì vậy, khi bạn gõ này và nhấn Return,
sau đó Angular CLI sẽ bắt đầu biên dịch ứng dụng góc cạnh của bạn.
Nó cũng sẽ mở một cửa sổ trình duyệt, trong trường hợp của tôi nó sẽ mở một
cửa sổ trình duyệt Chrome và sau đó sử dụng cửa sổ trình duyệt đó để chạy thử nghiệm.
Và bạn thấy rằng ở phía sau, bạn có cửa sổ trình duyệt Chrome chạy và
tất cả đều đầy màu đỏ và một loạt các từ ở đó.
Các thông tin tương tự cũng sẽ được in ra trong cửa sổ giao diện điều khiển của bạn,
và từ đó tôi có thể thấy rằng thử nghiệm của tôi đã không chạy chính xác.
Có một cái gì đó không được cấu hình đúng trong tập tin test của tôi, vì vậy tôi sẽ cần phải đi và
chỉnh sửa tập tin test của tôi để bao gồm hỗ trợ thích hợp để chạy thử nghiệm này một cách chính xác.
Vì vậy, chúng ta hãy đi đến các tập tin spec.t thành phần trình đơn và
sau đó chuẩn bị thử nghiệm của chúng tôi cho phù hợp.
Bây giờ chúng ta có thể để thử nghiệm ng chạy ngay tại đây.
Bất cứ khi nào bạn thực hiện thay đổi tập tin thành
phần nhỏ hoặc tập tin thành phần nhỏ và
lưu các thay đổi, kiểm tra này sẽ tự động chạy tại thời điểm đó.
Vì vậy, chúng ta hãy đi đến các tập tin MenuComponent.spect.Ts.
Đi đến tệp MenuComponent.spect.Ts,
chúng tôi hiểu rằng tệp spect sử dụng cú pháp Jasmine để mô tả bài kiểm tra.
Vì vậy, bạn đã nhận thấy rằng có một cái gì
đó ở đây mà bắt đầu với mô tả và sau đó có một chức năng được xác định trong đó.
Vì vậy, đây là những gì tôi đã đề cập đến khi tôi nói về cú pháp Jasmine trước đó.
Và cũng có thể nếu bạn cuộn xuống, bạn sẽ thấy nó hoặc như vậy trong đó.
Và ngoài ra, bạn sẽ thấy một cái gì đó gọi là trướcMỗi, ở đây.
Hãy kiểm tra tập tin này một chút chi tiết hơn để hiểu làm thế nào
tập tin này được cấu hình, và làm thế nào kiểm tra này được thiết lập trong tập tin cụ thể này.
Vì vậy, trong tập tin kiểm tra này, bạn sẽ nhận thấy rằng
chúng tôi đang nhập khẩu ở đây một tập hợp các lớp học từ thử nghiệm lõi góc.
Vì vậy, mô-đun này cho phép bạn cung cấp hỗ trợ thử nghiệm cho
ứng dụng góc cạnh của bạn, và cho phép bạn thiết kế thử nghiệm cho thành phần của bạn.
Vì vậy, bạn thấy rằng tôi đang nhập khẩu async và
ComponentFixture và TestBed từ thư viện thử nghiệm này.
Tôi sẽ gọi nó là thư viện thử nghiệm.
Ngoài ra bạn thấy rằng MenuComponent cũng được nhập khẩu ở đây.
Bây giờ, một khi chúng ta hiểu hai, chúng ta
hãy đi xuống mã để hiểu những gì chúng ta đang cố gắng để làm ở đây.
Vì vậy, ở đây, như bạn mong đợi, này mô tả ở đây là
xác định rằng chức năng đặc biệt này được mô tả,
Một bài kiểm tra dựa trên Jasmine mà chúng tôi đang chỉ định cho ứng dụng Angular của chúng tôi.
Vì vậy, khi bạn nhìn vào mô tả ở đây,
bạn sẽ thấy rằng điều này bao gồm tất cả các mã này trong đây.
Vì vậy, đây là một phần của một tập hợp các bài kiểm tra mà chúng tôi đang chạy là
thành phần menu của chúng tôi.
Vì vậy, bên trong mô tả, bạn sẽ thấy rằng có một chuỗi ở đây.
Điều này xác định tập hợp các thử nghiệm cụ thể mà bạn đang chạy ở đây.
Vì vậy, nó nói trên thành phần menu.
Vì vậy, ở đây bạn có thể chỉ định bất cứ chuỗi nào bạn muốn.
Bạn có thể sử dụng điều này như là một mô tả để
xác định những gì tập hợp các bài kiểm tra cụ thể này đang làm.
Vì vậy, ở đây, tôi sẽ ở lại với một điều trước đây.
Chúng tôi đang cố gắng kiểm tra thành phần menu.
Và sau đó, bạn thấy rằng chúng tôi đang chỉ định một chức năng addo ở đây.
Trong chức năng addo này, chúng ta sẽ xây dựng các bài kiểm tra.
Đối với MenuComponent của chúng tôi ở đây.
Vì vậy, sau này, bạn sẽ thấy rằng chúng ta đang khai báo một biến được gọi là thành phần,
đó là của các loại MenuComponent.
Bây giờ và sau đó, chúng tôi cũng tuyên bố một biến fixture,
đó là của các loại ComponentFixture.
Đó là loại MenuComponent.
Bây giờ, tại sao điều này lại thú vị?
Bây giờ, trong ứng dụng Angular của
chúng tôi, chúng tôi có MenuComponent mà chúng tôi đã thiết kế.
Vì vậy, trong tập tin kiểm tra này,
chúng tôi sẽ tạo ra rằng MenuComponent bằng cách sử dụng TestBed góc,
và sau đó chúng tôi sẽ thực hiện các bài kiểm tra trên MenuComponent.
Vì vậy, chúng tôi sẽ cô lập các MenuComponent, và
sau đó thực hiện các bài kiểm tra đơn vị trên đó thành phần cụ thể.
Bây giờ, đây là nơi mà các tiện ích thử nghiệm góc
mà đi kèm với hỗ trợ sử dụng TestBed.
TestBed cho phép tôi thiết lập môi trường mà trong đó
tôi có thể kiểm tra thành phần góc cạnh của tôi.
Vì vậy, ở đây, bạn thấy rằng chúng ta đang nói TestBed và
sau đó gọi các cấu hình phương pháp mô-đun thử nghiệm của lớp TestBed ở đây.
Và bên trong mô-đun thử nghiệm cấu hình này,
bạn có thể khai báo một loạt các điều, và bạn sẽ thấy tôi thêm nhiều hơn ở đây.
Điều này hoạt động chính xác giống như cấu hình mô-đun NG
mà bạn làm cho mô-đun tại của chúng tôi ở đó.
Vì vậy, tất cả các thông tin mà bạn cần để
thiết lập MenuComponent sẽ được khai báo ở đây.
Vì vậy, phần mô hình NG mà bạn thấy trong mô-đun ứng dụng,
loại cú pháp tương tự có thể được sử dụng ở đây để khai báo sự hỗ trợ cho
thử nghiệm MenuComponent ở đây.
Và cũng sau này, bạn sẽ thấy chức năng này được gọi là CompileComponents.
Vì vậy, phương pháp này sẽ biên dịch MenuComponent và
làm cho nó sẵn sàng để làm thử nghiệm.
Cũng lưu ý, rằng toàn bộ điều này, chức năng này ở đây,
được bao bọc bên trong một cái gì đó gọi là một async ở đây.
Bây giờ, tại sao chúng ta cần không đồng bộ này?
Bây giờ, bởi vì việc chuẩn bị các thành phần bằng cách sử dụng
phương pháp CompileComponents này mất một số lượng thời gian.
Và cho đến khi hoàn thành, chúng ta không thể tiến hành các bài kiểm tra.
Vì vậy, bằng cách sử dụng mô-đun async, chúng tôi về cơ bản xác định rằng
tôi sẽ chờ đợi cho toàn bộ điều này để hoàn thành trước khi tiếp tục.
Vì vậy, mô-đun không đồng bộ như bạn thấy,
kết thúc một chức năng kiểm tra bên trong một vùng thử nghiệm không đồng bộ.
Vì vậy, điều này có nghĩa là kiểm tra này sẽ tự động hoàn thành
khi tất cả các cuộc gọi không đồng bộ bên trong khu vực này được thực hiện.
Vì vậy, đây là những gì việc sử dụng các async mà chúng ta có ở đây, làm.
Vì vậy, những gì điều này có nghĩa là bạn có thể sử dụng chức năng đồng bộ này,
hoặc trong trước mỗi hoặc trong nó cũng, vì vậy trong nó, tuyên bố của chúng tôi.
Vì vậy, khi bạn nhìn thấy bên trong nó cũng, bạn sẽ thấy rằng bạn có thể sử dụng các async.
Vì vậy, trong trường hợp bạn có bất kỳ hoạt động ở đây mà thực hiện không đồng bộ.
Sau đó, bạn cần phải đợi cho các thao tác đó hoàn tất để kiểm tra đó hoàn tất.
Vì vậy, ví dụ, nếu bạn đang gọi một dịch vụ và chờ cho
dịch vụ để trả về giá trị sau đó.
Tất cả những gì cần phải hoàn thành trước khi bạn có thể tiếp tục.
Vì vậy, những người được kích hoạt bằng cách sử dụng không đồng bộ này, để bao quanh chức năng này ở đây.
Bây giờ, ngoài ra, thứ hai trướcMỗi, bây giờ chúng ta đã tách nó ra
thành hai trướcMỗi ở đây, bởi vì chúng ta muốn điều này để hoàn thành.
Và CompileComponents này sẽ mất một khoảng thời gian nhất định,
đặc biệt là nếu thành phần của bạn đang sử dụng một mẫu bên ngoài,
như chúng ta làm trong MenuComponent của chúng tôi.
Vì vậy, nó đòi hỏi một thời gian cho các mẫu bên ngoài để sẵn sàng cho
thử nghiệm của tôi để tiến hành về phía trước.
Vì vậy, chúng ta cần phải chờ cho toàn bộ chuyện này hoàn thành.
Vì vậy, đó là lý do tại sao sau khi điều này được hoàn thành,
sau đó chúng ta sẽ nhận được phần thứ hai, nơi chúng ta sẽ
nhận được một số tài liệu tham khảo đến một số giá trị từ giường thử nghiệm.
Bây giờ, điều này là gì trướcMỗi chức năng mà bạn đang làm ở đây?
Những gì trướcEach có nghĩa là bất cứ điều gì bạn khai báo bên trong đây,
chức năng đó sẽ được thực hiện trướcMỗi kiểm tra,
mà bạn sẽ chỉ định sau khi sử dụng nó.
Vì vậy, sử dụng điều này trướcMỗi, bạn có thể thiết lập
cấu hình ban đầu cho bài kiểm tra của bạn để tiếp tục.
Vì vậy, có nghĩa là ở đây, chúng tôi đang thiết lập TestBed của
chúng tôi, chuẩn bị thành phần menu của chúng tôi và sau đó thiết lập một vài điều cho
thành phần menu của chúng tôi, trước khi chúng tôi tiến hành để thực hiện các thử nghiệm.
Vì vậy, đối với mỗi bài kiểm tra mà bạn sẽ xác định bằng cách sử dụng một nó ở đây,
những trước mỗi bất cứ điều gì bạn chỉ định trong này trước mỗi bài kiểm tra,
sẽ được thực hiện trước khi bài kiểm tra được tiến hành.
Vì vậy, ở đây như bạn có thể thấy tôi đang chuẩn bị TestBed.
Sau đó, tôi được truy cập vào vật cố định.
Vì vậy, tôi đang sử dụng TestBed, tôi đang nói CreateComponent và MenuComponent.
Vì vậy, điều này sẽ trả lại cho tôi một tham chiếu đến MenuComponent mà
tôi đang tạo ra trong kịch bản thử nghiệm của tôi ở đây và
sau đó nhận được một tham chiếu đến điều đó, bởi vì tôi sẽ cần một tham chiếu đến
điều đó để thực hiện một số thao tác trên thành phần đó có.
Ngoài ra, từ các fixture, tôi nhận được một quyền truy cập vào các
trường hợp thành phần đang được tạo ra bởi cố định thành phần của tôi ở đây.
Vì vậy, như bạn có thể thấy, các thành phần cố định của các loại MenuComponent và
sau đó gọi các Component, cung cấp cho tôi quyền truy cập vào đó
thành phần menu cụ thể mà tôi đã tạo ra bên trong TestBed để thực hiện các bài kiểm tra đơn vị.
Bây giờ, sau này chúng tôi gọi đây là DetectChanges.
Bây giờ, điều này có nghĩa là điều này sẽ tiến hành chỉ sau khi tất cả các thay đổi
được hoàn thành, và sau đó nhận ra rằng các thay đổi đã hoàn thành.
Vì vậy, điều này sẽ kích hoạt một chu kỳ phát hiện thay đổi cho thành phần này.
Vì vậy, điều này có nghĩa là điều này sẽ đảm bảo rằng bạn đã thực hiện bất kỳ
thay đổi nào trước đó, tất cả các thay đổi được phát hiện và
tất cả mọi thứ được ổn định trước khi bạn có thể tiến hành kiểm tra của bạn.
Bây giờ, sau này, chúng tôi sẽ sử dụng nó để cấu hình thử nghiệm đầu tiên của chúng tôi ở đây.
Bài kiểm tra đầu tiên mà chúng ta đang làm ở đây là gì?
Thử nghiệm đầu tiên,
những gì chúng ta sẽ thử nghiệm là để đảm bảo rằng các thành phần đã được tạo ra.
Vì vậy, trong điều này ở đây, tôi đang sử dụng cú pháp Jasmin và tôi đang nói nó.
Và sau đó ở đây bạn có thể đưa ra một mô tả dưới dạng một chuỗi
để xác định những gì thử nghiệm này thực sự thử nghiệm về.
Vì vậy, những gì chúng tôi đang nói là,
chúng tôi đang thử nghiệm để xem liệu các thành phần đã được tạo ra hay không.
Vì vậy, để làm điều đó, tôi nói rằng nó nên tạo ra ý nghĩa rằng,
thiết lập này ở đây nên đã tạo ra các thành phần một cách chính xác.
Vì vậy, đó là lý do tại sao bên trong đây, tôi đang sử dụng phương pháp này gọi là mong đợi.
Vì vậy, phương pháp mong đợi bên trong đây có một giá trị ở đây, và
sau đó bạn có thể kiểm tra để xem nếu giá trị này thỏa mãn một cái gì đó.
Vì vậy, ở đây chúng tôi đang nói ToBetruthy, có nghĩa là giá trị đặc biệt này nên đúng.
Đó là những gì được quy định bởi phương pháp này được gọi là TobeTruthy.
Bạn cũng có thể nói TobeFalsy, có nghĩa là nên đánh giá sai.
Nhưng trong trường hợp này,
chúng tôi đang thử nghiệm để đảm bảo rằng các thành phần đã được tạo ra một cách chính xác.
Vì vậy, đó là lý do tại sao chúng tôi đang nói mong đợi TobeTruthy ở đây.
Vì vậy, đây là một thử nghiệm đơn giản mà chúng tôi đang làm để đảm bảo rằng
thành phần của chúng tôi được tạo ra một cách chính xác.
Nhưng như chúng ta nhận ra khi tôi chạy thử nghiệm này, nó không chạy đúng cách.
Hãy nhanh chóng lướt qua và xem vấn đề là gì trong
việc tạo thành phần của chúng tôi trong cửa sổ giao diện điều khiển ở đó.
Quay trở lại cửa sổ giao diện điều khiển, hãy để tôi duyệt lại và
xem vấn đề ở đâu.
Và tôi bắt đầu nhận thấy rằng điều này là xác định rằng nó
dường như không nhận ra một số điều mà thành phần của tôi đang sử dụng.
Đặc biệt, người ta nói rằng MDRau bina
là một cái gì đó mà nó không nhận ra,
MDGetGridList và một vài thứ khác. Điều
đó ngay lập tức gợi ý với tôi rằng tôi cần phải làm thêm một vài
cấu hình trong tập tin thử nghiệm của tôi trước khi thử nghiệm của tôi có thể chạy chính xác.
Vì vậy, chúng ta hãy quay trở lại tập tin spec của chúng tôi và thực hiện một số thay đổi cho nó.
Quay trở lại tập tin spec của chúng tôi,
từ hồi tưởng của chúng tôi về cách chúng tôi tạo ra mẫu.
Chúng tôi biết rằng trong mẫu chúng tôi đã có một liên kết bộ định tuyến trong
mẫu của MenuComponent.
Vì vậy, tôi cần hỗ trợ cho định tuyến để nhận ra rằng
liên kết router mà chúng tôi sử dụng trong tập tin MenuComponent.html.
Vì vậy, đây là nơi tôi sẽ nhập khẩu
một hỗ trợ kiểm tra
được cung cấp gọi là RouterTestingModule,
trong đó có sẵn từ Angular/Router/Testing thư viện ở đây.
Vì vậy, mô-đun thử nghiệm bộ định tuyến này sẽ cho phép tôi
cấu hình một số khía cạnh về bộ định tuyến của tôi.
Chúng ta sẽ thấy rằng cách chúng tôi sử dụng này là một chút khác biệt so với mô-đun router
mà chúng tôi đã sử dụng trong ứng dụng của chúng tôi.
Vì vậy, chúng tôi sẽ nhập các mô-đun thử nghiệm định tuyến, bạn cũng lưu ý
rằng chúng tôi đang sử dụng một số hình ảnh động, và
cũng sử dụng các thành phần vật liệu góc trong mẫu của chúng tôi.
Vì vậy, tôi cần phải nhập khẩu
BrowserAnimationsModule vào tập tin thử nghiệm của tôi.
Vì vậy, điều này đến từ góc góc/nền bảng/trình duyệt.
Bây giờ bạn sẽ nhận thấy rằng chúng ta cần phải làm điều này một cách rõ ràng ở đây chỉ đơn giản bởi vì,
trong ứng dụng Angular thực tế tất cả điều này là trong các mô-đun ứng dụng,
và vì vậy mà đã có sẵn cho các thành phần.
Ngay bây giờ chúng tôi đang thử nghiệm thành phần này, MenuComponent trong sự cô lập, vì vậy
đó là lý do tại sao nó không biết về tất cả những điều này vì vậy
chúng tôi cần phải xác định rõ ràng tất cả những điều này ở đây.
Vì vậy, tôi sẽ nhập khẩu đó từ nền tảng IM hoạt hình trình duyệt ở đây.
Vì vậy, angular.platform.browser hình ảnh động nhập
mô-đun hình ảnh động trình duyệt ở đây.
Hãy để tôi bao gồm mô-đun lớp flex, vì vậy
tôi sẽ bao gồm Angular FlexLayout.
Vì vậy, đây là cần thiết bởi vì tôi cần chúng trong mẫu,
Tôi sẽ cũng nhập khẩu món ăn đó từ,
chia sẻ/món ăn bởi vì như bạn sẽ thấy sau,
Tôi cần phải cấu hình, Một, D
ishService vì MenuComponent của tôi
phụ thuộc vào DishService vì vậy
tôi cần điều đó cũng tại chỗ.
Mặc dù các bạn sẽ thấy rằng tôi sẽ ngăn chặn điều đó.
Tôi sẽ giải thích rằng trong một thời gian ngắn, và tôi cũng cần phải nhập thêm một vài điều nữa.
Tôi sẽ nhập khẩu DESS từ,
bạn nhớ lại rằng chúng tôi sử dụng hằng số này được gọi là DESS
mà chúng tôi xuất khẩu từ tập tin chia sẻ/dishes.s.
Tôi sẽ cần điều đó để cấu hình một vài thứ nữa.
Tôi cũng sẽ nhập BaseURL.
Mà tôi tuyên bố trong, Shared/
file url cơ sở.
Và cũng có thể, tôi cần phải nhập khẩu
Observable từ,
rxjs, dấu gạch chéo, Bởi vì tôi
cũng sẽ sử dụng Observable một chút sau đó, khi tôi cấu hình một vài điều.
Vì vậy, bây giờ, tôi đã nhập tất cả những thứ này.
Bắt xuống cấu hình TestBed, bạn thấy rằng
phần này là chính xác giống như trình trang trí mô-đun động cơ mà chúng tôi có trong mô-đun ứng dụng.
Vì vậy, đây là nơi tôi cũng có thể sử dụng nhập khẩu
giống như tôi đã làm với các mô-đun động cơ.
Và trong nhập khẩu, tôi sẽ nhập khẩu
mô-đun BrowserAnimation vì đó là cái gì đó là l yêu cầu, và
sau đó cũng nhập khẩu mô-đun FlexLayout.
Và cũng là RouterTestingModule bởi vì
tôi sẽ cần RouterTestingModule để cấu hình một vài điều.
Bây giờ, khi bạn sử dụng RouterTestingModule, bạn cần phải sử dụng phương pháp này được
gọi là WithRoutes thay vì sử dụng ForRoot như chúng tôi đã sử dụng với mô-đun router ở đây.
Vì vậy, trong này vớiRoutes bạn có thể chỉ định một số
tuyến đường mặc định mà bạn cần cho ứng dụng cụ thể của bạn ở đây.
Tôi chỉ sẽ cấu hình chỉ có một đường dẫn duy nhất ở đây,
và đó là đủ tốt cho tôi để thử nghiệm mô-đun này ở đây.
Vì vậy, tôi chỉ đi để nói đường dẫn: 'menu ',
và thành phần: MenuComponent.
Kể từ khi các mẫu MenuComponent đang sử dụng các thành phần vật liệu nhất định, chúng
ta hãy tiếp tục và nhập chúng.
Vì vậy, chúng tôi sẽ nhập khẩu MatgridListModule
từ @angular /vật lương/danh sách và
cũng là MatProgressSpinnerModule từ
@angular /vật liệu/tiến độ-spinner.
Và một khi chúng tôi đã nhập khẩu chúng, sau đó chúng ta hãy tiếp tục và
đưa chúng vào nhập khẩu dưới đây.
Vì vậy, chúng ta hãy thêm vào MatGridListModule và MatProgressSpinnerModule.
Và đó là tất cả những gì tôi cần cho
nhập khẩu đặc biệt này được cấu hình ở đây.
Vì vậy, cùng với nhập khẩu, chúng tôi có các tờ khai nơi tôi có
MenuComponent được sử dụng ở đây, tôi cũng có thể cấu hình các nhà cung cấp ở đây.
Vì vậy, tôi cần phải cấu hình các nhà cung cấp ở đây.
Bây giờ đây là nơi chúng ta sẽ
tạo ra một vài cuống ở đây, vì vậy
tôi sẽ nói cung cấp: DishService.
Bây giờ, DishService mà chúng tôi sẽ sử dụng ở đây sẽ không phải là D
ishService thực sự.
Khi bạn đang thử nghiệm một thành phần, bạn không muốn sử dụng một dịch vụ thực sự.
Thay vào đó, bạn có nguy cơ stubbing ra các dịch vụ, và
sau đó sử dụng một stub DishService, mà tôi sẽ gọi là DishServicesTub.
Vì vậy, tôi sẽ nói, UseValue: DishServicesTub.
Vì vậy, đây sẽ là một chức năng còn lại mà tôi sẽ sử dụng
để đánh dấu DishService ở đây.
Vì vậy, đó là một trong những điều mà tôi sẽ sử dụng.
Và cũng là thứ hai mà tôi
sẽ sử dụng là BaseURL,
mà tôi sẽ sử dụng giá trị như BaseURL
mà chúng tôi đã nhập khẩu trước đó.
Vì vậy, bây giờ, với điều này, tôi đã thực sự cấu hình mô-đun thử nghiệm của tôi,
vì vậy lưu ý rằng cách chúng tôi chỉ định này là chính xác như cách
chúng tôi chỉ định trang trí mô-đun NG cho mô-đun ứng dụng của chúng tôi.
Và ở đây, chúng tôi chỉ cấu hình những người được yêu cầu bởi MenuComponent, vì vậy
tôi không có những người khác mà chúng tôi sử dụng trong các mô-đun ứng dụng chính nó.
Vì vậy, đây là cách chúng tôi sẽ cấu hình mô-đun thử nghiệm.
Bây giờ một điều thiếu là DishServicesTub này.
Vì vậy, những gì tôi sẽ làm là để
thực hiện một chức năng ở đây và
gọi cho phép DishServicesTub là
một đối tượng JavaScript đơn giản ở đây,
mà tôi sẽ để cho nó hành động
thay cho các dịch vụ thực sự.
Chúng ta có thể rút ra các dịch vụ như thế này như đã thấy ở đây.
Vì vậy, bên trong đây, tôi chỉ sẽ
cung cấp một chức năng đơn giản, chức năng
getDishes ở đây,
mà sẽ trả về Observable của Dish mảng loại.
Vì vậy, đó là chính xác cách giá trị trả lại được cấu hình ở đó.
Và tôi sẽ trả lại
một quan sát của DESS ở đây.
Vì vậy, bằng cách sử dụng chức năng stub này ở đây,
những gì tôi đang làm là tôi đang stubbing ra DishService, và
sau đó cấu hình nó với một phương pháp mà
tôi cần cho bộ nhớ cache của tôi, nói getDishes, và khi phương pháp này được gọi,
tôi chỉ sẽ trả lại giá trị này.
Các DESS hằng số, đây.
Vì vậy, theo cách này, bây giờ bạn có thể thấy rằng làm thế nào tôi đang kiểm soát những gì đang được
cung cấp cho các thành phần từ một stub DishService mà tôi vừa tạo ra ở đây.
Vì vậy, đây là cách bạn sẽ tạo ra cuống cho DishService của bạn.
Cách tiếp cận khác mà chúng tôi có thể sử dụng cho
trường hợp chúng tôi đang sử dụng dịch vụ được gọi là sử dụng gián điệp.
Jasmine hỗ trợ một cái gì đó gọi là Spy, cho phép chúng ta theo dõi các cuộc gọi hàm,
và sau đó nắm bắt các cuộc gọi hàm, và sau đó đáp ứng các cuộc gọi hàm đó.
Vì vậy, đó là một cách khác để sử dụng một dịch vụ giả mạo thay cho các dịch vụ thực sự.
Vì vậy, bây giờ chúng tôi có thể kiểm soát những gì đang được cung cấp cho thành phần menu của chúng tôi.
Vì vậy, sau những sửa đổi này, sau đó chúng tôi
sẽ đi xuống của chúng tôi trước mỗi phương pháp ở đây.
Sau khi không đồng bộ, những gì tôi sẽ làm
là tôi sẽ nhận được giữ của DishService.
Vì vậy, bạn thấy rằng tôi đang sử dụng giường thử nghiệm và sau đó sử dụng
phương pháp get của giường thử nghiệm để có được ahold của DishService đã được tạo ra ở đây,
từ cuống đặc biệt này mà chúng tôi đã tuyên bố ở đây trong các nhà cung cấp.
Vì vậy, điều này cho tôi một tham chiếu đến DishService để
tôi có thể gọi các phương pháp của DishService bất cứ nơi nào tôi cần ở đây.
Vì vậy, sau khi thực hiện những thay đổi này, chúng ta hãy lưu các thay đổi và
sau đó xem cách chúng tôi Angular CLI sẽ chạy thử nghiệm này sau khi những thay đổi này,
và liệu thử nghiệm của chúng tôi sẽ thành công tại thời điểm này hay không.
Vì vậy, hãy lưu các thay đổi.
Thời điểm bạn lưu các thay đổi, bạn sẽ nhận thấy rằng
bài kiểm tra NG của bạn sẽ bắt đầu chạy lại bài kiểm tra của chúng tôi một lần nữa.
Vì vậy, nó sẽ biên dịch các ứng dụng và sau đó chạy lại các thử nghiệm.
Và thì đấy, bài kiểm tra của chúng tôi đã vượt qua thành công sau khi
thực hiện các thay đổi đối với tập tin thành phần của chúng tôi.
Vì vậy, thử nghiệm đầu tiên của chúng tôi, có nghĩa là chúng tôi bây giờ có thể tạo ra một thành phần menu
từ menu của chúng tôi, tập tin component.spec.t ở đó.
Vì vậy, thiết lập thử nghiệm của chúng tôi đang hoạt động đúng.
Bây giờ tôi có thể đi vào và làm các bài kiểm tra dữ dội hơn trong thành phần thử nghiệm của tôi.
Quay trở lại tập tin thành phần trình đơn đó, hãy để tôi thêm vào một bài kiểm tra khác.
Bây giờ bạn thấy rằng bởi vì tôi bây giờ có một dịch vụ được thiết lập ở đây
mà là trả lại giá trị DESS này tôi có thể sau đó bây giờ sử dụng DishService của tôi,
mà tôi đã có tài liệu tham khảo ở đây.
Bên trong là trước mỗi, và sau đó gọi phương pháp getDishes và
sau đó tôi sẽ có thể để có được giá trị.
Và đó sẽ có sẵn trong thành phần menu của tôi mà l vừa tạo ra.
Vì vậy, menuComponent của tôi bây giờ sẽ có được quyền truy cập vào các món ăn liên tục
đã được cung cấp trở lại cho nó thông qua món ăn này dừng lại.
Vì vậy, bây giờ tôi có thể kiểm tra để xem nếu các biến món ăn bên trong
MenuComponent của tôi thực sự nhận được các giá trị một cách chính xác hay không.
Vì vậy, đi vào, để tôi tạo ra một bài kiểm tra khác ở đây.
Vì vậy, tôi sẽ tạo ra một bài kiểm tra ở đây, Với nó,
như bạn đã thấy trước đó, vì vậy giống như trước đó.
Điều này thử nghiệm thứ hai tôi sẽ gọi là như nó và
các món ăn, Items nên được 4,
bởi vì các món ăn hằng số mà chúng tôi tuyên bố
trong tập tin shared.dishes có bốn món ăn trong hằng số đó.
Vì vậy, khi biến món ăn của tôi bên trong MenuComponent hoặc
các tập tin của tôi được khởi tạo bằng cách gọi dishservice.
Đáng lẽ nó phải nhận được bốn món
đó và được khởi tạo với bốn món đó.
Vì vậy, tôi sẽ thực hiện một vài bài kiểm tra về các món ăn biến thể ở đó.
Vậy làm thế nào để tôi có thể truy cập vào các món ăn biến ở đây?
Vì vậy, tôi sẽ nói nó món ăn mục nên được 4, và
sau đó tôi sẽ khai báo một chức năng mũi tên ở đây.
Và bên trong chức năng mũi tên này tôi sẽ chỉ định
các bài kiểm tra khác nhau mà tôi sẽ thực hiện.
Vì vậy, ở đây tôi sẽ bây giờ nói mong đợi (thành phần. ,
và nhận thấy rằng nó tự động cung cấp cho tôi
quyền truy cập vào tài sản món ăn này từ MenuComponent.
Vì vậy, tôi có thể nói rằng component.dishes, và sau đó tôi có thể kiểm tra
để thấy rằng chiều dài của các món ăn mà mảng đối tượng JavaScript nên được.
Vì vậy, đây là nơi tôi sử dụng phương pháp ToBe của Jasmine ở đây.
Và sau đó tôi có thể chỉ định giá trị 4,
bởi vì tôi đã cung cấp 4 món ăn trong các món ăn của tôi hằng số
mà tôi đã tuyên bố trong tập tin shared.dishes ở đó.
Vì vậy, đó là bài kiểm tra đầu tiên mà tôi sẽ thực hiện,
điều này sẽ trở thành sự thật.
Nếu không, thiết lập đã không hoạt động chính xác, vì vậy
tôi biết rằng mã của tôi không hoạt động chính xác.
Nhưng tôi biết chắc chắn rằng bài kiểm tra này sẽ làm việc ra một cách chính xác.
Nếu bạn muốn chắc chắn,
hãy lưu các thay đổi và sau đó đi xem thử của chúng tôi đang chạy.
Đi đến thiết bị đầu cuối đó,
bạn thấy rằng bây giờ ứng dụng của tôi đang được biên dịch lại, và thử nghiệm chạy.
Và chú ý tất cả các màu xanh lá cây trong cửa sổ thiết bị đầu cuối.
Nó nói thực hiện 1 của 2 thành công, thực hiện 2 của 2 thành công.
Điều đó có nghĩa là cả hai bài kiểm tra của tôi đã chạy thành công.
Nếu tôi nhìn vào trình duyệt của tôi, vì vậy bạn thấy rằng MenuComponent,
cả hai bài kiểm tra đều thành công.
Hãy để tôi tạo ra một vài thứ nữa và
thêm chúng vào tập hợp các bài kiểm tra thứ hai mà tôi đang tạo ra ở đó.
Đi đến tập tin menu_component_spec.t, tôi sẽ thêm vào một tập tin nữa.
Tôi sẽ nói thành phần mong đợi. ,
và tôi sẽ nói các món ăn [1].
Nhớ lại rằng tên của món ăn đầu tiên là,
Vì vậy, đó là những gì tôi sẽ kiểm tra, các món ăn [1] .name.
Vì vậy, đây là cách tôi có thể kiểm tra để xem nếu nó nhận được các giá trị một cách chính xác.
Tất cả những cách mà tôi có thể kiểm tra là gì?
Nếu tôi đặt một dấu chấm ở đó, nó sẽ cho tôi một gợi ý về tất cả các khả năng ở đây.
Vì vậy, tôi sẽ nói, tôi cũng sẽ sử dụng phương pháp ToBe ở đây.
Và sau đó tên món ăn thứ hai là,
Chỉ có ở đó, đó là cái bánh thứ hai tôi sẽ thực hiện.
Vì vậy, nếu mã của tôi chạy một cách chính xác, sau đó điều này cũng sẽ vượt qua.
Tương tự, hãy để tôi đặt thêm một cái nữa ở đây.
Vì vậy, tôi sẽ nói mong đợi,
thành phần.Món ăn và tôi sẽ nói 3.
Và ở đây, tài
sản nổi bật nên là Falsy.
Rằng bạn nên sai, nó không đúng trong trường hợp này, vì vậy hãy để tôi thêm vào một cái nữa.
Bạn có thể bắt đầu thêm nhiều hơn nếu bạn muốn,
chơi xung quanh với nó cho đến khi bạn hài lòng.
Vì vậy, làm những bổ sung đó. Hãy để tôi lưu những thay đổi mà tôi đã thực hiện
ở đây, chúng ta hãy đi và xem thử thử nghiệm này có chạy đúng không.
Và quay trở lại thiết bị đầu cuối của tôi, bạn thấy rằng thử nghiệm của tôi đang chạy lại.
Bạn thấy rằng cả hai bài kiểm tra đều thành công,
bây giờ tôi sẽ làm cho một trong những điều đó thất bại.
Vì vậy, tôi sẽ đi vào và thay đổi điều này thành sự thật.
Thấy chưa, đó là niềm vui khi chơi đùa với mã.
Tôi sẽ thay đổi điều này thành sự thật và tôi biết rằng bài kiểm tra này sẽ thất bại.
Vì vậy, hãy lưu các thay đổi.
Nhìn vào thiết bị đầu cuối, ở đó bạn thấy bài kiểm tra đã thất bại.
Bạn thấy tất cả điều này màu đỏ ở đây, có nghĩa là bài kiểm tra thứ hai đã không vượt qua một cách chính xác.
Và nếu bạn di chuyển ngược lại, bạn sẽ thấy bài kiểm tra đặc biệt này thất bại,
bởi vì ở đâu đó dưới đó nó sẽ nói rằng nó đã không.
Được rồi, xem tuyên bố này ở đây nó nói là giả tưởng sẽ là trung thực, vì
vậy đó là lý do tại sao nó thất bại.
Vì vậy, nó không phải là sự thật, nhưng tôi nói nó phải là sự thật, và
rõ ràng là bài kiểm tra là sai, vì vậy đó là lý do tại sao bài kiểm tra thất bại.
Vì vậy, đây là cách bạn thậm chí có thể kiểm tra để xem xét nếu bài kiểm tra thất bại,
nếu bạn yêu cầu những điều sai lầm cũng.
Nhưng một lần nữa, hãy để tôi quay lại và sửa lại điều đó một lần nữa.
Vì vậy, đi trở lại của tôi, File Tôi sẽ thay đổi chúng
trở lại sai lầm, bởi vì tôi muốn kiểm tra này để chạy một cách chính xác.
Bây giờ chúng ta chưa hài lòng.
Bây giờ trong bài kiểm tra đặc biệt này tôi chỉ kiểm tra các
biến món ăn đó là bên trong MenuComponent của tôi.
Làm thế nào để tôi đi về chơi xung quanh với bản thân mẫu?
Vì vậy, đây là nơi chúng tôi cần thêm sự giúp đỡ từ Angular.
Để thực hiện một số bài kiểm tra trên mẫu, tôi sẽ đi vào và
kéo thêm một vài nhập khẩu ở đây.
Vì vậy, đi đến đầu trang của tôi của tập tin này, menu_component_spec.tsfile.
Tôi sẽ nhập khẩu, Một cái
nữa được gọi là By, đó là một phương pháp.
Bạn sẽ thấy tôi sử dụng nó trong một thời gian ngắn.
Điều này nên được nhập khẩu từ, Angular,
/platform-browser.
Và cũng có thể, tôi sẽ nhập một trong đó là một yếu tố gỡ lỗi.
Phần tử gỡ lỗi cho phép tôi truy cập vào DOM để
tôi có thể thực hiện các thử nghiệm trên các phần tử DOM trực tiếp.
Vì vậy, đó là nơi tôi sẽ nhập khẩu này từ, mã góc ở đây, vì vậy hai.
Vì vậy, thêm vào bởi và DebugElement để nhập khẩu, và
sau đó một khi bạn làm điều đó, chúng tôi sẽ đi xuống vào mã ở đây.
Và sau đó chúng ta sẽ thêm vào một bài kiểm tra nữa, nơi chúng ta sẽ đi vào DOM và
lấy một trong các mục từ doc.
Vì vậy, tôi sẽ nói điều đó, vậy một bài kiểm tra nữa ở đây,
bài kiểm tra này sẽ làm gì?
Đối với bài kiểm tra này, tôi sẽ chỉ
định bài kiểm tra như nên sử dụng các món ăn trong mẫu.
Tôi chỉ ngẫu nhiên nói một cái gì đó ở đây,
bởi vì tôi chỉ muốn kiểm tra để thấy rằng các món ăn biến,
bất cứ điều gì nó đang làm sẵn, đang được sử dụng trong các mẫu một cách chính xác.
Vì vậy, đó là phần mà tôi đang thiết lập, và
sau đó phần thứ hai là chức năng mũi tên, và
trong chức năng mũi tên này tôi sẽ cung cấp mã cho các thử nghiệm tiếp theo.
Vì vậy, bên trong chức năng mũi tên này những gì tôi
sẽ làm là đầu tiên tôi sẽ gọi fixture và
sau đó phát hiện những thay đổi.
Và sau đó tôi sẽ nói cho de:,
Là một DebugElement.
Thông qua điều này tôi sẽ nhận được quyền truy cập vào DOM và
sau đó các yếu tố sẽ là HTMLElement.
Vì vậy, tôi muốn truy cập vào một trong những HTMLElements từ DOM của tôi.
Vậy tôi muốn yếu tố nào?
Vì vậy, để làm điều đó, tôi sẽ nhận được quyền truy cập vào,
DebugElement bằng cách nói fixture và DebugElement.
Vì vậy, điều này cho phép tôi để có được quyền truy cập vào các mục từ DOM của tôi ở đây để DebugElement.
Và sau đó tôi có thể truy vấn và sau đó chỉ chọn những người sẽ được quan tâm đến tôi.
Vì vậy, tôi sẽ truy vấn và sau đó tôi sẽ yêu cầu bằng cách sử dụng By.
Vì vậy, thông báo nơi tôi đang sử dụng By that tôi đã bao gồm bằng cách nhập khẩu nó.
Vì vậy, By hỗ trợ một loạt các số liệu mà tôi có thể
yêu cầu truy cập vào các yếu tố cụ thể trong DOM.
Vì vậy, như bạn có thể thấy nó sẽ cho tôi biết những gì tôi có thể nhập khẩu và
sau đó .css cho phép tôi có được quyền truy cập
để phù hợp với các yếu tố của bộ chọn css cho.
Vì vậy, chọn css là gì mà tôi sẽ sử dụng?
Tôi biết rằng có một phần tử h1, phần tử html trong DOM và
rằng tôi sẽ có được quyền truy cập vào phần tử h1 đầu tiên từ DOM.
Và một trong những yếu tố h1 trong đó là một trong đó
sẽ hiển thị tên của mỗi món ăn ở đó.
Nhìn lại và bạn thấy rằng bên trong dòng thời gian lưới bằng cách sử dụng một h1 và
h1 đó chứa tên của món ăn ở đó.
Vì vậy, tôi sẽ có được giữ của điều đó và
sau đó tôi sẽ nhận được một phần tử và sau đó tôi sẽ nói de,
từ các yếu tố gỡ lỗi, và sau đó tôi sẽ nói NativeElement.
Và điều đó cho phép tôi truy cập vào các yếu tố cụ thể trong DOM
mà tôi đang đề cập đến và tôi đã chọn bằng cách sử dụng tuyên bố này trước đó.
Vì vậy, khi tôi truy vấn DOM và sau đó nói, trả lại cho tôi tất cả
những người đang sử dụng thẻ h1 cho các yếu tố HTML.
Và tôi nhận được quyền truy cập vào điều đó, và tôi có thể truy vấn và
nói mong đợi (el.textContent).
Vì vậy, tôi đang tìm kiếm nội dung bên trong h1 này trong
mẫu của tôi nội dung cố định và sau đó tôi sẽ nói đểContent.
Vì vậy, đây là một phương pháp khác, toContain, đây là một phương pháp Jasmine được gọi là toContain.
Điều này kiểm tra để xem nếu đó có chứa một giá trị cụ thể,
và sau đó tôi sẽ kiểm tra cho DÂY DỰNG (0) .name.
Vậy là món ăn đầu tiên được tạo ra trong DOM và thêm vào DOM?
Nếu mẫu của tôi hoạt động chính xác, thì đó phải có mặt trong DOM.
Vì vậy, đó là những gì tôi sẽ kiểm tra để xem nếu ngói lưới tương ứng với D
ISH đầu tiên đã được tạo ra và thêm vào DOM hay không.
Vì vậy, tôi nói DÂY DỰNG (0) .name, và nói với chữ hoa.
Nhớ lại rằng tôi đã sử dụng ống chữ hoa để hiển thị tên
của DISH bằng cách chuyển đổi tên của món ăn thành
tất cả các chữ hoa trong ngói lưới trong thành phần menu.
Vì vậy, đó là những gì tôi sẽ kiểm tra, okay, vì vậy tôi
chỉ kiểm tra một trong số họ.
Bạn có thể thực hiện nhiều bài kiểm tra, bạn có thể kiểm tra DÂY DỰNG
(1) .name và sau đó DÂY DỰNG (2) .name và nhiều hơn nữa nếu bạn muốn.
Tôi chỉ minh họa một ví dụ về cách bạn sẽ truy cập các yếu tố của DOM và
sau đó kiểm tra những gì chúng chứa bên trong đó.
Vì vậy, đây là một bài kiểm tra mà tôi sẽ tiến hành ở đây, vì vậy hãy để tôi lưu các thay đổi,
và sau đó xem thử nghiệm có chạy đúng không.
Đi vào thiết bị đầu cuối đó và khi bài kiểm tra chạy,
bạn thấy rằng bài kiểm tra đầu tiên của tôi đã thành công, bài kiểm tra thứ hai đã thành công,
và bài kiểm tra thứ ba cũng thành công, tuyệt vời.
Bây giờ, để tôi làm cho bài kiểm tra thứ ba thất bại.
Đi đến tập tin menucomponentspec.t,
tôi sẽ loại bỏ điều này để chữ hoa, và sau đó thực hiện các thử nghiệm tương tự.
Bạn sẽ thấy rằng bài kiểm tra này sẽ thất bại, lưu các thay đổi.
Và khi bài kiểm tra chạy, bạn sẽ thấy rằng bài kiểm tra thứ ba sẽ thất bại.
Bởi vì tôi đang làm cho nó thất bại bằng cách kiểm tra những điều sai trái ở đó và
bạn đi đó, bài kiểm tra thứ ba thất bại ở đây.
Vì vậy, đây là cách bạn có thể kiểm tra xem liệu
những thứ nhất định được cho là có đúng hay không.
Tại sao trường hợp này, vì vậy bạn có thể thấy ở đây, lý do tại sao bài kiểm tra này thất bại.
Nó đang mong đợi điều này là trong DOM,
nhưng thay vào đó đây là những gì trong DOM trong phần tử h1 trong DOM.
Đó là lý do tại sao bài kiểm tra thất bại ở đây.
Vì vậy, một lần nữa đi trở lại cho tôi sửa lỗi và
sau đó khi tôi chạy lại các bài kiểm tra bây giờ bạn sẽ thấy rằng các bài kiểm tra vượt qua thành công.
Quay trở lại thiết bị đầu cuối, bạn sẽ thấy rằng khi thử nghiệm này chạy bây giờ nó sẽ
chạy chính xác.
Và bạn đi, cả ba bài kiểm tra đều được thông qua bởi ứng dụng của tôi.
Ngoài ra, nhìn vào trình duyệt, bạn có thể thấy rằng ba bài kiểm tra
thành công đã được thực hiện trên tệp mẫu thành phần menu và
cũng là thành phần menu chính nó.
Bây giờ rõ ràng, đây không nhất thiết phải là bài kiểm tra toàn diện nhất nhưng
tôi chỉ muốn cung cấp cho bạn một hương vị của cách bạn sẽ đi
về xây dựng các bài kiểm tra trong ứng dụng Angular của bạn.
Nếu bạn bị mang đi, bạn có thể đi vào tất cả các tập tin spec.t mà bạn có và
sau đó viết bài kiểm tra
của riêng bạn cho mỗi và mỗi một trong những thành phần sử dụng kiến thức mà bạn đã đạt được ở đây.
Ngoài ra, bạn có thể đọc thêm về thử nghiệm trong tài liệu Angular và
sau đó tìm hiểu thêm các cách thực hiện các thử nghiệm trên ứng dụng Angular của bạn.
Thử nghiệm là một lĩnh vực của chính nó vì vậy nếu tôi cần phải dạy cho bạn tất cả mọi thứ về
thử nghiệm đó sẽ được đến một khóa học trong chính nó cho Angular.
Và trong khóa học này, tôi chỉ muốn cung cấp cho bạn một hương vị về cách
bạn sẽ thực hiện kiểm tra trong ứng dụng Angular của bạn.
Và đây là một ví dụ về cách chúng ta có thể cấu hình và
thực hiện một bài kiểm tra đơn vị trên một trong các thành phần trong ứng dụng Angular của chúng tôi.
Đây là thời điểm tốt cho bạn để làm một bình luận tốt với các thành phần tin nhắn kiểm tra.
[ NHẠC]