Phần cuối cùng của loạt bài này! Lần này, chúng tôi sẽ làm cho trang của mình đáp ứng trên thiết bị di động cũng như tiến hành các thử nghiệm với giao diện người dùng React của chúng tôi bằng Enzyme & Jest.

Bỏ lỡ phần ba? Hãy chắc chắn rằng bạn đã đọc nó trước khi tiếp tục.

Thiết kế web đáp ứng

Tất cả các thiết bị đã được tạo ra khác nhau. Kể từ tháng 4 năm 2021, màn hình máy tính được sử dụng nhiều nhất là 1920x1080. Năm ngoái, chia sẻ lưu lượng truy cập trong đại dịch được chi cho các thiết bị di động thường có kích thước và độ phân giải màn hình nhỏ. Chỉ gần đây, điện thoại thông minh với khả năng màn hình kép cũng gia nhập thị trường. Chúng ta cần lưu ý đến các thiết bị được sử dụng và cách thức mà điều đó có thể ảnh hưởng đến cách người dùng xem trang web của chúng ta. May mắn thay, TailwindCSS có một tiện ích cho điều đó.

Chúng tôi có thể thiết lập các điểm ngắt dựa trên kích thước hiển thị để phục vụ cho tất cả các thiết bị. Đầu tiên, bạn sẽ phải thiết lập tệp tailwind.config.js của mình để thêm các kích thước màn hình cụ thể. Hiện tại, tôi đã thiết lập nó như vậy:

Tôi đã bao gồm các độ phân giải khác nhau, từ chiều rộng 640 pixel của Pixel 2 đến màn hình hiển thị chiều rộng 1920 pixel. Chúng tôi sẽ có thể sử dụng các điểm ngắt này để kiểm soát giao diện của giao diện người dùng trên thiết bị di động.

Hiện tại, chúng tôi đang sử dụng lưới trong phần Thông tin của chúng tôi. Hiện tại, chúng tôi không kiểm soát giao diện của nó trên các thiết bị nhỏ hơn. Nếu chúng ta không thay đổi điều đó thì các hộp lưới của chúng ta sẽ chồng lên nhau và trông giống như sau:

Chúng ta có thể thay đổi giao diện của nó bằng cách chỉ định cách chúng ta muốn lưới trông như thế nào trên mỗi điểm ngắt. Đây là mã của chúng tôi sẽ trông như thế nào:

Trên các khung nhìn lớn hơn, chúng ta sẽ có chế độ xem lưới ngang bằng cách sử dụng grid-cols-3. Trên các màn hình nhỏ hơn, chúng tôi sẽ chuyển sang chế độ xem lưới dọc sử dụng grid-cols-1.

Enzyme với thử nghiệm Jest

Chúng tôi sẽ sử dụng Enzyme và Jest để kiểm tra giao diện người dùng của mình. Chúng tôi sẽ cài đặt các phụ thuộc Enzyme (trong trường hợp bạn chưa có) bằng cách sử dụng dòng này:

npm i --save-dev enzyme enzyme-adapter-react-16

Tiếp theo, chúng tôi sẽ thiết lập bộ điều hợp của mình từ thư viện Enzyme trong tệp setupTests.js của chúng tôi.

Tệp App.test.js của chúng tôi sẽ chứa các bài kiểm tra của chúng tôi. Chúng tôi sẽ nhập thư viện thử nghiệm của mình từ React và Enzyme, sau đó là các thành phần mà chúng tôi sẽ sử dụng để thử nghiệm. Hãy kiểm tra kết xuất thành phần của chúng tôi, bắt đầu với Ứng dụng và Điều hướng.

Chúng tôi đang kiểm tra xem thành phần Ứng dụng và Điều hướng có hiển thị hay không. Chúng tôi sẽ chạy các bài kiểm tra bằng cách sử dụng:

npm run test

Hãy kiểm tra việc hiển thị thành phần Nav và nó cũng mong đợi sẽ hiển thị các liên kết thanh Nav. Chúng tôi cũng sẽ kiểm tra thành phần Anh hùng của mình để xem liệu nó có hiển thị chứa src hình ảnh của chúng tôi hay không.

Nếu làm đúng, tất cả các bài kiểm tra sẽ được thông qua!

Điều tương tự cũng có thể được thực hiện đối với một số thành phần tiếp theo yêu cầu thử nghiệm, vì vậy mã cuối cùng sẽ giống như sau:

Nếu bạn muốn thêm nhiều thử nghiệm hơn thì chắc chắn là có thể. Vì điều này chủ yếu chứa các bài kiểm tra kết xuất thành phần, nó khá đơn giản để giải quyết. Khi bạn bắt đầu kiểm tra logic thành phần thì các bài kiểm tra sẽ trông phức tạp hơn.

Phần này kết thúc loạt bài của tôi về cách tạo ứng dụng React.js và tạo kiểu bằng TailwindCSS! Tôi sẽ bao gồm một số liên kết tài nguyên bên dưới và liên kết tới repo sẽ bao gồm bản demo.

Liên kết dự án

• Git Repo

• LinkedIn
• GitHub
• Twitter
• Instagram
• YouTube

Tài nguyên

• Tài liệu TailwindCSS
• Tài liệu Enzyme
• Tài liệu Jest
• Tài liệu về React.js