Back to Repositories

Testing Border Color Implementations in Bourbon

This test suite validates the border-color functionality in the Bourbon Sass library, focusing on different color combinations and their application to element borders. The tests ensure proper handling of single, double, triple, and quadruple color values, as well as null value scenarios.

Test Coverage Overview

The test suite provides comprehensive coverage of border-color implementations in Sass.

Key areas tested include:

Single color application across all borders
Two-color alternating patterns
Three-color combinations with implied left border
Four-color explicit border definitions
Null value handling in border declarations

Implementation Analysis

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

The implementation leverages RSpec’s describe/context/it blocks for clear test organization and custom matchers (have_rule, have_ruleset) for CSS rule validation.

Technical Details

Testing tools and configuration:

RSpec as the testing framework
Custom ParserSupport module for Sass parsing
Custom matchers for CSS rule validation
Before hooks for file parsing setup
Specialized ruleset verification for complex cases

Best Practices Demonstrated

The test suite exemplifies several testing best practices in Sass library development.

Notable practices include:

Isolated test cases for each border-color scenario
Clear context separation using RSpec blocks
Explicit expectation statements
Comprehensive edge case coverage
Efficient test setup using before hooks

thoughtbot/bourbon

spec/bourbon/library/border_color_spec.rb

            
require "spec_helper"

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

  context "called with one color" do
    it "applies same color to all sides" do
      rule = "border-color: #f00"

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

  context "called with two colors" do
    it "applies to alternating sides" do
      rule = "border-color: #0f0 #00f"

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

  context "called with three colors" do
    it "applies second color to left and right" do
      rule = "border-color: #f00 #0f0 #00f"

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

  context "called with four colors" do
    it "applies different colors to all sides" do
      rule = "border-color: #00f #0f0 #f00 #ff0"

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

  context "called with null values" do
    it "writes rules for other three" do
      ruleset = "border-top-color: #0f0; " +
                "border-right-color: #ff0; " +
                "border-left-color: #00f;"
      bad_rule = "border-bottom-color: null;"

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