Skip to content

Commit e75b5c1

Browse files
author
ieammac
committed
Angular 4 with Protractor using mocks data without going to backend server
0 parents  commit e75b5c1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+10114
-0
lines changed

‎README.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
## Springboot + Angular 4 + Protractor (e2e testing) using mocks (ng-apimocks)
2+
3+
### Note: (Its recommended to read ui/README.md before reading this readme file because it will give you more idea how things are working and the main focus of this project is ui module)
4+
5+
This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.28.3.
6+
7+
This project uses Java 8 and maven version 3.5.2. Until a proper maven wrap is in place to allow project building using lower version
8+
of maven, ensure the correct version is available locally. Additionally ensure that JAVA_HOME and M2_HOME are correctly set up.
9+
10+
## Angular Development server
11+
12+
Please "cd ui" and execute "npm start" to start Angular server then write Angular code.
13+
Angular server will use "src/proxy.conf.json" to reverse API call to Spring Boot and will be accessible at http://localhost:4200
14+
Starting the Angular Server enables Hot Reload on the Frontend.
15+
16+
cd src/
17+
* install modules: npm install
18+
19+
## Further help
20+
21+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
22+
23+
##### "NOTE":
24+
In case project is not building please delete "node_module" folder and "pacakge-lock.json" files from ui module, i had to delete them every time when running ui module using npm directly if i had ran it before using maven and vice versa.
25+
26+
##NPM Commands
27+
# Build Angular in ui/src
28+
npm install # install node modules
29+
npm run build # Build the project
30+
npm start # Starts Angular server
31+
32+
## Maven Commands
33+
34+
# Build and Test
35+
mvn clean install # note: this will run ui e2e tests using mocks, there is no backend tests existing yet
36+
37+
# Test
38+
mvn test # note: this will run ui e2e tests using mocks, there is no backend tests existing yet
39+
40+
# Running locally
41+
mvn -f web/pom.xml spring-boot:run # starts backend application to serve the restful services
42+
43+
### How the build process works
44+
There are only configuration files involved:
45+
46+
- [package.json](ui/src/package.json) where we have a "build" script that runs `ng build`.
47+
- [pom.xml](../pom.xml#L139) in which we configure the frontend-maven-plugin to run this "build" script during the `generate-resources` phase.
48+
- The [.angular-cli](src/.angular-cli.json) file where we specify the output directory for the compiled frontend files, which is
49+
`target/classes/static`.
50+
51+
52+
When we run `mvn clean install` in the UI module, the frontend source files will be compiled and generated at `target/classes/static`,
53+
which is one of the default locations that Spring Boot specifies for static content (the others are /META-INF/resources, /resources and /public).
54+
The generated airfleet-ui.jar is then referenced as a dependency in airfleet-web.
55+
56+
57+
### Features
58+
59+
* ng proxy to spring boot application
60+
* frontend-maven-plugin to help to build angular app with Spring Boot
61+
62+
### Reference
63+
64+
* A Maven plugin that downloads/installs Node and NPM locally, runs NPM install, Grunt, Gulp and/or Karma： https://github.com/eirslett/frontend-maven-plugin

‎pom.xml

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<project xmlns="http://maven.apache.org/POM/4.0.0"
3+
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4+
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
5+
6+
<parent>
7+
<groupId>org.springframework.boot</groupId>
8+
<artifactId>spring-boot-starter-parent</artifactId>
9+
<version>1.5.3.RELEASE</version>
10+
</parent>
11+
12+
<modelVersion>4.0.0</modelVersion>
13+
14+
<groupId>springbootangularprotractor</groupId>
15+
<artifactId>springbootangularprotractor</artifactId>
16+
<packaging>pom</packaging>
17+
<version>1.0-SNAPSHOT</version>
18+
19+
20+
<properties>
21+
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
22+
<java.version>1.8</java.version>
23+
<jquery.version>3.2.1</jquery.version>
24+
<bootstrap.version>3.3.7</bootstrap.version>
25+
<angular.version>1.6.5</angular.version>
26+
<angular-bootstrap.version>2.5.0</angular-bootstrap.version>
27+
<frontend-plugin.version>1.4</frontend-plugin.version>
28+
<e2e.proxy.port>4200</e2e.proxy.port>
29+
<e2e.mock.server.port>3000</e2e.mock.server.port>
30+
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
31+
<apache-common-io-version>2.4</apache-common-io-version>
32+
<common-io-version>2.4</common-io-version>
33+
<node.version>v8.1.2</node.version>
34+
<npm.version>5.0.3</npm.version>
35+
36+
37+
</properties>
38+
39+
<dependencyManagement>
40+
<dependencies>
41+
42+
</dependencies>
43+
</dependencyManagement>
44+
45+
<modules>
46+
<module>web</module>
47+
<module>ui</module>
48+
</modules>
49+
50+
51+
</project>

‎ui/.angular-cli.json

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"project": {
4+
"name": "demo-web"
5+
},
6+
"apps": [
7+
{
8+
"root": "src",
9+
"outDir": "../target/classes/static/",
10+
"assets": [
11+
"assets",
12+
"favicon.ico"
13+
],
14+
"index": "index.html",
15+
"main": "main.ts",
16+
"polyfills": "polyfills.ts",
17+
"tsconfig": "../tsconfig.json",
18+
"testTsconfig": "e2e/configuration/tsconfig.spec.json",
19+
"prefix": "demo",
20+
"styles": [
21+
"styles.scss"
22+
],
23+
"scripts": [
24+
"../node_modules/jquery/dist/jquery.js",
25+
"../node_modules/bootstrap/dist/js/bootstrap.js"
26+
],
27+
"environmentSource": "environments/environment.ts",
28+
"environments": {
29+
"dev": "environments/environment.ts",
30+
"prod": "environments/environment.prod.ts"
31+
}
32+
}
33+
],
34+
"e2e": {
35+
"protractor": {
36+
"config": "./protractor.conf.js"
37+
}
38+
},
39+
"lint": [
40+
{
41+
"project": "../tsconfig.json"
42+
},
43+
{
44+
"project": "tsconfig.spec.json"
45+
},
46+
{
47+
"project": "e2e/tsconfig.e2e.json"
48+
}
49+
],
50+
"defaults": {
51+
"styleExt": "scss",
52+
"component": {
53+
}
54+
}
55+
}

‎ui/.tmp/ngApimock/css/main.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/.tmp/ngApimock/index.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="nl" data-ng-app="ng-apimock" data-ng-strict-di>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<title>ng-apimock</title>
9+
10+
<script src="js/angular.min.js"></script>
11+
<script src="js/angular-resource.min.js"></script>
12+
<script src="js/_ngApimock.js"></script>
13+
<script src="js/ngapimock.component.js"></script>
14+
<script src="js/ngapimock.controller.js"></script>
15+
<script src="js/mocks.service.js"></script>
16+
<script src="js/variables.service.js"></script>
17+
<link href="css/main.css" rel="stylesheet"/>
18+
19+
</head>
20+
<body>
21+
<div class="container">
22+
<h1>Scenario based api mocking support <small>by <a href="https://github.com/mdasberg/ng-apimock" target="_blank">ng-apimock</a></small></h1>
23+
24+
<hr />
25+
<h4>How does it work?</h4>
26+
<p>
27+
It's very easy. Each line represents is an expression that matches a http call. <br />
28+
By selecting a scenario, the call will not go through to the backend, but will return the matching response for the selected scenario.
29+
</p>
30+
<br />
31+
32+
<h4>Howtos</h4>
33+
<p>
34+
<a href="https://github.com/mdasberg/ng-apimock/blob/master/README.md#howto-write-mocks" target="_blank">Howto write mocks</a><br />
35+
<a href="https://github.com/mdasberg/ng-apimock/blob/master/README.md#howto-serve-selected-mocks" target="_blank">Howto serve selected mocks</a>
36+
</p>
37+
<br />
38+
<ng-apimock></ng-apimock>
39+
</div>
40+
</body>
41+
</html>

‎ui/.tmp/ngApimock/js/_ngApimock.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
(function () {
2+
'use script';
3+
4+
/** The application. */
5+
angular
6+
.module('ng-apimock', ['ngResource']);
7+
})();

‎ui/.tmp/ngApimock/js/angular-resource.min.js

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)