Back to Repositories

Testing Border Width Functionality in Bourbon SASS Library

This test suite validates the border-width functionality in the Bourbon SASS library, ensuring proper CSS border width application across different parameter variations. The tests verify both single and multiple width value handling, as well as null value management.

Test Coverage Overview

The test suite provides comprehensive coverage of border-width implementations:

Single width value application across all borders
Two-width alternating sides handling
Three-width scenarios with implied values
Four-width explicit border definitions
Null value handling with partial border width applications

Implementation Analysis

The testing approach utilizes RSpec’s context-based structure to organize different border-width scenarios. Each test case employs expectation matchers to verify CSS rule generation, with ParserSupport handling SASS compilation and rule parsing.

The implementation leverages custom matchers (have_rule and have_ruleset) to validate CSS output against expected values.

Technical Details

Testing Framework: RSpec
Custom Support: ParserSupport module for SASS parsing
Matchers: Custom CSS rule validators
File Structure: Organized by input parameter variations
Setup: Preprocessor configuration in spec_helper

Best Practices Demonstrated

The test suite exemplifies several testing best practices:

Isolated test contexts for different scenarios
Clear test case descriptions
Consistent structure across related tests
Proper setup and teardown management
Effective negative testing with null values

thoughtbot/bourbon

spec/bourbon/library/border_width_spec.rb

            
require "spec_helper"

describe "border-width" do
  before(:all) do
    ParserSupport.parse_file("library/border-width")
  end

  context "called with one color" do
    it "applies same width to all sides" do
      rule = "border-width: 1px"

      expect(".border-width-all").to have_rule(rule)
    end
  end

  context "called with two widths" do
    it "applies to alternating sides" do
      rule = "border-width: 2px 3px"

      expect(".border-width-alternate").to have_rule(rule)
    end
  end

  context "called with three widths" do
    it "applies second width to left and right" do
      rule = "border-width: 4px 5px 6px"

      expect(".border-width-implied-left").to have_rule(rule)
    end
  end

  context "called with four widths" do
    it "applies different widths to all sides" do
      rule = "border-width: 7px 8px 9px 10px"

      expect(".border-width-explicit").to have_rule(rule)
    end
  end

  context "called with null values" do
    it "writes rules for other three" do
      ruleset = "border-top-width: 11px; " +
                "border-right-width: 12px; " +
                "border-left-width: 13px;"
      bad_rule = "border-bottom-width: null;"

      expect(".border-width-false-third").to have_ruleset(ruleset)
      expect(".border-width-false-third").to_not have_rule(bad_rule)
    end
  end
end