diff --git a/cypress.json b/cypress.json
index 2e7d79d..ec459f3 100644
--- a/cypress.json
+++ b/cypress.json
@@ -1,5 +1,5 @@
{
- "baseUrl": "http://localhost:4173/",
+ "baseUrl": "http://localhost:3000",
"fileServerFolder": "dist",
"fixturesFolder": false,
"projectId": "etow1b",
diff --git a/cypress/e2e/auth.spec.ts b/cypress/e2e/auth.spec.ts
new file mode 100644
index 0000000..75c0117
--- /dev/null
+++ b/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')
+ })
+})
diff --git a/cypress/global.d.ts b/cypress/global.d.ts
index cd36c8b..e47fe26 100644
--- a/cypress/global.d.ts
+++ b/cypress/global.d.ts
@@ -1,4 +1,20 @@
+///
declare module '@cypress/code-coverage/task' {
const task: Cypress.PluginConfig
export = task
}
+
+declare namespace Cypress {
+ interface Chainable {
+ getBySel(dataTestAttribute: string, arguments_?: any): Chainable
+
+ getBySelLike(
+ dataTestPrefixAttribute: string,
+ arguments_?: any
+ ): Chainable
+
+ login(username: string, password: string, loginOptions?: LoginOptions): void
+
+ checkMessage(type: string, content: string): void
+ }
+}
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
new file mode 100644
index 0000000..c06f3e4
--- /dev/null
+++ b/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')
+ }
+})
diff --git a/cypress/support/index.ts b/cypress/support/index.ts
index eaee3e9..8afdc96 100644
--- a/cypress/support/index.ts
+++ b/cypress/support/index.ts
@@ -1,2 +1,3 @@
import '@cypress/code-coverage/support'
import '@testing-library/cypress/add-commands'
+import './commands'
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 6bc4199..a34f134 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -211,14 +211,20 @@ const Index: React.FC = () => {
}
]}
>
-
+
-
+
@@ -232,6 +238,7 @@ const Index: React.FC = () => {
type='primary'
htmlType='submit'
loading={loading}
+ data-test='login-submit'
block
>
{t('Login.signIn')}