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

export const clickRevealValues = async () => {
  await browser.wait(until.presenceOf(revealValuesButton));
  await revealValuesButton.click();
};

export const clickListPageCreateYAMLButton = async () => {
  const createDropdownIsPresent = await createItemButton.isPresent();
  if (createDropdownIsPresent) {
    await createItemButton.click();
    await createYAMLLink.click();
  } else {
    await browser.wait(until.presenceOf(createYAMLButton));
    await createYAMLButton.click();
  }
  await browser.wait(
    until.and(
      untilNoLoadersPresent,
      until.presenceOf(element(by.cssContainingText('h1', 'Create'))),
    ),
  );
};

export const addApplicationWithExistingApps = async function(name: string, nodeName: string) {
  await applicationSelector.click();
  await browser.wait(until.presenceOf(applicationDropdown));
  await createApplication.click();
  await applicationNameField.click();
  await safeSendKeys(applicationName, 'applicationName', name);
  await safeSendKeys(appName, 'appName', nodeName);
};

it('should be able to log in and log out', async () => {
        await page.navigateTo();
        await page.logInWithDefaultCredentials();
        await browser.wait(ExpectedConditions.presenceOf(element(by.css('.roster-list[data-ngx-chat-state="online"]'))), 5000);
        await page.logOut();
        await browser.wait(ExpectedConditions.not(ExpectedConditions.presenceOf(element(by.css('.roster-list')))), 5000);
    });
});

async waitForMenuToOpen() {
    await browser.wait(EC.presenceOf(browser.element(by.css('.cdk-overlay-container .mat-menu-panel'))), BROWSER_WAIT_TIMEOUT);
    await browser.wait(EC.visibilityOf(this.items.get(0)), BROWSER_WAIT_TIMEOUT);
  }

async waitForSelector(el: ElementFinder) {
    return browser.wait(ExpectedConditions.presenceOf(el), 3000);
  }

it('test second hour week gr', async () => {
            const grEl = element.all(by.tagName('jigsaw-tile-option')),
                clockEl = element(by.css('.list-unstyled .accordion-toggle .glyphicon-time')),
                activeWeekEl = element(by.css('.datepicker-days .table-condensed .active'));
            grEl.get(0).click();
            clockEl.click();
            await browser.wait(ExpectedConditions.presenceOf(element(by.css('.timepicker-hour'))));
            expect(element(by.css('.timepicker-second')).getAttribute('TITLE')).toBe('Pick Second');
            grEl.get(2).click();
            clockEl.click();
            await browser.wait(ExpectedConditions.presenceOf(element(by.css('.timepicker-hour'))));
            expect(element(by.css('.timepicker-hour')).getAttribute('TITLE')).toBe('Pick Hour');
            grEl.get(4).click();
            expect(activeWeekEl.all(by.tagName('TD')).get(0).getCssValue('background-color')).toBe('rgba(65, 173, 220, 1)');
            expect(activeWeekEl.all(by.tagName('TD')).get(6).getCssValue('background-color')).toBe('rgba(65, 173, 220, 1)');
        })
    });

it('has working blog delete', (done) => {
      browser.wait(
        ExpectedConditions.presenceOf(element(by.css('.fa-trash'))),
        5000
      );
      element.all(by.css('.fa-trash'))
        .then(items => {
          const deleteBtn: ElementFinder = items[6];
          expect(deleteBtn.isDisplayed()).toBe(true);
          deleteBtn.click();
          browser.wait(
            ExpectedConditions.invisibilityOf(deleteBtn),
            5000
          );
          expect(deleteBtn.isPresent()).toBe(false);
          done();
        });
    });
  });

it('should change language', async () => {
    await browser.get('/demo/language-switch');
    const elm = element(by.tagName('canvas'));
    await browser.wait(EC.presenceOf(elm), 2000);
    const buttons = element.all(by.className('lang-button'));
    await browser.sleep(4000);
    await buttons.get(0).click();
    await browser.sleep(2000);
    const screen1 = await browser.takeScreenshot();
    await buttons.get(1).click();
    await browser.sleep(2000);
    const screen2 = await browser.takeScreenshot();
    const result = new PixelDiff({
      imageA: Buffer.from(screen1, 'base64'),
      imageB: Buffer.from(screen2, 'base64')
    }).runSync();
    expect(result.differences).toBeGreaterThan(0);
    await buttons.get(0).click();
    await browser.sleep(2000);
    const screen1bis = await browser.takeScreenshot();

export const waitForElementToBePresent = createBrowserExpectationAwaiter(EC.presenceOf.name, finder =>
  EC.presenceOf(finder),
)