data visualizer app

แอพ Data Visualizer และปลั๊กอิน

นี่คือ repo ที่มี data-visualizer-app และปลั๊กอินที่ใช้ทั้งภายในและสร้างขึ้นเป็นจุดเริ่มต้นแยกต่างหากเพื่อให้สามารถใช้ในแอพอื่น ๆ เช่นแอพแดชบอร์ด

เริ่มต้น

ในการเรียกใช้ Data-Visualizer-App จาก Repo Root Directory ให้ติดตั้งการอ้างอิง:

 $ yarn install

การพัฒนา

เรียกใช้ yarn start จากรูทของ repo เพื่อเริ่มแอพใน localhost:3000 และปลั๊กอินบน localhost:3001

การรันปลั๊กอินบนพอร์ตอื่นช่วยให้สามารถทดสอบในแอพอื่น ๆ ตัวอย่างเช่นสำหรับการทดสอบในแอพแดชบอร์ดให้เรียกใช้แอพแดชบอร์ดในพอร์ตอื่นและผ่าน Devtools แทนที่เส้นทางปลั๊กอินด้วยโฮสต์และพอร์ตที่ปลั๊กอินทำงานอยู่ ขั้นตอนตัวอย่าง:

1. ใน DV: yarn start
2. ในแดชบอร์ด: yarn start ที่จุดนี้ DV กำลังทำงานบน LocalHost: 3000, ปลั๊กอิน DV บน LocalHost: 3001 และแอพแดชบอร์ดบน LocalHost: 3002
3. ชี้เบราว์เซอร์ไปที่ LocalHost: 3002
4. เพิ่มรายการนี้ลงในแอพ Dashboard LocalStorage ผ่าน DevTools ในแท็บแอปพลิเคชัน: dhis2.dashboard.pluginOverrides: { "VISUALIZATION": "http://localhost:3001/plugin.html" }

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

สคริปต์ NPM ต่อไปนี้สามารถเรียกใช้ได้จากไดเรกทอรีรูท repo:

การทดสอบหน่วย

 $ yarn test

เรียกใช้การทดสอบหน่วยด้วยรายงานความครอบคลุม

 $ yarn coverage

การทดสอบ E2E

Cypress ใช้สำหรับการทดสอบเบราว์เซอร์ E2E สิ่งนี้จะทำงานโดยอัตโนมัติบน CI สำหรับ PRS ผลลัพธ์สามารถเห็นได้บน Cypress Cloud

ในการบันทึกการทดสอบใน Cypress Cloud คุณสามารถใช้หนึ่งในวิธีการหนึ่งต่อไปนี้ตามความต้องการของคุณ:

• ส่งข้อความ : รวม [e2e record] ในข้อความการกระทำของคุณเพื่อเปิดใช้งานการบันทึก
• ฉลาก GitHub : ใช้ค่าย e2e record กับคำขอดึงของคุณเพื่อเรียกใช้การบันทึก

การตั้งค่านี้ช่วยในการจัดการเครดิต Cypress Cloud ได้อย่างมีประสิทธิภาพมากขึ้นเพื่อให้มั่นใจว่าการบันทึกจะทำเมื่อจำเป็นอย่างชัดเจนเท่านั้น

ในการเรียกใช้การทดสอบในเครื่องให้กำหนดสิ่งต่อไปนี้ในไฟล์ cypress.env.json ในท้องถิ่นเช่น:

{
    " dhis2BaseUrl " : " https://test.e2e.dhis2.org/dev " ,
    " dhis2Username " : " admin " ,
    " dhis2Password " : " district " ,
}

เรียกใช้การทดสอบแบบโต้ตอบ (Cypress UI):

 yarn cypress:live

เรียกใช้การทดสอบในคอนโซลโดยไม่มี Cypress UI:

 yarn cypress:run

ผ้าสำลีและการจัดรูปแบบ

แก้ไขการละเมิดสไตล์รหัสที่แก้ไขได้ทั้งหมดโดยอัตโนมัติ (Prettier และ Eslint)

 $ yarn format

ตรวจสอบไฟล์ทั้งหมดสำหรับการละเมิดรูปแบบรหัส (Prettier และ Eslint)

 $ yarn lint

สร้างแอพและปลั๊กอิน

 $ yarn build

การทดสอบด้วยตนเองกับ Netlify

repo นี้ได้รับการกำหนดค่าให้ปรับใช้คำขอดึงเพื่อ netlify สิ่งนี้ทำให้ง่ายต่อการแบ่งปันการใช้งานกับผู้อื่น (เช่นผู้ทดสอบผู้จัดการผลิตภัณฑ์ UX นักพัฒนาเพื่อน) ก่อนที่จะรวมเข้ากับมาสเตอร์

คำขอดึง (เช่น #209) มีอยู่ที่:

https://pr-209--dhis2-data-visualizer.netlify.app

NetLify จะเพิ่มการตรวจสอบสถานะให้กับ PR แต่ละรายการซึ่งลิงก์โดยตรงไปยังการปรับใช้ PR