protractor if I have many buttons with an ng-click to add them to a collection, how can I test that it adds them correctly?

Question

I am making a flower pot application, where you add flowers to it.

So imagine on the page, there are a bunch of flowers, and you can click on some + button to add those flowers to your flower pot.

Each button is basically the following -

<button ng-click="model.addToFlowerPot(flower)">Add</button>

Right now, I have maybe a dozen flowers from my flowerArray (flower in flowers) and I'm just using a repeater to show them all.

How can I tell protractor to only test one of those buttons to make sure that flower is added to the flowerPot?

I'm not entirely sure after reading http://www.protractortest.org/#/locators

Thanks

Answer 1

From what I understand, first you need to locate the flowers, this is what by.repeater() locator can help with:

var flowers = element(by.repeater("flower in flowers"));

Then, you choose what flower you want to work with. Let's say the first one:

var flower = flowers.first();  // or flowers.get(0);

Then, you can locate the "Add" button by text:

var addButton = flower.element(by.buttonText("Add"));
addButton.click();

---

You can also do that for every flower in the repeater using each():

flowers.each(function (flower) {
    var addButton = flower.element(by.buttonText("Add"));
    addButton.click();
});