diff --git a/templates/app-nolayers/angular/src/app/home/home.component.spec.ts b/templates/app-nolayers/angular/src/app/home/home.component.spec.ts
new file mode 100644
index 00000000000..9622abc9f6d
--- /dev/null
+++ b/templates/app-nolayers/angular/src/app/home/home.component.spec.ts
@@ -0,0 +1,62 @@
+import { CoreTestingModule } from '@abp/ng.core/testing';
+import { ThemeBasicTestingModule } from '@abp/ng.theme.basic/testing';
+import { ThemeSharedTestingModule } from '@abp/ng.theme.shared/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { HomeComponent } from './home.component';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { AuthService } from '@abp/ng.core';
+
+describe('HomeComponent', () => {
+  let fixture: ComponentFixture<HomeComponent>;
+  const mockOAuthService = jasmine.createSpyObj('OAuthService', ['hasValidAccessToken']);
+  const mockAuthService = jasmine.createSpyObj('AuthService', ['navigateToLogin']);
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [HomeComponent],
+      imports: [
+        CoreTestingModule.withConfig(),
+        ThemeSharedTestingModule.withConfig(),
+        ThemeBasicTestingModule.withConfig(),
+        NgxValidateCoreModule,
+      ],
+      providers: [
+        /* mock providers here */
+        {
+          provide: OAuthService,
+          useValue: mockOAuthService,
+        },
+        {
+          provide: AuthService,
+          useValue: mockAuthService,
+        },
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    fixture.detectChanges();
+  });
+
+  it('should be initiated', () => {
+    expect(fixture.componentInstance).toBeTruthy();
+  });
+
+  describe('when login state is true', () => {
+    beforeAll(() => {
+      mockOAuthService.hasValidAccessToken.and.returnValue(true);
+    });
+
+    it('hasLoggedIn should be true', () => {
+      expect(fixture.componentInstance.hasLoggedIn).toBeTrue();
+      expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled();
+    });
+
+    it('button should not be exists', () => {
+      const element = fixture.nativeElement;
+      const cardTitle = element.querySelector('.card-title');
+      expect(cardTitle).toBeTruthy();
+    });
+  });
+});
diff --git a/templates/app-nolayers/angular/src/test.ts b/templates/app-nolayers/angular/src/test.ts
index 61925f9803f..85c74fe5319 100644
--- a/templates/app-nolayers/angular/src/test.ts
+++ b/templates/app-nolayers/angular/src/test.ts
@@ -1,11 +1,10 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
-import 'zone.js/testing';
 
 declare const require: {
   context(
diff --git a/templates/app/angular/src/app/home/home.component.spec.ts b/templates/app/angular/src/app/home/home.component.spec.ts
new file mode 100644
index 00000000000..3ceff9410b7
--- /dev/null
+++ b/templates/app/angular/src/app/home/home.component.spec.ts
@@ -0,0 +1,100 @@
+import { CoreTestingModule } from "@abp/ng.core/testing";
+import { ThemeBasicTestingModule } from "@abp/ng.theme.basic/testing";
+import { ThemeSharedTestingModule } from "@abp/ng.theme.shared/testing";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { NgxValidateCoreModule } from "@ngx-validate/core";
+import { HomeComponent } from "./home.component";
+import { OAuthService } from 'angular-oauth2-oidc';
+import { AuthService } from '@abp/ng.core';
+
+
+describe("HomeComponent", () => {
+  let fixture: ComponentFixture<HomeComponent>;
+  const mockOAuthService = jasmine.createSpyObj('OAuthService', ['hasValidAccessToken'])
+  const mockAuthService = jasmine.createSpyObj('AuthService', ['navigateToLogin'])
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [HomeComponent],
+        imports: [
+          CoreTestingModule.withConfig(),
+          ThemeSharedTestingModule.withConfig(),
+          ThemeBasicTestingModule.withConfig(),
+          NgxValidateCoreModule,
+        ],
+        providers: [
+          /* mock providers here */
+          {
+            provide: OAuthService,
+            useValue: mockOAuthService
+          },
+          {
+            provide: AuthService,
+            useValue: mockAuthService
+          }
+        ],
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    fixture.detectChanges();
+  });
+
+  it("should be initiated", () => {
+    expect(fixture.componentInstance).toBeTruthy();
+  });
+
+
+
+  describe('when login state is true', () => {
+    beforeAll(() => {
+      mockOAuthService.hasValidAccessToken.and.returnValue(true)
+    });
+
+    it("hasLoggedIn should be true", () => {
+
+      expect(fixture.componentInstance.hasLoggedIn).toBeTrue();
+      expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled()
+    })
+
+    it("button should not be exists", () => {
+      const element = fixture.nativeElement
+      const button = element.querySelector('[role="button"]')
+      expect(button).toBeNull()
+    })
+
+  })
+
+  describe('when login state is false', () => {
+    beforeAll(() => {
+      mockOAuthService.hasValidAccessToken.and.returnValue(false)
+    });
+
+    it("hasLoggedIn should be false", () => {
+
+      expect(fixture.componentInstance.hasLoggedIn).toBeFalse();
+      expect(mockOAuthService.hasValidAccessToken).toHaveBeenCalled()
+    })
+
+    it("button should be exists", () => {
+      const element = fixture.nativeElement
+      const button = element.querySelector('[role="button"]')
+      expect(button).toBeDefined()
+    })
+    describe('when button clicked', () => {
+
+      beforeEach(() => {
+        const element = fixture.nativeElement
+        const button = element.querySelector('[role="button"]')
+        button.click()
+      });
+
+      it("navigateToLogin have been called", () => {
+        expect(mockAuthService.navigateToLogin).toHaveBeenCalled()
+      })
+    })
+  })
+
+});
\ No newline at end of file
diff --git a/templates/app/angular/src/test.ts b/templates/app/angular/src/test.ts
index 61925f9803f..5b643ec44dd 100644
--- a/templates/app/angular/src/test.ts
+++ b/templates/app/angular/src/test.ts
@@ -1,11 +1,11 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
-import 'zone.js/testing';
+
 
 declare const require: {
   context(
diff --git a/templates/module/angular/projects/my-project-name/src/lib/my-project-name.component.spec.ts b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.component.spec.ts
index 88f67b1e654..4d6aae3ac8d 100644
--- a/templates/module/angular/projects/my-project-name/src/lib/my-project-name.component.spec.ts
+++ b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.component.spec.ts
@@ -1,16 +1,24 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { MyProjectNameComponent } from './my-project-name.component';
+import { MyProjectNameComponent } from './components/my-project-name.component';
+import { MyProjectNameService } from '@my-company-name/my-project-name';
+import { of } from 'rxjs';
 
 describe('MyProjectNameComponent', () => {
   let component: MyProjectNameComponent;
   let fixture: ComponentFixture<MyProjectNameComponent>;
-
+  const mockMyProjectNameService = jasmine.createSpyObj('MyProjectNameService', {
+    sample: of([]),
+  });
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ MyProjectNameComponent ]
-    })
-    .compileComponents();
+      declarations: [MyProjectNameComponent],
+      providers: [
+        {
+          provide: MyProjectNameService,
+          useValue: mockMyProjectNameService,
+        },
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
diff --git a/templates/module/angular/projects/my-project-name/src/lib/my-project-name.service.spec.ts b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.service.spec.ts
index 7955ce073ca..ec7aeb6c68d 100644
--- a/templates/module/angular/projects/my-project-name/src/lib/my-project-name.service.spec.ts
+++ b/templates/module/angular/projects/my-project-name/src/lib/my-project-name.service.spec.ts
@@ -1,12 +1,19 @@
 import { TestBed } from '@angular/core/testing';
-
-import { MyProjectNameService } from './my-project-name.service';
+import { MyProjectNameService } from './services/my-project-name.service';
+import { RestService } from '@abp/ng.core';
 
 describe('MyProjectNameService', () => {
   let service: MyProjectNameService;
-
+  const mockRestService = jasmine.createSpyObj('RestService', ['request']);
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: RestService,
+          useValue: mockRestService,
+        },
+      ],
+    });
     service = TestBed.inject(MyProjectNameService);
   });