TailwindCSS พร้อม React.js (pt.4)

ภาพถ่ายโดย Lagos Techie บน Unsplash

ส่วนสุดท้ายของซีรีส์! คราวนี้เราจะทำให้หน้าของเราตอบสนองต่ออุปกรณ์เคลื่อนที่ตลอดจนทำการทดสอบกับ React front-end โดยใช้ Enzyme & Jest

พลาดตอนที่สาม? อย่าลืมอ่านก่อนที่จะก้าวต่อไป

การออกแบบเว็บไซต์ที่ตอบสนอง

อุปกรณ์ทั้งหมดถูกสร้างขึ้นแตกต่างกัน ณ เดือนเมษายน พ.ศ. 2564 จอคอมพิวเตอร์ที่มีผู้ใช้มากที่สุดคือ 1920x1080 ปีที่แล้วส่วนแบ่งการเข้าชมในช่วงการระบาดของโรคถูกใช้ไปบนอุปกรณ์เคลื่อนที่ซึ่งโดยปกติจะมีขนาดและความละเอียดในการแสดงผลที่เล็ก เมื่อเร็ว ๆ นี้สมาร์ทโฟนที่มีความสามารถหน้าจอคู่ก็เข้าสู่ตลาดเช่นกัน เราต้องคำนึงถึงอุปกรณ์ที่ใช้และวิธีที่อาจส่งผลต่อการดูเว็บไซต์ของเราโดยผู้ใช้ โชคดีที่ TailwindCSS มียูทิลิตี้สำหรับสิ่งนั้น

เราสามารถตั้งค่าจุดพักตามขนาดการแสดงผลเพื่อรองรับอุปกรณ์ทั้งหมด ขั้นแรกคุณจะต้องตั้งค่าไฟล์ tailwind.config.js ของคุณเพื่อเพิ่มขนาดหน้าจอที่ต้องการ ขณะนี้ฉันได้ตั้งค่าดังนี้:

ฉันได้รวมความละเอียดตั้งแต่ความกว้าง 640 พิกเซลของ Pixel 2 ไปจนถึงจอภาพแสดงผลความกว้าง 1920 พิกเซล เราจะสามารถใช้เบรกพอยต์เหล่านี้เพื่อควบคุมลักษณะของส่วนหน้าบนอุปกรณ์เคลื่อนที่

ขณะนี้เรากำลังใช้ตารางในส่วนข้อมูลของเรา ตอนนี้เราไม่ได้ควบคุมลักษณะที่ปรากฏบนอุปกรณ์ขนาดเล็ก หากเราไม่เปลี่ยนสิ่งนั้นกล่องกริดของเราจะทับซ้อนกันและมีลักษณะดังนี้:

เราสามารถเปลี่ยนลักษณะที่ปรากฏได้โดยระบุว่าเราต้องการให้กริดมีลักษณะอย่างไรในแต่ละเบรกพอยต์ นี่คือลักษณะของรหัสของเรา:

ในวิวพอร์ตขนาดใหญ่เราจะมีมุมมองกริดแนวนอนโดยใช้ grid-cols-3 ในจอแสดงผลขนาดเล็กเราจะเปลี่ยนเป็นมุมมองตารางแนวตั้งโดยใช้ grid-cols-1

lg: grid-cols-3 xl: grid-cols-3

sm: grid-cols-1 md: grid-cols-1

เอนไซม์ที่มีการทดสอบ Jest

เราจะใช้ Enzyme และ Jest เพื่อทดสอบส่วนหน้าของเรา เราจะติดตั้ง Enzyme dependencies (ในกรณีที่คุณยังไม่ได้ทำ) โดยใช้บรรทัดนี้:

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

ต่อไปเราจะตั้งค่าอะแดปเตอร์ของเราจากไลบรารีเอนไซม์ในไฟล์ setupTests.js ของเรา

ไฟล์ App.test.js ของเราจะมีการทดสอบของเรา เราจะนำเข้าไลบรารีการทดสอบของเราจาก React และ Enzyme ตามด้วยส่วนประกอบที่เราจะใช้สำหรับการทดสอบ มาทดสอบการเรนเดอร์คอมโพเนนต์ของเราโดยเริ่มจาก App และ Nav

เรากำลังตรวจสอบเพื่อดูว่าส่วนประกอบของแอปและการนำทางจะแสดงผลหรือไม่ เราจะทำการทดสอบโดยใช้:

npm run test

มาทดสอบการเรนเดอร์ส่วนประกอบ Nav และคาดว่าจะแสดงลิงก์แถบ Nav ด้วย เราจะทดสอบคอมโพเนนต์ Hero ของเราเพื่อดูว่ามันแสดงผลที่มีรูปภาพของเราหรือไม่

หากทำถูกต้องการทดสอบทั้งหมดควรผ่าน!

สามารถทำได้เช่นเดียวกันกับส่วนประกอบบางส่วนถัดไปที่ต้องมีการทดสอบดังนั้นโค้ดสุดท้ายควรมีลักษณะดังนี้:

หากคุณต้องการเพิ่มการทดสอบมากขึ้นก็สามารถทำได้อย่างแน่นอน เนื่องจากส่วนใหญ่มีการทดสอบการเรนเดอร์คอมโพเนนต์จึงค่อนข้างง่ายในการจัดการ เมื่อคุณเข้าสู่การทดสอบตรรกะส่วนประกอบแล้วการทดสอบจะดูซับซ้อนมากขึ้น

นี่เป็นการสรุปซีรีส์ของฉันเกี่ยวกับการสร้างแอป React.js และจัดแต่งทรงผมด้วย TailwindCSS! ฉันจะรวมลิงค์ทรัพยากรบางส่วนไว้ด้านล่างและลิงก์สำหรับ repo ซึ่งจะรวมถึงการสาธิต