compass-vertical-rhythm/test/index.js

A port-in-progress of the Compass vertical rhythm library

const chai = require("chai")
const { expect } = chai
const _ = require("underscore")
const parseUnit = require("parse-unit")

const verticalRhythm = require("../src/index")

describe("rhythm", function() {
  it("should calculate rhythm for rem", function() {
    const vrREM = verticalRhythm({
      baseFontSize: "21px",
      baseLineHeight: 4 / 3,
      rhythmUnit: "rem",
    })
    const { rhythm } = vrREM
    expect(rhythm(1)).to.equal("1.33333rem")
    expect(rhythm(0.5)).to.equal("0.66667rem")
    return expect(rhythm(0.25)).to.equal("0.33333rem")
  })

  it("should calculate rhythm for em", function() {
    const vrEM = new verticalRhythm({
      baseFontSize: "24px",
      baseLineHeight: 1.25,
      rhythmUnit: "em",
    })
    const { rhythm } = vrEM
    expect(rhythm(1)).to.equal("1.25em")
    expect(rhythm(0.5)).to.equal("0.625em")
    return expect(rhythm(0.25)).to.equal("0.3125em")
  })

  it("should calculate rhythm for px", function() {
    const vrEM = new verticalRhythm({
      baseFontSize: "24px",
      baseLineHeight: 1.25,
      rhythmUnit: "px",
    })
    const { rhythm } = vrEM
    expect(rhythm(1)).to.equal("30px")
    expect(rhythm(0.5)).to.equal("15px")
    return expect(rhythm(0.25)).to.equal("7px")
  })

  return it("should calculate rhythm if lineHeight is set in px", function() {
    const vrEM = new verticalRhythm({
      baseFontSize: "24px",
      baseLineHeight: "30px",
      rhythmUnit: "px",
    })
    const { rhythm } = vrEM
    expect(rhythm(1)).to.equal("30px")
    expect(rhythm(0.5)).to.equal("15px")
    return expect(rhythm(0.25)).to.equal("7px")
  })
})

describe("establishBaseline", function() {
  const vrREM = verticalRhythm({
    baseFontSize: "24px",
    baseLineHeight: 1.25,
    rhythmUnit: "rem",
  })
  const { establishBaseline } = vrREM

  it("should return an object", () =>
    expect(establishBaseline()).to.be.instanceof(Object))

  it("should return an object with a fontSize and lineHeight defined", function() {
    const result = establishBaseline()
    expect(result.fontSize).to.exist
    return expect(result.lineHeight).to.exist
  })

  it("should return fontSize with percent as its unit", function() {
    const result = establishBaseline()
    return expect(parseUnit(result.fontSize)[1]).to.equal("%")
  })

  it("should return unitless lineHeight", function() {
    const result = establishBaseline()
    return expect(parseUnit(result.lineHeight)[1]).to.equal("")
  })

  it("should return lineHeight with units if specified", function() {
    const vrWithUnits = verticalRhythm({
      baseLineHeight: "1.25em",
    })
    const result = vrWithUnits.establishBaseline()
    return expect(parseUnit(result.lineHeight)[1]).to.equal("em")
  })

  return it("should return sensible results", function() {
    const result = establishBaseline()
    expect(result.fontSize).to.equal("150%")
    return expect(result.lineHeight).to.equal("1.25")
  })
})

describe("linesForFontSize", function() {
  let vrREM = verticalRhythm({
    baseFontSize: "21px",
    baseLineHeight: 4 / 3,
    rhythmUnit: "rem",
  })

  let { linesForFontSize } = vrREM

  it("should return a result", () => expect(linesForFontSize("16px")).to.exist)

  it(`should return line value of larger than 1 \
if font size is larger than baseLineHeight`, () =>
    expect(linesForFontSize("29px") > 1).to.be.true)

  it(`should return line value of 1 \
if font size is less than baseLineHeight`, () =>
    expect(linesForFontSize("20px")).to.equal(1))

  return it(`should return add extra lines if space taken up by font too close \
to edges of line (as determined by minLinePadding`, function() {
    expect(linesForFontSize("26px")).to.equal(1.5)
    expect(linesForFontSize("24px")).to.equal(1)

    // Test when minLinePadding is set to 0.
    vrREM = verticalRhythm({
      baseFontSize: "21px",
      baseLineHeight: 4 / 3,
      rhythmUnit: "rem",
      minLinePadding: "0px",
    })
    ;({ linesForFontSize } = vrREM)
    return expect(linesForFontSize("26px")).to.equal(1)
  })
})

describe("adjustFontSizeTo", function() {
  let vrREM = verticalRhythm({
    baseFontSize: "21px",
    baseLineHeight: 4 / 3,
    rhythmUnit: "rem",
  })

  let { adjustFontSizeTo } = vrREM
  const { rhythm } = vrREM

  it("should return an object", () =>
    expect(adjustFontSizeTo("16px")).to.be.instanceof(Object))

  it("should return an object with a fontSize and lineHeight defined", function() {
    const result = adjustFontSizeTo("16px")
    expect(result.fontSize).to.exist
    return expect(result.lineHeight).to.exist
  })

  it("should accept px", function() {
    const result = adjustFontSizeTo("63px")
    expect(result.fontSize).to.equal("3rem")
    return expect(result.lineHeight).to.exist
  })

  it("should accept rem", function() {
    const result = adjustFontSizeTo("3rem")
    expect(result.fontSize).to.equal("3rem")
    return expect(result.lineHeight).to.exist
  })

  it("should accept em", function() {
    const result = adjustFontSizeTo("3em")
    expect(result.fontSize).to.equal("3rem")
    return expect(result.lineHeight).to.exist
  })

  it("should accept %", function() {
    const result = adjustFontSizeTo("200%")
    expect(result.fontSize).to.equal("2rem")
    return expect(result.lineHeight).to.exist
  })

  it("should let you set explicit # of lines", function() {
    let result = adjustFontSizeTo("3em", 3)
    expect(result.fontSize).to.equal("3rem")
    expect(result.lineHeight).to.equal(rhythm(3))

    // Weird that Compass let's you set lineHeight to be smaller than
    // fontSize. Guess there's potential use cases for this.
    result = adjustFontSizeTo("3em", 2)
    expect(result.fontSize).to.equal("3rem")
    return expect(result.lineHeight).to.equal(rhythm(2))
  })

  it("should return values in whatever the set rhythmUnit is", function() {
    vrREM = verticalRhythm({
      baseFontSize: "21px",
      baseLineHeight: 4 / 3,
      rhythmUnit: "em",
    })
    ;({ adjustFontSizeTo } = vrREM)

    const result = adjustFontSizeTo("3em", 3)
    expect(result.fontSize).to.equal("3em")
    return expect(result.lineHeight).to.exist
  })

  return it("should work with em and fromSize", function() {
    const result = adjustFontSizeTo("42px", 3, "10.5px")
    expect(result.fontSize).to.equal("4em")
    return expect(result.lineHeight).to.equal("8em")
  })
})