Back to Repositories

Validating CSS Number Type Detection in Bourbon Framework

This test suite validates the is-number functionality in the Bourbon Sass framework, focusing on proper number validation across different CSS unit types and formats. The tests ensure robust handling of various numeric inputs while maintaining type safety.

Test Coverage Overview

The test suite provides comprehensive coverage for number validation across multiple CSS units including integers, px, em, rem, and percentages.

Key functionality tested:

Integer validation
Pixel unit validation
Em unit validation
Rem unit validation
Percentage validation
String rejection verification

Implementation Analysis

The testing approach utilizes RSpec’s context-based structure to organize test cases by input type. Each test case employs custom matchers (have_rule) to verify CSS property validation, specifically focusing on line-height property handling across different unit types.

The implementation leverages RSpec’s expect syntax with custom matchers and before hooks for test setup.

Technical Details

Testing tools and configuration:

RSpec testing framework
Custom ParserSupport helper
Specialized have_rule matcher
Bourbon’s is-number validator
File-based test setup using spec_helper

Best Practices Demonstrated

The test suite exemplifies several testing best practices including clear context separation, consistent test structure, and comprehensive edge case coverage. Notable practices include:

Organized test grouping by input type
Consistent naming conventions
Isolated test cases
Clear failure scenarios
DRY test implementation

thoughtbot/bourbon

spec/bourbon/validators/is_number_spec.rb

            
require "spec_helper"

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

  context "called with integer" do
    it "is a number" do
      expect(".integer").to have_rule("line-height: 1")
    end
  end

  context "called with px" do
    it "is a number" do
      expect(".px").to have_rule("line-height: 2px")
    end
  end

  context "called with em" do
    it "is a number" do
      expect(".em").to have_rule("line-height: 3em")
    end
  end

  context "called with rem" do
    it "is a number" do
      expect(".rem").to have_rule("line-height: 4rem")
    end
  end

  context "called with percent" do
    it "is a number" do
      expect(".percent").to have_rule("line-height: 5%")
    end
  end

  context "called with string" do
    it "is not a number" do
      expect(".string").to_not have_rule("line-height: \"stringy\"")
    end
  end
end