How to use the cypress-cucumber-preprocessor/steps.When function in cypress-cucumber-preprocessor

cy.get('#website-url-for-grant-or-program-information').type(sampleFormSubmission.infoUrl)
    cy.get('#contact-person').type(sampleFormSubmission.contactName)
    cy.get('[for="department-agency-or-provider-organisation"] + div .rpl-select__trigger').click()
    cy.get('[for="department-agency-or-provider-organisation"] + div .rpl-select__listbox').type('{downarrow}')
    cy.get('[for="department-agency-or-provider-organisation"] + div .rpl-select__trigger').click()

    cy.get('#contact-email-address').type(sampleFormSubmission.contactEmail)
    cy.get('#contact-telephone-number').type(sampleFormSubmission.contactPhone)

    if (sampleFormSubmission.acknowledge === 'TRUE') {
      cy.get('[id^="agree-privacy-statement-"]').check({ force: true })
    }
  })
})

When('I submit the form', () => {
  cy.fixture('/Forms/Grant/tc9c_submission.json').as('formSubmissionResponse')
  cy.server() // enable response stubbing
  cy.route('POST', '/api/v1/webform_submission/tide_grant_submission', '@formSubmissionResponse').as('formSubmissionRequest')
  cy.get('form.rpl-form').first().submit()
  cy.get('@formSubmissionRequest').then(submissionData => {
    cy.log(submissionData)
  })
})

Then('I should see the form success message', () => {
  cy.get('.rpl-form-alert', { timeout: 10000 }).should('have.class', 'rpl-form-alert--success')
})
Then('I should see the failure message', () => {
  cy.get('.rpl-form-alert', { timeout: 10000 }).should('have.class', 'rpl-form-alert--error')
})

import { When, Then } from "cypress-cucumber-preprocessor/steps";

/* global cy */

When("I visit my profile page", () => {
  cy.openPage("profile/peter-pan");
});

Then("I should be able to change my profile picture", () => {
  const avatarUpload = "onourjourney.png";

  cy.fixture(avatarUpload, "base64").then(fileContent => {
    cy.get("#customdropzone").upload(
      { fileContent, fileName: avatarUpload, mimeType: "image/png" },
      { subjectType: "drag-n-drop", force: true }
    );
  });
  cy.get(".profile-avatar img")
    .should("have.attr", "src")
    .and("contains", "onourjourney");
  cy.contains(".iziToast-message", "Upload successful").should(

cy.get('.username')
    .click()
    .url().should('include', '/profile/')
})

When('I report the author', () => {
  cy.get('.page-name-profile-id-slug').then(() => {
    invokeReportOnElement('.ds-card').then(() => {
      cy.get('button')
        .contains('Send')
        .click()
    })
  })
})

When('I click on send in the confirmation dialog', () => {
  cy.get('button')
    .contains('Send')
    .click()
})

Then('I get a success message', () => {
  cy.get('.iziToast-message').contains('Thanks')
})

Then('I see my reported user', () => {
  cy.get('table').then(() => {
    cy.get('tbody tr')
      .first()
      .contains(lastReportTitle.trim())
  })
})

})

Then('they can see the location in the info box below my avatar', () => {
  cy.contains(myLocation)
})

Then('the name {string} is still there', name => {
  matchNameInUserMenu(name)
})

Then(
  'I can see my new name {string} when I click on my profile picture in the top right',
  name => matchNameInUserMenu(name)
)

When('I click on the {string} link', link => {
  cy.get('a')
    .contains(link)
    .click()
})

Then('I should be on the {string} page', page => {
  cy.location()
    .should(loc => {
      expect(loc.pathname).to.eq(page)
    })
    .get('h3')
    .should('contain', 'Social media')
})

When('I add a social media link', () => {
  cy.get('input#addSocialMedia')

Then("I can login successfully with password {string}", password => {
  cy.reload();
  cy.login({
    ...loginCredentials,
    ...{ password }
  });
  cy.get(".iziToast-wrapper").should("contain", "You are logged in!");
});

When("I log in with the following credentials:", table => {
  const { email, password } = table.hashes()[0];
  cy.login({ email, password });
});

When("open the notification menu and click on the first item", () => {
  cy.get(".notifications-menu").click();
  cy.get(".notification-mention-post")
    .first()
    .click();
});

Then("see {int} unread notifications in the top menu", count => {
  cy.get(".notifications-menu").should("contain", count);
});

Then("I get to the post page of {string}", path => {
  path = path.replace("...", "");
  cy.url().should("contain", "/post/");
  cy.url().should("contain", path);
});

import { When, Then } from "cypress-cucumber-preprocessor/steps";
When("I search for {string}", value => {
  cy.get("#nav-search")
    .focus()
    .type(value);
});

Then("I should have one post in the select dropdown", () => {
  cy.get(".input .ds-select-dropdown").should($li => {
    expect($li).to.have.length(1);
  });
});

Then("the search has no results", () => {
  cy.get(".input .ds-select-dropdown").should($li => {
    expect($li).to.have.length(1);
  });
  cy.get(".ds-select-dropdown").should("contain", 'Nothing found');

Then("I get to the post page of {string}", path => {
  path = path.replace("...", "");
  cy.url().should("contain", "/post/");
  cy.url().should("contain", path);
});

When(
  "I start to write a new post with the title {string} beginning with:",
  (title, intro) => {
    cy.get(".post-add-button").click();
    cy.get('input[name="title"]').type(title);
    cy.get(".ProseMirror").type(intro);
  }
);

When("mention {string} in the text", mention => {
  cy.get(".ProseMirror").type(" @");
  cy.get(".suggestion-list__item")
    .contains(mention)
    .click();
  cy.debug();
});

Then("the notification gets marked as read", () => {
  cy.get(".notifications-menu-popover").contains('.notification')
  cy.get(".notification")
    .first()
    .should("have.class", "read");
});

Then("there are no notifications in the top menu", () => {
  cy.get(".notifications-menu").should("contain", "0");

email: `${role}@example.org`,
    password: '1234'
  })
})

When('I click on "Report Post" from the content menu of the post', () => {
  cy.contains('.ds-card', davidIrvingPostTitle)
    .find('.content-menu-trigger')
    .click({force: true})

  cy.get('.popover .ds-menu-item-link')
    .contains('Report Post')
    .click()
})

When('I click on "Report User" from the content menu in the user info box', () => {
  cy.contains('.ds-card', davidIrvingPostTitle)
    .get('.user-content-menu .content-menu-trigger')
    .click({ force: true })

  cy.get('.popover .ds-menu-item-link')
    .contains('Report User')
    .click()
})

When('I click on the author', () => {
  cy.get('.username')
    .click()
    .url().should('include', '/profile/')
})

When('I report the author', () => {

.click()
    .not('[disabled]')
})

When('I save {string} as my location', location => {
  cy.get('input[id=city]').type(location)
  cy.get('.ds-select-option')
    .contains(location)
    .click()
  cy.get('[type=submit]')
    .click()
    .not('[disabled]')
  myLocation = location
})

When('I have the following self-description:', text => {
  cy.get('textarea[id=bio]')
    .clear()
    .type(text)
  cy.get('[type=submit]')
    .click()
    .not('[disabled]')
  aboutMeText = text
})

When('people visit my profile page', url => {
  cy.openPage('/profile/peter-pan')
})


When('they can see the text in the info box below my avatar', () => {
  cy.contains(aboutMeText)

cy.factory().create("User", {
    ...annoyingParams,
    id: "annoying-user",
    name
  });
});

Given("I am on the profile page of the annoying user", name => {
  cy.openPage("/profile/annoying-user/spammy-spammer");
});

When("I visit the profile page of the annoying user", name => {
  cy.openPage("/profile/annoying-user");
});

When("I ", name => {
  cy.openPage("/profile/annoying-user");
});

When(
  "I click on {string} from the content menu in the user info box",
  button => {
    cy.get(".user-content-menu .content-menu-trigger").click();
    cy.get(".popover .ds-menu-item-link")
      .contains(button)
      .click({ force: true });
  }
);

When("I navigate to my {string} settings page", settingsPage => {
  cy.get(".avatar-menu").click();
  cy.get(".avatar-menu-popover")