import { moduleForProperty } from '../../../helpers/properties';
import { create, exists } from 'ember-cli-page-object';

moduleForProperty('exists', function(test) {
  test('returns true when the element is visible', function(assert) {
    let page = create({
      foo: exists('span')
    });

    this.adapter.createTemplate(this, page, 'Lorem <span>ipsum</span>');

    assert.ok(page.foo);
  });

  test('returns true when the element is hidden', function(assert) {
    let page = create({
      foo: exists('span')
    });

    this.adapter.createTemplate(this, page, 'Lorem <span style="display:none">ipsum</span>');

    assert.ok(page.foo);
  });

  test('returns false when the element doesn\'t exist', function(assert) {
    let page = create({
      foo: exists('span')
    });

    this.adapter.createTemplate(this, page);

    assert.ok(!page.foo);
  });

  test('looks for elements inside the scope', function(assert) {
    let page = create({
      foo: exists('span', { scope: '.scope', at: 0 })
    });

    this.adapter.createTemplate(this, page, `
      <div><span style="display:none">lorem</span></div>
      <div class="scope"><span>ipsum</span></div>
    `);

    assert.ok(page.foo);
  });

  test("looks for elements inside page's scope", function(assert) {
    let page = create({
      scope: '.scope',

      foo: exists('span', { at: 0 })
    });

    this.adapter.createTemplate(this, page, `
      <div><span style="display:none">lorem</span></div>
      <div class="scope"><span>ipsum</span></div>
    `);

    assert.ok(page.foo);
  });

  test('resets scope', function(assert) {
    let page = create({
      scope: '.scope',

      foo: exists('span', { resetScope: true, at: 0 })
    });

    this.adapter.createTemplate(this, page, `
      <div><span>lorem</span></div>
      <div class="scope"><span style="display:none">ipsum</span></div>
    `);

    assert.ok(page.foo);
  });

  test('throws error if selector matches more than one element', function(assert) {
    let page = create({
      foo: exists('span')
    });

    this.adapter.createTemplate(this, page, `
      <span>lorem</span>
      <span> ipsum </span>
      <span>dolor</span>
    `);

    assert.throws(() => page.foo,
      /matched more than one element. If this is not an error use { multiple: true }/);
  });

  test('matches multiple elements with multiple: true option, return true if not all elements are visible', function(assert) {
    let page = create({
      foo: exists('span', { multiple: true })
    });

    this.adapter.createTemplate(this, page, `
      <span>lorem</span>
      <span style="display:none"> ipsum </span>
      <span>dolor</span>
    `);

    assert.ok(page.foo);
  });

  test('matches multiple elements with multiple: true option, return true if all elements are visible', function(assert) {
    let page = create({
      foo: exists('span', { multiple: true })
    });

    this.adapter.createTemplate(this, page, `
      <span>lorem</span>
      <span>dolor</span>
    `);

    assert.ok(page.foo);
  });

  test('finds element by index', function(assert) {
    let page = create({
      foo: exists('em', { at: 0 }),
      bar: exists('em', { at: 2 })
    });

    this.adapter.createTemplate(this, page, `
      <em style="display:none">lorem</em>
      <em style="display:none">ipsum</em>
      <em>dolor</em>
    `);

    assert.ok(page.foo);
    assert.ok(page.bar);
  });

  test('looks for elements outside the testing container', function(assert) {
    let page = create({
      foo: exists('span', { testContainer: '#alternate-ember-testing' })
    });

    // FIXME the order we call createTemplate here is important! (it shouldn't, that's why there's a FIXME tag)
    this.adapter.createTemplate(this, page, '<span>ipsum</span>', { useAlternateContainer: true });
    this.adapter.createTemplate(this, page, '<span style="display:none">ipsum</span>');

    assert.ok(page.foo);
  });

  test('looks for elements within test container specified at node level', function(assert) {
    let page = create({
      testContainer: '#alternate-ember-testing',
      foo: exists('span')
    });

    // FIXME the order we call createTemplate here is important! (it shouldn't, that's why there's a FIXME tag)
    this.adapter.createTemplate(this, page, '<span>ipsum</span>', { useAlternateContainer: true });
    this.adapter.createTemplate(this, page, '<span style="display:none">ipsum</span>');

    assert.ok(page.foo);
  });
});

@@ -1077,37 +1077,16 @@
 iv%3E%3Cspan
- style=%22display:none%22
 %3Elorem%3C/
@@ -1089,32 +1089,32 @@
 em%3C/span%3E%3C/div%3E%0A
+
       %3Cdiv class
@@ -1412,37 +1412,16 @@
 iv%3E%3Cspan
- style=%22display:none%22
 %3Elorem%3C/
@@ -1789,37 +1789,16 @@
 e%22%3E%3Cspan
- style=%22display:none%22
 %3Eipsum%3C/
@@ -2318,440 +2318,8 @@
 tion
-, return true if not all elements are visible', function(assert) %7B%0A    let page = create(%7B%0A      foo: exists('span', %7B multiple: true %7D)%0A    %7D);%0A%0A    this.adapter.createTemplate(this, page, %60%0A      %3Cspan%3Elorem%3C/span%3E%0A      %3Cspan style=%22display:none%22%3E ipsum %3C/span%3E%0A      %3Cspan%3Edolor%3C/span%3E%0A    %60);%0A%0A    assert.ok(page.foo);%0A  %7D);%0A%0A  test('matches multiple elements with multiple: true option, return true if all elements are visible
 ', f
@@ -2478,32 +2478,59 @@
 an%3Elorem%3C/span%3E%0A
+      %3Cspan%3E ipsum %3C/span%3E%0A
       %3Cspan%3Edolo
@@ -2794,98 +2794,35 @@
  %3Cem
- style=%22display:none%22%3Elorem%3C/em%3E%0A      %3Cem style=%22display:none%22%3Eipsum%3C/em%3E%0A      %3Cem%3Edolor
+%3Elorem%3C/em%3E%0A      %3Cem%3Eipsum
 %3C/em
@@ -2867,24 +2867,25 @@
   assert.ok(
+!
 page.bar);%0A 
@@ -3336,37 +3336,16 @@
 , '%3Cspan
- style=%22display:none%22
 %3Eipsum%3C/
@@ -3792,32 +3792,32 @@
 ainer: true %7D);%0A
+
     this.adapter
@@ -3850,37 +3850,16 @@
 , '%3Cspan
- style=%22display:none%22
 %3Eipsum%3C/

Clean up test