narinegi · narinegi · May 8, 2024
diff --git a/LoginPage.js b/LoginPage.js
@@ -0,0 +1,40 @@
+export default class LoginPage {
+    _loginUrl = '/auth/login';
+    _dashboardUrl = '/pages/dashboard';
+    _emailSelector = 'input[id=input-email]';
+    _passwordSelector = 'input[id=input-password]';
+    _checkboxSelector = 'span.custom-checkbox';
+    _checkedIconSelector = 'nb-icon.custom-checkbox-icon';
+    _loginButtonSelector = 'button';
+    _dashboardContentSelector = 'div.content';
+
+    navigateLogin() {
+        cy.visit(this._loginUrl);
+    }
+    navigateDashboard() {
+        cy.url().should('include', this._dashboardUrl);
+    }
+    fillIn({email, password}) {
+        this.emailInput.type(email);
+        this.passwordInput.type(password);
+    }
+    get emailInput() {
+        return cy.get(this._emailSelector);
+    }
+    get passwordInput() {
+        return cy.get(this._passwordSelector);
+    }
+    get checkboxInput() {
+        return cy.get(this._checkboxSelector);
+    }
+    get checkedIcon() {
+        return cy.get(this._checkedIconSelector);
+    }
+    get dashboard() {
+        return cy.get(this._dashboardContentSelector);
+    }
+    get loginButton() {
+        return cy.get(this._loginButtonSelector);
+    }
+
+}
diff --git a/SmartTablePage.js b/SmartTablePage.js
@@ -0,0 +1,91 @@
+export default class SmartTablePage {
+    _url = '/pages/tables/smart-table';
+    _addButtonSelector = 'th[ng2-st-add-button] a.ng2-smart-action';
+    _newRowSelector = 'tr[ng2-st-thead-form-row]';
+    _newCellSelector = 'thead ng2-smart-table-cell';
+    _saveButtonSelector = 'thead ng2-st-actions a.ng2-smart-action-add-create';
+    _addedRowSelector = 'tbody tr.selected';
+    _addedCellSelector = 'div.ng-star-inserted';
+    _chosenRowSelector = 'tbody tr';
+    _chosenCellSelector = 'td:not(.ng2-smart-actions)';
+    _editButtonSelector = 'a.ng2-smart-action-edit-edit';
+    _editSaveButtonSelector = 'a.ng2-smart-action-edit-save';
+
+    navigate() {
+        cy.visit(this._url);
+    }
+
+    enterInputValues(inputValues) {
+        inputValues.forEach((value, index) => {
+            this.newCells.eq(index).type(value);
+        });
+    }
+
+    verifyNewlyCreatedUser(inputValues) {
+        this.newlyAddedRow.each(($value, index) => {
+            const value = $value.text().trim();
+            const expectedValue = inputValues[index];
+            expect(value).to.equal(expectedValue);
+        });
+    }
+
+    editExistingUser(updateValues) {
+        updateValues.forEach((value, index) => {
+            this.chosenCells.eq(index).type('{backspace}').type(value);
+        });
+    }
+
+    verifyEditedUser(updateValues) {
+        const existingValues = [];
+        this.chosenCells.each(($cell) => {
+            cy.wrap($cell).invoke('text').then(text => {
+                existingValues.push(text.trim());
+            });
+        });
+        this.editedRow.each(($value, index) => {
+            const value = $value.text().trim();
+            const expectedValue = existingValues[index];
+            expect(value).to.equal(expectedValue);
+        });
+    }
+
+    get addButton() {
+        return cy.get(this._addButtonSelector);
+    }
+
+    get newRow() {
+        return cy.get(this._newRowSelector);
+    }
+
+    get newCells() {
+        return cy.get(this._newCellSelector);
+    }
+
+    get saveButton() {
+        return cy.get(this._saveButtonSelector);
+    }
+
+    get newlyAddedRow() {
+        return cy.get(this._addedRowSelector).find(this._addedCellSelector);
+    }
+
+    get chosenRow() {
+        return cy.get(this._chosenRowSelector).first();
+    }
+
+    get chosenCells() {
+        return cy.get(this._chosenCellSelector);
+    }
+
+    get editButton() {
+        return cy.get(this._editButtonSelector);
+    }
+
+    get editSaveButton() {
+        return cy.get(this._editSaveButtonSelector);
+    }
+
+    get editedRow() {
+        return cy.get(this._chosenRowSelector).first().find(this._chosenCellSelector);
+    }
+}
diff --git a/commands.js b/commands.js
@@ -0,0 +1,51 @@
+// ***********************************************
+// 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) => { ... })
+declare global {
+//   namespace Cypress {	  namespace Cypress {
+//     interface Chainable {	    interface Chainable {
+//       login(email: string, password: string): Chainable<void>	      login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>	      drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>	      dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>	      visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }	    }
+//   }	  }
+// }	}
+
+    Cypress.Commands.add('fillLoginForm', ({email, password}) => {
+        cy.get('input[id=input-email]').type(email);
+        cy.get('input[id=input-password]').type(password)
+    });
+
+    Cypress.Commands.add('setLoginCheckbox', () => {
+        cy.get('span.custom-checkbox')
+            .click()
+            .find('nb-icon.custom-checkbox-icon')
+            .should('be.visible').and('exist')
+    });
+
+    Cypress.Commands.add('getLoginButton', () => {
+        cy.get('button').contains('Log In')
+    })
diff --git a/login.spec.js b/login.spec.js
@@ -0,0 +1,49 @@
+import LoginPage from '../../pageObjects/LoginPage.js';
+
+describe("Login with Page Object Model", () => {
+    const loginPage = new LoginPage();
+
+    beforeEach(() =>{
+        loginPage.navigateToLogin();
+    })
+
+    it('should successfully login', () => {
+        const userData = {
+            email: 'narineilnytska@gmail.com',
+            password: 'TestNG@001'
+        }
+
+        loginPage.getLoginButton().contains('Log In').should('be.disabled');
+        loginPage.fillInLoginForm(userData);
+        loginPage.getLoginButton().contains('Log In').should('be.enabled');
+        loginPage.toggleCheckbox();
+        loginPage.getCheckedIcon().should('be.visible').and('exist');
+        loginPage.getLoginButton().contains('Log In').click();
+        cy.wait(5000);
+        loginPage.navigateToDashboard();
+        loginPage.getDashboard().should('be.visible');
+    })
+});
+
+describe("Login with Custom Commands", () => {
+
+    beforeEach(() =>{
+        cy.visit('auth/login');
+    })
+
+    it('should successfully login', () => {
+        const userData = {
+            email: 'narineilnytska@gmail.com',
+            password: 'TestNG@001'
+        }
+
+        cy.getLoginButton().should('be.disabled');
+        cy.fillLoginForm(userData);
+        cy.getLoginButton().should('be.enabled');
+        cy.setLoginCheckbox();
+        cy.getLoginButton().click();
+        cy.wait(5000);
+        cy.url().should('include', '/pages/dashboard');
+        cy.get('div.content').should('be.visible');
+    })
+})
diff --git a/smartTable.spec.js b/smartTable.spec.js
@@ -0,0 +1,32 @@
+import SmartTablePage from '../../pageObjects/SmartTablePage.js';
+
+describe("Smart Table", () => {
+    const smartTablePage = new SmartTablePage();
+
+    beforeEach(() =>{
+        smartTablePage.navigateToSmartTable();
+    })
+
+    it('should create a new user', () => {
+        smartTablePage.getAddButton().click();
+        smartTablePage.getNewRow().should('exist').and('be.visible');
+
+        const inputValues = ['700', 'Emma', 'Tom', 'Tommy', 'emmat@gmail.com', '33'];
+        smartTablePage.enterInputValues(inputValues);
+        smartTablePage.getSaveButton().click();
+
+        smartTablePage.verifyNewlyCreatedUser(inputValues);
+    });
+
+    it('should edit a user', () => {
+        const updateValues = ['007', 'Test', 'est', 'Te', 'e', '1'];
+
+        smartTablePage.getChosenRow().within(() => {
+            smartTablePage.getEditButton().click();
+            smartTablePage.editExistingUser(updateValues);
+            smartTablePage.getEditSaveButton().click();
+        });
+
+        smartTablePage.verifyEditedUser(updateValues);
+    });
+})