Skriv effektive jQuery-tests
Øv dig i at skrive enhedstests af DOM-manipulationer, event handlers og AJAX-kald, så dine jQuery-komponenter bliver robuste og fri for fejl.
Skriv effektive jQuery-tests er en gratis jQuery Academy-lektion på CoddyKit. Dette er lektion 3 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i jQuery Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. jQuery Academy-kurset indeholder 3 lektioner i alt.
Bliv ekspert i at skrive jQuery-tests
Velkommen! I denne lektion dykker vi ned i, hvordan du skriver effektive enhedstests til dine jQuery-applikationer. Vi fokuserer på praktiske strategier til kontrol af DOM-manipulationer, hændelseshåndtering og asynkrone AJAX-kald.
Robuste tests sikrer, at din kode fungerer som forventet, og hjælper med at forebygge regressioner, efterhånden som dit projekt udvikler sig.
Kontrol af DOM-ændringer
Når din jQuery-kode ændrer dokumentobjektmodellen (DOM), bør dine tests kontrollere disse ændringer. Det omfatter kontrol af oprettelse og fjernelse af elementer, attributændringer eller tekstopdateringer.
Typisk vælger du elementet efter handlingen og kontrollerer dets egenskaber.
<!DOCTYPE html>
<html>
<head>
<title>Test DOM Change</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
$(document).ready(function() {
// Simulate a jQuery operation
$('#app').append('<p class="message">Hello world!</p>');
// Simulate a test assertion
if ($('#app .message').length === 1 && $('#app .message').text() === 'Hello world!') {
console.log("PASS: Element appended and text is correct.");
} else {
console.log("FAIL: Element not found or text is incorrect.");
}
});
</script>
</body>
</html>Isolering af DOM-tests
For at få pålidelige DOM-tests er det afgørende, at hver test køres i et rent, isoleret miljø. De fleste testrammer tilbyder hooks som beforeEach og afterEach.
beforeEach: Opsætter den indledende DOM-tilstand for en ny test.afterEach: Rydder op i de DOM-ændringer, som testen har foretaget.
Det forhindrer testene i at forstyrre hinanden.
Test af klasseændringer
Lad os teste en almindelig DOM-manipulation: tilføjelse eller fjernelse af CSS-klasser. Du kan kontrollere, om et element .hasClass() en bestemt klasse, efter din jQuery-funktion er kørt.
<!DOCTYPE html>
<html>
<head>
<title>Test Class Toggle</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="toggleBtn" class="active">Toggle</button>
<script>
$(document).ready(function() {
// Function to test
function toggleActiveClass(element) {
$(element).toggleClass('active');
}
// Test Case 1: Active class is present initially
if ($('#toggleBtn').hasClass('active')) {
console.log("PASS: Initial state has 'active' class.");
} else {
console.log("FAIL: Initial state missing 'active' class.");
}
// Run the function
toggleActiveClass('#toggleBtn');
// Test Case 2: Active class should be removed
if (!$('#toggleBtn').hasClass('active')) {
console.log("PASS: 'active' class removed after toggle.");
} else {
console.log("FAIL: 'active' class not removed.");
}
});
</script>
</body>
</html>Simulering af brugerhændelser
For at teste hændelseshåndterere skal du simulere brugerinteraktioner. jQuerys .trigger()-metode er perfekt til dette. Den kan udløse enhver hændelse (f.eks. 'click', 'submit' eller 'change') på et valgt element.
Efter hændelsen er udløst, kontrollerer du det forventede resultat, f.eks. DOM-ændringer eller funktionskald.
Kontrol af en klikhændelse
Her kan du se, hvordan du tester, om en klikhændelse opdaterer en del af din brugergrænseflade korrekt. Vi udløser et klik og kontrollerer derefter elementets nye tekstindhold.
<!DOCTYPE html>
<html>
<head>
<title>Test Click Event</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="myButton">Click Me</button>
<p id="status">Not clicked yet.</p>
<script>
$(document).ready(function() {
// Attach the event handler
$('#myButton').on('click', function() {
$('#status').text('Button was clicked!');
});
// Simulate the click event
$('#myButton').trigger('click');
// Simulate assertion
if ($('#status').text() === 'Button was clicked!') {
console.log("PASS: Status updated after click.");
} else {
console.log("FAIL: Status not updated correctly.");
}
});
</script>
</body>
</html>Påstande for hændelsestilstand
Hændelseshåndterere gør ofte mere end blot at ændre DOM'en; de kan også opdatere dataattributter eller applikationens interne tilstand. Dine tests bør også kontrollere disse mindre synlige ændringer.
Du kan kontrollere værdier med .data() eller andre egenskaber efter en hændelse.
<!DOCTYPE html>
<html>
<head>
<title>Test Event Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="counterBtn" data-count="0">Increase Count</button>
<script>
$(document).ready(function() {
// Attach event handler
$('#counterBtn').on('click', function() {
let currentCount = parseInt($(this).data('count'));
$(this).data('count', currentCount + 1);
});
// Initial check
if ($('#counterBtn').data('count') === 0) {
console.log("PASS: Initial count is 0.");
} else {
console.log("FAIL: Initial count is not 0.");
}
// Trigger click
$('#counterBtn').trigger('click');
// Assert after first click
if ($('#counterBtn').data('count') === 1) {
console.log("PASS: Count is 1 after first click.");
} else {
console.log("FAIL: Count is not 1.");
}
// Trigger another click
$('#counterBtn').trigger('click');
// Assert after second click
if ($('#counterBtn').data('count') === 2) {
console.log("PASS: Count is 2 after second click.");
} else {
console.log("FAIL: Count is not 2.");
}
});
</script>
</body>
</html>Test af asynkron AJAX
Det kan være langsomt og upålideligt at teste rigtige AJAX-kald, og de kan afhænge af eksterne tjenester. Løsningen er at mocke dine AJAX-anmodninger.
Mocking betyder, at det faktiske netværkskald erstattes med et kontrolleret, foruddefineret svar. Det gør det muligt for dine tests at køre hurtigt og ensartet, mens fokus kun er på logikken på klientsiden.
Implementering af AJAX-mocks
Du kan bruge værktøjer som Sinon.js eller i simple tilfælde tilsidesætte jQuerys AJAX-funktionalitet. En grundlæggende måde at simulere et vellykket AJAX-svar til testning på er midlertidigt at ændre $.ajax eller bruge et mockingbibliotek.
Her simulerer vi et success callback uden en rigtig netværksanmodning.
<!DOCTYPE html>
<html>
<head>
<title>Mock AJAX Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="data-display">Loading...</div>
<script>
$(document).ready(function() {
// Store original $.ajax for restoration
const originalAjax = $.ajax;
// Mock $.ajax for this test
$.ajax = function(options) {
// Simulate a successful response
const deferred = $.Deferred();
deferred.resolve({ message: "Mocked data received!" });
return deferred.promise();
};
// Your function that makes an AJAX call
function fetchDataAndDisplay() {
$.ajax({
url: '/api/data',
method: 'GET'
}).done(function(response) {
$('#data-display').text(response.message);
}).fail(function() {
$('#data-display').text('Error fetching data.');
});
}
// Run the function under test
fetchDataAndDisplay();
// Simulate assertion after a short delay (for async effect)
setTimeout(function() {
if ($('#data-display').text() === 'Mocked data received!') {
console.log("PASS: AJAX call successfully mocked and handled.");
} else {
console.log("FAIL: AJAX mock failed or handler incorrect.");
}
// Restore original $.ajax (important for real apps)
$.ajax = originalAjax;
}, 10); // Small delay to allow promise resolution
});
</script>
</body>
</html>Hurtig kontrol
Du har lært om test af DOM-manipulationer, hændelser og AJAX. Hvilken jQuery-metode bruges typisk til programmatisk at udløse en hændelse på et element i en test?
Opsummering: Effektiv jQuery-testning
Tillykke! Du har undersøgt, hvordan du skriver effektive enhedstests til forskellige aspekter af dine jQuery-applikationer.
- Vi gennemgik, hvordan man kontrollerer ændringer i DOM samt elementers egenskaber og indhold.
- Vi lærte at simulere brugerinteraktioner og teste hændelseshåndterere ved hjælp af
.trigger(). - Til sidst talte vi om mocking af AJAX-anmodninger for at sikre hurtige og pålidelige tests af asynkrone handlinger.
Disse teknikker er afgørende for at bygge robust jQuery-kode, der er nem at vedligeholde.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 22
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Skriv effektive jQuery-tests” gratis?
Ja — alle 3 lektioner i læringssporet jQuery Academy, inklusive “Skriv effektive jQuery-tests”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. jQuery Academy-kurset indeholder 3 lektioner i alt.
Hvad lærer jeg i “Skriv effektive jQuery-tests”?
Øv dig i at skrive enhedstests af DOM-manipulationer, event handlers og AJAX-kald, så dine jQuery-komponenter bliver robuste og fri for fejl. Du øver dig i jQuery Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på jQuery Academy?
Der kræves ingen tidligere erfaring. jQuery Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 3.
Hvor lang tid tager lektionen “Skriv effektive jQuery-tests”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne jQuery Academy-lektion?
Ja. Alle jQuery Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Introduktion til enhedstest af jQuery
- Opsætning af testmiljø
- Skriv effektive jQuery-tests