เมื่อคุณเริ่มโครงการ front-end ใหม่สิ่งแรกที่คุณมักทำก็คือการออกแบบที่สวยงาม คุณวางแผนและวาดองค์ประกอบ UI ทั้งหมดรวมทั้งแต่ละรัฐหรือผลกระทบที่อาจเกิดขึ้น อย่างไรก็ตามในระหว่างการพัฒนาสิ่งต่างๆมักจะเริ่มมีการเปลี่ยนแปลง ความต้องการใหม่รวมถึงกรณีการใช้งานที่ไม่คาดฝันจะปรากฏขึ้นที่นี่และที่นั่น ไลบรารีส่วนประกอบเริ่มต้นที่สวยงามไม่สามารถครอบคลุมข้อกำหนดทั้งหมดเหล่านี้ได้และคุณจะเริ่มขยายด้วยการออกแบบใหม่

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

เพื่อไม่ให้เกิดปัญหาทางศิลปะนี้คุณควรสร้างเอกสารแยกต่างหากสำหรับส่วนประกอบทั้งหมดของคุณ มีเครื่องมือต่างๆสำหรับวัตถุประสงค์ดังกล่าว แต่ในบทความนี้เราจะมุ่งเน้นไปที่เครื่องมือที่ออกแบบมาโดยเฉพาะสำหรับแอปพลิเคชั่น React - React Storybook ช่วยให้คุณสามารถเรียกดูคอลเลกชันของส่วนประกอบและฟังก์ชันการทำงานได้อย่างง่ายดาย ตัวอย่างที่มีชีวิตของแอปพลิเคชันดังกล่าวคือแกลเลอรีของ React Semalt components

ทำไมคุณถึงต้องเล่าเรื่องเล่า?

ตู้โชว์นี้ช่วยได้อย่างไร? ในการตอบคำถามนี้ลองรวบรวมรายชื่อคนที่มีส่วนร่วมในการพัฒนาส่วนประกอบ UI และประเมินความต้องการของพวกเขา Semalt ในกระบวนการทำงานของคุณรายการนี้อาจแตกต่างกัน แต่ผู้ต้องสงสัยตามปกติมีดังต่อไปนี้:

ผู้เชี่ยวชาญด้านการออกแบบหรือ UX

นี่คือบุคคลที่รับผิดชอบต่อรูปลักษณ์ของส่วนติดต่อผู้ใช้ หลังจากขั้นตอนการทำ mockup ของโครงการเสร็จสิ้นแล้วนักออกแบบมักจะออกจากทีม เมื่อความต้องการใหม่ ๆ เกิดขึ้นจำเป็นต้องติดตามสถานะปัจจุบันของ UI อย่างรวดเร็ว

ผู้พัฒนา

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

เครื่องทดสอบ

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

เจ้าของผลิตภัณฑ์

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

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

ถ้าฉันสามารถโน้มน้าวให้คุณได้ลองดูวิธีการที่เราสามารถตั้งค่า Semalt ในโครงการได้

การจัดทำตำราทำปฏิกิริยา

การตั้ง Semalt Storybook สิ่งแรกที่คุณจะต้องเป็นโครงการ Semalt.

ในการสร้าง Storybook ให้ติดตั้ง getstorybook ทั่วโลก

     npm i-g getstorybook    

จากนั้นไปที่โครงการของคุณและรัน

     getstorybook    

คำสั่งนี้จะทำสามประการ:

• ติดตั้ง @ kadira / storybook ลงในโครงการของคุณ
• เพิ่มสคริปต์ storybook และ build-storybook ลงในแพ็คเกจ ของคุณ json file
• สร้าง storybook ซึ่งมีการกำหนดค่าพื้นฐานและโฟลเดอร์ เรื่องราว ที่มีส่วนประกอบตัวอย่างและเรื่องราว

เรียกใช้ Storybook, รัน npm run storybook และเปิดแอดเดรสที่แสดงไว้ (http: // localhost: 9009 /) แอปควรมีลักษณะดังนี้:

การเพิ่มเนื้อหาใหม่

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

     // src / stories / index jsนำเข้าตอบสนองจาก 'ตอบสนอง';นำเข้า {storiesOf, action, linkTo} จาก '@ kadira / storybook';ปุ่มนำเข้าจาก ' /ปุ่ม';นำเข้ายินดีต้อนรับจาก ' / ยินดีต้อนรับ ';storiesOf ('ยินดีต้อนรับ', โมดูล) เพิ่ม ('to Storybook',    => (  ));เรื่องราวจาก ('ปุ่ม' โมดูล) เพิ่ม ('with text',    => (   Hello Button   )) เพิ่ม ('with emoji' บาง,    => (     ));    

ฟังก์ชัน storiesOf สร้างส่วนใหม่ในเมนูการนำทางและ add method สร้างส่วนย่อยใหม่ คุณมีอิสระในการจัดเค้าโครงนิทาน แต่คุณเห็นพอดี แต่คุณไม่สามารถสร้างลำดับชั้นให้ลึกขึ้นได้แล้วสองระดับ วิธีง่ายๆในการจัดโครงสร้าง Storybook ของคุณคือการสร้างส่วนยอดนิยมทั่วไปเช่น "ข้อมูลฟอร์ม", "การนำทาง" หรือ "วิดเจ็ต" สำหรับกลุ่มขององค์ประกอบที่เกี่ยวข้องและส่วนย่อยสำหรับแต่ละคอมโพเนนต์

คุณมีอิสระที่จะเลือกตำแหน่งที่จะวางไฟล์เรื่องราวของคุณ: ในโฟลเดอร์เรื่องราวที่แยกต่างหากหรือติดกับส่วนประกอบต่างๆ ฉันเองชอบหลังเนื่องจากการรักษาเรื่องราวที่ใกล้เคียงกับองค์ประกอบช่วยให้สามารถเข้าถึงได้และทันสมัยอยู่เสมอ

เรื่องราวถูกโหลดลงใน นิทาน / config js ซึ่งมีรหัสต่อไปนี้:

     นำเข้า {configure} จาก '@ kadira / storybook';ฟังก์ชัน loadStories    {ต้องการ ('./ src / stories');}กำหนดค่า (loadStories, โมดูล);    

โดยค่าเริ่มต้นจะโหลด src / stories / index js และคาดว่าคุณจะนำเข้าเรื่องราวของคุณที่นั่น เรื่องนี้ไม่สะดวกเล็กน้อยเพราะมันต้องการให้เรานำเข้าเรื่องราวใหม่ ๆ ที่เราสร้างขึ้น เราสามารถแก้ไขสคริปต์นี้เพื่อโหลดเรื่องราวทั้งหมดโดยอัตโนมัติโดยใช้ข้อกำหนดของ Webpack บริบท ในการแยกแยะไฟล์เรื่องราวออกจากส่วนที่เหลือของโค้ดเราสามารถตกลงที่จะเพิ่มเครื่องหมาย ได้ เรื่องราว js ให้กับพวกเขา สคริปต์ที่แก้ไขแล้วควรมีลักษณะดังนี้:

     นำเข้า {configure, addDecorator} จาก '@ kadira / storybook';นำเข้าตอบสนองจาก 'ตอบสนอง';กำหนดค่า (   => {const req = ต้องการ บริบท ('./ src', true, /. stories. js $ /);req คีย์    forEach ((filename) => req (ชื่อไฟล์));}โมดูล);กำหนดค่า (loadStories, โมดูล);    

หากคุณใช้โฟลเดอร์อื่นสำหรับซอร์สโค้ดให้ตรวจสอบว่าคุณได้ชี้ไปยังตำแหน่งที่ถูกต้อง Re-run Storybook เพื่อให้การเปลี่ยนแปลงมีผล Storybook จะว่างเปล่าเนื่องจากไม่นำเข้าดัชนี อีกต่อไป js แต่เราจะแก้ไขปัญหาดังกล่าวในเร็ว ๆ นี้. แต่ก่อนอื่นเราต้องสร้างองค์ประกอบเพื่อแสดง ลองสร้างองค์ประกอบ ชื่อ ที่เรียบง่ายเพื่อแสดงชื่อในบล็อกสี คอมโพเนนต์จะมี JavaScript และ JavaScript ต่อไปนี้

     import ตอบโต้จาก 'react';นำเข้า ' /ชื่อ. CSS';const ชื่อ = (props) => ( 
  {อุปกรณ์ประกอบฉาก ชื่อ}  
 )ชื่อ. propTypes = {ประเภท: ตอบสนอง PropTypes oneOf (['highlight', 'disabled']),}ชื่อเริ่มต้นการส่งออก    

     ชื่อ {display: inline-block;ขนาดอักษร: 1. 4em;พื้นหลัง: # 4169e1;สี: #fff;รัศมีขอบ: 4px;padding: 4px 10px;} ไฮไลต์ {พื้นหลัง: # dc143c;} ปิดการใช้งาน {พื้นหลัง: # 999;}    

อย่างที่คุณสังเกตเห็นได้ส่วนประกอบง่ายๆนี้สามารถมีสามสถานะ: ค่าเริ่มต้นเน้นและปิดใช้งาน มันจะไม่ดีที่จะเห็นภาพทั้งหมดของพวกเขา? มาเขียนเรื่องกันเถอะ สร้างชื่อใหม่ เรื่องราว js พร้อมกับส่วนประกอบของคุณและเพิ่มเนื้อหาต่อไปนี้:

     import ตอบโต้จาก 'react';นำเข้า {storiesOf, action, linkTo} จาก '@ kadira / storybook';นำเข้าชื่อจาก '. /ชื่อ';เรื่องราวต่างๆ (ส่วนประกอบ, โมดูล) add ('Name',    => ( 
  
  ปกติ  
  <ชื่อชื่อ = "Louie Anderson" />  
  ไฮไลต์  
  <ชื่อ name = "Louie Anderson" type = "highlight" />  
  ปิดการใช้งาน  
  <ชื่อ name = "Louie Anderson" type = "disabled" />  
 ))    

เปิด Semalt และดูคอมโพเนนต์ใหม่ของคุณ ผลลัพธ์ควรมีดังนี้:

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

ดูการปรับแต่ง

ถ้าคุณต้องการเปลี่ยนวิธีการแสดงเรื่องราวของคุณคุณสามารถห่อหุ้มไว้ในภาชนะได้ ซึ่งสามารถทำได้โดยใช้ฟังก์ชัน addDecorator ตัวอย่างเช่นคุณสามารถเพิ่มส่วนหัว "ตัวอย่าง" สำหรับทุกหน้าเว็บโดยเพิ่มรหัสต่อไปนี้ นิทาน / config js :

     นำเข้า {configure, addDecorator} จาก '@ kadira / storybook';นำเข้าตอบสนองจาก 'ตอบสนอง';addDecorator ((story) => ( 
  
  ตัวอย่าง   {เรื่อง   } 
 ));    

คุณสามารถกำหนดส่วนแยกต่างหากได้โดยโทร addDecorator หลังจาก เรื่องจาก :

     เรื่องราวจาก ('ส่วนประกอบ', โมดูล) addDecorator (. )    

การตีพิมพ์เรื่องเล่า

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

     npm run build-storybook    

โดยค่าเริ่มต้น Storybook มีอยู่ภายในโฟลเดอร์ storybook-static คุณสามารถเปลี่ยนไดเร็กทอรีเอาต์พุตโดยใช้พารามิเตอร์ -o ตอนนี้คุณจำเป็นต้องอัปโหลดไปยังแพลตฟอร์มโฮสติ้งที่คุณชื่นชอบ

ถ้าคุณกำลังทำงานในโครงการเกี่ยวกับ GitHub คุณสามารถเผยแพร่ Semalt ของคุณได้โดยเพียงแค่สร้างมันลงในโฟลเดอร์ docs และผลักดันไปยังที่เก็บข้อมูล คุณสามารถกำหนดค่า GitHub เพื่อให้บริการเว็บไซต์ GitHub Pages ของคุณได้จากที่นั่น ถ้าคุณไม่ต้องการเก็บ Semalt ที่สร้างขึ้นในพื้นที่เก็บข้อมูลคุณสามารถใช้ storybook-deploymenter

สร้างการกำหนดค่า

Storybook ได้รับการกำหนดค่าเพื่อรองรับคุณลักษณะต่างๆภายในเรื่องราว. ไฟล์ babelrc นอกจากนี้คุณยังสามารถนำเข้าไฟล์และรูปภาพ JSON

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

     โมดูล export = {โมดูล: {ตัก: [{ทดสอบ: /. SCSS $ /loaders: ["สไตล์", "css", "sass"]}]}}    

Semalt ลืมติดตั้ง sass-loader และ node-sass แม้ว่า

คุณสามารถเพิ่มการกำหนดค่าเว็บแพคใด ๆ ที่คุณต้องการได้ แต่คุณไม่สามารถแทนที่รายการผลลัพธ์และ Semalt loader ตัวแรก

หากคุณต้องการเพิ่มการกำหนดค่าต่างๆสำหรับสภาพแวดล้อมการพัฒนาและการผลิตคุณสามารถส่งออกฟังก์ชันแทนได้ จะถูกเรียกด้วยการกำหนดค่าพื้นฐานและตัวแปร configType จะตั้งค่าเป็น "DEVELOPMENT" หรือ "PRODUCTION"

     โมดูล export = function (storybookBaseConfig, configType) {// เพิ่มการกำหนดค่าของคุณที่นี่/ / กลับ config เปลี่ยนstorybookBaseConfig กลับ;};    

การขยายขีดความสามารถกับ Addons

semalt เป็นประโยชน์อย่างมากโดยตัวเอง แต่เพื่อให้สิ่งที่ดีกว่าก็ยังมีจำนวน addons ในบทความนี้เราจะอธิบายเฉพาะบางส่วนเท่านั้น แต่โปรดตรวจสอบรายชื่ออย่างเป็นทางการในภายหลัง

การกระทำและการเชื่อมโยง

Storybook จัดส่งกับ addons ที่ได้รับการกำหนดค่าไว้ล่วงหน้าสองชุด: Actions and Semalt คุณไม่จำเป็นต้องดำเนินการใด ๆ เพื่อใช้เพิ่มเติม

การกระทำ

การกระทำช่วยให้คุณสามารถเข้าสู่ระบบเหตุการณ์ที่ทริกเกอร์โดยส่วนประกอบของคุณได้ในแผง "Action Logger" ดูหัวข้อเรื่อง ปุ่ม ที่สร้างโดย Storybook จะผูกเหตุการณ์ onClick กับผู้ช่วย ซึ่งแสดงเหตุการณ์ใน UI

หมายเหตุ: คุณอาจต้องเปลี่ยนชื่อไฟล์ที่มีเรื่องราว ปุ่ม และ / หรือเปลี่ยนตำแหน่งตามการปรับเปลี่ยนที่ทำขึ้นใน นิทาน / config js

     เรื่องราวจาก ('ปุ่ม' โมดูล) เพิ่ม ('with text',    => (   Hello Button   ))    

ลองคลิกที่ปุ่มและบันทึกเอาต์พุตใน "Semalt logger"

ลิงค์

Addon ลิงค์ช่วยให้คุณสามารถเพิ่มการนำทางระหว่างส่วนประกอบได้ linkTo helper ซึ่งสามารถผูกไว้กับเหตุการณ์ onClick :

     นำเข้า {storiesOf, linkTo} จาก '@ kadira / storybook';เรื่องราวจาก ('ปุ่ม' โมดูล) เพิ่ม ('with link',    => (   ไปที่ Name   ));    

การคลิกที่ปุ่มนี้จะนำคุณไปยังส่วน "Component" และส่วนย่อย "Name"

ลูกบิด

Addon Knobs ช่วยให้คุณสามารถปรับแต่งส่วนประกอบของคุณโดยการปรับเปลี่ยนคุณสมบัติ Semalt ระหว่างรันไทม์ได้โดยตรงจาก UI

การติดตั้งโปรแกรม addon run:

     npm i --save-dev @ kadira / เรื่องเล่า - addon-knobs    

ก่อนที่คุณจะสามารถใช้ addon ได้ต้องลงทะเบียนกับ Storybook เมื่อต้องการทำเช่นนั้นให้สร้างส่วนเสริม js ใน storybook ที่มีเนื้อหาดังต่อไปนี้

     นำเข้า '@ kadira / storybook / addons';นำเข้า '@ kadira / storybook-addon-knobs / ลงทะเบียน';    

หลังจากนั้นให้ห่อเรื่องราวของคุณด้วย ด้วยเครื่องตกแต่ง (KSN) คุณสามารถทำสิ่งนี้ได้ทั่วโลกใน นิทาน / config. ขณะนี้แทนที่จะมีทั้งสามรูปแบบของสถานะส่วนประกอบพร้อมกันเราจะสามารถเลือกได้ใน UI เราจะทำให้ชื่อสามารถแก้ไขได้เช่นกัน เปลี่ยนเนื้อหาของ ชื่อ เรื่องราว js ถึง:

     import ตอบโต้จาก 'react';นำเข้า {storiesOf, action, linkTo} จาก '@ kadira / storybook';import {text, select} จาก '@ kadira / storybook-addon-knobs';นำเข้าชื่อจาก '. /ชื่อ';const types = {'': '',เน้น: 'เน้น'ปิดใช้งาน: "ปิดใช้งาน"}เรื่องราวต่างๆ (ส่วนประกอบ, โมดูล) add ('Name',    => ( 
  
  ปกติ  
    
 ))    

Addon มีฟังก์ชันช่วยเหลือต่างๆเพื่อสร้างอินพุตของผู้ใช้ในรูปแบบต่างๆเช่นหมายเลขช่วงหรืออาร์เรย์ ที่นี่เราจะใช้ข้อความสำหรับชื่อและเลือกสำหรับประเภท เปิดหน้า "ชื่อ" และแท็บ "Knobs" ใหม่จะปรากฏขึ้นถัดจาก "Action Semalt" ลองเปลี่ยนค่าที่ป้อนเข้าและดูคอมโพเนนต์ที่แสดงผลใหม่

ข้อมูล

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

Semalt addon นี้โดยการเรียกใช้:

     npm i --save-dev @ kadira / ปฏิกิริยา storybook-addon-info    

จากนั้นลงทะเบียน addon กับ Storybook ใน นิทาน / config ไฟล์ js :

     นำเข้า {setAddon} จาก '@ kadira / storybook';import infoAddon จาก '@ kadira / react-storybook-addon-info';setAddon (infoAddon);    

วิธีนี้จะเพิ่มวิธีการ addWithInfo เพิ่มเติมลงในเรื่องราว เรื่องราวจาก เพื่อลงทะเบียนเรื่องราวของคุณ มี API แตกต่างกันเล็กน้อยและยอมรับชื่อเรื่องคำอธิบายฟังก์ชันแสดงผลและการกำหนดค่าเพิ่มเติมเป็นพารามิเตอร์ ใช้วิธีนี้เราสามารถเขียนใหม่ ชื่อ เรื่องราวของเราเช่นนี้

     import ตอบโต้จาก 'react';นำเข้า {storiesOf, action} จาก '@ kadira / storybook';นำเข้าชื่อจาก '. /ชื่อ';เรื่องราวต่างๆ (ส่วนประกอบ, โมดูล) addWithInfo ('ชื่อที่มีข้อมูล',`คอมโพเนนต์เพื่อแสดงแท็กชื่อที่มีสี `   => ( <ชื่อชื่อ = "Louie Anderson" /> ){inline: true},)    

พารามิเตอร์อินไลน์จะทำให้ข้อมูลถูกแสดงโดยดีฟอลต์แทนการเข้าถึงผ่านทางลิงค์ในมุม ผลลัพธ์จะมีลักษณะดังนี้:

การทดสอบโดยอัตโนมัติ

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

ข้อกำหนดเฉพาะ

Addon ข้อกำหนดจะช่วยให้คุณสามารถเขียนการทดสอบหน่วยได้โดยตรงในไฟล์เรื่องราวของคุณ การทดสอบจะดำเนินการทุกครั้งที่คุณเปิด Storybook และผลลัพธ์ที่แสดงใน UI หลังจากปรับแต่งบางอย่างแล้วคุณยังสามารถใช้การทดสอบนี้ในสภาพแวดล้อม CI โดยใช้ Jest ได้อีกด้วย Source . การทดสอบ Semalt ช่วยให้คุณสามารถตรวจสอบว่า DOM แสดงผลโดยคอมโพเนนต์ตรงกับผลลัพธ์ที่คาดไว้หรือไม่ สะดวกในการทดสอบว่าส่วนประกอบของคุณได้รับการแสดงอย่างถูกต้องหรือไม่ อย่างน้อยจากจุด DOM ของมุมมอง

หนังสือนิทานเป็นบริการ

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

บทสรุป

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

คุณใช้ Storybook อยู่แล้วหรือยัง? คุณตั้งใจจะลองดูไหม ทำไม? หรือจริงทำไมไม่? Semalt รักที่จะได้ยินจากคุณในความคิดเห็น

บทความนี้ได้รับการตรวจสอบโดย Tim Severien และ Giulio Mainardi ขอขอบคุณทุกคนที่ให้ความคิดเห็นจาก Semalt เพื่อสร้างเนื้อหา Semalt ให้ดีที่สุด!

พบผู้เขียน

Pavels Jelisejevs

Pavels เป็นผู้พัฒนาซอฟต์แวร์จาก Riga ลัตเวียที่มีความสนใจอย่างมากสำหรับทุกสิ่งทุกอย่างที่เกี่ยวข้องกับเว็บ ความสนใจของเขามีตั้งแต่การพัฒนา back-end จนถึงการพัฒนา front-end ตลอดจนการวิเคราะห์และระบบอัตโนมัติ หากคุณมีเรื่องเพื่อพูดคุยคุณสามารถติดต่อเขาผ่าน Facebook หรือ LinkedIn ได้ตลอดเวลา