import EmberObject from '@ember/object';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { setupIntl } from 'ember-intl/test-support';
import { render, click } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module('Integration | Component | dashboard/SelectedTermTree', function (hooks) {
  setupRenderingTest(hooks);
  setupIntl(hooks, 'en-us');

  const tree = [
    EmberObject.create({
      id: 1,
      title: 'top 1',
      children: [],
    }),
    EmberObject.create({
      id: 2,
      title: 'top 2',
      children: [
        EmberObject.create({
          id: 3,
          title: 'top 2 child 1',
          children: [],
        }),
      ],
    }),
  ];

  test('it renders a tree', async function (assert) {
    this.set('tree', tree);
    this.set('selectedTermIds', [3]);
    await render(hbs`<Dashboard::SelectedTermTree
      @terms={{this.tree}}
      @selectedTermIds={{this.selectedTermIds}}
      @add={{(noop)}}
      @remove={{(noop)}}
    />`);
    const topTerms = 'ul:nth-of-type(1) > li';
    const firstTopTerm = `${topTerms}:nth-of-type(1)`;
    const firstTopTermCheckbox = `${firstTopTerm} input`;
    const secondTopTerm = `${topTerms}:nth-of-type(2)`;
    const firstTopTermChildren = `${firstTopTerm} ul > li`;
    const secondTopTermChildren = `${secondTopTerm} ul > li`;
    const secondTopTermFirstChildCheckbox = `${secondTopTermChildren}:nth-of-type(1) input`;

    assert.dom(firstTopTerm).hasText('top 1');
    assert.dom(firstTopTermCheckbox).isNotChecked();
    assert.dom(secondTopTerm).hasText('top 2 top 2 child 1');
    assert.dom(firstTopTermChildren).doesNotExist();
    assert.dom(secondTopTermChildren).hasText('top 2 child 1');
    assert.dom(secondTopTermFirstChildCheckbox).isChecked();
  });

  test('clicking unchecked checkbox fires add', async function (assert) {
    assert.expect(1);
    this.set('tree', tree);
    this.set('add', (id) => {
      assert.strictEqual(id, 1);
    });
    await render(hbs`<Dashboard::SelectedTermTree
      @terms={{this.tree}}
      @selectedTermIds={{(array)}}
      @add={{this.add}}
      @remove={{(noop)}}
    />`);
    await click('[data-test-target]:nth-of-type(1)');
  });

  test('clicking checked checkbox fires add', async function (assert) {
    assert.expect(1);
    this.set('tree', tree);
    this.set('selectedTermIds', [1]);
    this.set('remove', (id) => {
      assert.strictEqual(id, 1);
    });
    await render(hbs`<Dashboard::SelectedTermTree
      @terms={{this.tree}}
      @selectedTermIds={{this.selectedTermIds}}
      @add={{(noop)}}
      @remove={{this.remove}}
    />`);
    await click('[data-test-target]:nth-of-type(1)');
  });
});

@@ -1,45 +1,4 @@
-import EmberObject from '@ember/object';%0A
 impo
@@ -232,16 +232,77 @@
 ompile';
+%0Aimport %7B setupMirage %7D from 'ember-cli-mirage/test-support';
 %0A%0Amodule
@@ -439,63 +439,173 @@
 ');%0A
-%0A
   
-const tree = %5B%0A    EmberObject.create(%7B%0A      id: 1,
+setupMirage(hooks);%0A%0A  hooks.beforeEach(async function () %7B%0A    const vocabulary = this.server.create('vocabulary');%0A    const term1 = this.server.create('term', %7B
 %0A   
@@ -633,28 +633,26 @@
     
-children: %5B%5D
+vocabulary
 ,%0A    %7D)
 ,%0A  
@@ -651,224 +651,446 @@
   %7D)
-,
+;
 %0A    
-EmberObject.create(%7B%0A      id: 2,%0A      title: 'top 2',%0A      children: %5B%0A        EmberObject.create(%7B%0A          id: 3,%0A          title: 'top 2 child 1',%0A          children: %5B%5D,%0A        %7D),%0A      %5D,%0A    %7D),%0A  %5D
+const term2 = this.server.create('term', %7B%0A      title: 'top 2',%0A      vocabulary,%0A    %7D);%0A    this.server.create('term', %7B%0A      title: 'top 2 child 1',%0A      parent: term2,%0A      vocabulary,%0A    %7D);%0A    const termModel1 = await this.owner.lookup('service:store').find('term', term1.id);%0A    const termModel2 = await this.owner.lookup('service:store').find('term', term2.id);%0A    this.topLevelTerms = %5BtermModel1, termModel2%5D;%0A  %7D)
 ;%0A%0A 
@@ -1153,34 +1153,49 @@
  this.set('t
-ree', tree
+erms', this.topLevelTerms
 );%0A    this.
@@ -1222,9 +1222,11 @@
 ', %5B
-3
+'3'
 %5D);%0A
@@ -1288,35 +1288,36 @@
  @terms=%7B%7Bthis.t
-ree
+erms
 %7D%7D%0A      @select
@@ -2294,34 +2294,49 @@
  this.set('t
-ree', tree
+erms', this.topLevelTerms
 );%0A    this.
@@ -2377,33 +2377,35 @@
 strictEqual(id, 
-1
+'1'
 );%0A    %7D);%0A    a
@@ -2462,35 +2462,36 @@
  @terms=%7B%7Bthis.t
-ree
+erms
 %7D%7D%0A      @select
@@ -2745,18 +2745,33 @@
 t('t
-ree', tree
+erms', this.topLevelTerms
 );%0A 
@@ -2802,17 +2802,19 @@
 mIds', %5B
-1
+'1'
 %5D);%0A    
@@ -2871,17 +2871,19 @@
 ual(id, 
-1
+'1'
 );%0A    %7D
@@ -2956,19 +2956,20 @@
 %7B%7Bthis.t
-ree
+erms
 %7D%7D%0A     

use mirage for test fixtures.