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'
})
}