import { expect } from 'chai';

class {
    onMount() {
        var components = window.components || (window.components = {});
        components['two-args'] = this;
    }
	handleColorClick(color, type) {
		this.color = { color: color, type: type };
	}

    test(helpers) {
        var liEls = this.el.querySelectorAll('ul.primary li');

        helpers.triggerMouseEvent(liEls[0], 'click');
        expect(this.color).to.deep.equal({color: 'red', type: 'primary'});

        helpers.triggerMouseEvent(liEls[1], 'click');
        expect(this.color).to.deep.equal({color: 'green', type: 'primary'});

        helpers.triggerMouseEvent(liEls[2], 'click');
        expect(this.color).to.deep.equal({color: 'blue', type: 'primary'});

        liEls = this.el.querySelectorAll('ul.secondary li');

        helpers.triggerMouseEvent(liEls[0], 'click');
        expect(this.color).to.deep.equal({color: 'red', type: 'secondary'});

        helpers.triggerMouseEvent(liEls[1], 'click');
        expect(this.color).to.deep.equal({color: 'green', type: 'secondary'});

        helpers.triggerMouseEvent(liEls[2], 'click');
        expect(this.color).to.deep.equal({color: 'blue', type: 'secondary'});
    }
}

<div>
    <ul.primary>
        <li for(color in input.colors) onClick("handleColorClick", color, 'primary')>
			${color}
		</li>
    </ul>
    <ul.secondary>
        <li for(color in input.colors) onClick("handleColorClick", color, 'secondary')>
			${color}
		</li>
    </ul>
</div>
