mailslurp-examples - javascript-cypress-newsletter-signup

https://github.com/mailslurp/examples

javascript-cypress-newsletter-signup/package.json

{
  "name": "javascript-cypress-newsletter-signup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "cypress run"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^13.7.1",
    "mailslurp-client": "^15.19.0"
  }
}

javascript-cypress-newsletter-signup/cypress.config.js

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

javascript-cypress-newsletter-signup/Makefile

-include ../.env

node_modules:
	npm install

dev: node_modules
	CYPRESS_MAILSLURP_API_KEY=$(API_KEY) DEBUG='ms*' npm run dev

test: node_modules
	CYPRESS_MAILSLURP_API_KEY=$(API_KEY) DEBUG='ms*' npm run test

javascript-cypress-newsletter-signup/cypress/support/e2e.js

// ***********************************************************
// This example support/e2e.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')

javascript-cypress-newsletter-signup/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 will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

javascript-cypress-newsletter-signup/cypress/fixtures/example.json

{
  "name": "Using fixtures to represent data",
  "email": "hello@cypress.io",
  "body": "Fixtures are a great way to mock data for responses to routes"
}

javascript-cypress-newsletter-signup/cypress/e2e/spec.cy.js

Cypress.config('defaultCommandTimeout', 10000);

describe('can sign up for newsletter', () => {
  it('can enter email and receive confirmation', () => {
    //<gen>cypress_newsletter_client_2
    // Create a MailSlurp client with the API key
    cy.then(() => {
      cy.log('Create MailSlurp client with API KEY')
      const MailSlurp = require('mailslurp-client').default
      const mailslurp = new MailSlurp({apiKey: Cypress.env('MAILSLURP_API_KEY')})
      cy.wrap(mailslurp).as('mailslurp')
    })
    //</gen>
    //<gen>cypress_newsletter_inbox_3
    // Create a disposable inbox
    cy.then(function () {
      cy.log('Create a disposable inbox')
      return this.mailslurp.inboxController.createInboxWithOptions({
        createInboxDto: {
          expiresIn: 300_000
        }
      })
    }).then(inbox => {
        cy.log(`Created inbox ${inbox.emailAddress}, storing for later use`)
        cy.wrap(inbox).as('inbox')
    })
    //</gen>
    //<gen>cypress_newsletter_visit_4
    // visit the newsletter page and fill in the form
    cy.visit('https://newsletter.mailslurp.biz')
    //</gen>
    cy.screenshot('cypress-newsletter-page-01.png')
    //<gen>cypress_newsletter_fill_5
    cy.then(function() {
      cy.log('Enter email address and submit')
      cy.get('#email').type(this.inbox.emailAddress)
      cy.get('#name').type('Jack')
      cy.get('#submit').click()
      cy.get('[data-state="submitted"]').should('be.visible')
    })
    //</gen>
    cy.screenshot('cypress-newsletter-page-02.png')
    //<gen>cypress_newsletter_confirm_6
    // wait for the confirmation email
    cy.then(function () {
      return this.mailslurp.waitForLatestEmail(this.inbox.id, 120_000, true)
    }).then(email => {
      expect(email.subject).to.eq('Welcome to my newsletter')
      expect(email.body).to.contain('Jack')
      cy.wrap(email.id).as('emailId')
    })
    //</gen>
    //<gen>cypress_newsletter_view_7
    // open the email to view it in cypress
    cy.then(function () {
      cy.log('Get url for viewing email')
      return this.mailslurp.emailController.getEmailPreviewURLs({
        emailId: this.emailId
      })
    }).then(emailPreviewUrls => {
      cy.log(`Open email in browser: ${emailPreviewUrls.html}`)
      return cy.origin(emailPreviewUrls.origin, { args: { url: emailPreviewUrls.plainHtmlBodyUrl } }, ({ url }) => {
        cy.visit(url)
        cy.get('body').contains('Jack')
        cy.screenshot('cypress-open-email')
      })
    })
    //</gen>
  })
})