// @flow
import React, { Component } from 'react'
import { shallow } from 'enzyme'
import { resetStyled } from './utils'
let styled
describe('expanded api', () => {
/**
* Make sure the setup is the same for every test
*/
beforeEach(() => {
styled = resetStyled()
})
describe('displayName', () => {
it('should be auto-generated if none passed', () => {
const Comp = styled.div``
expect(Comp.displayName).toBe('styled.div')
})
it('should be attached if supplied', () => {
const Comp = styled.div.withConfig({ displayName: 'Comp' })``
expect(Comp.displayName).toBe('Comp')
})
})
describe('componentId', () => {
it('should be generated as "sc" + hash', () => {
const Comp = styled.div``
const Comp2 = styled.div``
expect(Comp.styledComponentId).toBe('sc-a')
expect(shallow().prop('className')).toMatch(/sc-a/)
expect(Comp2.styledComponentId).toBe('sc-b')
expect(shallow().prop('className')).toMatch(/sc-b/)
})
it('should be generated from displayName + hash', () => {
const Comp = styled.div.withConfig({ displayName: 'Comp' })``
const Comp2 = styled.div.withConfig({ displayName: 'Comp2' })``
expect(Comp.styledComponentId).toBe('Comp-a')
expect(shallow().prop('className')).toMatch(/Comp-a/)
expect(Comp2.styledComponentId).toBe('Comp2-b')
expect(shallow().prop('className')).toMatch(/Comp2-b/)
})
it('should be attached if passed in', () => {
const Comp = styled.div.withConfig({ componentId: 'LOLOMG' })``
const Comp2 = styled.div.withConfig({ componentId: 'OMGLOL' })``
expect(Comp.styledComponentId).toBe('LOLOMG')
expect(shallow().prop('className')).toMatch(/LOLOMG/)
expect(Comp2.styledComponentId).toBe('OMGLOL')
expect(shallow().prop('className')).toMatch(/OMGLOL/)
})
it('should be combined with displayName if both passed in', () => {
const Comp = styled.div.withConfig({ displayName: 'Comp', componentId: 'LOLOMG' })``
const Comp2 = styled.div.withConfig({ displayName: 'Comp2', componentId: 'OMGLOL' })``
expect(Comp.styledComponentId).toBe('Comp-LOLOMG')
expect(shallow().prop('className')).toMatch(/Comp-LOLOMG/)
expect(Comp2.styledComponentId).toBe('Comp2-OMGLOL')
expect(shallow().prop('className')).toMatch(/Comp2-OMGLOL/)
})
it('should work with `.extend`', () => {
const Comp = styled.div.withConfig({ displayName: 'Comp', componentId: 'LOLOMG' })`
color: blue;
`
const Comp2 = Comp.extend`
color: ${'red'};
background: ${props => props.bg};
`
expect(Comp.styledComponentId).toBe('Comp-LOLOMG')
expect(shallow().prop('className')).toMatch(/Comp-LOLOMG/)
expect(Comp2.styledComponentId).toBe('LOLOMG-Comp-a')
expect(shallow().prop('className')).toMatch(/LOLOMG-Comp-a/)
})
it('should work with `.withComponent`', () => {
const Dummy = () => null
const Comp = styled.div.withConfig({ displayName: 'Comp', componentId: 'OMGLOL' })``.withComponent('h1')
const Comp2 = styled.div.withConfig({ displayName: 'Comp2', componentId: 'OMFG' })``.withComponent(Dummy)
expect(Comp.styledComponentId).toBe('Comp-OMGLOL-h1')
expect(shallow().prop('className')).toMatch(/Comp-OMGLOL-h1/)
expect(Comp2.styledComponentId).toBe('Comp2-OMFG-Dummy')
expect(shallow().prop('className')).toMatch(/Comp2-OMFG-Dummy/)
})
})
describe('chaining', () => {
it('should merge the options strings', () => {
const Comp = styled.div
.withConfig({ componentId: 'id-1' })
.withConfig({ displayName: 'dn-2' })
``
expect(Comp.displayName).toBe('dn-2')
expect(shallow().prop('className')).toBe('dn-2-id-1 a')
})
it('should keep the last value passed in when merging', () => {
const Comp = styled.div
.withConfig({ displayName: 'dn-2', componentId: 'id-3' })
.withConfig({ displayName: 'dn-5', componentId: 'id-4' })
``
expect(Comp.displayName).toBe('dn-5')
expect(shallow().prop('className')).toBe('dn-5-id-4 a')
})
})
})