text: import postcss from 'postcss'
  import plugin from '../src/lib/substituteVariantsAtRules'
  import config from '../defaultConfig.stub.js'
  
  function run(input, opts = () => config) {
    return postcss([plugin(opts)]).process(input)
  }
  
  test('it can generate hover variants', () => {
    const input = `
      @variants hover {
        .banana { color: yellow; }
        .chocolate { color: brown; }
      }
    `
  
    const output = `
        .banana { color: yellow; }
        .chocolate { color: brown; }
        .hover\\:banana:hover { color: yellow; }
        .hover\\:chocolate:hover { color: brown; }
    `
  
    return run(input).then(result => {
      expect(result.css).toMatchCss(output)
      expect(result.warnings().length).toBe(0)
    })
  })
  
  test('it can generate focus variants', () => {
    const input = `
      @variants focus {
        .banana { color: yellow; }
        .chocolate { color: brown; }
      }
    `
  
    const output = `
        .banana { color: yellow; }
        .chocolate { color: brown; }
        .focus\\:banana:focus { color: yellow; }
        .focus\\:chocolate:focus { color: brown; }
    `
  
    return run(input).then(result => {
      expect(result.css).toMatchCss(output)
      expect(result.warnings().length).toBe(0)
    })
  })
  
  test('it can generate group-hover variants', () => {
    const input = `
      @variants group-hover {
        .banana { color: yellow; }
        .chocolate { color: brown; }
      }
    `
  
    const output = `
        .banana { color: yellow; }
        .chocolate { color: brown; }
        .group:hover .group-hover\\:banana { color: yellow; }
        .group:hover .group-hover\\:chocolate { color: brown; }
    `
  
    return run(input).then(result => {
      expect(result.css).toMatchCss(output)
      expect(result.warnings().length).toBe(0)
    })
  })
  
  test('it can generate hover and focus variants', () => {
    const input = `
      @variants hover, focus {
        .banana { color: yellow; }
        .chocolate { color: brown; }
      }
    `
  
    const output = `
        .banana { color: yellow; }
        .chocolate { color: brown; }
        .focus\\:banana:focus { color: yellow; }
        .focus\\:chocolate:focus { color: brown; }
        .hover\\:banana:hover { color: yellow; }
        .hover\\:chocolate:hover { color: brown; }
    `
  
    return run(input).then(result => {
      expect(result.css).toMatchCss(output)
      expect(result.warnings().length).toBe(0)
    })
  })
  
  test('it wraps the output in a responsive at-rule if responsive is included as a variant', () => {
    const input = `
      @variants responsive, hover, focus {
        .banana { color: yellow; }
        .chocolate { color: brown; }
      }
    `
  
    const output = `
      @responsive {
        .banana { color: yellow; }
        .chocolate { color: brown; }
        .focus\\:banana:focus { color: yellow; }
        .focus\\:chocolate:focus { color: brown; }
        .hover\\:banana:hover { color: yellow; }
        .hover\\:chocolate:hover { color: brown; }
      }
    `
  
    return run(input).then(result => {
      expect(result.css).toMatchCss(output)
      expect(result.warnings().length).toBe(0)
    })
  })
  