PENGUJIAN WHITEBOX PADA APLIKASI BERBASIS WEBSITE
INDONESIA DISASTER INFORMATION SYSTEM (IDIS)
Nama Ketua :
Mochammad Farrel A - 10520027
Nama Anggota 1 :
Fadel Ash Shidqi - 10519023
Nama Anggota 2 :
M Farhan - 10520014
PROGRAM STUDI SISTEM INFORMASI
FAKULTAS TEKNIK DAN ILMU KOMPUTER
UNIVERSITAS KOMPUTER INDONESIA
PENDAHULUAN
1. DESKRIPSI SINGKAT PROYEK
Proyek ini bertujuan untuk melakukan pengujian whitebox pada IDIS guna
memastikan bahwa seluruh aspek internal dari aplikasi telah diuji dengan baik.. Teknik
pengujian Branch Testing menitikberatkan pengujian pada setiap percabangan, Branch
Testing memastikan setiap percabanganya berjalan sesuai fungsinya berdasarkan kondisi
dari input
2. TUJUAN PENGUJIAN
Pengujian whitebox melibatkan pemeriksaan internal kode sumber aplikasi
memastikan bahwa semua jalur eksekusi dan fungsionalitas yang diharapkan berjalan
sesuai prosedur, dilakukan dengan cara menguji setiap baris code untuk mengidentifikasi
jika ada kesalahan yang terdapat pada code tersebut, Pengujian ini bertujuan untuk
memastikan bahwa setiap jalur eksekusi, seperti pengambilan data dari sumber eksternal,
pengolahan data, dan penampilan informasi cuaca, berjalan sesuai dengan prosedur yang
telah ditetapkan
METODE PENGUJIAN WHITEBOX
1. PEMILIHAN KASUS UJI
Pemilihan kasus yang kami uji adalah hasil dari website Indonesian Disaster Information System
(IDIS) pada fitur carousel perkiraan cuaca, alasan kami melakukan pengujian pada fitur tersebut
adalah untuk m elakukan pengujian whitebox pada fitur carousel perkiraan cuaca dalam sebuah
website sangat penting karena hal ini memastikan fungsionalitas yang tepat sesuai dengan
spesifikasi yang telah ditetapkan. Dengan akses langsung ke kode sumber, pengujian ini
memungkinkan pemahaman yang mendalam terhadap alur kerja sistem, memungkinkan
identifikasi dan perbaikan bug atau kerentanan yang mungkin tersembunyi. Selain itu, pengujian
whitebox juga dapat meningkatkan cakupan pengujian, membantu dalam optimalisasi kinerja,
serta memastikan keamanan sistem dengan mengidentifikasi potensi celah keamanan. Dengan
melakukan pengujian ini, kesalahan atau bug dapat ditemukan lebih awal dalam siklus
pengembangan, meningkatkan kualitas keseluruhan fitur perkiraan cuaca dalam website untuk
memberikan pengalaman yang handal dan memuaskan bagi pengguna.
2. Lingkungan Pengujian
Lingkungan pengujian untuk fitur carousel perkiraan cuaca dalam Indonesian Disaster
Information System (IDIS) akan melibatkan beberapa elemen penting, termasuk akses ke sumber
data cuaca yang akurat, kode sumber fitur perkiraan cuaca, perangkat lunak pengujian whitebox
seperti JUnit atau PyTest, infrastruktur database yang solid, simulasi beragam skenario
penggunaan, lingkungan uji coba yang terisolasi dari produksi, serta tim pengujian yang terdiri
dari pengembang, tester, dan pengguna akhir untuk memvalidasi fungsionalitas. Persiapan ini
memungkinkan pengujian yang komprehensif dan efektif terhadap fitur tersebut, memastikan
kualitas, keandalan, serta kinerja yang optimal sebelum diperkenalkan ke lingkungan produksi
yang sebenarnya.
IMPLEMENTASI DAN EKSEKUSI PENGUJIAN RANCANGAN DAN IMPLEMENTASI
PENGUJIAN
1. RANCANGAN DAN IMPLEMENTASI PENGUJIAN
● Langkah-langkah yang kami lakukan untuk melakukan pengujian software tersebut adalah:
● Melakukan analisis terhadap source code yang ada di GitHub
● Setelah menganalisis, melakukan pembuatan flowgraph dari source code tersebut
● Lalu menghitung cyclomatic complexcity dengan cara mencari berapa edge, node, dan path yang
terdapat di pada source code tersebut
● Setelah mendapat hasil dari penghitungan source code tersebut kami melakukan penentuan
pada jalur independen pada flowgraph yang telah dibuat
● Terakhir, melakukan perhitungan pada nilai cakup cabang atau branch coverage
2. HASIL EKSEKUSI PENGUJIAN
Setelah pembuatan flowgraph, selanjutnya dilakukan perhitungan Cyclomatic Complexity dari source
code yang di uji
- Rumus Pertama
V(G) =E-N+2
V(G) = 49 - 29 + 2
V(G) = 22
- Rumus Kedua
V(G) = P+1
V(G) = 21+1
V(G) = 22
Keterangan :
V(G) : Merupakan notasi dari Matrix Cyclomatic Complexity
E : Merupakan jumlah edge yang terdapat pada flowgraph
N : Merupakan jumlah node yang terdapat pada flowgraph
P : Merupakan jumlah Predicate node yang terdapat pada flowgraph
Setelah selesai mendapatkan hasil dari cyclomatic complexity kita dapat menentukan jalur independen
(Independen Path)
1. 1-6, 7-11, 12-14, 13-15, 32, 33-34, 35, 36-37, 67, 68-103, 104-144, 146-221
2. 1-6, 7-11, 12-14, 13-15, 32, 33-34, 35, 36-37, 67, 68-103, 145, 146-221
3. 1-6, 7-11, 12-14, 16-19, 32, 33-34, 35, 36-37, 67, 68-103, 104-144, 146-221
4. 1-6, 7-11, 12-14, 16-19, 32, 33-34, 35, 36-37, 67, 68-103, 145, 146-221
5. 1-6, 7-11, 12-14, 20-23, 32, 33-34, 35, 36-37, 67, 68-103, 104-144, 146-221
6. 1-6, 7-11, 12-14, 20-23, 32, 33-34, 35, 36-37, 67, 68-103, 145, 146-221
7. 1-6, 7-11, 12-14, 24-27, 32, 33-34, 35, 36-37, 67, 68-103, 104-144, 146-221
8. 1-6, 7-11, 12-14, 24-27, 32, 33-34, 35, 36-37, 67, 68-103, 145, 146-221
9. 1-6, 7-11, 12-14, 28-31, 32, 33-34, 35, 36-37, 67, 68-103, 104-144, 146-221
10. 1-6, 7-11, 12-14, 28-31, 32, 33-34, 35, 36-37, 67, 68-103, 145, 146-221
11. 1-6, 7-11, 12-14, 13-15, 32, 33-34, 35, 38-39, 67, 68-103, 104-144, 146-221
12. 1-6, 7-11, 12-14, 28-31, 32, 33-34, 35, 38-39, 67, 68-103, 145, 146-221
13. 1-6, 7-11, 12-14, 13-15, 32, 33-34, 35, 40-41, 67, 68-103, 104-144, 146-221
14. 1-6, 7-11, 12-14, 28-31, 32, 33-34, 35, 40-41, 67, 68-103, 145, 146-221
15. 1-6, 7-11, 12-14, 13-15, 32, 33-34, 35, 42-43, 67, 68-103, 104-144, 146-221
16. 1-6, 7-11, 12-14, 28-31, 32, 33-34, 35, 42-43, 67, 68-103, 145, 146-221
17. 1-6, 7-11, 12-14, 13-15, 32, 33-34, 35, 44-45, 67, 68-103, 104-144, 146-221
18. 1-6, 7-11, 12-14, 28-31, 32, 33-34, 35, 44-45, 67, 68-103, 145, 146-221
19. 1-6, 7-11, 12-14, 13-15, 32, 33-34, 35, 46-47, 67, 68-103, 104-144, 146-221
20. 1-6, 7-11, 12-14, 28-31, 32, 33-34, 35, 46-47, 67, 68-103, 145, 146-221
21. 1-6, 7-11, 12-14, 13-15, 32, 33-34, 35, 48-49, 67, 68-103, 104-144, 146-221
22. 1-6, 7-11, 12-14, 28-31, 32, 33-34, 35, 48-49, 67, 68-103, 145, 146-221
Hasil dari cakupan cabang (branch coverage) dapat diketahui sebagai berikut
BC = Jumlah jalur independen
BC = 22
Jadi nilai Branch Coverage adalah 22
EVALUASI DAN PEMBAHASAN
1. ANALISIS HASIL PENGUJIAN
Hasil dari pengujian diatas adalah terdapat 22 jalur independen yang disebabkan oleh
banyaknya kondisi yang harus dipenuhi oleh program,Dalam konteks pengujian perangkat lunak,
adanya 22 jalur independen yang disebabkan oleh banyaknya kondisi yang harus dipenuhi oleh
program adalah informasi yang menggambarkan kompleksitas dari perangkat lunak yang diuji.
Jalur independen mengacu pada serangkaian langkah-langkah atau kondisi-kondisi yang harus
dipenuhi dalam perangkat lunak untuk mencapai hasil atau output tertentu .
2. TANTANGAN DAN KESULITAN YANG DI HADAPI
Tantangan dan kesulitan yang dihadapi pada pengerjaan source code ini adalah harus
menguasai bahasa pemorgraman pada source code yang di test banyaknya edge, node, dan
path yang harus analisis, menghitung banyaknya flowgraph untuk menemukan perhitungan
cyclomatic complexcity
KESIMPULAN
KESIMPULAN AKHIR
Dari hasil pengetesan metode whitebox menggunakan branch testing, terdapat 22 jalur
independen yang dilalui pada program tersebut, Ketika terdapat 22 jalur independen, hal ini
menandakan bahwa ada sejumlah besar kemungkinan jalur yang dapat diambil selama eksekusi
program, berdasarkan variasi kondisi dan percabangan yang terjadi. Hal ini juga menunjukkan
bahwa dalam menguji perangkat lunak, penting untuk mempertimbangkan dan menguji semua
kemungkinan jalur independen untuk memastikan bahwa program berjalan sesuai yang
diharapkan dan memiliki kualitas yang baik.
LAMPIRAN
import useEmblaCarousel from "embla-carousel-react";
import { isToday, isTomorrow, format } from "date-fns";
import { useCuaca } from "../../redux/reducers/cuaca";
[Link] = { align: "start" };
const Carousel = () => {
const [emblaRef] = useEmblaCarousel();
const { cuaca } = useCuaca();
const getIcon = (code: string) => {
if (code === "0") {
return "/images/[Link]";
}
if (code === "1" || code === "2") {
return "/images/[Link]";
}
if (code === "60" || code === "61") {
return "/images/[Link]";
}
if (code === "95" || code === "97") {
return "/images/[Link]";
}
if (code === "3" || code === "4") {
return "/images/[Link]";
}
return "";
};
const getLabel = (code: string) => {
if (code === "0") {
return "Cerah";
} else if (code === "1") {
return "Cerah Berawan";
} else if (code === "2") {
return "Cerah Berawan";
} else if (code === "1") {
return "Cerah Berawan";
} else if (code === "3") {
return "Berawan";
} else if (code === "4") {
return "Berawan Tebal";
} else if (code === "5") {
return "Udara Kabur";
} else if (code === "10") {
return "Asap";
} else if (code === "45") {
return "Kabut";
} else if (code === "60") {
return "Hujan Ringan";
} else if (code === "61") {
return "Hujan Sedang";
} else if (code === "63") {
return "Hujan Lebat";
} else if (code === "80") {
return "Hujan Lokal";
} else if (code === "95") {
return "Hujan Petir";
} else if (code === "97") {
return "Hujan Petir";
}
};
return (
<div className="embla" ref={emblaRef}>
<div className="embla__container">
{![Link] && (
<>
<div className="skeleton"></div>
<div className="skeleton"></div>
<div className="skeleton"></div>
<div className="skeleton"></div>
<div className="skeleton"></div>
</>
)}
{cuaca &&
[Link] &&
[Link]
.filter((item: any) => [Link] === "weather")
.map((item: any) => {
return [Link](
(cuaca: any, index: number) => {
const date =
[Link](" ")[0];
const time =
[Link](" ")[1];
const day = [Link]("-")
[0];
const month =
[Link]("-")[1];
const year = [Link]("-")
[2];
const formattedDate =
year +
"-" +
month +
"-" +
day +
"T" +
time +
"Z";
if (
isToday(new
Date(formattedDate)) ||
isTomorrow(new
Date(formattedDate))
){
return (
<div
className="embla__slide"
key={index}
>
<div
className="time">
<div className="date">
{format(
new Date(
formattedDate
),
"d MMMM yyyy"
)}
</div>
<div>
{format(
new Date(
formattedDate
),
"HH:mm"
)}
</div>
</div>
<img
src={getIcon([Link])}
alt="icon"
key={index}
/>
<div
className="weather">
{getLabel([Link])}
</div>
{/*
<div className="temperature">
{item.t}° C
</div> */}
</div>
);
}
return <></>;
}
);
})}
</div>
<style>{`
.time, .weather, .temperature{
font-weight:800;
text-align:center;
font-size:20px;
}
.time{
margin-bottom:24px;
user-select: none;
}
.time .date{
font-size:16px;
font-weight:600;
}
.temperature{
margin-top:16px;
}
.weather{
margin-top:24px;
font-weight:600;
font-size:20px;
line-height:26px;
user-select: none;
}
.skeleton{
min-height: 205px;
width:100%;
position: relative;
flex: 0 0 16%;
background:#D9D9D91F;
}
.embla {
overflow: hidden;
min-height: 286px;
}
.embla__container {
display: flex;
justify-content:space-between;
}
.embla__slide {
position: relative;
flex: 0 0 16%;
background:#D9D9D91F;
padding:24px;
display:flex;
flex-direction:column;
margin-right:16px;
min-height: 286px;
}
.embla__slide img{
width:100px;
margin:auto;
}
@media(max-width:576px){
.embla__slide {
flex: 0 0 47%;
}
}
`}</style>
</div>
);
};
export default Carousel;
REFERENSI
[Link] Testing pada Aplikasi Web Mobile (Studi Kasus Bisnis Jasa Laundry)"
Dwi Kusumastuti Puji Rahayu, 2023
Studi kasus mengenai unit testing pada aplikasi web mobile dapat memberikan pemahaman
yang lebih mendalam mengenai pengujian pada aplikasi berbasis web. Meskipun bukan tentang
Indonesian Disaster Information System, namun konsep-konsep yang dibahas dapat diterapkan
pada aplikasi web lainnya, termasuk Indonesian Disaster Information System
2. "Pengujian White Box Testing terhadap Website Room Menggunakan Teknik Basis Path"
Judith Bryan L Sie, Izmy Alwiah Musdar, Syamsul Bahri, 2022
Penelitian ini membahas tentang pengujian white box testing terhadap website Room
menggunakan teknik basis path. Meskipun bukan tentang Indonesian Disaster Information
System, namun metode dan teknik yang dibahas dapat menjadi referensi yang berguna untuk
pengerjaan whitebox testing pada aplikasi berbasis website
3. Artikel dari Dicoding Blog yang menjelaskan tentang "White Box Testing untuk Menguji
Perangkat Lunak". Artikel ini memberikan pemahaman tentang konsep dan cara melakukan
white box testing dengan menganalisis dan meneliti struktur internal dan kode program
4. Materi presentasi dari SlideShare yang membahas "Pengujian White Box Testing dengan
Pengujian Jalur (Path) pada Struktur Kontrol Modul Sistem". Materi ini dapat memberikan
pemahaman lebih mendalam tentang teknik pengujian white box testing, khususnya pengujian
jalur (path) pada struktur kontrol modul sistem