Back to Repositories

Testing Clearfix Mixin Implementation in Bourbon

This test suite validates the clearfix mixin functionality in the Bourbon library, ensuring proper CSS clearing behavior. The tests verify the generation of appropriate CSS rules for clearing floated elements using the ::after pseudo-element approach.

Test Coverage Overview

The test suite focuses on verifying the core clearfix mixin implementation in Bourbon.

Tests the generation of ::after pseudo-element
Validates correct CSS property values
Ensures proper clearing behavior for floated elements
Verifies content property and display block settings

Implementation Analysis

The testing approach uses RSpec’s expectation syntax to validate CSS rule generation. The implementation leverages custom parser support for processing Bourbon’s library files and evaluating CSS output.

Uses ParserSupport helper for file parsing
Implements custom matchers for CSS rule validation
Focuses on ruleset property verification

Technical Details

RSpec testing framework
Custom ParserSupport module
CSS ruleset validation helpers
Before hooks for test setup
Specific test context organization

Best Practices Demonstrated

The test suite exhibits strong testing practices through focused test cases and clear expectations. It demonstrates effective use of RSpec’s context blocks and custom matchers for CSS validation.

Clear test organization and structure
Specific expectation matching
Isolated test contexts
Efficient test setup handling

thoughtbot/bourbon

spec/bourbon/library/clearfix_spec.rb

            
require "spec_helper"

describe "clearfix" do
  before(:all) do
    ParserSupport.parse_file("library/clearfix")
  end

  context "called on element" do
    it "adds clearfix" do
      input = ".clearfix::after"
      ruleset = "clear: both; " +
                'content: ""; ' +
                "display: block;"

      expect(input).to have_ruleset(ruleset)
    end
  end
end