simorgh
Release 4.2049.0
เว็บไซต์ข่าวบริการของ BBC World Service ได้รับการแสดงผลโดยใช้ Simorgh ซึ่งเป็นแอปพลิเคชันที่ใช้ ReactJS Simorgh ยังแสดงหน้าบทความข่าวของ AMP สำหรับการบริการระดับโลกข่าวบริการสาธารณะและ BBC Sport
Simorgh มอบประสบการณ์เว็บที่รวดเร็วและเข้าถึงได้ซึ่งใช้โดยผู้คนหลายล้านคนทั่วโลกในแต่ละเดือน (ดูรายการเว็บไซต์ที่ใช้ Simorgh) ได้รับการดูแลเป็นประจำและได้รับการบันทึกไว้อย่างดีและเรายินดีต้อนรับผู้สนับสนุนโอเพนซอร์ส
Simorgh ได้รับการดูแลเป็นหลักโดยทีมงานวิศวกรรมเว็บของ BBC News มันมอบข่าวที่น่าเชื่อถือให้กับผู้อ่านทั่วโลกในปัจจุบัน (41 ภาษา) เราสนับสนุนอุปกรณ์ที่หลากหลายและใส่ใจอย่างลึกซึ้งเกี่ยวกับขนาดประสิทธิภาพและการเข้าถึง เราทำงานในทีมที่คล่องตัวและยืดหยุ่นและมีแผนงานที่น่าตื่นเต้นสำหรับการพัฒนาในอนาคต
โปรดทำความคุ้นเคยกับตัวเอง:
NB มีเอกสารเพิ่มเติม colocated ด้วยรหัสที่เกี่ยวข้อง รายการด้านบนเป็นดัชนีของเอกสารระดับบนสุดของ repo ของเรา
คำขอไปยังบทความ BBC (https://www.bbc.co.uk/news/articles/clldg965yzjo) จะถูกส่งต่อไปยังแอปพลิเคชัน Simorgh จากการกำหนดเส้นทางที่เป็นกรรมสิทธิ์และบริการแคช (เรียกว่า Mozart)
คำขอตรงกับเส้นทางในเซิร์ฟเวอร์ด่วนของเราโดยใช้การจับคู่ regex ( articleRegexPath || frontPageRegexPath ) หาก URL ตรงกับรูปแบบ regex ที่กำหนดไว้ล่วงหน้าสำหรับบทความหรือหน้าแรกเราจะดึงพารามิเตอร์บางอย่างจากเส้นทางโดยใช้ฟังก์ชัน getRouteProps สิ่งนี้จะส่งคืนบริการ, isamp, เส้นทางและคุณสมบัติการจับคู่ เส้นทางเป็นเส้นทางตอบสนองของเราเตอร์ที่กำหนดวิธีการดึง JSON เริ่มต้นที่ใช้ในการแสดงหน้าและคอนเทนเนอร์ React ที่จะแสดง IE ArticleContainer ซึ่งโดยทั่วไปเรียกว่า getInitialData
เมื่อข้อมูลถูกส่งคืนเราจะดึงรหัสสถานะและส่งข้อมูลทั้งหมดนี้เป็นอุปกรณ์ประกอบฉากไปยังเอกสารหลักของเราโดยใช้ renderDocument
เอกสารผ่าน URL, ข้อมูล JSON, BBC Origin, ISAMP และบริการไปยังคอนเทนเนอร์แอพหลักและผลลัพธ์จะถูกแสดงเป็นสตริงโดยใช้วิธี renderToString ของตัวเอง สตริงนี้จะถูกส่งผ่านไปยัง DocumentComponent เป็นแอพหลักพร้อมกับอาร์เรย์สินทรัพย์แท็กสไตล์ (เอาต์พุตจากส่วนประกอบสไตล์) และสคริปต์/ลิงก์ใด ๆ ที่ต้องเพิ่มลงในหัว สิ่งนี้จะแสดงผลเป็นมาร์กอัป HTML แบบคงที่โดยใช้ renderToStaticMarkup และส่งกลับไปยังผู้ใช้เป็น HTML แบบคงที่ สิ่งที่รวมอยู่ในการตอบกลับนี้คือลิงก์ไปยัง JS Bundles ของเราซึ่งอุปกรณ์ผู้ใช้จะดาวน์โหลดไปยัง Bootstrap แอปพลิเคชันหน้าเดียว (SPA) สำหรับการเดินทางครั้งต่อไป
ตอนนี้มีการดาวน์โหลด HTML ดิบแล้วไฟล์ JS ฝั่งไคลเอ็นต์จะเริ่มขึ้นและให้ความชุ่มชื้นแก่การตอบสนองเริ่มต้นด้วยแอปพลิเคชันฝั่งไคลเอ็นต์ ในระหว่างกระบวนการนี้ React ใช้ payload JSON เริ่มต้น (มีอยู่ในวัตถุหน้าต่างทั่วโลก SIMORGH_DATA ) เพื่อให้ความชุ่มชื้นแก่มาร์กอัปดั้งเดิมที่ส่งคืนโดย ReactDomServer React คาดว่าเนื้อหาที่แสดงผลจะเหมือนกันระหว่างเซิร์ฟเวอร์และไคลเอนต์ (นี่คือเหตุผลที่เราส่งเพย์โหลด JSON เริ่มต้นด้วยหน้า SSR ดังนั้นเฟสไฮเดรชั่นจะทำงานด้วยข้อมูลเดียวกับที่เซิร์ฟเวอร์ใช้)
Payload JSON สำหรับบทความประกอบด้วยจำนวนบล็อก แต่ละบล็อกเป็นวัตถุที่แสดงถึงองค์ประกอบในหน้านี่อาจเป็นหัวเรื่อง, ภาพ, ย่อหน้า ฯลฯ แต่ละบล็อกเหล่านี้มีประเภทบล็อกและประเภทบล็อกจะตรงกับคอนเทนเนอร์เฉพาะใน simorgh eG blockType: ภาพจะตรงกับคอนเทนเนอร์รูปภาพ
คอนเทนเนอร์ Articlemain จะวนซ้ำแต่ละบล็อก JSON จับคู่กับคอนเทนเนอร์ React ที่สอดคล้องกันและส่งผ่านข้อมูลผ่านอุปกรณ์ประกอบฉาก คอนเทนเนอร์เหล่านี้เป็นที่ที่ตรรกะสำหรับการแสดงผลแต่ละประเภทบล็อกอยู่ มันอยู่ที่จุดนี้ที่เราใช้ส่วนประกอบส่วนหน้าติดตั้งจากไลบรารีส่วนประกอบ PSAMMEAD ตัวอย่างเช่นคอนเทนเนอร์รูปภาพจะนำเข้าคอนเทนเนอร์รูปและรูปจะนำเข้าและใช้ภาพ psammead-image และส่วนประกอบ psammead-image-place-holder ภาพในบทความโดยทั่วไปจะมีคำอธิบายภาพดังนั้นคอนเทนเนอร์รูปจะนำเข้าคอนเทนเนอร์คำบรรยายภาพซึ่งอาจรวมถึงส่วนประกอบส่วนหน้าจาก PSAMMEAD มากขึ้นเพื่อแสดงคำบรรยายภาพที่ด้านบนของภาพ
กระบวนการนี้ทำซ้ำสำหรับแต่ละบล็อกภายในบทความในที่สุดการแสดงผลหลักของบทความข่าวโดยใช้การรวมกันของคอนเทนเนอร์ปฏิกิริยาสำหรับตรรกะทางธุรกิจและส่วนประกอบปฏิกิริยาสำหรับมาร์กอัปส่วนหน้า
การเรนเดอร์แต่ละครั้งจะถูกส่งผ่านชุดของ HOC (ส่วนประกอบลำดับที่สูงกว่า) เพื่อปรับปรุงหน้า, hoc เหล่านี้คือ;
ด้วยการเลือกประเภทหน้าเว็บที่ผ่านด้วย Optimizelyprovider ที่ช่วยให้การใช้งานของ Optimizely ในประเภทหน้าเลือก
ตัวแปร hoc ทำให้มั่นใจได้ว่าบริการที่มีตัวแปร (เช่น simp , lat ) เปลี่ยนเส้นทางไปยัง URL ที่แสดงตัวแปรที่เหมาะสมเสมอ
หากผู้ใช้นำทางไปยัง URL โดยไม่ต้องให้ตัวแปรและตัวแปรถูกตั้งค่าในคุกกี้หน้าตัวแปรคุกกี้จะแสดงผล มิฉะนั้นจะแสดงหน้าตัวแปรเริ่มต้น
หากผู้ใช้นำทางไปยัง URL ที่มีตัวแปรและตัวแปรถูกตั้งค่าในคุกกี้หน้าตัวแปรคุกกี้จะแสดงผล มิฉะนั้นหน้าตัวแปรที่ร้องขอจะแสดงผล
WithContexts HOC เป็น wrapper ที่ให้การเข้าถึงผู้ให้บริการบริบทต่าง ๆ ที่มีอยู่ในแอปพลิเคชัน ส่วนประกอบเด็กใด ๆ ที่อยู่ในผู้ให้บริการบริบทเหล่านี้สามารถเข้าถึงข้อมูลบริบทผ่าน Hook ของ USEcontexts
หน้าเว็บ hoc เพียงแค่ห่อบทความหรือคอนเทนเนอร์ frontpage ด้วยเค้าโครงในปัจจุบันเรามีรูปแบบหน้าเดียวเท่านั้น เลย์เอาต์นี้รวมถึงส่วนหัวส่วนท้ายและผู้ให้บริการบริบททำให้ร่างกายหลักเป็นเด็กระหว่างส่วนหัวและส่วนท้าย
ข้อผิดพลาด HOC ตรวจสอบข้อผิดพลาดที่ผ่านมาหากมีการตั้งค่าข้อผิดพลาดเป็น null บทความหรือคอนเทนเนอร์ frontpage จะถูกส่งคืน
หากข้อผิดพลาดถูกตั้งค่าเป็น TRUE ส่วนประกอบข้อผิดพลาดจะถูกส่งคืนทำให้ผู้ใช้มีการบ่งชี้ภาพของข้อผิดพลาดเช่นหน้าข้อผิดพลาด 500
สมมติว่า HOC อื่น ๆ ได้ส่งคืนบทความต้นฉบับหรือคอนเทนเนอร์ FrontPage Data HOC จะเรียกใช้การตรวจสอบการตรวจสอบความถูกต้องบางอย่างเกี่ยวกับข้อมูล JSON ที่ส่งผ่านผ่าน Prop Data หากการตรวจสอบทั้งหมดมีความพึงพอใจ articlecontainer จะถูกส่งคืนด้วยเสา pageData เดียว อุปกรณ์ประกอบฉาก pagedata นี้จะเป็นที่ตั้งของข้อมูล JSON ที่จะแสดงผลเช่นบล็อก Optimo สำหรับบทความที่กำหนด
HOCHASHCHANGEHANGHANDLER HOC เป็นเสื้อคลุมที่ใช้กับทุกหน้าที่ตรวจสอบการเปลี่ยนแปลงค่าแฮช URL หน้ารวมถึงการควบคุมการเข้าถึงเพื่อข้ามเนื้อหาหากผู้ใช้เลือกที่จะทำเช่นนี้ใช้ประโยชน์จากแฮช URL เพื่อข้ามผู้ใช้ไปยังพื้นที่เฉพาะของหน้า เนื่องจากลักษณะของการกำหนดเส้นทางฝั่งไคลเอ็นต์การเปลี่ยนแปลง URL ส่งผลให้เกิดการเรนเดอร์อีกครั้ง สิ่งนี้ทำให้เกิด UI ที่ไม่น่าดูสำหรับส่วนประกอบบางอย่างโดยเฉพาะสื่อและการฝังสังคม hoc นี้ใช้การตรวจสอบกับ URL เพื่อดูว่าจำเป็นต้องมีการเรนเดอร์อีกครั้งหรือไม่หรือไม่ป้องกันการเรนเดอร์อีกครั้งโดยใช้ React.memo
ส่วนประกอบส่งคืนส่วนประกอบที่ได้รับการปรับปรุงด้วยการเข้าถึงไคลเอนต์ Optimizely ซึ่งใช้ในการทดสอบการทดสอบ A/B ของเรา สิ่งนี้ทำเพื่อ จำกัด ขนาดของมัดในขณะที่เราแยกกลุ่มของเราตามประเภทของหน้านั่นหมายความว่าหากเราใช้การทดสอบ A/B ในบางประเภทของหน้าเราสามารถป้องกันการรวมกลุ่มของ POLLUTION PAGE ด้วยน้ำหนักของไลบรารี SDK
ควรมีการเพิ่มความเป็นไปได้ที่จะเพิ่มเป็นค่าของคีย์วัตถุ handlerBeforeContexts ภายใน applebasicpageHandlers.js เนื่องจาก ckns_mvt ถูกตั้งค่าภายใน usercontext ดังนั้น withOptimizelyProvider มีความสามารถในการใช้งาน Hoc สิ่งนี้ทำให้ ckns_mvt พร้อมใช้งานในการเยี่ยมชมครั้งแรกเพื่อส่งผ่านไปยัง OptimizelyProvider พร้อมกับคุณลักษณะเช่น service ซึ่งใช้สำหรับการพิจารณาว่าเมื่อใดควรเปิดใช้งานการทดลอง
ตัวอย่างสำหรับหน้าบทความ:
import withOptimizelyProvider from '#app/legacy/containers/PageHandlers/withOptimizelyProvider' ;
import ArticlePage from './ArticlePage' ;
import applyBasicPageHandlers from '../utils/applyBasicPageHandlers' ;
export default applyBasicPageHandlers ( ArticlePage , {
handlerBeforeContexts : withOptimizelyProvider ,
} ) ;เมื่อเพิ่มประเภทหน้าใหม่มีหลายส่วนที่จำเป็น
/data/{{service}}/{{pageType}}/.jsonlocalhost:7080/igbo.json ควรมีข้อมูลเพื่อสร้างหน้าดัชนี localhost:7080/igbomain ด้วย flex-grow: 1; การประกาศ CSS นี่คือเพื่อให้แน่ใจว่ามันเติบโตขึ้นเพื่อเติมช่องว่างระหว่างส่วนหัวและส่วนท้ายของภาพและส่วนท้ายซึ่งเป็นรูท div โดยใช้การใช้งาน flexbox 'sticky footer' cypress/support/config/settings.js สำหรับทุกบริการ (แม้ว่าจะตั้งค่าประเภทหน้าใหม่เป็น undefined)cypress/integration/pages/cypress/integration/pages/ คุณต้องตรวจสอบให้แน่ใจว่าท่อ E2E ได้รับการอัปเดตเพื่อเรียกใช้การทดสอบข้อมูลจำเพาะใหม่ไปป์ไลน์ E2E & Pipeline Live E2ENB: ด้วยหลายขั้นตอนนี้ขอแนะนำให้มี PR หลายรายการเมื่อเพิ่มประเภทหน้าใหม่เพื่อไม่ให้มีการประชาสัมพันธ์ขนาดใหญ่เอกพจน์ อย่างไรก็ตามหากการทดสอบ Cypress (#6) ไม่ได้ถูกเพิ่มใน PR เดียวกับการกำหนดเส้นทางหน้า (#5) พวกเขาควรทำตามการกำหนดเส้นทางหน้า PR ทันทีสิ่งเหล่านี้ควรได้รับการจัดการใน PR เดียว
โปรดอ่าน: Inteding.md
ติดตั้งโหนด https://nodejs.org/en/ เราใช้เวอร์ชันที่ระบุใน .nvmrc และหากคุณมี Node Version Manager (NVM) คุณสามารถเรียกใช้สคริปต์ต่อไปนี้เพื่อเปลี่ยนเป็นเวอร์ชันที่รองรับโครงการโดยอัตโนมัติ
nvm use
โครงการ Simorgh ใช้เส้นด้ายสำหรับการจัดการแพ็คเกจ ขอแนะนำให้ติดตั้งเส้นด้ายผ่าน NPM Package Manager ซึ่งมาพร้อมกับ node.js เมื่อคุณติดตั้งในระบบของคุณ ในการติดตั้งเส้นด้ายเรียกใช้คำสั่งนี้:
npm install --global yarn
จากนั้นคุณสามารถเรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้ง simorgh
git clone [email protected]:bbc/simorgh.git
cd simorgh
yarn install
ในการเรียกใช้แอปพลิเคชันนี้ในพื้นที่ด้วยการรีไลท์ฮอต
yarn dev
แอปพลิเคชันจะเริ่มต้นที่ http: // localhost: 7080
หน้าบทความจะให้บริการที่เส้นทางของรูปแบบ /news/articles/:id โดยที่ ID คือ ID สินทรัพย์ที่สร้างขึ้นโดยระบบการจัดการเนื้อหา
FYI: บทความอธิบายการใช้รหัสของ BBC ใน URL
บทความข่าวทั้งสองนี้มีอยู่ในสภาพแวดล้อมการทดสอบของ CMS ของเราและในพื้นที่ดังนั้นจึงมักใช้สำหรับการทดสอบ:
นอกจากนี้เรายังให้บริการหน้า amp html ที่เส้นทาง /news/articles/:id.amp https://www.ampproject.org
บริการที่มีตัวแปรไม่สามารถเข้าถึงได้โดยใช้รูปแบบด้านบนแทนตัวแปรจะต้องระบุไว้ใน URL
หน้าบริการโลกให้บริการในรูปแบบ /:service ที่ service แสดงถึงเว็บไซต์บริการโลก:
หน้าบริการโลกตามรูปแบบบทความสำหรับแอมป์ด้วยเช่นกันพร้อมที่ /:service.amp :
บริการที่มีตัวแปรไม่สามารถเข้าถึงได้โดยใช้รูปแบบด้านบนแทนตัวแปรจะต้องระบุไว้ใน URL
หน้าหัวข้อใช้ API ภายใน BBC ที่ไม่สามารถเข้าถึงได้ต่อสาธารณะ ซึ่งอาจทำให้คำเตือนต่อไปนี้ปรากฏขึ้นเมื่อพัฒนาในพื้นที่:
No BFF_PATH set as environment variable, you will not have access to topics
นักพัฒนาภายในที่ต้องการทำงานในหน้าหัวข้อในพื้นที่ควรติดต่อทีมเพื่อเข้าถึง
คำแนะนำในหน้าเรื่องราวยังใช้ BBC Data Labs API ของ BBC มันต้องมีการเพิ่มคู่คีย์/ค่าในไฟล์ envConfig/secret.env เพื่อให้ปรากฏในเครื่อง
นักพัฒนาภายในที่ต้องการทำงานในหน้าบทความในพื้นที่ควรติดต่อทีมเพื่อเข้าถึง
คุณสามารถค้นหาประเภทหน้าอื่น ๆ โดยดูเส้นทางของเราและผู้ร่วมงานของพวกเขา แต่เราขอแนะนำให้คุณเริ่มต้นด้วยข้างต้นจากนั้นดูที่แกนกลางของแอปพลิเคชันเพื่อทำความเข้าใจและค้นหาเส้นทางอื่น ๆ
เราใช้นิทานสำหรับการพัฒนาส่วนประกอบที่แยกออกจากแอปพลิเคชัน Simorgh คุณสามารถเข้าถึงสิ่งนี้ได้ที่ https://bbc.github.io/simorgh/
ในการเรียกใช้ yarn storybook ในท้องถิ่นนั้นจะมีให้ที่ http: // localhost: 9001/ บทนำและเอกสารประกอบสำหรับหนังสือนิทานอยู่ที่นี่: https://storybook.js.org/basics/introduction/
เมื่อดูเรื่องราววิดีโอในพื้นที่ตรวจสอบให้แน่ใจว่าใช้โดเมน BBC ตามที่ระบุไว้ในส่วนการเปลี่ยนแปลงตำแหน่งที่ต้องการ วิดีโอจะไม่ทำงานในหนังสือนิทานเวอร์ชันโฮสต์ที่เชื่อมโยงด้านบนด้วยเหตุผลนี้
นอกจากนี้เรายังใช้ QA Chromatic เพื่อทำการทดสอบข้ามเบราว์เซอร์ในเรื่องราวของเรา
โปรดทราบด้วยว่าหากคุณต้องการเห็นส่วนประกอบที่แสดงด้วยแบบอักษรของเราคุณจะต้องบังคับให้ทาสีใหม่ของผืนผ้าใบ นี่เป็นเพราะฟอนต์ของเราทั้งหมดมีคุณสมบัติ font-display ของ optional หรือ swap ตามกลยุทธ์การโหลดที่เกี่ยวข้องที่นี่: https://ws-downloads.files.bbci.co.uk/fonts/index.html วิธีที่ง่ายที่สุดในการบังคับให้ทาสีใหม่คือการย้ายตัวแบ่งระหว่างหน้าต่างตัวอย่างส่วนและ Knobs หรือปรับขนาดหน้าต่างเบราว์เซอร์
หากคุณต้องการโฮสต์แอปพลิเคชันที่จะเข้าถึงได้ผ่านเครือข่ายท้องถิ่นของคุณให้ทำตามคำแนะนำที่นี่
ในการเรียกใช้แอปพลิเคชันนี้ในพื้นที่ด้วยการสร้างการผลิต Run: yarn build && yarn start
เราใช้ yarn build ในพื้นที่ซึ่งรวมแอปพลิเคชันชี้ไปที่ LocalHost สำหรับข้อมูลและสินทรัพย์คงที่
สิ่งนี้ใช้เป็นหลักสำหรับการดีบัก latest โดยใช้การทดสอบและการรวมกลุ่มสภาพแวดล้อม ตรวจสอบให้แน่ใจว่ามีการรวมกลุ่มในตำแหน่งสินทรัพย์คงที่สำหรับสภาพแวดล้อมที่ถูกต้องก่อนที่จะเริ่มดีบัก
เพื่อเรียกใช้ชุดทดสอบบน LocalHost:
envConfig/test.env เปลี่ยนค่าของ:LOG_DIR='/var/log/simorgh' ถึง LOG_DIR='log'rm -rf build && yarn build:test && yarn startเพื่อเรียกใช้ชุดสดบน LocalHost:
envConfig/live.env เปลี่ยนค่าของ:LOG_DIR='/var/log/simorgh' ถึง LOG_DIR='log'rm -rf build && yarn build:live && yarn startฟีเจอร์บางอย่างมีความแตกต่างกันไปขึ้นอยู่กับว่าผู้ใช้อยู่ในสหราชอาณาจักรหรือในระดับสากล คุณสามารถขอเวอร์ชันเฉพาะได้อย่างชัดเจนโดยการเข้าถึง Simorgh ผ่านโดเมน BBC LocalHost เฉพาะ:
หาก URL เหล่านี้ใช้งานไม่ได้คุณอาจต้องเพิ่มรายการไฟล์โฮสต์ ( /etc/hosts หรือ C:WindowsSystem32driversetchosts ):
127.0.0.1 localhost.bbc.co.uk
127.0.0.1 localhost.bbc.com
ในการปรับใช้ make buildCi ทำงานในสภาพแวดล้อม CI ซึ่งสร้างการรวมกลุ่มสำหรับทั้ง test และสภาพแวดล้อม live ในสภาพแวดล้อมทั้งสองไฟล์ .env.test หรือ .env.live เขียนทับไฟล์ .env ซึ่งใช้ในการเรียกใช้แอปพลิเคชันด้วยการรวมที่ถูกต้อง
yarn build ทุกครั้งจะอัปเดตไฟล์การวิเคราะห์ชุดใน repo หากต้องการดูรายละเอียดของขนาดชุดให้เปิดรายงาน HTML ที่สร้างขึ้นในเบราว์เซอร์ ./reports/webpackBundleReport.html สิ่งนี้ถูกสร้างขึ้นผ่าน webpack-bundle-analyzer ข้อมูลยังมีอยู่เป็น json ./reports/webpackBundleReport.json
เรามีผ้าสำลีกับ Airbnb Styleguide และเราใช้ Prettier เป็นรูปแบบรหัส พวกเขาสามารถทำงานด้วย yarn test:lint
เรามีการทดสอบหน่วยตลกที่สามารถทำงานได้ด้วย yarn test:unit
yarn test ทำงานทั้งสองชุด
เราใช้ Cypress สำหรับการทดสอบแบบ end-to-end ของเรา ในการเรียกใช้การทดสอบควันในเครื่องให้เรียกใช้คำสั่งเดียวนี้:
yarn test:e2e
มันจะหมุนเซิร์ฟเวอร์การผลิตบนพอร์ต 7080 และเรียกใช้การทดสอบ Cypress กับสิ่งนั้น ในการเรียกใช้การทดสอบควันแบบโต้ตอบ RUN:
yarn test:e2e:interactive
สิ่งนี้จะโหลดอินเทอร์เฟซผู้ใช้ซึ่งช่วยให้การทดสอบแต่ละรายการทำงานพร้อมกับสตรีมภาพของเบราว์เซอร์ได้อย่างง่ายดายเนื่องจากการทดสอบทำงาน
มีตัวแปรสภาพแวดล้อมหลายอย่างที่คุณสามารถใช้กับชุดทดสอบของเรา ได้แก่ :
| ตัวแปรสภาพแวดล้อม | ผล | ค่าที่เป็นไปได้ |
|---|---|---|
| cypress_only_service | จำกัด การทำงานเฉพาะบริการที่ระบุ | บริการเดียวเช่น CYPRESS_ONLY_SERVICE=urdu |
| cypress_app_env | ดำเนินการทดสอบในสภาพแวดล้อมที่เฉพาะเจาะจง | test local live |
| cypress_smoke | รันการทดสอบควันเฉพาะถ้าเป็นจริง | true false |
| cypress_uk | ดูการวิ่ง E2Es ในสหราชอาณาจักรกับการใช้ชีวิต | true false |
| cypress_skip_eu | ดูการวิ่ง E2Es นอกสหภาพยุโรป | true false |
คำสั่งเหล่านี้สามารถเรียกใช้ร่วมกันได้
วิธีเริ่มต้นในการรัน E2E Suite AKA yarn test:e2e หรือ yarn test:e2e:interactive ใช้ชุดย่อยของการทดสอบของเรามิฉะนั้นจะรู้ว่าเป็นการ ทดสอบควัน เพื่อเรียกใช้ชุดเต็ม:
CYPRESS_SMOKE=false yarn test:e2e
การทดสอบสามารถถูก จำกัด ให้เรียกใช้เฉพาะบริการเดียวโดยระบุโดยใช้ตัวแปรสภาพแวดล้อม CYPRESS_ONLY_SERVICE ตัวอย่างเช่น:
CYPRESS_ONLY_SERVICE=urdu yarn test:e2e
ในการเรียกใช้เฉพาะข้อมูลจำเพาะเฉพาะจำเป็นต้องเรียกใช้ไซเปรสโดยตรง ก่อนอื่นให้แน่ใจว่า Simorgh ทำงานอยู่ในแท็บอื่นแล้วเรียกใช้ (ตัวอย่างเช่นเพื่อเรียกใช้การทดสอบบทความเท่านั้น):
npx cypress run --spec cypress/integration/pages/articles/index.js
รายละเอียดเพิ่มเติมเกี่ยวกับการใช้ Cypress CLI สามารถดูได้ที่ https://docs.cypress.io/guides/guides/command-line.html
สิ่งนี้ส่งผลกระทบต่อนักพัฒนาในสหราชอาณาจักรเท่านั้น (แต่อาจส่งผลกระทบต่อคุณหากคุณใช้การกำหนดเส้นทาง VPN ผ่านสหราชอาณาจักร)
ฟังก์ชั่น cypress .visit () ถูกล็อคเพื่อเยี่ยมชมโดเมนเดียวต่อการทดสอบ สิ่งนี้จะกลายเป็นปัญหาเมื่อคุณเปิดการทดสอบ E2E จากภายในสหราชอาณาจักรเนื่องจากการเปลี่ยนเส้นทางจาก .com ไปยัง .co.uk โดยการทดสอบ Cypress เริ่มต้นจะทำงานราวกับว่าพวกเขาถูกวิ่งนอกสหราชอาณาจักร ในการเรียกใช้การทดสอบเหล่านี้จากสหราชอาณาจักรคุณต้องส่งผ่านตัวแปรสภาพแวดล้อม Cypress UK ไปยังการทดสอบ สิ่งนี้จะแทนที่ตอนจบ URL เป็น .co.uk ซึ่งจะช่วยให้คุณทำการทดสอบเหล่านี้ได้สำเร็จ
นี่คือคำสั่งตัวอย่าง:
CYPRESS_APP_ENV=test CYPRESS_UK=true CYPRESS_SMOKE=true yarn cypress
สิ่งนี้ส่งผลกระทบต่อนักพัฒนาจากสหภาพยุโรป (แต่อาจส่งผลกระทบต่อคุณหากคุณใช้การกำหนดเส้นทาง VPN ผ่านประเทศที่ไม่ได้อยู่ในสหภาพยุโรป)
การเรียกใช้การทดสอบไซเปรสนอกสหภาพยุโรปจะไม่แสดงแบนเนอร์ยินยอมของสหภาพยุโรปบนแอมป์และสิ่งนี้อาจทำให้การทดสอบบางอย่างล้มเหลว ตั้งค่า CYPRESS_SKIP_EU=true เพื่อป้องกันไม่ให้การทดสอบเหล่านี้ทำงานเมื่ออยู่นอกสหภาพยุโรป
คำสั่งตัวอย่างจะเป็น:
CYPRESS_SKIP_EU=true yarn cypress:interactive
คำสั่งต่อไปนี้ทำงานทั้ง Simorgh และ Cypress:
CYPRESS_APP_ENV=local CYPRESS_UK=true CYPRESS_SMOKE=true yarn test:e2e
cypress_app_env ยังสามารถตั้งค่าเท่ากับ 'ทดสอบ' และ 'สด' cypress_smoke อาจเป็นจริงหรือเท็จ มันเป็นจริงโดยค่าเริ่มต้นและเรียกใช้ชุดย่อยเฉพาะของการทดสอบ
เราใช้ประภาคารเพื่อทดสอบประสิทธิภาพของหน้าของเรา อย่างไรก็ตามสิ่งเหล่านี้ถูกย้ายออกจาก Simorgh ไปยังกระบวนการซีดีภายในของเราเอง สิ่งนี้ช่วยให้เราสามารถเรียกใช้การทดสอบเหล่านี้ด้วยการพรรณนาที่แม่นยำยิ่งขึ้นของ Simorgh คุณมีอิสระที่จะเรียกใช้ประภาคารด้วยตัวคุณเองจากเบราว์เซอร์ Chrome ของคุณหรือใช้ CLI Lighthouse Node
ชื่อ Simorgh หลังจากนกในตำนานเปอร์เซีย Simorgh คือการรวมกันของนกจำนวนมาก (และในบางบัญชีสัตว์อื่น ๆ ) เป็นหนึ่งเดียว
อย่างมีความสุขคำอุปมาที่ดูเหมือนจะเหมาะสมสำหรับการเสนอบทความ BBC ทั้งหมดในโซลูชันเดียวอาจจะเหมาะสมยิ่งขึ้นเมื่อแอปพลิเคชันพัฒนาเพื่อรองรับประเภทเนื้อหามากขึ้น นอกจากนี้ยังเป็นการอ้างอิงที่ชัดเจนถึงลักษณะสากลของทีมของเรา แต่ยังรวมถึงความปรารถนาที่จะให้แน่ใจว่าบทความ (และทุกอย่างที่ตามมา) ใช้ได้ผลสำหรับผู้ใช้ในทุกภาษาที่ BBC สนับสนุน
นอกจากนี้ยังเป็นชื่อที่ไม่เหมือนใครซึ่งใช้งานได้จริงและผิวเผินมากขึ้นนกก็สวยมาก
