How to use simulant - 10 common examples

test('Regression test for #2046', t => {
    t.expect(1);

    const ractive = new Ractive({
      el: fixture,
      template: '<button>{{eventName}}</button>',
      data: { eventName: 'foo' },
      onClick(eventName) {
        t.equal(eventName, 'foo');
      }
    });

    // this should have no effect
    const el = ractive.find('button');
    fire(el, 'click');
  });

test('cancels reorder and restores list to initial order when escape is pressed', t => {
  t.plan(3);

  const item = ddWithDragger.handles[0];
  item.click(); // press it

  const e = simulant('keydown', { which: 40 }); // down

  fire(item, e);
  t.is(queryAll('button', ddWithDragger.container).indexOf(item), 1);

  const event = simulant('keydown', { which: 27 });
  fire(item, event);
  t.is(queryAll('button', ddWithDragger.container).indexOf(item), 0);
  t.is(item.getAttribute('aria-pressed'), 'false');
});

test('clicks dragger when ENTER is pressed', t => {
  t.plan(1);

  const item = ddWithoutDragger.items[1];
  const onItemClick = () => {
    item.removeEventListener('click', onItemClick);
    item.click(); // unpress it
    t.pass();
  };
  item.addEventListener('click', onItemClick);

  const e = simulant('keydown', { which: 13 });
  fire(item, e);

});

test('Contenteditable elements can be bound with a bindable contenteditable attribute.', t => {
      const ractive = new Ractive({
        el: fixture,
        template:
          '<div value="{{content}}"><strong>some content</strong></div>',
        data: { editable: false }
      });

      const div = ractive.find('div');
      div.innerHTML = 'foo';
      fire(div, 'change');

      t.equal(div.innerHTML, ractive.get('content'));
      t.equal(ractive.get('content'), 'foo');
    });
  } catch (err) {

test(`the event directive's node is exposed as @node`, t => {
    const r = new Ractive({
      target: fixture,
      template: `{{#with foo}}<input>{{/with}}`,
      data: { foo: {} }
    });

    const input = r.find('input');
    input.value = 'yep';
    fire(input, 'change');

    t.equal(r.get('foo.bar'), 'yep');
  });

test('Two-way bindings work with index references', t => {
    const ractive = new Ractive({
      el: fixture,
      template: '{{#items:i}}<label><input value="{{items[i].name}}"> {{name}}</label>{{/items}}',
      data: { items: [{ name: 'foo' }, { name: 'bar' }] }
    });

    const input = ractive.find('input');

    input.value = 'baz';
    fire(input, 'change');
    t.equal(ractive.get('items[0].name'), 'baz');
    t.htmlEqual(fixture.innerHTML, '<label><input> baz</label><label><input> bar</label>');
  });

test('Contenteditable works with lazy: true (#1933)', t => {
    const ractive = new Ractive({
      el: fixture,
      template: '<div value="{{value}}"></div>',
      lazy: true
    });

    const div = ractive.find('div');
    div.innerHTML = 'foo';

    fire(div, 'blur');
    t.equal(ractive.get('value'), 'foo');
  });

test(`delegated method event`, t => {
    const r = new Ractive({
      target: fixture,
      template: `<div>{{#each [1]}}{{#with ~/foo}}<div>{{/with}}{{/each}}</div>`,
      data: { foo: {} }
    });

    const div = r.findAll('div')[1];
    fire(div, 'click');
    t.equal(r.get('foo.bar'), 42);
  });
</div>

it('should filter handlers', () => {
    const span = document.getElementsByTagName('span')[0],
      sibling = document.getElementById('item-3'),
      parent = document.getElementById('item-1'),
      filtered = sinon.spy(),
      handler = sinon.spy()

    evt.addEventListener(parent, 'click', handler)
    evt.addEventListener(parent, 'click', evt.filter('#item-2', filtered))

    simulant.fire(span, 'click')
    simulant.fire(sibling, 'click')

    expect(filtered.callCount).to.equal(1)
    expect(handler.callCount).to.equal(2)
  })
})

it('should add an event listener', done => {
    const el = document.getElementById('item-2')

    evt.addEventListener(el, 'click', () => done())

    simulant.fire(el, 'click')
  })