text: /* eslint-env browser, qunit */
  import { toParts, toConstructor } from '@ractivejs/utils-component'
  import Ractive from '@ractivejs/core'
  
  QUnit.module('constructor-builder')
  
  QUnit.test(`duplicate-link-href`, assert => {
    return fetch(`/base/test/samples/cjs/duplicate-link-href/component.ractive.html`).then(r => r.text()).then(source => {
      const dependencies = {
        './path/to/MyComponent.ractive.html': Ractive.extend({ template: '<div class="my-component">My Component</div>' })
      }
      const srcName = 'component.ractive.html'
      const destName = 'component.js'
      const parts = toParts(source)
      const resolver = id => dependencies[id]
      const constructor = toConstructor({ srcName, destName, parts, resolver })
  
      assert.strictEqual(typeof constructor.extend, 'function')
      assert.strictEqual(constructor.components.MyComponent, dependencies['./path/to/MyComponent.ractive.html'])
      assert.strictEqual(constructor.components.MyOtherComponent, dependencies['./path/to/MyComponent.ractive.html'])
      assert.strictEqual(constructor.components.YetAnotherComponent, dependencies['./path/to/MyComponent.ractive.html'])
  
      const instance = constructor({ el: '#qunit-fixture', data: { a: 1, b: 2 } })
  
      assert.htmlEqual(instance.toHTML(), '')
      assert.strictEqual(instance.toCSS(), '/* Ractive.js component styles */')
      assert.strictEqual(instance.get('a'), 1)
      assert.strictEqual(instance.get('b'), 2)
    })
  })
  
  QUnit.test(`duplicate-link-name`, assert => {
    return fetch(`/base/test/samples/cjs/duplicate-link-name/component.ractive.html`).then(r => r.text()).then(source => {
      const dependencies = {
        './path/to/MyComponent.ractive.html': Ractive.extend({ template: '<div class="my-component">My Component</div>' }),
        './path/to/MyOtherComponent.ractive.html': Ractive.extend({ template: '<div class="my-other-component">My Other Component</div>' }),
        './path/to/YetAnotherComponent.ractive.html': Ractive.extend({ template: '<div class="yet-another-component">Yet Another Component</div>' })
      }
      const srcName = 'component.ractive.html'
      const destName = 'component.js'
      const parts = toParts(source)
      const resolver = id => dependencies[id]
      const constructor = toConstructor({ srcName, destName, parts, resolver })
  
      assert.strictEqual(typeof constructor.extend, 'function')
      assert.strictEqual(constructor.components.MyComponent, dependencies['./path/to/YetAnotherComponent.ractive.html'])
  
      const instance = constructor({ el: '#qunit-fixture', data: { a: 1, b: 2 } })
  
      assert.htmlEqual(instance.toHTML(), '')
      assert.strictEqual(instance.toCSS(), '/* Ractive.js component styles */')
      assert.strictEqual(instance.get('a'), 1)
      assert.strictEqual(instance.get('b'), 2)
    })
  })
  
  QUnit.test(`empty-top-levels`, assert => {
    return fetch(`/base/test/samples/cjs/empty-top-levels/component.ractive.html`).then(r => r.text()).then(source => {
      const srcName = 'component.ractive.html'
      const destName = 'component.js'
      const parts = toParts(source)
      const resolver = id => { throw new Error('THIS SHOULD NEVER BE CALLED') }
      const constructor = toConstructor({ srcName, destName, parts, resolver })
  
      assert.strictEqual(typeof constructor.extend, 'function')
  
      const instance = constructor({ el: '#qunit-fixture', data: { a: 1, b: 2 } })
  
      assert.htmlEqual(instance.toHTML(), '')
      assert.strictEqual(instance.toCSS(), '/* Ractive.js component styles */')
      assert.strictEqual(instance.get('a'), 1)
      assert.strictEqual(instance.get('b'), 2)
    })
  })
  
  QUnit.test(`links-only`, assert => {
    return fetch(`/base/test/samples/cjs/links-only/component.ractive.html`).then(r => r.text()).then(source => {
      const dependencies = {
        './path/to/MyComponent.ractive.html': Ractive.extend({ template: '<div class="my-component">My Component</div>' }),
        './path/to/MyOtherComponent.ractive.html': Ractive.extend({ template: '<div class="my-other-component">My Other Component</div>' }),
        './path/to/YetAnotherComponent.ractive.html': Ractive.extend({ template: '<div class="yet-another-component">Yet Another Component</div>' })
      }
      const srcName = 'component.ractive.html'
      const destName = 'component.js'
      const parts = toParts(source)
      const resolver = id => dependencies[id]
      const constructor = toConstructor({ srcName, destName, parts, resolver })
  
      assert.strictEqual(typeof constructor.extend, 'function')
      assert.strictEqual(constructor.components.MyComponent, dependencies['./path/to/MyComponent.ractive.html'])
      assert.strictEqual(constructor.components.MyOtherComponent, dependencies['./path/to/MyOtherComponent.ractive.html'])
      assert.strictEqual(constructor.components.YetAnotherComponent, dependencies['./path/to/YetAnotherComponent.ractive.html'])
  
      const instance = constructor({ el: '#qunit-fixture', data: { a: 1, b: 2 } })
  
      assert.htmlEqual(instance.toHTML(), '')
      assert.strictEqual(instance.toCSS(), '/* Ractive.js component styles */')
      assert.strictEqual(instance.get('a'), 1)
      assert.strictEqual(instance.get('b'), 2)
    })
  })
  
  QUnit.test(`reference`, assert => {
    return fetch(`/base/test/samples/cjs/reference/component.ractive.html`).then(r => r.text()).then(source => {
      const dependencies = {
        'hhgttg': 42,
        './path/to/MyComponent.ractive.html': Ractive.extend({ template: '<div class="my-component">My Component</div>' }),
        './path/to/MyOtherComponent.ractive.html': Ractive.extend({ template: '<div class="my-other-component">My Other Component</div>' }),
        './path/to/YetAnotherComponent.ractive.html': Ractive.extend({ template: '<div class="yet-another-component">Yet Another Component</div>' })
      }
      const srcName = 'component.ractive.html'
      const destName = 'component.js'
      const parts = toParts(source)
      const resolver = id => dependencies[id]
      const constructor = toConstructor({ srcName, destName, parts, resolver })
  
      assert.strictEqual(typeof constructor.extend, 'function')
      assert.strictEqual(constructor.components.MyComponent, dependencies['./path/to/MyComponent.ractive.html'])
      assert.strictEqual(constructor.components.MyOtherComponent, dependencies['./path/to/MyOtherComponent.ractive.html'])
      assert.strictEqual(constructor.components.YetAnotherComponent, dependencies['./path/to/YetAnotherComponent.ractive.html'])
  
      const instance = constructor({ el: '#qunit-fixture', data: { a: 1, b: 2 } })
      const cssId = constructor.defaults.cssId
  
      assert.htmlEqual(instance.toHTML(), `<div data-ractive-css="{${cssId}}">Hello, World!</div> <div data-ractive-css="{${cssId}}">Answer to the Ultimate Question of Life, the Universe, and Everything: 42</div> <div data-ractive-css="{${cssId}}">Expression 3</div> <div class="my-component" data-ractive-css="{${cssId}}">My Component</div> <div class="my-other-component" data-ractive-css="{${cssId}}">My Other Component</div> <div class="yet-another-component" data-ractive-css="{${cssId}}">Yet Another Component</div>`)
      assert.strictEqual(instance.toCSS(), `/* Ractive.js component styles */\n\n/* {${cssId}} */\n\n  div[data-ractive-css~="{${cssId}}"], [data-ractive-css~="{${cssId}}"] div {\n    color: red\n  }\n`)
      assert.strictEqual(instance.get('user'), 'World')
      assert.strictEqual(instance.get('answer'), 42)
      assert.strictEqual(instance.get('a'), 1)
      assert.strictEqual(instance.get('b'), 2)
    })
  })
  
  QUnit.test(`reordered`, assert => {
    return fetch(`/base/test/samples/cjs/reordered/component.ractive.html`).then(r => r.text()).then(source => {
      const dependencies = {
        'hhgttg': 42,
        './path/to/MyComponent.ractive.html': Ractive.extend({ template: '<div class="my-component">My Component</div>' }),
        './path/to/MyOtherComponent.ractive.html': Ractive.extend({ template: '<div class="my-other-component">My Other Component</div>' }),
        './path/to/YetAnotherComponent.ractive.html': Ractive.extend({ template: '<div class="yet-another-component">Yet Another Component</div>' })
      }
      const srcName = 'component.ractive.html'
      const destName = 'component.js'
      const parts = toParts(source)
      const resolver = id => dependencies[id]
      const constructor = toConstructor({ srcName, destName, parts, resolver })
  
      assert.strictEqual(typeof constructor.extend, 'function')
      assert.strictEqual(constructor.components.MyComponent, dependencies['./path/to/MyComponent.ractive.html'])
      assert.strictEqual(constructor.components.MyOtherComponent, dependencies['./path/to/MyOtherComponent.ractive.html'])
      assert.strictEqual(constructor.components.YetAnotherComponent, dependencies['./path/to/YetAnotherComponent.ractive.html'])
  
      const instance = constructor({ el: '#qunit-fixture', data: { a: 1, b: 2 } })
      const cssId = constructor.defaults.cssId
  
      assert.htmlEqual(instance.toHTML(), `<div data-ractive-css="{${cssId}}">Hello, World!</div> <div data-ractive-css="{${cssId}}">Answer to the Ultimate Question of Life, the Universe, and Everything: 42</div> <div data-ractive-css="{${cssId}}">Expression 3</div> <div class="my-component" data-ractive-css="{${cssId}}">My Component</div> <div class="my-other-component" data-ractive-css="{${cssId}}">My Other Component</div> <div class="yet-another-component" data-ractive-css="{${cssId}}">Yet Another Component</div>`)
      assert.strictEqual(instance.toCSS(), `/* Ractive.js component styles */\n\n/* {${cssId}} */\n\n  div[data-ractive-css~="{${cssId}}"], [data-ractive-css~="{${cssId}}"] div {\n    color: red\n  }\n`)
      assert.strictEqual(instance.get('user'), 'World')
      assert.strictEqual(instance.get('answer'), 42)
      assert.strictEqual(instance.get('a'), 1)
      assert.strictEqual(instance.get('b'), 2)
    })
  })
  
  QUnit.test(`script-only`, assert => {
    return fetch(`/base/test/samples/cjs/script-only/component.ractive.html`).then(r => r.text()).then(source => {
      const dependencies = {
        'hhgttg': 42
      }
      const srcName = 'component.ractive.html'
      const destName = 'component.js'
      const parts = toParts(source)
      const resolver = id => dependencies[id]
      const constructor = toConstructor({ srcName, destName, parts, resolver })
  
      assert.strictEqual(typeof constructor.extend, 'function')
  
      const instance = constructor({ el: '#qunit-fixture', data: { a: 1, b: 2 } })
  
      assert.htmlEqual(instance.toHTML(), '')
      assert.strictEqual(instance.toCSS(), '/* Ractive.js component styles */')
      assert.strictEqual(instance.get('user'), 'World')
      assert.strictEqual(instance.get('answer'), 42)
      assert.strictEqual(instance.get('a'), 1)
      assert.strictEqual(instance.get('b'), 2)
    })
  })
  
  QUnit.test(`script-with-mustache`, assert => {
    return fetch(`/base/test/samples/cjs/script-with-mustache/component.ractive.html`).then(r => r.text()).then(source => {
      const srcName = 'component.ractive.html'
      const destName = 'component.js'
      const parts = toParts(source)
      const resolver = id => { throw new Error('THIS SHOULD NEVER BE CALLED') }
      const constructor = toConstructor({ srcName, destName, parts, resolver })
  
      assert.strictEqual(typeof constructor.extend, 'function')
  
      const instance = constructor({ el: '#qunit-fixture', data: { a: 1, b: 2 } })
  
      assert.htmlEqual(instance.toHTML(), '')
      assert.strictEqual(instance.toCSS(), '/* Ractive.js component styles */')
      assert.strictEqual(instance.get('a'), 1)
      assert.strictEqual(instance.get('b'), 2)
    })
  })
  
  QUnit.test(`style-only`, assert => {
    return fetch(`/base/test/samples/cjs/style-only/component.ractive.html`).then(r => r.text()).then(source => {
      const srcName = 'component.ractive.html'
      const destName = 'component.js'
      const parts = toParts(source)
      const resolver = id => { throw new Error('THIS SHOULD NEVER BE CALLED') }
      const constructor = toConstructor({ srcName, destName, parts, resolver })
  
      assert.strictEqual(typeof constructor.extend, 'function')
  
      const instance = constructor({ el: '#qunit-fixture', data: { a: 1, b: 2 } })
      const cssId = constructor.defaults.cssId
  
      assert.htmlEqual(instance.toHTML(), '')
      assert.strictEqual(instance.toCSS(), `/* Ractive.js component styles */\n\n/* {${cssId}} */\n\n  div[data-ractive-css~="{${cssId}}"], [data-ractive-css~="{${cssId}}"] div {\n    color: red\n  }\n`)
      assert.strictEqual(instance.get('a'), 1)
      assert.strictEqual(instance.get('b'), 2)
    })
  })
  
  QUnit.test(`style-with-mustache`, assert => {
    return fetch(`/base/test/samples/cjs/style-with-mustache/component.ractive.html`).then(r => r.text()).then(source => {
      const srcName = 'component.ractive.html'
      const destName = 'component.js'
      const parts = toParts(source)
      const resolver = id => { throw new Error('THIS SHOULD NEVER BE CALLED') }
      const constructor = toConstructor({ srcName, destName, parts, resolver })
  
      assert.strictEqual(typeof constructor.extend, 'function')
  
      const instance = constructor({ el: '#qunit-fixture', data: { a: 1, b: 2 } })
      const cssId = constructor.defaults.cssId
  
      assert.htmlEqual(instance.toHTML(), '')
      assert.strictEqual(instance.toCSS(), `/* Ractive.js component styles */\n\n/* {${cssId}} */\n\n  div[data-ractive-css~="{${cssId}}"], [data-ractive-css~="{${cssId}}"] div {\n    content: '{{uninterpolated}}'\n  }\n`)
      assert.strictEqual(instance.get('a'), 1)
      assert.strictEqual(instance.get('b'), 2)
    })
  })
  
  QUnit.test(`template-only`, assert => {
    return fetch(`/base/test/samples/cjs/template-only/component.ractive.html`).then(r => r.text()).then(source => {
      const srcName = 'component.ractive.html'
      const destName = 'component.js'
      const parts = toParts(source)
      const resolver = id => { throw new Error('THIS SHOULD NEVER BE CALLED') }
      const constructor = toConstructor({ srcName, destName, parts, resolver })
  
      assert.strictEqual(typeof constructor.extend, 'function')
  
      const instance = constructor({ el: '#qunit-fixture', data: { a: 1, b: 2 } })
  
      assert.htmlEqual(instance.toHTML(), `<div>Hello, !</div> <div>Answer to the Ultimate Question of Life, the Universe, and Everything: </div> <div>Expression 3</div> <MyComponent></MyComponent> <MyOtherComponent></MyOtherComponent> <YetAnotherComponent></YetAnotherComponent>`)
      assert.strictEqual(instance.toCSS(), '/* Ractive.js component styles */')
      assert.strictEqual(instance.get('a'), 1)
      assert.strictEqual(instance.get('b'), 2)
    })
  })
  