Testing and Debugging

Unit Testing

Unit testing focuses on individual components of the website, such as Hugo templates and components. This approach isolates each part and verifies its behavior in a controlled environment.

Example:

// test/templates/header_test.go
          
          package templates
          
          import (
              "testing"
          
              "github.com/stretchr/testify/assert"
          )
          
          func TestHeaderTemplate(t *testing.T) {
              // Create a test context with expected data.
              ctx := map[string]interface{}{
                  "title": "Example Title",
                  "url":   "https://example.com",
              }
          
              // Render the template.
              result, err := renderTemplate("header.html", ctx)
              assert.NoError(t, err)
          
              // Assert the expected content is present.
              assert.Contains(t, result, "<title>Example Title</title>")
              assert.Contains(t, result, "<a href=\"https://example.com\">Home</a>")
          }
          

Source: https://github.com/helixml/docs/

End-to-End Testing

End-to-end testing simulates real user interactions with the website. These tests cover the complete workflow, from navigation and input to data retrieval and presentation.

Example:

// test/e2e/homepage_test.go
          
          package e2e
          
          import (
              "testing"
          
              "github.com/stretchr/testify/assert"
              "github.com/tebeka/selenium"
          )
          
          func TestHomepage(t *testing.T) {
              // Initialize WebDriver.
              driver, err := selenium.NewChromeDriver(selenium.Capabilities{
                  "browserName": "chrome",
              })
              assert.NoError(t, err)
              defer driver.Quit()
          
              // Navigate to the homepage.
              err = driver.Get("https://example.com")
              assert.NoError(t, err)
          
              // Verify the page title.
              title, err := driver.Title()
              assert.NoError(t, err)
              assert.Equal(t, title, "Welcome to Example Website")
          
              // Find and click the navigation link.
              link := driver.FindElement(selenium.ByCSSSelector, "a[href='/about']")
              err = link.Click()
              assert.NoError(t, err)
          
              // Verify the new page URL.
              currentURL, err := driver.CurrentURL()
              assert.NoError(t, err)
              assert.Equal(t, currentURL, "https://example.com/about")
          }
          

Source: https://github.com/helixml/docs/

Debugging Tools and Techniques

• Browser Developer Tools: Inspect website elements, track network requests, analyze page performance, and debug JavaScript code.

• Hugo Logs: Examine Hugo’s output for errors, warnings, and information related to website generation.

• Logging Libraries: Implement logging libraries within Hugo templates or components to capture specific data or events for debugging purposes.

Example (Browser Developer Tools):

• Use the Elements tab to inspect HTML structure and CSS styles.
• Use the Network tab to monitor network requests and responses.
• Use the Console tab to view JavaScript errors and warnings.

Example (Hugo Logs):

// config.toml
          
          [logging]
            level = "debug" 
          

Source: https://github.com/helixml/docs/