How to use the protractor.ExpectedConditions.visibilityOf function in protractor

await browser.wait(EC.visibilityOf(stepsPage.stepDetailsName));
            await browser.sleep(3000);
            // Add Merging Option for zip
            await masteringStepPage.clickMergeOptionsAddButton();
            await browser.wait(EC.visibilityOf(masteringStepPage.mergeOptionDialog));
            await masteringStepPage.clickMergeOptionDialogPropertyMenu();
            await browser.wait(EC.elementToBeClickable(masteringStepPage.mergeOptionDialogPropertyOptions("zip")));
            await masteringStepPage.clickMergeOptionDialogPropertyOption("zip");
            await masteringStepPage.setMergeOptionDialogMaxValues(1);
            await masteringStepPage.setMergeOptionDialogLength(10);
            await masteringStepPage.clickMergeOptionCancelSave("save");
            await browser.wait(EC.visibilityOf(stepsPage.stepDetailsName));
            await browser.sleep(3000);
            // Add onMerge Collection
            await masteringStepPage.clickMergeCollectionsAddButton();
            await browser.wait(EC.visibilityOf(masteringStepPage.mergeCollectionDialog));
            await masteringStepPage.clickMergeCollectionDialogEventMenu();
            await browser.wait(EC.elementToBeClickable(masteringStepPage.mergeCollectionDialogEventOptions("onMerge")));
            await masteringStepPage.clickMergeCollectionDialogEventOptions("onMerge")
            await masteringStepPage.setCollectionToSet(0, "customer-merge");
            await masteringStepPage.clickMergeCollectionCancelSaveButton("save");
            await browser.wait(EC.visibilityOf(stepsPage.stepDetailsName));
            await browser.sleep(3000);
            // Add onNotification Collection
            await masteringStepPage.clickMergeCollectionsAddButton();
            await browser.wait(EC.visibilityOf(masteringStepPage.mergeCollectionDialog));
            await masteringStepPage.clickMergeCollectionDialogEventMenu();
            await browser.wait(EC.elementToBeClickable(masteringStepPage.mergeCollectionDialogEventOptions("onNotification")));
            await masteringStepPage.clickMergeCollectionDialogEventOptions("onNotification")
            await masteringStepPage.setCollectionToSet(0, "customer-notify");
            await masteringStepPage.clickMergeCollectionCancelSaveButton("save");
            await browser.wait(EC.visibilityOf(stepsPage.stepDetailsName));

async loginToIdP(username: string, password: string) {
    // Entering non angular site, tell webdriver to switch to synchronous mode.
    await browser.waitForAngularEnabled(false);
    await browser.wait(ec.visibilityOf(this.username));

    if (await this.username.isPresent()) {
      await this.username.sendKeys(username);
      await this.password.sendKeys(password);
      await this.loginButton.click();
      if (!(await this.username.isPresent())) {
        await browser.waitForAngularEnabled(true);
      }
    } else {
      // redirected back because already logged in
      await browser.waitForAngularEnabled(true);
    }
  }

addNewText(title: any, usx: string) {
    expect(this.newText.showFormButton.isDisplayed()).toBe(true);
    this.newText.showFormButton.click();
    browser.wait(ExpectedConditions.visibilityOf(this.newText.title), Utils.conditionTimeout);
    this.newText.title.sendKeys(title);
    this.newText.usx.sendKeys(usx);
    this.newText.saveButton.click();
  }

public async show(): Promise {
    await browser.get(this.url);

    await browser.wait(ExpectedConditions.visibilityOf(this._processListContainer), browser.params.defaultTimeoutMS);
  }

it('validate step jobs', async function () {
      await appPage.flowsTab.click();
      await browser.wait(EC.visibilityOf(manageFlowPage.flowName("SimpleJSONFlow")));
      await manageFlowPage.clickLastJobFinished("SimpleJSONFlow");
      await browser.wait(EC.visibilityOf(jobDetailsPage.jobDetailsPageHeader));
      await browser.wait(EC.visibilityOf(jobDetailsPage.jobSummary));
      await browser.wait(EC.visibilityOf(jobDetailsPage.jobDetailsTable));
      await expect(jobDetailsPage.jobSummaryFlowName.getText()).toEqual("SimpleJSONFlow");
      await expect(jobDetailsPage.jobSummaryJobId.getText()).not.toBeNull;
      await expect(jobDetailsPage.stepName("SimpleJSONMastering").getText()).toEqual("SimpleJSONMastering");
      await expect(jobDetailsPage.stepStatus("SimpleJSONMastering").getText()).toEqual("Completed step 3");
      await expect(jobDetailsPage.stepCommitted("SimpleJSONMastering").getText()).toEqual("6");
      await jobDetailsPage.clickStepCommitted("SimpleJSONMastering");
    });

it('validate new mapping step fields', async function () {
      await browser.wait(EC.elementToBeClickable(editFlowPage.newStepButton));
      await editFlowPage.clickNewStepButton();
      await browser.wait(EC.visibilityOf(stepsPage.stepDialogBoxHeader("New Step")));
      await stepsPage.clickStepTypeDropDown();
      await browser.wait(EC.visibilityOf(stepsPage.stepTypeOptions("Mapping")));
      await stepsPage.clickStepTypeOption("Mapping");
      await browser.wait(EC.visibilityOf(stepsPage.stepName));
      await expect(stepsPage.stepName.isDisplayed()).toBe(true);
      await expect(stepsPage.stepDescription.isDisplayed()).toBe(true);
      await expect(stepsPage.stepSourceTypeRadioButton("collection").isDisplayed()).toBe(true);
      await expect(stepsPage.stepSourceTypeRadioButton("query").isDisplayed()).toBe(true);
      await stepsPage.clickSourceTypeRadioButton("query");
      await expect(stepsPage.stepSourceQuery.isDisplayed()).toBe(true);
      await stepsPage.clickSourceTypeRadioButton("collection");
      await expect(stepsPage.stepSourceCollectionDropDown.isDisplayed()).toBe(true);
      await expect(stepsPage.stepTargetEntityDropDown.isDisplayed()).toBe(true);
    });

async waitForVisible(): Promise {
    await browser.wait(EC.visibilityOf(this.rootElement), 10000, `element ${this.rootElement.locator()} not visible`);
  }

async removeStep(stepName: string) {
    await this.clickStepSelectContainerDeleteButton(stepName);
    await browser.wait(EC.visibilityOf(manageFlowPage.deleteFlowHeader));
    await browser.sleep(1000);
    await manageFlowPage.clickDeleteConfirmationButton("YES");
    await browser.sleep(1000);
    await browser.wait(EC.invisibilityOf(manageFlowPage.deleteFlowHeader));
  }

xit('should login and go to flows page', async function () {
      await loginPage.setCurrentFolder(qaProjectDir);
      await loginPage.clickNext('ProjectDirTab');
      await browser.wait(EC.elementToBeClickable(loginPage.environmentTab));
      await loginPage.clickNext('EnvironmentTab');
      await browser.wait(EC.visibilityOf(loginPage.loginTab));
      await loginPage.login();
      await appPage.flowsTab.click();
      await browser.wait(EC.visibilityOf(manageFlowPage.newFlowButton));
    });

}
    if (flow.threadCount != null) {
      await manageFlowPage.setFlowForm("thread-count", flow.threadCount);
    }
    if (flow.options != null) {
      for (let n of flow.options) {
        await manageFlowPage.addOptions.click();
        await manageFlowPage.setFlowOptions(n, "key", flow.options.n[0]);
        await manageFlowPage.setFlowOptions(n, "value", flow.options.n[1]);
      }
    }
    await browser.wait(EC.elementToBeClickable(manageFlowPage.flowCancelSaveButton('save')));
    await manageFlowPage.clickFlowCancelSave("save");
    await browser.wait(EC.invisibilityOf(manageFlowPage.flowDialogBox));
    await browser.wait(EC.visibilityOf(manageFlowPage.manageFlowPageHeader));
    await browser.wait(EC.visibilityOf(manageFlowPage.flowName(flow.flowName)));
    await expect(manageFlowPage.flowName(flow.flowName).getText()).toEqual(flow.flowName);
    await browser.sleep(3000);
  }