How to properly write a test for menu selection with protractor?

Question

I am trying to understand how to connect events in protractor testing. I have a minimised example below, where the test passes if the second browser.sleep (browser.sleep(3000)) is included. Since the promise from the click-event (element(by.tagName('mat-form-field)).click()) should now have been resolved. I wonder why the test is not passing.

Could it be because the promise is resolved at the moment just after the click, so after the click event but before the completion of the actions it triggers? (showing of dropdown menu with delay)

if this is the case, how should I create a test that waits until the selection-menu is visible before progressing to select an option from the menu?

related question: Selecting a element in a drop-down menu in protractor

import {browser, by, element} from 'protractor';

describe('workspace-project App', () => {
  
    it('should select', () => {
      browser.get('http://localhost:4200/test').then(() => {
          // browser.sleep(4000);
          element(by.tagName('mat-form-field')).click().then(() => {
            // browser.sleep(3000);
            element.all(by.css('span.mat-option-text')).getText().then((values) => {
              element.all(by.css('span.mat-option-text')).filter((elem, index) => {
                return elem.getText().then((text) => {
                  return values[1] === text;
                });
              }).first().click();
              browser.sleep(2000);
            });
          });
        });
      });
});

<p>
  <mat-form-field>
    <mat-select [(value)]="selected">
      <mat-option>None</mat-option>
      <mat-option value="option1">Option 1</mat-option>
      <mat-option value="option2">Option 2</mat-option>
      <mat-option value="option3">Option 3</mat-option>
    </mat-select>
  </mat-form-field>
</p>

Answer 1

If you want to wait for element before performing an action, you should use: http://www.protractortest.org/#/api?view=ProtractorExpectedConditions.prototype.visibilityOf

element.all(by.css('span.mat-option-text')).getText().then((values) => {
  element.all(by.css('span.mat-option-text')).filter((elem, index) => {
    return elem.getText().then((text) => {
      return values[1] === text;
    });
  }).first().click();
});

This part of code should be replaced. Right now you are trying to perform getText() on ElementArrayFinder. You are allowed to do it on ElementFinder. Moreover you are looping over those ElementArrayFinder twice. In filter() you are definig index but don't use it anywhere. Index is optional parameter - if you don't plan to use it - ommit it.

values[1] === text; - If you want to choose option2 try:

import {browser, by, element} from 'protractor';

describe('workspace-project App', () => {
  it('should select', () => {
    return browser.get('http://localhost:4200/test').then(() => {
      return element(by.tagName('mat-form-field')).click().then(() => {
        //add Expected Condition here
        return element(by.css('mat-option[value="option2"]')).click();
      });
    });
  });
});

Answer 2

An expectation for checking that an element is present on the DOM of a page and visible. Visibility means that the element is not only displayed but also has a height and width that is greater than 0. This is the opposite of 'invisibilityOf'.