Back to Repositories

Testing Hide-Visually Mixin Implementation in Bourbon

This test suite validates the hide-visually mixin functionality in Bourbon, focusing on CSS properties for visually hiding and unhiding elements while maintaining accessibility. The tests ensure proper implementation of visibility-related CSS properties and their reversibility.

Test Coverage Overview

The test suite comprehensively covers the hide-visually mixin functionality with two main scenarios:

Basic visual hiding implementation with specific CSS properties
Unhiding functionality with property reversals
Verification of exact CSS property values and combinations

Implementation Analysis

The testing approach utilizes RSpec’s context-based structure to separate distinct functionality scenarios. The tests leverage custom matchers (have_ruleset) to verify CSS property combinations, ensuring precise matching of complex CSS declarations.

Technical Details

Testing tools and configuration:

RSpec testing framework
ParserSupport utility for CSS parsing
Custom matchers for CSS ruleset validation
Before hooks for test file parsing

Best Practices Demonstrated

The test suite demonstrates several testing best practices:

Isolated test contexts for different scenarios
Precise CSS property validation
Clear separation of setup and expectations
Maintainable string concatenation for complex rulesets

thoughtbot/bourbon

spec/bourbon/library/hide_visually_spec.rb

            
require "spec_helper"

describe "hide-visually" do
  before(:all) do
    ParserSupport.parse_file("library/hide-visually")
  end

  context "called on element" do
    it "adds properties to hide the element" do
      ruleset = "border: 0; " +
                "clip: rect(1px, 1px, 1px, 1px); " +
                "clip-path: inset(100%); " +
                "height: 1px; " +
                "overflow: hidden; " +
                "padding: 0; " +
                "position: absolute; " +
                "white-space: nowrap; " +
                "width: 1px;"

      expect(".hide-visually").to have_ruleset(ruleset)
    end
  end

  context "called with unhide argument" do
    it "adds properties to reverse the hiding of the element" do
      ruleset = "clip: auto; " +
                "clip-path: none; " +
                "height: auto; " +
                "overflow: visible; " +
                "position: static; " +
                "white-space: inherit; " +
                "width: auto;"

      expect(".hide-visually--unhide").to have_ruleset(ruleset)
    end
  end
end