Back to Repositories

Testing Text Input Selector Generation in Bourbon

This test suite validates the text-inputs functionality in the Bourbon SCSS framework, focusing on various HTML input selectors and their states. The tests ensure proper selector generation and ruleset matching for different types of text input elements.

Test Coverage Overview

The test suite provides comprehensive coverage of text input selectors across multiple states and types.

Key areas tested include:

Plain text input selectors
Active state inputs
Focus state inputs
Hover state inputs
Invalid state inputs

The suite verifies 16 different input types including color, date, email, and textarea elements.

Implementation Analysis

The testing approach utilizes RSpec’s describe/context/it blocks for organized test structure.

Implementation features:

Uses before(:all) hook for efficient test setup
Implements custom ParserSupport for SCSS parsing
Leverages array manipulation for selector generation
Uses custom matcher ‘have_ruleset’ for CSS validation

Technical Details

Testing tools and configuration:

RSpec testing framework
Custom ParserSupport module for SCSS parsing
Array-based selector management
Dynamic ruleset generation
Custom matchers for CSS validation

Best Practices Demonstrated

The test suite exemplifies several testing best practices.

Notable examples include:

DRY principle through shared input list definition
Consistent context organization
Clear test descriptions
Efficient setup using before blocks
Modular test structure

thoughtbot/bourbon

spec/bourbon/library/text_inputs_spec.rb

            
require "spec_helper"

describe "text-inputs" do
  before(:all) do
    ParserSupport.parse_file("library/text-inputs")

    @inputs_list = %w(
      [type='color']
      [type='date']
      [type='datetime']
      [type='datetime-local']
      [type='email']
      [type='month']
      [type='number']
      [type='password']
      [type='search']
      [type='tel']
      [type='text']
      [type='time']
      [type='url']
      [type='week']
      input:not([type])
      textarea
    )
  end

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

      expect(".all-text-inputs").to have_ruleset(ruleset)
    end
  end

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

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

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

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

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

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

  context "expands invalid text inputs" do
    it "finds selectors" do
      list = @inputs_list.map { |input| "#{input}:invalid" }
      list = list.join(", ")
      ruleset = "content: #{list};"

      expect(".all-text-inputs-invalid").to have_ruleset(ruleset)
    end
  end
end