Back to Repositories

Validating CSS Size Unit Handling in Bourbon Framework

This test suite validates the is-size functionality in Bourbon’s SASS framework, ensuring proper handling of CSS size values across different units and edge cases. The tests verify size validation behavior for various CSS measurement units and invalid inputs.

Test Coverage Overview

The test suite provides comprehensive coverage for size validation in CSS properties, specifically focusing on margin-top rules. It validates:

Common CSS units (px, em, rem, percentage)
Invalid inputs (integers, strings)
Edge cases in size validation
Unit-specific validation behavior

Implementation Analysis

The implementation uses RSpec’s context-based structure to organize test cases logically by unit type. Each test utilizes custom matchers (have_rule and to_not have_rule) to verify CSS rule generation. The approach demonstrates clear separation of concerns with dedicated test cases for each measurement unit.

Technical Details

Key technical components include:

RSpec testing framework
ParserSupport helper module
Custom matchers for CSS rule validation
File-based test setup using spec_helper

Best Practices Demonstrated

The test suite exemplifies several testing best practices:

Consistent context organization
Clear test case isolation
Descriptive context and it blocks
Proper setup using before blocks
Effective negative and positive testing

thoughtbot/bourbon

spec/bourbon/validators/is_size_spec.rb

            
require "spec_helper"

describe "is-size" do
  before(:all) do
    ParserSupport.parse_file("validators/is-size")
  end

  context "called with integer" do
    it "is not a size" do
      expect(".integer").to_not have_rule("margin-top: 1")
    end
  end

  context "called with px" do
    it "is a size" do
      expect(".px").to have_rule("margin-top: 2px")
    end
  end

  context "called with em" do
    it "is a size" do
      expect(".em").to have_rule("margin-top: 3em")
    end
  end

  context "called with rem" do
    it "is a size" do
      expect(".rem").to have_rule("margin-top: 4rem")
    end
  end

  context "called with percent" do
    it "is a size" do
      expect(".percent").to have_rule("margin-top: 5%")
    end
  end

  context "called with string" do
    it "is not a size" do
      expect(".string").to_not have_rule("margin-top: \"stringy\"")
    end
  end
end