K
K12worX Education501(c)(3) Public Charity
Jamboree

Testing Your Changes

Learn how to thoroughly test changes before committing them, ensuring your contributions improve the codebase without introducing bugs.

What You'll Learn

  • Different types of testing (visual, functional, responsive)
  • How to use browser DevTools
  • Testing checklist for different change types
  • Common issues to watch for
  • When changes are ready to commit

Why Testing Matters

Before committing code, always test:

  • ✅ Prevents bugs from reaching production
  • ✅ Ensures changes work as intended
  • ✅ Builds confidence in your contributions
  • ✅ Saves time (catching bugs early is easier)

Remember: It's okay to make mistakes while testing - that's what testing is for!

Types of Testing

1. Visual Testing

Check how it looks:

  • Does the change appear as expected?
  • Is formatting correct?
  • Do colors and spacing look good?
  • Is text readable?

2. Functional Testing

Check how it works:

  • Do links navigate correctly?
  • Do buttons trigger actions?
  • Do forms submit properly?
  • Does interaction work as expected?

3. Responsive Testing

Check different screen sizes:

  • Does it look good on mobile?
  • Does it work on tablets?
  • Is desktop view correct?
  • Do elements resize properly?

4. Cross-Browser Testing

Check different browsers:

  • Chrome
  • Safari
  • Firefox
  • Edge (if available)

Using Browser DevTools

Opening DevTools

Methods:

  • Right-click → "Inspect"
  • Press F12
  • Cmd+Option+I (Mac) or Ctrl+Shift+I (Windows)

DevTools Panels

1. Elements Panel

Use for:

  • Inspecting HTML structure
  • Viewing applied CSS
  • Testing style changes temporarily

How to use:

  1. Click inspector tool (arrow icon)
  2. Click element on page
  3. See HTML + styles in panel
  4. Edit styles temporarily to test

2. Console Panel

Use for:

  • Viewing JavaScript errors
  • Checking warnings
  • Debugging issues

What to look for:

  • ❌ Red errors (need to fix)
  • ⚠️ Yellow warnings (should investigate)
  • ℹ️ Blue info (usually okay)

3. Network Panel

Use for:

  • Checking if resources load
  • Finding 404 errors
  • Checking performance

4. Device Toolbar

Use for:

  • Testing responsive design
  • Simulating different devices
  • Testing touch interactions

How to activate:

  • Click device icon (top-left of DevTools)
  • Or press Cmd+Shift+M (Mac) / Ctrl+Shift+M (Windows)

Testing Checklist by Change Type

For Text Changes

  • New text displays correctly
  • No typos or grammar errors
  • Text doesn't overflow container
  • Text wraps properly on mobile
  • Special characters display correctly
  • No console errors
  • New link appears in menu
  • Link text is descriptive
  • Clicking navigates to correct page
  • Link works on both desktop and mobile
  • Hover state shows on desktop
  • Active/visited states work
  • Back button works after clicking
  • External links open in new tab (if intended)
  • No console errors

For Style Changes

  • Colors have good contrast
  • Spacing looks balanced
  • Elements align properly
  • Hover states work smoothly
  • Transitions are smooth (not jarring)
  • Works on multiple screen sizes
  • Looks good in light and dark mode (if applicable)
  • Text is readable
  • No layout breaks
  • No console errors

For Component Changes

  • Component renders correctly
  • Props are passed correctly
  • State updates work
  • Event handlers trigger
  • Error boundaries work (if applicable)
  • Loading states display
  • Edge cases handled
  • No console errors or warnings

Responsive Testing

Test These Screen Sizes

Mobile:

  • 375px (iPhone SE)
  • 390px (iPhone 12/13/14)
  • 414px (iPhone Plus)

Tablet:

  • 768px (iPad)
  • 834px (iPad Pro)

Desktop:

  • 1024px (Small laptop)
  • 1280px (Standard desktop)
  • 1920px (Large desktop)

How to Test Responsive

Method 1: Browser DevTools

  1. Open DevTools (F12)
  2. Click device toolbar icon
  3. Select device preset OR drag to resize
  4. Test functionality at each size

Method 2: Manual Resize

  1. Drag browser window to different widths
  2. Watch how layout adapts
  3. Look for breakpoints (where layout changes)

What to Look For

Mobile (< 768px):

  • Navigation becomes hamburger menu
  • Text is readable (not too small)
  • Buttons are tap-friendly (not too small)
  • Images scale down
  • No horizontal scroll
  • Content stacks vertically

Tablet (768px - 1024px):

  • Layout adapts appropriately
  • Navigation may show or collapse
  • Grid columns reduce
  • Content is balanced

Desktop (> 1024px):

  • Full navigation visible
  • Multi-column layouts work
  • Content uses available space
  • Doesn't look too spread out

Testing in Terminal

Watch for Compilation Errors

After saving, check terminal for:

✅ Success:

✓ Compiled successfully in 245ms

❌ Error:

./app/page.tsx
Error: Unexpected token

⚠️ Warning:

Warning: React Hook useEffect has missing dependencies

What to Do

If errors:

  1. Read the error message
  2. Note the file and line number
  3. Fix the issue
  4. Save and check terminal again

If warnings:

  • Investigate (may or may not need fixing)
  • Ask for help if unsure

Browser Console Checking

Open Console

  1. Open DevTools (F12)
  2. Click "Console" tab
  3. Check for errors/warnings

Common Console Messages

❌ Red Errors (must fix):

Uncaught TypeError: Cannot read property 'x' of undefined

⚠️ Warnings (should investigate):

Warning: Each child in a list should have a unique "key" prop

ℹ️ Info (usually okay):

Development mode - performance may vary

Clear Console

Click the "Clear" button (🚫) to remove old messages and see new ones clearly.

Testing Navigation Changes

Full Navigation Test

  1. Click each link

    • Does it go to the right page?
    • Does the page load correctly?

  2. Use back button

    • Does it return to previous page?
    • Is state preserved?

  3. Test on mobile

    • Does hamburger menu open?
    • Do links work in mobile menu?
    • Does menu close after clicking?

  4. Keyboard navigation

    • Press Tab to navigate links
    • Press Enter to activate
    • Does it work without mouse?

Testing Form Changes

If you modified forms:

  1. Fill out the form

    • Can you type in all fields?
    • Do validation messages show?

  2. Submit the form

    • Does submission work?
    • Are you redirected correctly?
    • Do you see success/error messages?

  3. Test edge cases

    • What if you submit empty?
    • What about invalid data?
    • Long text in fields?

  4. Check accessibility

    • Can you navigate with Tab?
    • Do labels work?
    • Are errors announced by screen readers?

Visual Regression Testing

Compare Before and After

Take screenshots:

  1. Before making changes
  2. After making changes
  3. Compare side-by-side

What to check:

  • Did anything unintentionally change?
  • Are the changes isolated?
  • Is layout intact?

Inspect Surrounding Elements

Check elements near your changes:

  • Did spacing change unexpectedly?
  • Did colors shift?
  • Did alignment break?

Good practice: Only the intended elements should change!

Performance Testing

Check Page Load Speed

  1. Open DevTools → Network panel
  2. Reload page (Cmd+R or Ctrl+R)
  3. Look at total load time (bottom of panel)

Generally good:

  • < 1 second: Excellent
  • 1-3 seconds: Good
  • 3-5 seconds: Okay

  • 5 seconds: Investigate

Check for Large Assets

Look for:

  • Large images (> 500KB)
  • Unnecessary files loading
  • Failed requests (404 errors)

Accessibility Testing

Keyboard Navigation

Test these:

  • Tab through all interactive elements
  • Enter activates links/buttons
  • Escape closes modals/menus
  • Arrow keys work in menus (if applicable)

Screen Reader Testing (Advanced)

If available:

  • Mac: VoiceOver (Cmd+F5)
  • Windows: NVDA (free download)

Basic test:

  • Can you navigate the page?
  • Are labels read correctly?
  • Is content structure clear?

Color Contrast

Use DevTools:

  1. Inspect element
  2. Look for contrast ratio
  3. Should be 4.5:1 or better

Online tool: WebAIM Contrast Checker

Common Issues to Watch For

Symptom: 404 error when clicking Cause: Link href is incorrect Fix: Update href to correct path

2. Layout Shift

Symptom: Content jumps when loading Cause: Missing dimensions on images Fix: Add width/height to images

3. Text Overflow

Symptom: Text spills out of container Cause: Container too small or text too large Fix: Adjust container width or text size

4. Hover State Missing

Symptom: No visual feedback on hover Cause: Forgot hover: classes Fix: Add hover: variants

5. Mobile Menu Broken

Symptom: Menu doesn't open on mobile Cause: JavaScript error or missing state Fix: Check console for errors

6. Poor Contrast

Symptom: Text hard to read Cause: Similar text and background colors Fix: Increase contrast (darker text or lighter background)

When Changes Are Ready

Ready to Commit When

  • ✅ All tests pass
  • ✅ No console errors
  • ✅ Works on mobile and desktop
  • ✅ Navigation functions correctly
  • ✅ Styles look good
  • ✅ Code compiles without errors
  • ✅ Changes match intention

Not Ready If

  • ❌ Console shows errors
  • ❌ Links don't work
  • ❌ Layout breaks on mobile
  • ❌ Text is unreadable
  • ❌ Untested on different browsers
  • ❌ Changes incomplete

Testing Documentation

Keep Notes

Track what you tested:

Tested:
- Desktop: Chrome, Safari ✅
- Mobile: iPhone simulator ✅
- Links: All working ✅
- Forms: Validation working ✅
- Console: No errors ✅

Test Again After Fixes

If you found and fixed issues:

  1. Retest the thing you fixed
  2. Retest related functionality
  3. Check you didn't break something else

Best Practices

1. Test as You Go

Make small change → Save → Test → Repeat

Don't:

Make 10 changes → Test → Find 5 bugs → Confused which change broke what

2. Test Edge Cases

Not just the happy path:

  • Very long text
  • Empty fields
  • Special characters
  • Slow network
  • Small screens

3. Use Real Data

Test with:

  • Actual text (not Lorem ipsum)
  • Real images (not placeholders)
  • Realistic scenarios

4. Get Fresh Eyes

Ask someone else to:

  • Click around
  • Try to break things
  • Give feedback

Quick Reference

Open DevTools:

F12 or Cmd+Option+I (Mac) or Ctrl+Shift+I (Windows)

Toggle device toolbar:

Cmd+Shift+M (Mac) or Ctrl+Shift+M (Windows)

Hard refresh:

Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)

Clear console:

Click 🚫 icon or type "clear()"

Test screen sizes:

  • 375px (Mobile)
  • 768px (Tablet)
  • 1024px+ (Desktop)

Troubleshooting Tests

Can't reproduce issue

Try:

  • Clear browser cache
  • Hard refresh
  • Try incognito/private mode
  • Try different browser
  • Restart dev server

Test passes but deployment fails

Possible causes:

  • Environment differences
  • Missing dependencies
  • Build-time errors

Solution:

  • Run npm run build locally
  • Check for errors in build output

Slow test feedback

Speed up testing:

  • Keep DevTools open
  • Use hot reload (dev server)
  • Test in one browser first, others later

What's Next

Congratulations! You've completed Chapter 06 and learned how to make and test changes. Next, you'll learn Git for version control:

Continue to Section 07: Git Basics →

Or review any topic: