Merge pull request #63 from abpframework/test/add-testing-sample-to-a…

…ngular Updated sample BookStore project tests
abpframework · Jan 19, 2021 · 6d2aa7d · 6d2aa7d
2 parents 2d28ace + 764e20a
commit 6d2aa7d
Show file tree

Hide file tree

Showing 9 changed files with 873 additions and 132 deletions.
diff --git a/BookStore-Angular-MongoDb/angular/angular.json b/BookStore-Angular-MongoDb/angular/angular.json
@@ -121,22 +121,13 @@
             "karmaConfig": "karma.conf.js",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": [
-              {
-                "input": "node_modules/bootstrap/dist/css/bootstrap.min.css",
-                "inject": true,
-                "bundleName": "bootstrap.min"
-              },
-              "src/styles.scss",
-              {
-                "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
-                "inject": false,
-                "bundleName": "fontawesome-all.min"
-              },
-              {
-                "input": "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css",
-                "inject": false,
-                "bundleName": "fontawesome-v4-shims.min"
-              }
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
+              "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css",
+              "node_modules/@swimlane/ngx-datatable/index.css",
+              "node_modules/@swimlane/ngx-datatable/assets/icons.css",
+              "node_modules/@swimlane/ngx-datatable/themes/material.css",
+              "src/styles.scss"
             ],
             "scripts": []
           }

diff --git a/BookStore-Angular-MongoDb/angular/package.json b/BookStore-Angular-MongoDb/angular/package.json
@@ -12,13 +12,13 @@
   },
   "private": true,
   "dependencies": {
-    "@abp/ng.components": "~4.0.0",
-    "@abp/ng.core": "~4.0.0",
-    "@abp/ng.identity": "~4.0.0",
-    "@abp/ng.setting-management": "~4.0.0",
-    "@abp/ng.tenant-management": "~4.0.0",
-    "@abp/ng.theme.basic": "~4.0.0",
-    "@abp/ng.theme.shared": "~4.0.0",
+    "@abp/ng.components": "~4.1.1",
+    "@abp/ng.core": "~4.1.1",
+    "@abp/ng.identity": "~4.1.1",
+    "@abp/ng.setting-management": "~4.1.1",
+    "@abp/ng.tenant-management": "~4.1.1",
+    "@abp/ng.theme.basic": "~4.1.1",
+    "@abp/ng.theme.shared": "~4.1.1",
     "@angular/animations": "~11.0.0",
     "@angular/common": "~11.0.0",
     "@angular/compiler": "~11.0.0",
@@ -32,11 +32,13 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@abp/ng.schematics": "~4.0.0",
+    "@abp/ng.schematics": "~4.1.1",
     "@angular-devkit/build-angular": "~0.1100.0",
     "@angular/cli": "~11.0.0",
     "@angular/compiler-cli": "~11.0.0",
     "@angular/language-service": "~11.0.0",
+    "@testing-library/angular": "^10.3.1",
+    "@testing-library/user-event": "^12.6.0",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",

diff --git a/BookStore-Angular-MongoDb/angular/src/app/author/author.component.html b/BookStore-Angular-MongoDb/angular/src/app/author/author.component.html
@@ -17,7 +17,13 @@ <h5 class="card-title">
     </div>
   </div>
   <div class="card-body">
-    <ngx-datatable [rows]="author.items" [count]="author.totalCount" [list]="list" default>
+    <ngx-datatable
+      data-testid="author-table"
+      [rows]="author.items"
+      [count]="author.totalCount"
+      [list]="list"
+      default
+    >
       <ngx-datatable-column
         [name]="'::Actions' | abpLocalization"
         [maxWidth]="150"
@@ -60,20 +66,20 @@ <h3>{{ (selectedAuthor.id ? '::Edit' : '::NewAuthor') | abpLocalization }}</h3>
   </ng-template>
 
   <ng-template #abpBody>
-    <form [formGroup]="form" (ngSubmit)="save()">
+    <form id="author-form" [formGroup]="form" (ngSubmit)="save()">
       <div class="form-group">
         <label for="author-name">Name</label><span> * </span>
         <input type="text" id="author-name" class="form-control" formControlName="name" autofocus />
       </div>
 
       <div class="form-group">
-        <label>Birth date</label><span> * </span>
+        <label for="author-birth-date">Birth date</label><span> * </span>
         <input
+          id="author-birth-date"
+          ngbDatepicker
           #datepicker="ngbDatepicker"
-          class="form-control"
-          name="datepicker"
           formControlName="birthDate"
-          ngbDatepicker
+          class="form-control"
           (click)="datepicker.toggle()"
         />
       </div>
@@ -82,10 +88,10 @@ <h3>{{ (selectedAuthor.id ? '::Edit' : '::NewAuthor') | abpLocalization }}</h3>
 
   <ng-template #abpFooter>
     <button type="button" class="btn btn-secondary" #abpClose>
-      {{ '::Close' | abpLocalization }}
+      {{ '::Cancel' | abpLocalization }}
     </button>
 
-    <button class="btn btn-primary" (click)="save()" [disabled]="form.invalid">
+    <button form="author-form" class="btn btn-primary" [disabled]="form.invalid || form.pristine">
       <i class="fa fa-check mr-1"></i>
       {{ '::Save' | abpLocalization }}
     </button>