Back to Repositories

Testing Border Radius Mixin Implementation in Bourbon

This test suite validates the border-radius mixins in the Bourbon SASS library, focusing on the correct application of border radius values to different sides of elements. The tests ensure proper CSS property generation and value assignment for various border radius scenarios.

Test Coverage Overview

The test suite comprehensively covers border-radius functionality in Bourbon, specifically testing directional border radius mixins. Key areas include:

Top border radius application
Left border radius application
Right border radius application
Bottom border radius application

Each test verifies the correct CSS property generation and value assignment.

Implementation Analysis

The testing approach utilizes RSpec’s describe and context blocks to organize test cases logically. The implementation leverages custom matchers (have_ruleset) to validate CSS output, with before hooks setting up parser support for the border-radius library file. The tests focus on single-argument scenarios for each directional mixin.

Technical Details

Testing tools and configuration:

RSpec testing framework
Custom ParserSupport module for SASS parsing
Custom matchers for CSS ruleset validation
Before hooks for test setup
String concatenation for complex CSS rule comparison

Best Practices Demonstrated

The test suite exemplifies several testing best practices including clear test organization, isolated test cases, and specific assertions. Notable practices include:

Descriptive context and example naming
Proper test setup isolation
Clear expected vs actual value comparisons
Modular test structure

thoughtbot/bourbon

spec/bourbon/library/border_radius_spec.rb

            
require "spec_helper"

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

  context "called with one argument" do
    it "applies to correct sides" do
      top = "border-top-left-radius: 1em; " +
            "border-top-right-radius: 1em;"
      left = "border-bottom-left-radius: 2em; " +
              "border-top-left-radius: 2em;"
      right = "border-bottom-right-radius: 3em; " +
              "border-top-right-radius: 3em;"
      bottom = "border-bottom-left-radius: 4em; " +
                "border-bottom-right-radius: 4em;"

      expect(".border-top-radius").to have_ruleset(top)
      expect(".border-left-radius").to have_ruleset(left)
      expect(".border-right-radius").to have_ruleset(right)
      expect(".border-bottom-radius").to have_ruleset(bottom)
    end
  end
end