Updated frontend with E2E test

Author: chrisleekr

.travis.yml

@@ -45,6 +45,7 @@ script:
  - cd frontend
  - npm run lint
  - npm run test
+ - npm run e2e
  - cd ..
  - cd backend
  - npm run lint

README.md

@@ -8,9 +8,9 @@ The project involves:
 * API
  - Yii2 REST API, Yii2 RBAC, JWT (JSON Web Token), Memcached
 * Backend: Staff/Administrator dashboard to manage staffs, users and settings
- - Angular 6, Bootstrap 4, JWT (JSON Web Token), Moment.js, Sweet Alert, Underscore.js
+ - Angular 6, Bootstrap 4, JWT (JSON Web Token), Moment.js, Sweet Alert, Underscore.js, Basic Unit test
 * Frontend: User website to support user registration, login and account management 
- - Angular 6, [@ng-toolkit/universal](https://github.com/maciejtreder/ng-toolkit), Bootstrap 4, JWT (JSON Web Token), Moment.js, Sweet Alert
+ - Angular 6, [@ng-toolkit/universal](https://github.com/maciejtreder/ng-toolkit), Bootstrap 4, JWT (JSON Web Token), Moment.js, Sweet Alert, Basic Unit & E2E test
 
 **Demo**
 
@@ -114,6 +114,14 @@ Once all containers are finished compiling, then open the browser.
  ```
  $ docker exec -it api /bin/sh
  ```
+ - To run code sniffer, use following command:
+ ```
+ $ docker exec api composer run sniff
+ ```
+ - To run unit test, use following command:
+ ```
+ $ docker exec api composer run test:unit
+ ```
  
 * **Backend - Angular**: [http://localhost/backend](http://localhost/backend)
  - Administrator username: `admin`, password: `123456`
@@ -127,7 +135,12 @@ Once all containers are finished compiling, then open the browser.
  $ docker exec -it backend /bin/sh
  ```
  - Note that the **live reloading feature has been disabled** due to restriction. 
- - Please open **Developer Tool** to prevent caching. The changes will be checked every 1s. Please refer `/backend/image-files/usr/local/bin/docker-entrypoint-dev.sh`. 
+ - Please open **Developer Tool** to prevent caching. The changes will be checked every 1s. Please refer `/backend/image-files/usr/local/bin/docker-entrypoint-dev.sh`.
+ - To run unit test, use following command:
+ ```
+ $ cd frontend
+ $ npm run test
+ ``` 
  
 * **Frontend - Angular**: [http://localhost/frontend](http://localhost/frontend)
  - Username: `user`, password `123456`
@@ -141,6 +154,16 @@ Once all containers are finished compiling, then open the browser.
  ```
  - Note that the **live reloading feature has been disabled** due to restriction. 
  - Please open **Developer Tool** to prevent caching. The changes will be checked every 1s. Please refer `/frontend/image-files/usr/local/bin/docker-entrypoint-dev.sh`.
+ - To run unit test, use following command:
+ ```
+ $ cd frontend
+ $ npm run test
+ ```
+ - To run E2E test, use following command:
+ ```
+ $ cd frontend
+ $ npm run e2e
+ ```
 
 ## Files & Folders structures
 

api/web/index-test.php

@@ -18,7 +18,7 @@
 
 if (!stristr($remote_address, '127.0.0.1')
  && !stristr($remote_address, '::1')
- && !stristr($remote_address, '172.19')) {
+ && !stristr($remote_address, '172.')) {
  die('You are not allowed to access this file.');
 }
 

docker-compose.yml

@@ -57,7 +57,7 @@ services:
  - api
  networks:
  - internal
-# volumes:
+ volumes:
 # - ./frontend/image-files/etc/nginx/nginx.conf:/etc/nginx/nginx.conf
 # - ./frontend/src:/app/src
 
@@ -83,9 +83,6 @@ services:
 networks:
  internal:
  driver: bridge
- ipam:
- config:
- - subnet: 172.19.0.0/24
 
 volumes:
  mysql_data:

frontend/.dockerignore

@@ -46,3 +46,5 @@ dist
 .webpack.json
 compiled
 dll
+
+output

frontend/.gitignore

@@ -42,3 +42,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+output

frontend/e2e/app.e2e-spec.ts

@@ -0,0 +1,64 @@
+import {_} from "underscore";
+import {browser} from "protractor";
+import {Header} from "../page-object/header.po";
+import {IndexPage} from "../page-object/index.po";
+import {GlobalPage} from "../page-object/global.po";
+
+describe('Index page', () => {
+
+ beforeAll(() => {
+ IndexPage.navigateTo();
+
+ GlobalPage.takeScreenshot('index-page');
+ });
+
+ describe('Header', () => {
+ it('should display logo', () => {
+ expect(Header.getLogo().isPresent()).toBe(true)
+ });
+
+ describe('Menu', () => {
+ _.each(['Home', 'Another Page', 'Sample Page'], menuText => {
+ it('should display menu `' + menuText + '`', () => {
+ expect(Header.getMenuByText(menuText).isPresent()).toBe(true);
+ });
+ });
+
+ it('should set active class for menu `Home`', () => {
+ expect(Header.getActiveMenu().getText()).toBe('Home');
+ });
+ });
+
+ describe('Buttons - Before Login', () => {
+ _.each(['Login', 'Sign up'], menuText => {
+ it('should display button `' + menuText + '`', () => {
+ expect(Header.getButtonForBeforeLogin(menuText).isPresent()).toBe(true);
+ });
+ });
+
+ describe('Click `Login` button', () => {
+ beforeAll(() => {
+ IndexPage.navigateTo();
+ Header.clickLoginButton();
+ GlobalPage.takeScreenshot('after-click-login-button');
+ });
+
+ it('should go to login page', () => {
+ expect(browser.getCurrentUrl()).toContain('/login');
+ });
+ });
+ describe('Click `Sign up` button', () => {
+ beforeAll(() => {
+ IndexPage.navigateTo();
+ Header.clickSignUpButton();
+ GlobalPage.takeScreenshot('after-click-signup');
+ });
+
+ it('should go to login page', () => {
+ expect(browser.getCurrentUrl()).toContain('/signup');
+ });
+ });
+ });
+ });
+
+});

frontend/e2e/app.po.ts

@@ -0,0 +1,53 @@
+import {_} from "underscore";
+import {Header} from "../page-object/header.po";
+import {LoginPage} from "../page-object/login.po";
+import {IndexPage} from "../page-object/index.po";
+import {GlobalPage} from "../page-object/global.po";
+
+describe('Login page', () => {
+
+ beforeAll(() => {
+ LoginPage.navigateTo();
+
+ GlobalPage.takeScreenshot('login-page');
+ });
+
+ describe('Header', () => {
+
+ it('should active button `Login`', () => {
+ expect(Header.getActiveButtonForBeforeLogin().getText()).toBe('Login');
+ });
+ });
+
+ describe('Login form', () => {
+ describe('With non-existing account', () => {
+ beforeAll(() => {
+ LoginPage.navigateTo();
+ LoginPage.fillLoginForm('non-exist-username', 'fake-password');
+ LoginPage.clickLoginButton();
+ });
+
+ it('should show error message', () => {
+ expect(LoginPage.getPasswordHelpBlock().getText()).toBe('Incorrect username or password.');
+ });
+ });
+
+ describe('With existing account', () => {
+ beforeAll(() => {
+ LoginPage.navigateTo();
+ LoginPage.fillLoginForm('user', '123456');
+ LoginPage.clickLoginButton();
+ });
+
+ it('should redirect to index page', () => {
+ GlobalPage.takeScreenshot('index-page-after-login');
+ expect(IndexPage.getPageWrapper().isPresent()).toBe(true);
+ });
+
+ it('should see username', () => {
+ expect(Header.getTextUsername().getText()).toBe('user (User)');
+ });
+
+ });
+ });
+});