Go Gin HTML Template chevron_right Testing and Debugging Gin HTML Templates

Testing and Debugging Gin HTML Templates

calendar_today schedule 19 min read

Learning Objectives: By the end of this lesson, you will be able to:

  • Write comprehensive unit and integration tests for Gin handlers that render HTML templates
  • Debug template rendering issues effectively using various techniques and tools
  • Implement automated testing strategies for web interfaces and user interactions
  • Use development tools for template optimization and performance monitoring
  • Establish testing practices that ensure reliable template-based applications

1. Welcome and Introduction (5 minutes)

Icebreaker Activity

Have you ever deployed a web application only to discover that a template wasn’t rendering correctly in production, or that a form wasn’t working as expected? Testing template-based applications presents unique challenges because you’re dealing with both server-side logic and client-side presentation. Today, we’ll learn how to build confidence in your Gin template applications through comprehensive testing and effective debugging strategies.

Lesson Overview

  • Duration: 2-3 hours
  • Prerequisites: Completed Lesson 7 (API Integration and AJAX)
  • Materials Needed: Go development environment, testing frameworks, browser developer tools

2. Learning Objectives and Session Outline (5 minutes)

What We’ll Cover Today:

  1. Unit Testing Strategies - Testing Gin handlers and template rendering logic
  2. Integration Testing - End-to-end testing of complete request/response cycles
  3. Template Debugging - Techniques for identifying and fixing template issues
  4. Automated Browser Testing - Testing user interactions and dynamic behavior
  5. Performance Monitoring - Profiling and optimizing template performance

Success Criteria:

By the end of this session, you should be able to write a comprehensive test suite for a Gin template application, debug complex template rendering issues, and implement monitoring strategies that catch problems before they reach production.

3. Foundation Knowledge (15-20 minutes)

Core Concepts

Testing Pyramid for Web Applications

Web application testing follows a pyramid structure where different types of tests serve different purposes:

  • Unit Tests (Base): Test individual functions and handlers in isolation
  • Integration Tests (Middle): Test complete request/response cycles with templates
  • End-to-End Tests (Top): Test user workflows through browser automation

Real-World Analogy: Think of testing like quality control in manufacturing. Unit tests check individual components, integration tests verify that components work together, and end-to-end tests simulate real customer usage.

Why This Matters: This layered approach catches different types of bugs at different stages, providing comprehensive coverage while maintaining fast feedback loops.

Template-Specific Testing Challenges

Template-based applications present unique testing challenges:

  • Dynamic Content Rendering: Templates generate different HTML based on data
  • Client-Server Interaction: User interactions trigger server-side template updates
  • Asset Dependencies: Templates depend on CSS, JavaScript, and other static files
  • Cross-Browser Compatibility: Templates must render consistently across browsers
  • Performance Variations: Template rendering performance varies with data complexity

Debugging Strategy Framework

Effective debugging follows a systematic approach:

  1. Reproduce the Issue: Create minimal test cases that consistently demonstrate the problem
  2. Isolate the Cause: Determine whether issues are in handlers, templates, or client-side code
  3. Gather Context: Use logging, debugging tools, and inspection techniques
  4. Form Hypotheses: Develop theories about root causes based on evidence
  5. Test Solutions: Implement fixes and verify they resolve the issue completely

Key Terminology

  • Unit Test: Isolated test of a single function or component
  • Integration Test: Test of multiple components working together
  • End-to-End Test: Test of complete user workflows through the application
  • Test Double: Mock, stub, or fake object used to isolate units under test
  • Test Coverage: Measurement of how much code is executed by tests
  • Regression Test: Test that ensures previously fixed bugs don’t reoccur

4. Detailed Explanation and Examples (25-30 minutes)

Understanding Template Testing Architecture

Testing template-based applications requires a multi-layered approach because templates involve both server-side rendering logic and client-side presentation. Each layer requires different testing strategies and tools.

Server-Side Testing Focus Areas

Handler Logic Testing:

  • Route parameter parsing and validation
  • Data retrieval and processing logic
  • Template data preparation and context building
  • Error handling and edge case scenarios
  • Authentication and authorization logic

Template Rendering Testing:

  • Correct template selection based on request conditions
  • Data binding and variable interpolation
  • Conditional rendering logic (if/else statements)
  • Loop rendering with various data sets
  • Template inheritance and partial inclusion

Response Testing:

  • HTTP status codes and headers
  • Content-Type headers for different response formats
  • Response body structure and content validation
  • Cookie and session handling
  • Redirect behavior and URL generation

Client-Side Testing Considerations

While server-side tests verify template generation, client-side tests ensure the rendered HTML works correctly in browsers:

  • DOM Structure: Verify that templates generate expected HTML structure
  • Interactive Elements: Test form submissions, button clicks, and dynamic content
  • JavaScript Integration: Ensure AJAX requests work with template-generated HTML
  • CSS Styling: Validate that styles apply correctly to template-generated elements
  • Responsive Behavior: Test template rendering across different screen sizes

Common Testing Anti-Patterns

  1. Testing Implementation Details: Testing internal template mechanisms rather than behavior
  2. Brittle Assertions: Tests that break when minor HTML formatting changes
  3. Insufficient Edge Cases: Not testing empty data sets, long content, or error conditions
  4. Missing Integration: Testing handlers and templates in complete isolation
  5. Ignoring Performance: Not testing template rendering performance under load

5. Live Coding Demonstration (20-25 minutes)

Example 1: Unit Testing Gin Handlers with Templates

package main

import (
    "net/http"
    "net/http/httptest"
    "strings"
    "testing"
    "github.com/gin-gonic/gin"
    "github.com/stretchr/testify/assert"
)

// Application structs and handlers
type User struct {
    ID    int    `json:"id"`
    Name  string `json:"name"`
    Email string `json:"email"`
}

type UserService struct {
    users []User
}

func (s *UserService) GetAll() []User {
    return s.users
}

func (s *UserService) GetByID(id int) (*User, error) {
    for _, user := range s.users {
        if user.ID == id {
            return &user, nil
        }
    }
    return nil, errors.New("user not found")
}

type Handler struct {
    userService *UserService
}

func (h *Handler) GetUsers(c *gin.Context) {
    users := h.userService.GetAll()
    
    if isAPIRequest(c) {
        c.JSON(http.StatusOK, gin.H{"users": users})
        return
    }
    
    c.HTML(http.StatusOK, "users.html", gin.H{
        "users": users,
        "title": "All Users",
        "count": len(users),
    })
}

func (h *Handler) GetUser(c *gin.Context) {
    idStr := c.Param("id")
    id, err := strconv.Atoi(idStr)
    if err != nil {
        c.HTML(http.StatusBadRequest, "error.html", gin.H{
            "error": "Invalid user ID",
            "code":  http.StatusBadRequest,
        })
        return
    }

    user, err := h.userService.GetByID(id)
    if err != nil {
        c.HTML(http.StatusNotFound, "error.html", gin.H{
            "error": "User not found",
            "code":  http.StatusNotFound,
        })
        return
    }

    c.HTML(http.StatusOK, "user.html", gin.H{
        "user":  user,
        "title": "User Profile",
    })
}

// Test setup and utilities
func setupTestRouter() *gin.Engine {
    gin.SetMode(gin.TestMode)
    
    // Create test service with mock data
    userService := &UserService{
        users: []User{
            {ID: 1, Name: "Alice Johnson", Email: "alice@example.com"},
            {ID: 2, Name: "Bob Smith", Email: "bob@example.com"},
        },
    }
    
    handler := &Handler{userService: userService}
    
    router := gin.New()
    
    // Load templates for testing
    router.LoadHTMLGlob("templates/*")
    
    router.GET("/users", handler.GetUsers)
    router.GET("/users/:id", handler.GetUser)
    
    return router
}

// Unit Tests
func TestGetUsersHandler(t *testing.T) {
    router := setupTestRouter()

    t.Run("should render users template with correct data", func(t *testing.T) {
        req := httptest.NewRequest("GET", "/users", nil)
        w := httptest.NewRecorder()
        
        router.ServeHTTP(w, req)
        
        assert.Equal(t, http.StatusOK, w.Code)
        assert.Contains(t, w.Header().Get("Content-Type"), "text/html")
        
        body := w.Body.String()
        assert.Contains(t, body, "Alice Johnson")
        assert.Contains(t, body, "Bob Smith")
        assert.Contains(t, body, "alice@example.com")
        assert.Contains(t, body, "All Users")
    })

    t.Run("should return JSON when Accept header requests it", func(t *testing.T) {
        req := httptest.NewRequest("GET", "/users", nil)
        req.Header.Set("Accept", "application/json")
        w := httptest.NewRecorder()
        
        router.ServeHTTP(w, req)
        
        assert.Equal(t, http.StatusOK, w.Code)
        assert.Contains(t, w.Header().Get("Content-Type"), "application/json")
        
        body := w.Body.String()
        assert.Contains(t, body, "Alice Johnson")
        assert.Contains(t, body, "users")
    })
}

func TestGetUserHandler(t *testing.T) {
    router := setupTestRouter()

    t.Run("should render user template for valid ID", func(t *testing.T) {
        req := httptest.NewRequest("GET", "/users/1", nil)
        w := httptest.NewRecorder()
        
        router.ServeHTTP(w, req)
        
        assert.Equal(t, http.StatusOK, w.Code)
        
        body := w.Body.String()
        assert.Contains(t, body, "Alice Johnson")
        assert.Contains(t, body, "alice@example.com")
        assert.Contains(t, body, "User Profile")
    })

    t.Run("should render error template for invalid ID", func(t *testing.T) {
        req := httptest.NewRequest("GET", "/users/invalid", nil)
        w := httptest.NewRecorder()
        
        router.ServeHTTP(w, req)
        
        assert.Equal(t, http.StatusBadRequest, w.Code)
        
        body := w.Body.String()
        assert.Contains(t, body, "Invalid user ID")
        assert.Contains(t, body, "400")
    })

    t.Run("should render error template for non-existent user", func(t *testing.T) {
        req := httptest.NewRequest("GET", "/users/999", nil)
        w := httptest.NewRecorder()
        
        router.ServeHTTP(w, req)
        
        assert.Equal(t, http.StatusNotFound, w.Code)
        
        body := w.Body.String()
        assert.Contains(t, body, "User not found")
        assert.Contains(t, body, "404")
    })
}

// Template-specific tests
func TestTemplateDataBinding(t *testing.T) {
    router := setupTestRouter()

    t.Run("should pass correct template variables", func(t *testing.T) {
        req := httptest.NewRequest("GET", "/users", nil)
        w := httptest.NewRecorder()
        
        router.ServeHTTP(w, req)
        
        body := w.Body.String()
        
        // Test that template variables are properly rendered
        assert.Contains(t, body, "All Users") // title variable
        assert.Regexp(t, `\b2\b`, body)       // count variable (2 users)
        
        // Test that loops work correctly
        assert.Contains(t, body, "Alice Johnson")
        assert.Contains(t, body, "Bob Smith")
    })

    t.Run("should handle empty user list", func(t *testing.T) {
        // Create router with empty user service
        gin.SetMode(gin.TestMode)
        emptyService := &UserService{users: []User{}}
        handler := &Handler{userService: emptyService}
        
        router := gin.New()
        router.LoadHTMLGlob("templates/*")
        router.GET("/users", handler.GetUsers)
        
        req := httptest.NewRequest("GET", "/users", nil)
        w := httptest.NewRecorder()
        
        router.ServeHTTP(w, req)
        
        assert.Equal(t, http.StatusOK, w.Code)
        
        body := w.Body.String()
        assert.Contains(t, body, "All Users")
        // Should handle empty list gracefully (depends on template implementation)
        assert.NotContains(t, body, "Alice Johnson")
    })
}

Explanation:

  • Lines 47-61: Handler method that demonstrates proper template rendering with data binding
  • Lines 73-85: Test setup creates isolated test environment with mock data
  • Lines 88-108: Tests verify both HTML and JSON responses based on content negotiation
  • Lines 131-145: Edge case testing ensures proper error handling and template selection
  • Lines 165-185: Template-specific tests verify data binding and variable interpolation

Example 2: Integration Testing with Database and Templates

package main

import (
    "database/sql"
    "fmt"
    "net/http"
    "net/http/httptest"
    "strings"
    "testing"
    "github.com/gin-gonic/gin"
    "github.com/stretchr/testify/assert"
    "github.com/stretchr/testify/suite"
    _ "github.com/mattn/go-sqlite3"
)

// Integration test suite
type IntegrationTestSuite struct {
    suite.Suite
    router *gin.Engine
    db     *sql.DB
}

func (suite *IntegrationTestSuite) SetupSuite() {
    // Setup test database
    db, err := sql.Open("sqlite3", ":memory:")
    suite.Require().NoError(err)
    db.SetMaxOpenConns(1) // SQLite :memory: is per connection; keep the test schema visible.
    
    // Create tables
    _, err = db.Exec(`
        CREATE TABLE users (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT NOT NULL,
            email TEXT UNIQUE NOT NULL
        )
    `)
    suite.Require().NoError(err)
    
    // Insert test data
    _, err = db.Exec(`INSERT INTO users (name, email) VALUES 
        ('Alice Johnson', 'alice@example.com'),
        ('Bob Smith', 'bob@example.com')`)
    suite.Require().NoError(err)
    
    suite.db = db
    
    // Setup Gin router with real database
    gin.SetMode(gin.TestMode)
    router := gin.New()
    router.LoadHTMLGlob("templates/*")
    
    userService := &DatabaseUserService{db: db}
    handler := &Handler{userService: userService}
    
    router.GET("/users", handler.GetUsers)
    router.GET("/users/:id", handler.GetUser)
    router.POST("/users", handler.CreateUser)
    
    suite.router = router
}

func (suite *IntegrationTestSuite) TearDownSuite() {
    suite.db.Close()
}

func (suite *IntegrationTestSuite) SetupTest() {
    // Clean up data between tests if needed
    suite.db.Exec("DELETE FROM users WHERE id > 2")
}

func (suite *IntegrationTestSuite) TestFullUserWorkflow() {
    // Test the complete user workflow: list -> create -> view -> list again
    
    // Step 1: Initial user list
    req := httptest.NewRequest("GET", "/users", nil)
    w := httptest.NewRecorder()
    suite.router.ServeHTTP(w, req)
    
    suite.Equal(http.StatusOK, w.Code)
    initialBody := w.Body.String()
    suite.Contains(initialBody, "Alice Johnson")
    suite.Contains(initialBody, "Bob Smith")
    suite.NotContains(initialBody, "Charlie Brown")
    
    // Step 2: Create new user
    createData := strings.NewReader(`name=Charlie Brown&email=charlie@example.com`)
    req = httptest.NewRequest("POST", "/users", createData)
    req.Header.Set("Content-Type", "application/x-www-form-urlencoded")
    w = httptest.NewRecorder()
    suite.router.ServeHTTP(w, req)
    
    // Should redirect after successful creation
    suite.Equal(http.StatusFound, w.Code)
    
    // Step 3: Verify new user appears in list
    req = httptest.NewRequest("GET", "/users", nil)
    w = httptest.NewRecorder()
    suite.router.ServeHTTP(w, req)
    
    suite.Equal(http.StatusOK, w.Code)
    updatedBody := w.Body.String()
    suite.Contains(updatedBody, "Alice Johnson")
    suite.Contains(updatedBody, "Bob Smith")
    suite.Contains(updatedBody, "Charlie Brown")
    
    // Step 4: View individual user
    req = httptest.NewRequest("GET", "/users/3", nil)
    w = httptest.NewRecorder()
    suite.router.ServeHTTP(w, req)
    
    suite.Equal(http.StatusOK, w.Code)
    userBody := w.Body.String()
    suite.Contains(userBody, "Charlie Brown")
    suite.Contains(userBody, "charlie@example.com")
}

func (suite *IntegrationTestSuite) TestErrorHandlingIntegration() {
    // Test error scenarios with real database constraints
    
    // Try to create user with duplicate email
    createData := strings.NewReader(`name=Alice Duplicate&email=alice@example.com`)
    req := httptest.NewRequest("POST", "/users", createData)
    req.Header.Set("Content-Type", "application/x-www-form-urlencoded")
    w := httptest.NewRecorder()
    suite.router.ServeHTTP(w, req)
    
    // Should return error template
    suite.Equal(http.StatusConflict, w.Code)
    body := w.Body.String()
    suite.Contains(body, "email already exists")
}

func TestIntegrationSuite(t *testing.T) {
    suite.Run(t, new(IntegrationTestSuite))
}

// Database service implementation for testing
type DatabaseUserService struct {
    db *sql.DB
}

func (s *DatabaseUserService) GetAll() []User {
    rows, err := s.db.Query("SELECT id, name, email FROM users")
    if err != nil {
        return []User{}
    }
    defer rows.Close()
    
    var users []User
    for rows.Next() {
        var user User
        rows.Scan(&user.ID, &user.Name, &user.Email)
        users = append(users, user)
    }
    return users
}

func (s *DatabaseUserService) GetByID(id int) (*User, error) {
    var user User
    err := s.db.QueryRow("SELECT id, name, email FROM users WHERE id = ?", id).
        Scan(&user.ID, &user.Name, &user.Email)
    if err != nil {
        return nil, err
    }
    return &user, nil
}

func (s *DatabaseUserService) Create(user User) (*User, error) {
    result, err := s.db.Exec("INSERT INTO users (name, email) VALUES (?, ?)", 
        user.Name, user.Email)
    if err != nil {
        return nil, err
    }
    
    id, _ := result.LastInsertId()
    user.ID = int(id)
    return &user, nil
}

Key Points:

  • Lines 23-45: Integration test setup creates real database with test data
  • Lines 66-95: Full workflow test verifies complete user journey through templates
  • Lines 97-111: Error handling test ensures database constraints work with templates
  • Lines 125-155: Real database service implementation for integration testing

Example 3: Browser Automation Testing

package main

import (
    "context"
    "fmt"
    "testing"
    "time"
    "github.com/chromedp/chromedp"
    "github.com/stretchr/testify/assert"
)

// Browser automation tests
func TestUserInterfaceInteractions(t *testing.T) {
    // Start the Gin server for testing
    go func() {
        router := setupTestRouter()
        router.Run(":8081")
    }()
    
    // Wait for server to start
    time.Sleep(1 * time.Second)
    
    t.Run("should load users page and display content", func(t *testing.T) {
        ctx, cancel := chromedp.NewContext(context.Background())
        defer cancel()
        
        var title, userCount string
        var userNames []string
        
        err := chromedp.Run(ctx,
            chromedp.Navigate("http://localhost:8081/users"),
            chromedp.WaitVisible("body"),
            chromedp.Title(&title),
            chromedp.Text("#user-count", &userCount),
            chromedp.Evaluate(`Array.from(document.querySelectorAll('.user-name')).map(el => el.textContent)`, &userNames),
        )
        
        assert.NoError(t, err)
        assert.Contains(t, title, "All Users")
        assert.Contains(t, userCount, "2")
        assert.Contains(t, userNames, "Alice Johnson")
        assert.Contains(t, userNames, "Bob Smith")
    })
    
    t.Run("should handle form submission via AJAX", func(t *testing.T) {
        ctx, cancel := chromedp.NewContext(context.Background())
        defer cancel()
        
        var initialCount, finalCount string
        
        err := chromedp.Run(ctx,
            chromedp.Navigate("http://localhost:8081/users"),
            chromedp.WaitVisible("#add-user-form"),
            
            // Get initial count
            chromedp.Text("#user-count", &initialCount),
            
            // Fill and submit form
            chromedp.SendKeys("#name", "Test User"),
            chromedp.SendKeys("#email", "test@example.com"),
            chromedp.Click("#submit-btn"),
            
            // Wait for AJAX to complete and count to update
            chromedp.WaitFunc(func(ctx context.Context, frame *cdp.Frame) error {
                var currentCount string
                chromedp.Text("#user-count", &currentCount).Do(ctx)
                if currentCount != initialCount {
                    return nil
                }
                return fmt.Errorf("count not updated yet")
            }),
            
            chromedp.Text("#user-count", &finalCount),
        )
        
        assert.NoError(t, err)
        assert.NotEqual(t, initialCount, finalCount)
    })
    
    t.Run("should handle client-side validation", func(t *testing.T) {
        ctx, cancel := chromedp.NewContext(context.Background())
        defer cancel()
        
        var errorMessage string
        
        err := chromedp.Run(ctx,
            chromedp.Navigate("http://localhost:8081/users"),
            chromedp.WaitVisible("#add-user-form"),
            
            // Submit form without required fields
            chromedp.Click("#submit-btn"),
            chromedp.WaitVisible(".error-message"),
            chromedp.Text(".error-message", &errorMessage),
        )
        
        assert.NoError(t, err)
        assert.Contains(t, errorMessage, "required")
    })
}

// Performance testing
func TestTemplatePerformance(t *testing.T) {
    t.Run("should render large user list efficiently", func(t *testing.T) {
        // Create service with many users
        largeUserService := &UserService{users: make([]User, 1000)}
        for i := 0; i < 1000; i++ {
            largeUserService.users[i] = User{
                ID:    i + 1,
                Name:  fmt.Sprintf("User %d", i+1),
                Email: fmt.Sprintf("user%d@example.com", i+1),
            }
        }
        
        handler := &Handler{userService: largeUserService}
        router := gin.New()
        router.LoadHTMLGlob("templates/*")
        router.GET("/users", handler.GetUsers)
        
        start := time.Now()
        req := httptest.NewRequest("GET", "/users", nil)
        w := httptest.NewRecorder()
        router.ServeHTTP(w, req)
        duration := time.Since(start)
        
        assert.Equal(t, http.StatusOK, w.Code)
        assert.Less(t, duration, 100*time.Millisecond, "Template rendering should be fast")
        
        body := w.Body.String()
        assert.Contains(t, body, "User 1")
        assert.Contains(t, body, "User 1000")
    })
}

Debugging Tools and Techniques

package main

import (
    "html/template"
    "log"
    "os"
    "github.com/gin-gonic/gin"
)

// Template debugging middleware
func TemplateDebugMiddleware() gin.HandlerFunc {
    return func(c *gin.Context) {
        if gin.Mode() == gin.DebugMode {
            // Log template rendering context
            c.Set("template_debug", true)
        }
        c.Next()
    }
}

// Enhanced HTML rendering with debugging
func (h *Handler) GetUsersWithDebug(c *gin.Context) {
    users := h.userService.GetAll()
    
    templateData := gin.H{
        "users": users,
        "title": "All Users",
        "count": len(users),
        "debug": gin.Mode() == gin.DebugMode,
    }
    
    // Debug logging
    if gin.Mode() == gin.DebugMode {
        log.Printf("Template data: %+v", templateData)
        log.Printf("User count: %d", len(users))
        for i, user := range users {
            log.Printf("User %d: %+v", i, user)
        }
    }
    
    c.HTML(http.StatusOK, "users.html", templateData)
}

// Template function for debugging
func debugTemplate() template.FuncMap {
    return template.FuncMap{
        "debug": func(v interface{}) string {
            if gin.Mode() == gin.DebugMode {
                return fmt.Sprintf("<!-- DEBUG: %+v -->", v)
            }
            return ""
        },
        "typeof": func(v interface{}) string {
            return fmt.Sprintf("%T", v)
        },
        "dump": func(v interface{}) string {
            if gin.Mode() == gin.DebugMode {
                return fmt.Sprintf("%+v", v) // template output remains escaped
            }
            return ""
        },
    }
}

// Setup router with debugging features
func setupDebugRouter() *gin.Engine {
    router := gin.Default()
    
    // Add debug functions to templates
    router.SetFuncMap(debugTemplate())
    router.LoadHTMLGlob("templates/*")
    
    // Add debugging middleware
    router.Use(TemplateDebugMiddleware())
    
    return router
}

6. Hands-On Practice (30-40 minutes)

Exercise 1: Basic Handler Testing (15 minutes)

Objective: Write comprehensive unit tests for a blog post handler that renders different templates based on user authentication.

Instructions:

  1. Create a blog post handler that shows different templates for authenticated vs. anonymous users
  2. Write tests that verify correct template selection and data binding
  3. Test edge cases like missing posts, invalid IDs, and empty content
  4. Implement mock authentication for testing different user states

Starter Code:

type BlogPost struct {
    ID          int    `json:"id"`
    Title       string `json:"title"`
    Content     string `json:"content"`
    AuthorID    int    `json:"author_id"`
    Published   bool   `json:"published"`
    CreatedAt   time.Time `json:"created_at"`
}

type BlogHandler struct {
    postService PostService
    authService AuthService
}

func (h *BlogHandler) GetPost(c *gin.Context) {
    // Implement handler that:
    // 1. Gets post ID from URL parameter
    // 2. Checks user authentication
    // 3. Renders appropriate template based on auth status
    // 4. Handles missing posts and permissions
}

// Write tests for:
// - Authenticated user viewing published post
// - Anonymous user viewing published post  
// - User trying to view unpublished post
// - Invalid post ID handling
// - Template data binding verification

Solution:

func (h *BlogHandler) GetPost(c *gin.Context) {
    idStr := c.Param("id")
    id, err := strconv.Atoi(idStr)
    if err != nil {
        c.HTML(http.StatusBadRequest, "error.html", gin.H{
            "error": "Invalid post ID",
            "code":  http.StatusBadRequest,
        })
        return
    }

    post, err := h.postService.GetByID(id)
    if err != nil {
        c.HTML(http.StatusNotFound, "error.html", gin.H{
            "error": "Post not found",
            "code":  http.StatusNotFound,
        })
        return
    }

    user := h.authService.GetCurrentUser(c)
    
    // Check if post is published or user is author
    if !post.Published && (user == nil || user.ID != post.AuthorID) {
        c.HTML(http.StatusForbidden, "error.html", gin.H{
            "error": "Post not available",
            "code":  http.StatusForbidden,
        })
        return
    }

    templateData := gin.H{
        "post":      post,
        "title":     post.Title,
        "is_author": user != nil && user.ID == post.AuthorID,
        "user":      user,
    }

    if user != nil {
        c.HTML(http.StatusOK, "post-authenticated.html", templateData)
    } else {
        c.HTML(http.StatusOK, "post-public.html", templateData)
    }
}

// Tests
func TestBlogPostHandler(t *testing.T) {
    mockPostService := &MockPostService{}
    mockAuthService := &MockAuthService{}
    handler := &BlogHandler{
        postService: mockPostService,
        authService: mockAuthService,
    }

    router := gin.New()
    router.LoadHTMLGlob("templates/*")
    router.GET("/posts/:id", handler.GetPost)

    t.Run("authenticated user views published post", func(t *testing.T) {
        mockPostService.posts = []BlogPost{
            {ID: 1, Title: "Test Post", Content: "Content", Published: true, AuthorID: 1},
        }
        mockAuthService.currentUser = &User{ID: 1, Name: "Author"}

        req := httptest.NewRequest("GET", "/posts/1", nil)
        w := httptest.NewRecorder()
        router.ServeHTTP(w, req)

        assert.Equal(t, http.StatusOK, w.Code)
        body := w.Body.String()
        assert.Contains(t, body, "Test Post")
        assert.Contains(t, body, "post-authenticated") // Check correct template
    })

    t.Run("anonymous user cannot view unpublished post", func(t *testing.T) {
        mockPostService.posts = []BlogPost{
            {ID: 1, Title: "Draft Post", Content: "Content", Published: false, AuthorID: 1},
        }
        mockAuthService.currentUser = nil

        req := httptest.NewRequest("GET", "/posts/1", nil)
        w := httptest.NewRecorder()
        router.ServeHTTP(w, req)

        assert.Equal(t, http.StatusForbidden, w.Code)
        body := w.Body.String()
        assert.Contains(t, body, "Post not available")
    })
}

Exercise 2: Integration Testing with Forms (20 minutes)

Objective: Create integration tests for a user registration form that includes validation, database storage, and email confirmation.

Requirements:

  • Test complete registration workflow from form display to confirmation
  • Verify form validation errors are displayed correctly in templates
  • Test successful registration creates database record
  • Ensure email validation and duplicate email handling work properly

Challenge: Build comprehensive integration tests for:

type RegistrationHandler struct {
    userService  UserService
    emailService EmailService
}

func (h *RegistrationHandler) ShowRegistrationForm(c *gin.Context) {
    // Render registration form template
}

func (h *RegistrationHandler) ProcessRegistration(c *gin.Context) {
    // Process form submission:
    // 1. Validate input data
    // 2. Check for duplicate email
    // 3. Create user account
    // 4. Send confirmation email
    // 5. Redirect to success page or show errors
}

// Write integration tests that verify:
// - Form displays correctly with CSRF token
// - Validation errors show in template
// - Successful registration workflow
// - Database state after registration
// - Email sending integration

Hints:

  • Use testify/suite for setup and teardown of database state
  • Mock the email service to verify email sending without actually sending emails
  • Test both successful and error scenarios
  • Verify template variables are correctly bound for error states

Exercise 3: Browser Automation for Dynamic Content (15 minutes)

Objective: Use browser automation to test AJAX-powered dynamic content updates and user interactions.

Challenge: Test a real-time comment system where:

  • Comments load initially from server-side template
  • New comments are added via AJAX without page refresh
  • Comments update in real-time for all users via WebSocket
  • Form validation works on client-side

Extension Ideas:

  • Test comment editing and deletion
  • Verify real-time updates with multiple browser sessions
  • Test comment pagination and loading states
  • Validate responsive design across different screen sizes

7. Common Pitfalls and Troubleshooting (10 minutes)

Frequent Mistakes

  1. Problem: Tests break when template HTML structure changes slightly Cause: Overly specific CSS selectors and brittle text matching in tests Solution: Use semantic selectors (data attributes, IDs) and test behavior rather than implementation

  2. Problem: Template rendering tests pass but browser tests fail Cause: Missing static assets (CSS, JavaScript) or different template execution context Solution: Ensure test environment includes all necessary assets and middleware

  3. Problem: Integration tests are slow and flaky Cause: Database state not properly cleaned between tests, or async operations not properly awaited Solution: Use test transactions that rollback, or dedicated test database with cleanup

  4. Problem: Template debugging is difficult in production-like environments Cause: Debug information stripped in production builds, limited logging Solution: Implement feature flags for template debugging and structured logging

  5. Problem: Browser automation tests fail in CI/CD pipelines Cause: Missing browser dependencies, different screen sizes, or timing issues Solution: Use headless browsers, explicit waits, and containerized test environments

Debugging Tips

  • Use gin.SetMode(gin.DebugMode) to enable detailed template error messages
  • Add custom template functions for debugging data structures in development
  • Use browser developer tools Network tab to debug AJAX requests and responses
  • Implement comprehensive logging for template data and rendering context
  • Use httptest.ResponseRecorder to inspect complete HTTP responses in tests
  • Add template comments that show data values in debug mode

8. Best Practices and Professional Tips (5 minutes)

Industry Standards

  • Test Pyramid Balance: Maintain 70% unit tests, 20% integration tests, 10% end-to-end tests
  • Behavior-Driven Testing: Focus on testing user-facing behavior rather than internal implementation
  • Continuous Testing: Run tests automatically on code changes and deployments
  • Test Data Management: Use fixtures and factories for consistent test data
  • Parallel Testing: Design tests to run independently and in parallel

Template Testing Strategies

  • Use semantic HTML attributes (data-testid) for stable test selectors
  • Test template logic with various data sets including edge cases
  • Verify accessibility attributes and screen reader compatibility
  • Test template rendering performance with realistic data volumes
  • Implement visual regression testing for complex UI components

Production Testing Considerations

  • Implement health checks that verify template rendering capability
  • Use feature toggles to test new templates safely in production
  • Monitor template rendering performance and error rates
  • Implement automated testing in staging environments that mirror production
  • Set up alerts for template rendering failures and performance degradation

Next Steps in Your Learning Journey

  • Learn advanced testing patterns like Page Object Model for browser tests
  • Explore property-based testing for finding edge cases automatically
  • Study load testing techniques for template-heavy applications
  • Investigate mutation testing to verify test quality
  • Practice test-driven development (TDD) with template-based features

9. Summary and Review (5 minutes)

Key Takeaways

  1. Comprehensive Testing Strategy: Effective template testing requires unit, integration, and end-to-end tests working together
  2. Template-Specific Challenges: Templates introduce unique testing considerations around data binding, conditional rendering, and client-side integration
  3. Debugging Systematic Approach: Effective debugging follows a structured process of reproduction, isolation, and hypothesis testing
  4. Production Readiness: Robust testing and monitoring practices ensure template applications perform reliably in production

Quick Review Questions

  1. What are the key differences between testing template handlers versus API handlers?
  2. How would you test a template that renders different content based on user authentication?
  3. What browser automation tools would you use for testing dynamic template interactions?
  4. How can you debug template rendering issues in production without exposing sensitive information?

For Instructors

Teaching Tips

  • Demonstrate debugging techniques live using browser developer tools
  • Show both passing and failing tests to illustrate common issues
  • Encourage students to write tests before implementing features (TDD approach)
  • Use real-world examples of template bugs and how testing would catch them
  • Emphasize the importance of testing error conditions and edge cases

Assessment Ideas

  • Build a complete test suite for a multi-page web application
  • Debug a deliberately broken template application using systematic techniques
  • Implement browser automation tests for a complex user workflow
  • Create performance benchmarks for template rendering with various data loads

Adaptation Notes

  • For beginners: Focus more on unit testing concepts and basic debugging techniques
  • For advanced students: Explore property-based testing and advanced browser automation patterns
  • Online delivery: Use screen sharing to demonstrate debugging tools and test execution
  • In-person sessions: Encourage pair programming for complex testing scenarios

Time Management Suggestions

  • Allocate extra time for browser automation setup as it can be tricky
  • Keep exercises focused on core testing principles rather than complex application logic
  • Allow flexibility for debugging sessions as students encounter different issues
  • Reserve time for individual help with test environment setup