ทาง Storybook (SB) เพิ่งปล่อย version 7.0 ออกมาให้ใช้งานแล้วซึ่งเป็น major version ที่ออกมาในรอบ 2 ปีกันเลยดังนั้นจึงมาการเปลี่ยนแปลงมากมายมาดูกันว่ามีอะไรบ้าง
storybook Archive
มาใช้งาน @storybook/testing-react กัน
เมื่อกลางเดือนพฤภาคมที่ทีม StoryBook ได้ปล่อย testing-react library ออกมาเพื่อใช้สำหรับการทดสอบ react component ด้วย stories ที่เขียนใน StoryBook ได้เลยไม่ต้องไปเสียเวลาเขียน test case แยกออกจากกันด้วย Jest + React testing library หรือ Enzyme อีกต่อไปซึ่งเป็น pain point หลักของคนใช้งาน แน่นอนว่า มันไม่สนุกเลย
Storybook 3.4 สนับสนุน Polymer แล้ว
ช่วงนี้เครื่องมือใหม่ ๆ ออกมาเยอะเลย หนึ่งในนั้นคือ Storybook 3.4 ซึ่งเป็นเครื่องมือที่มีประโยชน์มาก ๆ สำหรับการพัฒนาและทดสอบ UI component ของ React, React Native, Vue และ Angular ล่าสุดก็สนับสนุน Polymer แล้ว
แนะนำ LearnStorybook
วันนี้ไปเจอ LearnStorybook เป็น web สำหรับสอนเกี่ยวกับการใช้งาน Storybook แน่นอนว่าฟรี อีกทั้งเป็นแหล่งความรู้ที่ดีสำหรับการใช้งาน Storybook มาศึกษากันเถอะ
Storybook 3.3 สนับสนุน Angular แล้วนะ
หลังจากที่ Storybook 3.2 นั้นสนับสนุน Vue.js ไปแล้ว ถึงคิวของ Angular บ้างสำหรับ Storybook 3.3 (ตอนนี้ไปถึง 3.3.3 แล้ว) แต่ใช้ได้กับ Angular version 4 ขึ้นไปเท่านั้น โดยมีการ addons ต่าง ๆ เพิ่มมานิดหน่อย เช่น Viewport ทำให้สามารถจำลองการทำงานบน device ขนาดต่าง ๆ Jest สำหรับการแสดงผลการทดสอบ Story panel Storyshot ของแต่ละ story สนับสนุน Markdown ใน story ดูเพิ่มเติมได้ที่ Storybook Release
มาดูความเปลี่ยนแปลงต่าง ๆ ใน Storybook 3.2.x
สำหรับชาว React และ React Native แล้วนั้น ผมคิดว่าน่าจะใช้ Storybook กันทุกคน !! ในการทำ snapshot testing ของ UI component แต่ละตัว ช่วยทำให้ชีวิตของนักพัฒนาง่ายและสะดวกสบายมากยิ่งขึ้น ยิ่งใน version 3.2 นี้ก็มีความสามารถที่น่าสนใจเพิ่มเข้ามา
Part 2 :: มาทดสอบการสร้าง React component ด้วย Storybook กัน
จาก blog เรื่อง Part 1 :: เริ่มต้นเรียนรู้ไปกับ React นั้น มีคำถามต่าง ๆ เกิดขึ้นมาคือ เมื่อเราทำการออกแบบ และ สร้าง Component ต่าง ๆ ขึ้นมาแล้ว จะรู้ได้อย่างไรว่า สิ่งที่เราออกแบบมันดีพอ ? สิ่งที่เราออกแบบมันใช้งานง่ายหรือไม่ ? สิ่งที่เราอออกแบบมันทดสอบได้ง่ายหรือไม่ ? สิ่งที่เราออกแบบทำงานได้อย่างถูกต้องในกรณีต่าง ๆ หรือไม่ ? จะทดสอบและตรวจสอบการทำงานในแต่ละ component อย่างไร ? วันนี้น้องในทีมได้แนะนำ Storybook ซึ่งมันสามารถตอบโจทย์ต่าง ๆ ได้ดีพอสมควร จึงทำการทดลอง และ สรุปการใช้งานไว้นิดหน่อย