react-ionicons/docs/node_modules/styled-components/src/utils/test/extractCompsFromCSS.test.js

A React SVG ionicon component

import extractCompsFromCSS from '../extractCompsFromCSS'

describe('extractCompsFromCSS', () => {
  it('should work for null or empty', () => {
    expect(extractCompsFromCSS('')).toEqual([])
    expect(extractCompsFromCSS(null)).toEqual([])
  })

  it('should ignore anything before the first SC', () => {
    expect(extractCompsFromCSS(`
      Totally ignored, who cares.
    `)).toEqual([])
  })

  it('should return a single SC', () => {
    const css = `
      /* sc-component-id: 123 */
      .foo { color: red; }
    `
    expect(extractCompsFromCSS(css)).toEqual([
      { componentId: '123', cssFromDOM: css.replace(/^\n/,'') },
    ])
  })

  it('should return a single SC with multiple lines', () => {
    const css = `
      /* sc-component-id: 123 */
      .foo { color: red; }
      .bar { color: blue; }
    `
    expect(extractCompsFromCSS(css)).toEqual([
      { componentId: '123', cssFromDOM: css.replace(/^\n/,'') },
    ])
  })

  it('should return multiple SCs with single lines', () => {
    const a = `
      /* sc-component-id: 123 */
      .foo { color: red; }
    `
    const b = `
      /* sc-component-id: 456 */
      .bar { color: blue; }
    `
    expect(extractCompsFromCSS(a + b)).toEqual([
      { componentId: '123', cssFromDOM: a.replace(/^\n/,'') + '\n' },
      { componentId: '456', cssFromDOM: b.replace(/^\n/,'') },
    ])
  })

  it('should return multiple SCs with multiple lines', () => {
    const a = `
      /* sc-component-id: 123 */
      .foo { color: red; }
      .bar { color: blue; }
    `
    const b = `
      /* sc-component-id: 456 */
      .baz { color: green; }
      .boo { color: black; }
    `
    expect(extractCompsFromCSS(a + b)).toEqual([
      { componentId: '123', cssFromDOM: a.replace(/^\n/,'') + '\n' },
      { componentId: '456', cssFromDOM: b.replace(/^\n/,'') },
    ])
  })

  it('should include whitespace after a component', () => {
    const a = `
      /* sc-component-id: 123 */
      .foo { color: red; }
      .bar { color: blue; }
      
      
      
    `
    const b = `
      /* sc-component-id: 456 */
      .baz { color: green; }
      .boo { color: black; }
      
      
      
    `
    expect(extractCompsFromCSS(a + b)).toEqual([
      { componentId: '123', cssFromDOM: a.replace(/^\n/,'') + '\n' },
      { componentId: '456', cssFromDOM: b.replace(/^\n/,'') },
    ])
  })
})