Back to Repositories

Testing CSS Vendor Prefix Implementation in Bourbon

This test suite validates the CSS prefixer functionality in Bourbon, ensuring proper vendor prefix handling for CSS properties. It verifies the behavior of the prefixer module across different scenarios including no prefixes, single prefix, and multiple prefix applications.

Test Coverage Overview

The test suite provides comprehensive coverage of the prefixer functionality by examining three critical scenarios:

Basic property handling without prefixes
Single vendor prefix application (-webkit)
Multiple vendor prefix handling (-moz, -ms)

The tests specifically focus on the ‘appearance’ property as a representative case for vendor prefix behavior.

Implementation Analysis

The testing approach utilizes RSpec’s context-based structure to organize different prefix scenarios logically. Each test case employs the custom matcher ‘have_ruleset’ to verify CSS output formatting and uses ParserSupport for file parsing. The implementation demonstrates proper isolation of test cases and clear separation of concerns.

Technical Details

Testing Framework: RSpec
Custom Support: ParserSupport module for file parsing
Custom Matchers: have_ruleset for CSS validation
Setup: Uses before(:all) hook for initial parser configuration
Test Organization: Nested describe/context blocks

Best Practices Demonstrated

The test suite exemplifies several testing best practices including proper test isolation, descriptive context naming, and focused test cases. It demonstrates effective use of RSpec’s BDD syntax and maintains a clear structure for testing CSS output variations.

Isolated test cases
Clear context hierarchy
Consistent assertion patterns
DRY test implementation

thoughtbot/bourbon

spec/bourbon/library/prefixer_spec.rb

            
require "spec_helper"

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

  context "called with no prefixes" do
    it "outputs the spec" do
      rule = "appearance: none;"

      expect(".prefix").to have_ruleset(rule)
    end
  end

  context "called with one prefix" do
    it "applies the prefix to the property" do
      rule = "-webkit-appearance: none; " +
             "appearance: none;"

      expect(".prefix--webkit").to have_ruleset(rule)
    end
  end

  context "called with multiple prefixes" do
    it "applies the prefixes to the property" do
      rule = "-moz-appearance: none; " +
             "-ms-appearance: none; " +
             "appearance: none;"

      expect(".prefix--moz-ms").to have_ruleset(rule)
    end
  end
end