TL;DR
Black box testing checks how your web app works without looking at the code. Focus on inputs, outputs, and expected behaviour. This guide shows you practical steps for JavaScript MVC apps.
1. Understand Your App’s Features
- List all features: Make a complete list of everything your app does. Think about user stories – what can users achieve? (e.g., ‘User can log in’, ‘Admin can add products’).
- Identify inputs: For each feature, note down every possible input the user can provide. This includes form fields, URL parameters, button clicks, and even file uploads.
- Define expected outputs: What should happen after each input? (e.g., ‘Successful login redirects to dashboard’, ‘Invalid password shows error message’).
2. Test the Core MVC Components
JavaScript MVC apps typically have three main parts: Models, Views, and Controllers.
2.1 Model Testing
- Data validation: Check that models correctly validate data before saving it. Try invalid inputs (e.g., too short passwords, incorrect email formats).
- Database interaction: Verify the model saves and retrieves data from the database as expected. You might need to inspect the database directly after testing.
- Example: If you have a User model with an email field:
// Example validation check (using a hypothetical framework)const user = new User({ email: 'invalid-email' });if (!user.isValid()) {console.error('Email is invalid');
2.2 View Testing
- Correct rendering: Ensure views display data correctly from the models. Check for formatting issues, missing information, and correct labels.
- Dynamic updates: If your view updates based on user interaction (e.g., showing a loading spinner), verify these updates happen as expected.
- Example: Check that a list of products displays the product name and price correctly.
// Example check in browser developer toolsconst productNameElement = document.querySelector('.product-name');const productPriceElement = document.querySelector('.product-price');console.assert(productNameElement.textContent === 'Expected Product Name', 'Product name is incorrect');
2.3 Controller Testing
- Request handling: Verify controllers correctly handle user requests (e.g., form submissions, button clicks).
- Routing: Check that URLs route to the correct controller actions.
- Data flow: Ensure controllers pass data between models and views as expected.
- Example: Test a login form submission:
// Example using browser developer tools network tab1. Submit the login form with valid credentials.2. Check that the request is sent to the correct URL (e.g., /login).3. Verify the response redirects to the dashboard page.
3. Common Black Box Test Cases
- Valid input: Use correct data and check for expected results.
- Invalid input: Enter incorrect or unexpected data (e.g., special characters, very long strings) and verify appropriate error messages are displayed.
- Boundary value analysis: Test values at the edges of acceptable ranges (e.g., minimum/maximum lengths for fields).
- Equivalence partitioning: Divide inputs into groups that should behave similarly and test one representative from each group.
- Error handling: Simulate errors (e.g., database connection failure) and check the app handles them gracefully.
4. Tools for Black Box Testing
- Browser Developer Tools: Essential for inspecting network requests, console output, and DOM elements.
- Postman/Insomnia: Useful for sending API requests directly to your server.
- Manual testing: The most important tool! Carefully use the app as a real user would.