Back to Repositories

Testing Font-Face Mixin Implementation in Bourbon

This test suite validates the font-face mixin functionality in Bourbon, specifically focusing on default font configuration and WOFF2 format handling. The tests ensure proper CSS ruleset generation for web font declarations.

Test Coverage Overview

The test coverage focuses on the font-face mixin’s default behavior when processing web font declarations.

Key areas tested include:

Default font family name assignment
WOFF2 format source URL handling
CSS ruleset structure validation
Font URL path construction

Implementation Analysis

The testing approach utilizes RSpec’s describe/context/it blocks to organize font-face related tests. The implementation leverages custom parser support for processing Bourbon’s font-face mixin files, with specific focus on ruleset validation.

The test pattern employs:

Before hooks for file parsing setup
String-based ruleset comparison
Custom matchers for CSS rule validation

Technical Details

Testing tools and configuration:

RSpec as the testing framework
ParserSupport utility for Sass file parsing
Custom matchers for ruleset validation
Font file path conventions (/fonts directory)
WOFF2 format specification testing

Best Practices Demonstrated

The test suite demonstrates several testing best practices for Sass/CSS mixins.

Notable practices include:

Isolated test cases for specific functionality
Clear context separation using RSpec blocks
Explicit expected output validation
Consistent CSS property ordering
Proper web font format declaration testing

thoughtbot/bourbon

spec/bourbon/library/font_face_spec_3.rb

            
require "spec_helper"

describe "font-face" do
  before(:all) do
    ParserSupport.parse_file("library/font-face-3")
  end

  context "called with defaults" do
    it "outputs defaults" do
      ruleset = 'font-family: "pitch";' +
                'src: font-url("/fonts/pitch.woff2") format("woff2");'

      expect("@font-face").to have_ruleset(ruleset)
    end
  end
end