Back to Repositories

Testing Overflow-Wrap Mixin Implementation in Bourbon

This test suite validates the overflow-wrap mixin functionality in Bourbon’s CSS library, ensuring proper CSS property generation for text wrapping behavior. The tests verify both default break-word and normal value implementations across multiple browser compatibility scenarios.

Test Coverage Overview

The test suite provides comprehensive coverage of the overflow-wrap mixin functionality:

Validates standard overflow-wrap implementation with break-word value
Tests normal value scenario for overflow-wrap property
Ensures proper CSS fallback with word-wrap property
Verifies correct ruleset generation for both properties

Implementation Analysis

The testing approach utilizes RSpec’s behavior-driven development framework with custom matchers for CSS ruleset validation. The implementation leverages context blocks to organize different overflow-wrap scenarios, with separate test cases for break-word and normal values.

The tests employ ParserSupport helper for CSS file parsing and custom matchers for ruleset comparison.

Technical Details

Testing Framework: RSpec
Custom Support: ParserSupport module for CSS parsing
Matcher: have_ruleset for CSS property validation
File Structure: Organized by context blocks
Setup: Utilizes before(:all) hook for file parsing

Best Practices Demonstrated

The test suite exemplifies several testing best practices including isolated test contexts, clear test descriptions, and proper setup management. It demonstrates effective use of RSpec’s context blocks for logical test organization, custom matcher implementation for readable assertions, and shared setup through before hooks.

The tests maintain focus on single responsibility while ensuring complete coverage of the mixin’s functionality.

thoughtbot/bourbon

spec/bourbon/library/overflow_wrap_spec.rb

            
require "spec_helper"

describe "overflow-wrap" do
  before(:all) do
    ParserSupport.parse_file("library/overflow-wrap")
  end

  context "called on element" do
    it "adds overflow-wrap and word-wrap" do
      input = ".overflow-wrap"
      ruleset = "word-wrap: break-word; " +
                "overflow-wrap: break-word;"

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

  context "called on element with normal" do
    it "sets values as normal" do
      input = ".overflow-wrap-normal"
      ruleset = "word-wrap: normal; " +
                "overflow-wrap: normal;"

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