styled-components/src/constructors/test/keyframes.test.js

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

import expect from 'expect'

import _keyframes from '../keyframes'
import { expectCSSMatches, resetStyled } from '../../test/utils'

/**
 * Setup
 */
let index = 0
const keyframes = _keyframes(() => `keyframe_${index++}`)

describe('keyframes', () => {
  beforeEach(() => {
    resetStyled()
    index = 0
  })

  it('should return its name', () => {
    expect(keyframes`
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    `).toEqual('keyframe_0')
  })

  it('should insert the correct styles', () => {
    const rules = `
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    `

    const name = keyframes`${rules}`
    expectCSSMatches(`
      @keyframes keyframe_0 {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    `)
  })
})