Webux Lab

By Studio Webux

Cypress with VueJS and Amplify for Cognito User Pool

TG
Tommy Gingras Studio Webux 2022-05-19

Test Cognito User Pool with Cypress and VueJS

I had few errors:

Missing `aws-crt`
Missing `http2`

Missing `./framer`

The fix is to import import { Auth } from 'aws-amplify/dist/aws-amplify'

tests/e2e/support/cognito.js

import { Auth } from 'aws-amplify/dist/aws-amplify'

Auth.configure(JSON.parse(Cypress.env('awsConfig')))
const userPoolId = Cypress.env('user_pool_id');
const awsRegion = Cypress.env('aws_region');

// Amazon Cognito
Cypress.Commands.add('confirmUser', (email) => {
  cy.exec(`aws cognito-idp admin-confirm-sign-up \
  --region ${awsRegion} \
  --user-pool-id ${userPoolId} \
  --username ${email}`)
    console.log(`Confirmed ${email}`)
});

Cypress.Commands.add('loginByCognitoApi', (username, password) => {

  const log = Cypress.log({
    displayName: 'COGNITO LOGIN',
    message: [`🔐 Authenticating | ${username}`],
    // @ts-ignore
    autoEnd: false,
  })

  log.snapshot('before')

  const signIn = Auth.signIn({ username, password })

  cy.wrap(signIn, { log: false }).then((cognitoResponse) => {
    const keyPrefixWithUsername = `${cognitoResponse.keyPrefix}.${cognitoResponse.username}`

    window.localStorage.setItem(
      `${keyPrefixWithUsername}.idToken`,
      cognitoResponse.signInUserSession.idToken.jwtToken
    )

    window.localStorage.setItem(
      `${keyPrefixWithUsername}.accessToken`,
      cognitoResponse.signInUserSession.accessToken.jwtToken
    )

    window.localStorage.setItem(
      `${keyPrefixWithUsername}.refreshToken`,
      cognitoResponse.signInUserSession.refreshToken.token
    )

    window.localStorage.setItem(
      `${keyPrefixWithUsername}.clockDrift`,
      cognitoResponse.signInUserSession.clockDrift
    )

    window.localStorage.setItem(
      `${cognitoResponse.keyPrefix}.LastAuthUser`,
      cognitoResponse.username
    )

    window.localStorage.setItem('amplify-authenticator-authState', 'signedIn')
    log.snapshot('after')
    log.end()
  })

  cy.visit('/')
})

Good explanation of ESM Module: https://blog.logrocket.com/commonjs-vs-es-modules-node-js/

To launch a test:

tests/e2e/specs/account.spec.js

import '../support/cognito'

describe('Cognito', function () {
    beforeEach(function () {
      // Seed database with test data
    //   cy.task('db:seed')
  
      // Programmatically login via Amazon Cognito API
      cy.loginByCognitoApi(
        Cypress.env('cognito_username'),
        Cypress.env('cognito_password')
      )
    })
  
    it('shows onboarding', function () {
      cy.contains('Get Started').should('be.visible')
    })
  })

tests/e2e/specs/signup.spec.js

import '../support/cognito'

describe('Access Sign-up Page', () => {
  it('Try to Signup with valid credentials', () => {
    const email = `${Cypress.env('cognito_test_user')}+${Math.floor(Date.now()/1000)}${Cypress.env('cognito_domain')}`;

    cy.visit('/sign-up')
    cy.get('#fullname').type(Cypress.env('cognito_test_user'))
    cy.get('#email').type(email)
    cy.get('#password').type(Cypress.env('cognito_password'))
    cy.get('#signUpBtn').click();

    cy.url().should('include', '/sign-in')
    cy.confirmUser(email)
  })
})

tests/e2e/plugins/index.js

/* eslint-disable arrow-body-style */
// https://docs.cypress.io/guides/guides/plugins-guide.html

// if you need a custom webpack configuration you can uncomment the following import
// and then use the `file:preprocessor` event
// as explained in the cypress docs
// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples

// /* eslint-disable import/no-extraneous-dependencies, global-require */
// const webpack = require('@cypress/webpack-preprocessor')
require('dotenv').config({
  path: `${__dirname}/../../../.env`
});


module.exports = (on, config) => {
  // on('file:preprocessor', webpack({
  //  webpackOptions: require('@vue/cli-service/webpack.config'),
  //  watchOptions: {}
  // }))

  // COGNITO
  config.env.cognito_test_user = process.env.AWS_COGNITO_TEST_USER
  config.env.cognito_domain = process.env.AWS_COGNITO_DOMAIN
  config.env.cognito_username = process.env.AWS_COGNITO_USERNAME
  config.env.cognito_password = process.env.AWS_COGNITO_PASSWORD
  config.env.user_pool_id = process.env.VUE_APP_COGNITO_USER_POOL
  config.env.aws_region = process.env.VUE_APP_COGNITO_REGION
  config.env.awsConfig = JSON.stringify({
    region: process.env.VUE_APP_COGNITO_REGION,
    userPoolId: process.env.VUE_APP_COGNITO_USER_POOL,
    userPoolWebClientId: process.env.VUE_APP_COGNITO_CLIENT_ID,
    oauth: {
      domain: process.env.VUE_APP_COGNITO_DOMAIN,
      scope: process.env.VUE_APP_COGNITO_SCOPE
        ? process.env.VUE_APP_COGNITO_SCOPE.split(',')
        : [],
      redirectSignIn: process.env.VUE_APP_COGNITO_REDIRECT_SIGN_IN,
      redirectSignOut: process.env.VUE_APP_COGNITO_REDIRECT_SIGN_OUT,
      responseType: 'code',
    },
  })

  return Object.assign({}, config, {
    fixturesFolder: 'tests/e2e/fixtures',
    integrationFolder: 'tests/e2e/specs',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',
    supportFile: 'tests/e2e/support/index.js'
  })
}

References


Search