marko/packages/runtime-class/test/components-browser/fixtures/event-attach-if-else-nested-component/test.js

var expect = require("chai").expect;

module.exports = function (helpers) {
  var colors = ["blue", "green", "red"];
  var component = helpers.mount(require.resolve("./index"), {
    color: colors[0],
  });

  if (helpers.isHydrate) {
    // When hydrating, the first color item was rendered on the
    // server so there is no corresponding attach event f
    // we'll push an empty event so the indexes line up
    component.events.push(null);
  } else {
    expect(component.events.length).to.equal(1);
    expect(component.events[0].color).to.equal("blue");
    expect(component.events[0].node).to.equal(
      component.el.querySelectorAll("li")[0],
    );
  }

  component.input = { color: colors[1] };
  component.update();

  expect(component.events.length).to.equal(2);
  expect(component.events[1].color).to.equal(colors[1]);
  expect(component.events[1].node).to.equal(
    component.el.querySelectorAll("li")[0],
  );

  component.input = { color: colors[2] };
  component.update();

  expect(component.events.length).to.equal(3);
  expect(component.events[2].color).to.equal(colors[2]);
  expect(component.events[2].node).to.equal(
    component.el.querySelectorAll("li")[0],
  );

  component.input = { color: colors[0] };
  component.update();

  expect(component.events.length).to.equal(4);
  expect(component.events[3].color).to.equal(colors[0]);
  expect(component.events[3].node).to.equal(
    component.el.querySelectorAll("li")[0],
  );

  component.input = { color: colors[2] };
  component.update();

  expect(component.events.length).to.equal(5);
  expect(component.events[4].color).to.equal(colors[2]);
  expect(component.events[4].node).to.equal(
    component.el.querySelectorAll("li")[0],
  );
};