From 2a5e790e3d8667f0d4ca958371b869f2ab8d0d0c Mon Sep 17 00:00:00 2001 From: Tom Bloor Date: Thu, 13 Aug 2020 16:24:49 +0100 Subject: [PATCH] Fix e2e test and actually check login works --- .idea/codeStyles/Project.xml | 14 ++++++++ .idea/codeStyles/codeStyleConfig.xml | 5 +++ README.md | 24 ++++++++++++- e2e/login.e2e-spec.ts | 51 +++++++++++++++++++++------- e2e/login.po.ts | 17 ++++++++-- package-lock.json | 9 +++-- src/app/auth/login.component.html | 2 +- 7 files changed, 101 insertions(+), 21 deletions(-) create mode 100644 .idea/codeStyles/Project.xml create mode 100644 .idea/codeStyles/codeStyleConfig.xml diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml new file mode 100644 index 0000000..b2c42f4 --- /dev/null +++ b/.idea/codeStyles/Project.xml @@ -0,0 +1,14 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..79ee123 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/README.md b/README.md index 4b16e59..19bcf09 100644 --- a/README.md +++ b/README.md @@ -35,12 +35,34 @@ npm install The app defaults to using the development server. For other options, see `src/environments/environments.ts` +## Testing + +There are two types of test in this codebase, unit tests (using Karma) and E2E tests (using Protractor). + +### Karma Unit Tests + +To run these, you just need to run `npm run test` - this should work without any further configuration. These run the `*.spec.ts` files next to the normal source files, and are for basic tests for each function on their own. + +These tests are a long-running process, and will automatically run on file changes. Just run the command above, and then check back to the browser window that appears to see any errors as you work! + +### Protractor E2E Tests + +To run these, you will need to run the following: + +``` +webdriver-manager update +``` + +This will download the correct webdriver for you (we use chromedriver), and any other dependencies it needs. After that, you can run the tests with `npm run e2e`. Note these run once, and will need to be re-run every time you want to run an e2e test. You will also need to run the + +These tests are best run regularly, and should show if any issues have emerged in other parts of the application that you are not aware of, or if some part of the flow through the app has changed sufficiently. + ## Licences ### CoreUI The interface itself is based off of [CoreUI][core-ui] which is MIT Licenced. -For information, see [MIT Licence](./LICENCE.MIT) included in this repo. +For information, see `LICENCE.MIT` included in this repo. [core-ui]: http://coreui.io diff --git a/e2e/login.e2e-spec.ts b/e2e/login.e2e-spec.ts index 1ba4a9e..fa41eda 100644 --- a/e2e/login.e2e-spec.ts +++ b/e2e/login.e2e-spec.ts @@ -1,34 +1,59 @@ -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; -import { TestBed, ComponentFixture, async } from '@angular/core/testing'; -import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { LoginPageObject } from './login.po'; -import { ApiService } from '../src/app/providers/api-service'; +import { browser } from "protractor"; describe('Login Page', () => { let page: LoginPageObject; - let api: ApiService; - let apiSpy: jasmine.SpyObj; beforeEach(() => { page = new LoginPageObject(); - const spy = jasmine.createSpyObj - TestBed.configureTestingModule({ providers: [ApiService] }); + page.navigateTo(); }); - api = TestBed.inject(ApiService); - apiSpy = TestBed.inject(ApiService); - it('should have a header saying login', () => { expect(page.getLoginHeaderText()).toEqual('Login'); }); it('should have a username box of type email', () => { - expect(page.isUsernameFieldPresent()).toBeTruthy(); - expect(page.getUsernameFieldType()).toEqual('email'); + expect(page.isEmailFieldPresent()).toBeTruthy(); + expect(page.getEmailFieldType()).toEqual('email'); }); it('should have a password box of type password', () => { expect(page.isPasswordFieldPresent()).toBeTruthy(); expect(page.getPasswordFieldType()).toBe('password'); }); + + it('should have a login button of type submit', () => { + expect(page.isLoginButtonPresent()).toBeTruthy(); + expect(page.getLoginButtonType()).toBe('submit'); + }); + + it('should have a disabled login button when empty', () => { + expect(page.isLoginButtonEnabled()).toBeFalsy(); + }); + + it('should have a disabled login button when only email', () => { + page.fillEmailFieldWith('test@example.com'); + expect(page.isLoginButtonEnabled()).toBeFalsy(); + }); + + it('should have a disabled login button when only password', () => { + page.fillPasswordFieldWith('abc123'); + expect(page.isLoginButtonEnabled()).toBeFalsy(); + }); + + it('should have an enabled login button when both inputs filled', () => { + page.fillEmailFieldWith('test@example.com'); + page.fillPasswordFieldWith('abc123'); + expect(page.isLoginButtonEnabled()).toBeTruthy(); + }); + + it('should submit the filled data when login pressed', () => { + page.fillEmailFieldWith('test@example.com'); + page.fillPasswordFieldWith('abc123'); + expect(page.isLoginButtonEnabled()).toBeTruthy(); + page.getLoginButton().click(); + browser.waitForAngular(); + expect(browser.getCurrentUrl()).toContain('dashboard'); + }); }); diff --git a/e2e/login.po.ts b/e2e/login.po.ts index 3df3a18..048276a 100644 --- a/e2e/login.po.ts +++ b/e2e/login.po.ts @@ -9,12 +9,23 @@ export class LoginPageObject { return element(by.css('app-root h1')).getText(); } - getUsernameField() { return element(by.id('username')); } + getEmailField() { return element(by.id('username')); } getPasswordField() { return element(by.id('password')); } + getLoginButton() { return element(by.id('login')); } - isUsernameFieldPresent() { return this.getUsernameField().isPresent(); } + isEmailFieldPresent() { return this.getEmailField().isPresent(); } isPasswordFieldPresent() { return this.getPasswordField().isPresent(); } + isLoginButtonPresent() { return this.getLoginButton().isPresent(); } - getUsernameFieldType() { return this.getUsernameField().getAttribute('type'); } + getEmailFieldType() { return this.getEmailField().getAttribute('type'); } getPasswordFieldType() { return this.getPasswordField().getAttribute('type'); } + getLoginButtonType() { return this.getLoginButton().getAttribute('type'); } + + isLoginButtonEnabled() { return this.getLoginButton().isEnabled(); } + + clearEmailField() { return this.getEmailField().clear() }; + clearPasswordField() { return this.getPasswordField().clear() }; + + fillEmailFieldWith(text) { return this.getEmailField().sendKeys(text) }; + fillPasswordFieldWith(text) { return this.getPasswordField().sendKeys(text) }; } diff --git a/package-lock.json b/package-lock.json index 0f4662b..e746266 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4242,7 +4242,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, @@ -7140,7 +7141,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, @@ -14442,7 +14444,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, diff --git a/src/app/auth/login.component.html b/src/app/auth/login.component.html index 9a87e9b..a7f8aa5 100644 --- a/src/app/auth/login.component.html +++ b/src/app/auth/login.component.html @@ -28,7 +28,7 @@
- +