login e2e test

cypress.json

@@ -1,5 +1,5 @@
 {
-	"baseUrl": "http://localhost:4173/",
+	"baseUrl": "http://localhost:3000",
 	"fileServerFolder": "dist",
 	"fixturesFolder": false,
 	"projectId": "etow1b",

cypress/e2e/auth.spec.ts

@@ -0,0 +1,29 @@
+describe('User Sign up and Login', () => {
+	beforeEach(() => {
+		cy.viewport('macbook-13')
+	})
+
+	it('should redirect unauthenticated user to login page', function () {
+		cy.visit('/domain')
+		cy.location('pathname').should('equal', '/login')
+	})
+
+	it('should display success message after login', function () {
+		cy.login('e2eTest', 'e2eTest')
+		// cy.checkMessage("success", "Login Success");
+	})
+	it('should redirect to the home page after login', function () {
+		cy.login('e2eTest', 'e2eTest')
+		cy.location('pathname').should('equal', '/')
+	})
+
+	it('should error for an invalid user', function () {
+		cy.login('invalidUserName', 'invalidPa$$word')
+		cy.checkMessage('error', 'Wrong username or password')
+	})
+
+	it('should error for an invalid password for existing user', function () {
+		cy.login('e2eTest', 'invalidPa$$word')
+		cy.checkMessage('error', 'Wrong username or password')
+	})
+})

cypress/global.d.ts

@@ -1,4 +1,20 @@
+/// <reference types="cypress" />
 declare module '@cypress/code-coverage/task' {
 	const task: Cypress.PluginConfig
 	export = task
 }
+
+declare namespace Cypress {
+	interface Chainable {
+		getBySel(dataTestAttribute: string, arguments_?: any): Chainable<Element>
+
+		getBySelLike(
+			dataTestPrefixAttribute: string,
+			arguments_?: any
+		): Chainable<Element>
+
+		login(username: string, password: string, loginOptions?: LoginOptions): void
+
+		checkMessage(type: string, content: string): void
+	}
+}

cypress/support/commands.ts

@@ -0,0 +1,42 @@
+// @ts-check
+Cypress.Commands.add('getBySel', (selector, ...arguments_) => {
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+	return cy.get(`[data-test=${selector}]`, ...arguments_)
+})
+
+Cypress.Commands.add('getBySelLike', (selector, ...arguments_) => {
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+	return cy.get(`[data-test*=${selector}]`, ...arguments_)
+})
+
+Cypress.Commands.add('login', (username: string, password: string) => {
+	const loginPath = '/login'
+	const log = Cypress.log({
+		name: 'login',
+		displayName: 'LOGIN',
+		message: [`🔐 Authenticating | ${username}`],
+		autoEnd: false
+	})
+
+	cy.visit(loginPath)
+
+	cy.getBySel('login-username').type(username)
+	cy.getBySel('login-password').type(password)
+
+	cy.getBySel('login-submit').click()
+
+	log.end()
+})
+
+// todo: add antd message type for the type arg
+Cypress.Commands.add('checkMessage', (type: string, content = '') => {
+	if (content) {
+		// eslint-disable-next-line cypress/require-data-selectors
+		cy.get(`.ant-message-${type}`)
+			.should('be.visible')
+			.and('have.text', content)
+	} else {
+		// eslint-disable-next-line cypress/require-data-selectors
+		cy.get(`.ant-message-${type}`).should('be.visible')
+	}
+})

cypress/support/index.ts

@@ -1,2 +1,3 @@
 import '@cypress/code-coverage/support'
 import '@testing-library/cypress/add-commands'
+import './commands'

src/pages/Login/index.tsx

@@ -211,14 +211,20 @@ const Index: React.FC = () => {
 									}
 								]}
 							>
-								<Input placeholder={t('Login.username')} />
+								<Input
+									placeholder={t('Login.username')}
+									data-test='login-username'
+								/>
 							</Form.Item>
 							<Form.Item
 								name='password'
 								label={t('Login.password')}
 								rules={[{ required: true, message: t('Login.valid.password') }]}
 							>
-								<Input.Password placeholder={t('Login.password')} />
+								<Input.Password
+									placeholder={t('Login.password')}
+									data-test='login-password'
+								/>
 							</Form.Item>
 							<Row justify='end' style={{ marginBottom: '12px' }}>
 								<Col>
@@ -232,6 +238,7 @@ const Index: React.FC = () => {
 									type='primary'
 									htmlType='submit'
 									loading={loading}
+									data-test='login-submit'
 									block
 								>
 									{t('Login.signIn')}