Back to Repositories

Testing Button Selector Generation in Bourbon

This test suite validates the button selector functionality in the Bourbon Sass library, focusing on different button states and CSS selector generation. The tests ensure proper expansion of button selectors for various states including plain, active, focus, and hover conditions.

Test Coverage Overview

The test suite provides comprehensive coverage of button selector generation functionality:

Validates plain button selector generation
Tests active state button selectors
Verifies focus state button selectors
Confirms hover state button selectors
Ensures correct CSS ruleset generation for each state

Implementation Analysis

The testing approach utilizes RSpec’s describe/context/it blocks to organize test cases logically. It leverages custom matcher ‘have_ruleset’ to verify CSS selector generation. The implementation demonstrates effective use of Ruby array manipulation and string concatenation to build and verify complex CSS selectors.

Technical Details

Testing Framework: RSpec
Custom Support: ParserSupport for file parsing
Setup: Initializes button selectors array in before(:all) block
Test Data: Predefined array of button selectors including standard, reset, and submit types

Best Practices Demonstrated

The test suite exemplifies several testing best practices:

DRY principle through shared button selector array
Consistent test structure across different button states
Clear context separation for different button states
Efficient test setup using before(:all) hook
Descriptive context and example naming

thoughtbot/bourbon

spec/bourbon/library/buttons_spec.rb

            
require "spec_helper"

describe "buttons" do
  before(:all) do
    ParserSupport.parse_file("library/buttons")

    @buttons_list = %w(
      button
      [type='button']
      [type='reset']
      [type='submit']
    )
  end

  context "expands plain buttons" do
    it "finds selectors" do
      list = @buttons_list.join(", ")
      ruleset = "content: #{list};"

      expect(".all-buttons").to have_ruleset(ruleset)
    end
  end

  context "expands active buttons" do
    it "finds selectors" do
      list = @buttons_list.map { |input| "#{input}:active" }
      list = list.join(", ")
      ruleset = "content: #{list};"

      expect(".all-buttons-active").to have_ruleset(ruleset)
    end
  end

  context "expands focus buttons" do
    it "finds selectors" do
      list = @buttons_list.map { |input| "#{input}:focus" }
      list = list.join(", ")
      ruleset = "content: #{list};"

      expect(".all-buttons-focus").to have_ruleset(ruleset)
    end
  end

  context "expands hover buttons" do
    it "finds selectors" do
      list = @buttons_list.map { |input| "#{input}:hover" }
      list = list.join(", ")
      ruleset = "content: #{list};"

      expect(".all-buttons-hover").to have_ruleset(ruleset)
    end
  end
end