skillbox/client/cypress/support/commands.js

// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
// installed a fork of the original package, because of this issue:
// https://github.com/tgriesser/cypress-graphql-mock/issues/23
// todo: once above issue is fixed, go back to the original repo -> npm install cypress-graphql-mock
// import 'cypress-graphql-mock';
import '@iam4x/cypress-graphql-mock';

Cypress.Commands.add('apolloLogin', (username, password) => {
  const payload = {
    'operationName': 'BetaLogin',
    'variables': {
      'input': {
        'usernameInput': username,
        'passwordInput': password
      }
    },
    'query': 'mutation BetaLogin($input: BetaLoginInput!) {\n  betaLogin(input: $input) {\n    success\n    __typename\n  }\n}\n'
  };

  cy.request({
    method: 'POST',
    url: '/api/graphql-public/',
    body: payload
  });
});

// todo: replace with apollo call
Cypress.Commands.add('login', (username, password, visitLogin = false) => {
  if (visitLogin) {
    cy.visit('/beta-login');
  }

  if (username != '') {
    cy.get('[data-cy=email-input]').type(username);
  }

  if (password != '') {
    cy.get('[data-cy=password-input]').type(password);
  }
  cy.get('[data-cy=login-button]').click();
});

Cypress.Commands.add('logout', () => {
  cy.get('[data-cy=user-icon]').click();
  cy.get('[data-cy=logout]').click();
});

Cypress.Commands.add('loginByCsrf', (username, password, csrftoken) => {
  cy.request({
    method: 'POST',
    url: '/accounts/login/',
    failOnStatusCode: false,
    form: true,
    body: {
      username: username,
      password: password,
      csrfmiddlewaretoken: csrftoken
    }
  });
});

Cypress.Commands.add('startGraphQLCapture', () => {
  cy.server();
  cy.route('POST', '/api/graphql/').as('graphQL');
});

// from https://stackoverflow.com/questions/53814647/how-can-i-alias-specific-graphql-requests-in-cypress
Cypress.Commands.add('waitFor', operationName => {
  cy.wait('@graphQL').then(({request}) => {
    if (request.body.operationName !== operationName) {
      return cy.waitFor(operationName);
    }
  });
});

Cypress.Commands.add('changePassword', (oldPassword, newPassword) => {
  if (oldPassword) {
    cy.get('[data-cy=old-password]').type(oldPassword);
  }

  if (newPassword) {
    cy.get('[data-cy=new-password]').type(newPassword);
  }
  cy.get('[data-cy=change-password-button]').click();
});

Cypress.Commands.add('checkEmailAvailable', (email) => {
  cy.get('[data-cy="email-input"]').type(email);
  cy.get('[data-cy="hello-button"]').click();
});

Cypress.Commands.add('enterPassword', (password) => {
  cy.get('[data-cy="password-input"]').type(password);
  cy.get('[data-cy="login-button"]').click();
});

Cypress.Commands.add('register', (prefix, firstname, lastname, street, city, postcode, password, passwordConfirmation, acceptTerms) => {
  let selection = prefix === 1 ? 'Herr' : 'Frau';

  cy.get('[data-cy="prefix-selection"]').select(selection);

  if (firstname !== '') {
    cy.get('[data-cy="firstname-input"]').type(firstname);
  }
  if (lastname !== '') {
    cy.get('[data-cy="lastname-input"]').type(lastname);
  }

  if (street !== '') {
    cy.get('[data-cy="street-input"]').type(street);
  }

  if (city !== '') {
    cy.get('[data-cy="city-input"]').type(city);
  }

  if (postcode !== '') {
    cy.get('[data-cy="postcode-input"]').type(postcode);
  }

  if (password !== '') {
    cy.get('[data-cy="password-input"]').type(password);
  }

  if (acceptTerms) {
    cy.get('[data-cy="acceptedTerms-input"] > input').first().check({force: true}).then(() => {
      cy.get('[data-cy="acceptedTerms-input"] > input:checkbox').should('be.checked');
    });
  }

  cy.get('[data-cy="passwordConfirmation-input"]').type(passwordConfirmation);
  cy.get('[data-cy="register-button"]').click();
});

Cypress.Commands.add('redeemCoupon', coupon => {
  if (coupon !== '') {
    cy.get('[data-cy="coupon-input"]').type(coupon);
  }
  cy.get('[data-cy="coupon-button"]').click();
})

Cypress.Commands.add('assertStartPage', () => {
  cy.get('[data-cy=onboarding-page]').should('exist');
});