test: removing Protractor (#2601)
Removing obsolete Protractor e2e package and tests Fixes: WEB-282
This commit is contained in:
Felix van Hove
@@ -31,9 +31,7 @@ Mifos X Web App is a modern single-page application (SPA) built on top of the Mi
|
||||
Before installing the web app, you need to set up the Fineract backend server:
|
||||
|
||||
1. **Choose ONE of these backend options:**
|
||||
|
||||
- **Option A: Use existing remote server**
|
||||
|
||||
- Use the sandbox at `https://sandbox.mifos.community`
|
||||
- Use the demo at `https://demo.mifos.community`
|
||||
- Configure to your server by updating API URLs in environment files
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
# End-to-end tests coding guide
|
||||
|
||||
End-to-end (E2E for short) tests are meant to test the behavior of your application, from start to finish.
|
||||
|
||||
While unit tests are the first choice for catching bugs and regression on individual components, it is a good idea to
|
||||
complement them with test cases covering the integration between the individual components, hence the need for E2E
|
||||
tests.
|
||||
|
||||
These tests use [Protractor](https://github.com/angular/protractor), which is a framework built for Angular on top of
|
||||
[Selenium](https://github.com/SeleniumHQ/selenium) to control browsers and simulate user inputs.
|
||||
[Jasmine](http://jasmine.github.io) is used as the base test framework.
|
||||
|
||||
## Good practices
|
||||
|
||||
- Avoid whenever possible inter-dependencies between your E2E tests
|
||||
- Run E2E tests on your continuous integration server against different browsers
|
||||
- If you use an Agile methodology, cover each user story acceptance factors with an E2E test
|
||||
|
||||
## Page objects
|
||||
|
||||
E2E tests should follow the _[Page Object](https://github.com/SeleniumHQ/selenium/wiki/PageObjects)_ pattern.
|
||||
|
||||
#### What is a page object?
|
||||
|
||||
A page object:
|
||||
|
||||
- Models the objects on a page under test:
|
||||
- _Properties_ wrap page elements
|
||||
- _Methods_ wrap code that interacts with the page elements
|
||||
- Simplifies the test scripts
|
||||
- Reduces the amount of duplicated code
|
||||
|
||||
If the UI changes, the fix only needs to be applied in one place.
|
||||
|
||||
#### How to define a page object
|
||||
|
||||
```typescript
|
||||
// login.po.ts
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
export class LoginPage {
|
||||
emailInput = element(by.css('input[name=^"email"]'));
|
||||
passwordInput = element(by.css('input[name=^"password"]'));
|
||||
loginButton = element(by.css('button[(click)^="login"]'));
|
||||
registerButton = element(by.css('button[(click)^="register"]'));
|
||||
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
getGreetingText() {
|
||||
return element(by.css('.greeting')).getText();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### How to use a page object
|
||||
|
||||
```typescript
|
||||
// login.e2e-spec.ts
|
||||
import { LoginPage } from './login.po';
|
||||
|
||||
describe('Login', () => {
|
||||
let page: LoginPage;
|
||||
|
||||
beforeEach(() => {
|
||||
page = new LoginPage();
|
||||
page.navigateTo();
|
||||
});
|
||||
|
||||
it('should navigate to the register page when the register button is clicked', () => {
|
||||
page.registerButton.click();
|
||||
|
||||
expect(browser.getCurrentUrl()).toContain('/register');
|
||||
});
|
||||
|
||||
it('should allow a user to log in', () => {
|
||||
page.emailInput.sendKeys('test@mail.com');
|
||||
page.passwordInput.sendKeys('abc123');
|
||||
page.loginButton.click();
|
||||
|
||||
expect(page.getGreetingText()).toContain('Welcome, Test User');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Credits
|
||||
|
||||
Parts of this guide were freely inspired by this
|
||||
[presentation](https://docs.google.com/presentation/d/1B6manhG0zEXkC-H-tPo2vwU06JhL8w9-XCF9oehXzAQ).
|
||||
@@ -47,7 +47,6 @@ Also keep in mind this general rules:
|
||||
## Best practices
|
||||
|
||||
- Use object-oriented CSS (OOCSS):
|
||||
|
||||
- Factorize common code in base class, and extend it, for example:
|
||||
|
||||
```scss
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
// Protractor configuration file, see link for more information
|
||||
// https://github.com/angular/protractor/blob/master/lib/config.ts
|
||||
|
||||
const { SpecReporter } = require('jasmine-spec-reporter');
|
||||
|
||||
exports.config = {
|
||||
allScriptsTimeout: 60000,
|
||||
specs: [
|
||||
'./src/**/*.e2e-spec.ts'
|
||||
],
|
||||
capabilities: {
|
||||
browserName: process.env.PROTRACTOR_BROWSER || 'chrome'
|
||||
},
|
||||
// Only works with Chrome and Firefox
|
||||
directConnect: true,
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
framework: 'jasmine2',
|
||||
jasmineNodeOpts: {
|
||||
showColors: true,
|
||||
defaultTimeoutInterval: 60000,
|
||||
print: function () {}
|
||||
},
|
||||
onPrepare() {
|
||||
require('ts-node').register({
|
||||
project: require('path').join(__dirname, './tsconfig.e2e.json')
|
||||
});
|
||||
// Better console spec reporter
|
||||
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
|
||||
}
|
||||
};
|
||||
@@ -1,23 +0,0 @@
|
||||
import { browser, by, element } from 'protractor';
|
||||
import { LoginPage } from './login.po';
|
||||
|
||||
describe('app', () => {
|
||||
let page: LoginPage;
|
||||
|
||||
beforeAll(() => {
|
||||
page = new LoginPage();
|
||||
});
|
||||
|
||||
it('should display login page', () => {
|
||||
expect(browser.getCurrentUrl()).toContain('/login');
|
||||
});
|
||||
|
||||
it('should display error with invalid credentials', () => {
|
||||
page.invalidLogin();
|
||||
expect(element(by.tagName('mat-error')).isPresent()).toBe(true);
|
||||
});
|
||||
|
||||
it('should login into the app', () => {
|
||||
page.validLogin();
|
||||
});
|
||||
});
|
||||
@@ -1,39 +0,0 @@
|
||||
/** Protractor Imports */
|
||||
import { browser, element, by } from 'protractor';
|
||||
|
||||
/**
|
||||
* Login Page e2e page object
|
||||
*/
|
||||
export class LoginPage {
|
||||
/** username field */
|
||||
usernameField = element(by.css('input[formControlName="username"]'));
|
||||
/** password field */
|
||||
passwordField = element(by.css('input[formControlName="password"]'));
|
||||
/** login button */
|
||||
loginButton = element(by.cssContainingText('.login-button', 'Login'));
|
||||
|
||||
/** Forces default language */
|
||||
constructor() {
|
||||
this.navigateTo();
|
||||
browser.executeScript(() => localStorage.setItem('language', 'en-US'));
|
||||
}
|
||||
|
||||
/** Navigate to specified url */
|
||||
navigateTo() {
|
||||
return browser.get('/');
|
||||
}
|
||||
|
||||
/** Login with correct credentials */
|
||||
validLogin() {
|
||||
this.usernameField.sendKeys('mifos');
|
||||
this.passwordField.sendKeys('password');
|
||||
this.loginButton.click();
|
||||
}
|
||||
|
||||
/** Login with incorrect credentials */
|
||||
invalidLogin() {
|
||||
this.usernameField.sendKeys('test');
|
||||
this.passwordField.sendKeys('123');
|
||||
this.loginButton.click();
|
||||
}
|
||||
}
|
||||
@@ -11,17 +11,14 @@ This document provides step-by-step instructions for setting up test automation
|
||||
## Creating an Account on testRigor
|
||||
|
||||
1. **Visit the testRigor website:**
|
||||
|
||||
- Go to [testRigor](https://www.testrigor.com/).
|
||||
|
||||
2. **Sign up for a new account:**
|
||||
|
||||
- Click on the "Sign Up" button on the top right corner.
|
||||
- Select the "Public Open Source" version.
|
||||
- Fill in the required details and follow the instructions to complete the registration.
|
||||
|
||||
3. **Verify your email and log in:**
|
||||
|
||||
- Check your email inbox for a verification email from testRigor.
|
||||
- Click on the verification link to activate your account.
|
||||
- Once your account is activated, log in.
|
||||
@@ -32,7 +29,6 @@ This document provides step-by-step instructions for setting up test automation
|
||||
## Running Tests with the CLI
|
||||
|
||||
1. **Install testRigor CLI:**
|
||||
|
||||
- Ensure you have Node.js installed on your machine (version 18 or higher).
|
||||
- Install the testRigor CLI globally using npm:
|
||||
```bash
|
||||
@@ -40,12 +36,10 @@ This document provides step-by-step instructions for setting up test automation
|
||||
```
|
||||
|
||||
2. **Obtain Required Parameters:**
|
||||
|
||||
- **Test Suite ID:** You can obtain the Test Suite ID in the URL of your test suite. If the URL is `https://app.testrigor.com/test-suites/12345`, then `12345` is your Test Suite ID.
|
||||
- **Auth Token:** You can obtain your token from the "CI/CD integration" section on testRigor. Look for "auth-token" and copy the value next to it, which will be in the format `########-####-####-####-############`.
|
||||
|
||||
3. **Set Parameters in `run_testrigor_tests.sh`:**
|
||||
|
||||
- Before running the tests, create a .env file on the testRigor directory and set the following variables to the parameters you obtained:
|
||||
- `MIFOS_TEST_SUITE_ID`: Set this variable to your Test Suite ID.
|
||||
- `MIFOS_AUTH_TOKEN`: Set this variable to your auth token.
|
||||
|
||||
Generated
+914
-2245
File diff suppressed because it is too large
Load Diff
@@ -105,7 +105,6 @@
|
||||
"lint-staged": "^15.2.10",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-multiline-arrays": "^3.0.6",
|
||||
"protractor": "~7.0.0",
|
||||
"puppeteer": "^24.4.0",
|
||||
"stylelint": "^16.10.0",
|
||||
"stylelint-config-recommended-scss": "^14.1.0",
|
||||
|
||||
@@ -3,7 +3,8 @@ export class SelectOption {
|
||||
id: number;
|
||||
name: string;
|
||||
|
||||
constructor(options: any[]) {
|
||||
(this.id = options[0]), (this.name = options[1]);
|
||||
constructor({ id, name }: { id: number; name: string }) {
|
||||
this.id = id;
|
||||
this.name = name;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user