configure absolute paths

jest.config.js

@@ -1,6 +1,10 @@
 module.exports = {
-  preset: 'jest-preset-angular',
-  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
-  globalSetup: 'jest-preset-angular/global-setup',
-  roots: ['<rootDir>/src']
+  preset: "jest-preset-angular",
+  setupFilesAfterEnv: ["<rootDir>/jest-setup.ts"],
+  globalSetup: "jest-preset-angular/global-setup",
+  roots: ["<rootDir>/src"],
+  moduleNameMapper: {
+    "^@app/(.*)$": "<rootDir>/src/app/$1",
+    "^@tests/(.*)$": "<rootDir>/src/tests/$1",
+  },
 };

src/app/__snapshots__/app.component.spec.ts.snap

@@ -8,6 +8,7 @@ exports[`AppComponent should render 1`] = `
     class="app"
   >
     
+    
     <app-navbar>
       <nav
         class="nav"

src/app/app.component.spec.ts

@@ -14,9 +14,9 @@ import {
   provideHttpClient,
   withInterceptorsFromDi,
 } from '@angular/common/http';
-import { MockBackendInterceptor } from '../tests/mock-backend.interceptor';
 import { routes } from './app-routes';
 import { provideRouter } from '@angular/router';
+import { MockBackendInterceptor } from '@tests/mock-backend.interceptor';
 
 describe('AppComponent', () => {
   const mockAuthService = createMockWithValues(AuthService, {

src/app/core/layout/navbar/__snapshots__/navbar.component.spec.ts.snap

@@ -14,16 +14,20 @@ exports[`NavComponent should render 1`] = `
         class="app-icon icon--large"
         type="logo"
       >
-        <svg
-          fill="none"
-          viewBox="0 0 66 66"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          class="icon"
         >
-          <path
-            d="M33 0C14.775 0 0 14.775 0 33c0 18.226 14.775 33 33 33 18.227 0 33-14.774 33-33C66 14.776 51.227.002 33 .002V0Zm15.133 47.596a2.056 2.056 0 0 1-2.83.682c-7.747-4.733-17.5-5.805-28.988-3.18a2.058 2.058 0 0 1-.915-4.012c12.57-2.873 23.353-1.636 32.052 3.68.969.595 1.276 1.86.681 2.83Zm4.04-8.987a2.572 2.572 0 0 1-3.54.85c-8.87-5.454-22.39-7.033-32.883-3.849a2.576 2.576 0 0 1-3.21-1.714 2.577 2.577 0 0 1 1.715-3.209c11.985-3.636 26.884-1.875 37.07 4.385a2.572 2.572 0 0 1 .847 3.537Zm.346-9.357c-10.636-6.317-28.183-6.898-38.338-3.816a3.086 3.086 0 1 1-1.791-5.907c11.656-3.539 31.034-2.855 43.28 4.414a3.083 3.083 0 0 1 1.079 4.23 3.084 3.084 0 0 1-4.228 1.08h-.002Z"
-            fill="#fff"
-          />
-        </svg>
+          <svg
+            fill="none"
+            viewBox="0 0 66 66"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M33 0C14.775 0 0 14.775 0 33c0 18.226 14.775 33 33 33 18.227 0 33-14.774 33-33C66 14.776 51.227.002 33 .002V0Zm15.133 47.596a2.056 2.056 0 0 1-2.83.682c-7.747-4.733-17.5-5.805-28.988-3.18a2.058 2.058 0 0 1-.915-4.012c12.57-2.873 23.353-1.636 32.052 3.68.969.595 1.276 1.86.681 2.83Zm4.04-8.987a2.572 2.572 0 0 1-3.54.85c-8.87-5.454-22.39-7.033-32.883-3.849a2.576 2.576 0 0 1-3.21-1.714 2.577 2.577 0 0 1 1.715-3.209c11.985-3.636 26.884-1.875 37.07 4.385a2.572 2.572 0 0 1 .847 3.537Zm.346-9.357c-10.636-6.317-28.183-6.898-38.338-3.816a3.086 3.086 0 1 1-1.791-5.907c11.656-3.539 31.034-2.855 43.28 4.414a3.083 3.083 0 0 1 1.079 4.23 3.084 3.084 0 0 1-4.228 1.08h-.002Z"
+              fill="#fff"
+            />
+          </svg>
+        </span>
         
       </app-icon>
       <h1>

src/app/core/layout/navbar/navbar.component.spec.ts

@@ -4,19 +4,19 @@ import {
 } from '@tanstack/angular-query-experimental';
 import { RouterModule } from '@angular/router';
 import { NavbarComponent } from './navbar.component';
-import { User } from '../../interfaces/user';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { render, screen } from '@testing-library/angular';
 import { MatIconModule } from '@angular/material/icon';
 import { CommonModule } from '@angular/common';
-import { IconComponent } from '../icon/icon.component';
 import {
   HTTP_INTERCEPTORS,
   provideHttpClient,
   withInterceptorsFromDi,
 } from '@angular/common/http';
-import { MockBackendInterceptor } from '../../../../tests/mock-backend.interceptor';
-import { user } from '../../../../tests/mocks';
+import { IconComponent } from '@app/shared/components/icon/icon.component';
+import { User } from '@app/shared/interfaces/user';
+import { user } from '@tests/mocks';
+import { MockBackendInterceptor } from '@tests/mock-backend.interceptor';
 
 describe('NavComponent', () => {
   const userData: User = user;

src/app/core/layout/navbar/navbar.component.ts

@@ -3,10 +3,10 @@ import { RouterModule } from '@angular/router';
 import { injectQuery } from '@tanstack/angular-query-experimental';
 import { Component, inject, input, EventEmitter, Output } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IconComponent } from 'src/app/shared/components/icon/icon.component';
-import { UserService } from 'src/app/shared/services/user.service';
-import { TrackService } from 'src/app/shared/services/track.service';
-import { User } from 'src/app/shared/interfaces/user';
+import { IconComponent } from '@app/shared/components/icon/icon.component';
+import { UserService } from '@app/shared/services/user.service';
+import { TrackService } from '@app/shared/services/track.service';
+import { User } from '@app/shared/interfaces/user';
 
 @Component({
   selector: 'app-navbar',

src/app/features/home/home.component.spec.ts

@@ -14,7 +14,7 @@ import {
   provideHttpClient,
   withInterceptorsFromDi,
 } from '@angular/common/http';
-import { MockBackendInterceptor } from '../../tests/mock-backend.interceptor';
+import { MockBackendInterceptor } from '@tests/mock-backend.interceptor';
 
 describe('HomeComponent', () => {
   const renderComponent = () =>

src/app/features/home/home.component.ts

@@ -3,7 +3,7 @@ import { injectQuery } from '@tanstack/angular-query-experimental';
 import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { TrackService } from 'src/app/shared/services/track.service';
+import { TrackService } from '@app/shared/services/track.service';
 
 @Component({
   selector: 'app-home',

src/app/features/playlist/playlist.component.spec.ts

@@ -13,11 +13,10 @@ import {
   provideHttpClient,
   withInterceptorsFromDi,
 } from '@angular/common/http';
-import { MockBackendInterceptor } from '../../tests/mock-backend.interceptor';
 import { ActivatedRoute, convertToParamMap } from '@angular/router';
 import { of } from 'rxjs';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { PlayerService } from '../shared/services/player.service';
+import { MockBackendInterceptor } from '@tests/mock-backend.interceptor';
+import { PlayerService } from '@app/shared/services/player.service';
 
 describe('PlaylistComponent', () => {
   test('should render', async () => {

src/app/features/playlist/playlist.component.ts

@@ -5,8 +5,8 @@ import { PageEvent } from '@angular/material/paginator';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { injectQuery } from '@tanstack/angular-query-experimental';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { TrackListComponent } from 'src/app/shared/components/track-list/track-list.component';
-import { TrackService } from 'src/app/shared/services/track.service';
+import { TrackListComponent } from '@app/shared/components/track-list/track-list.component';
+import { TrackService } from '@app/shared/services/track.service';
 
 @Component({
   selector: 'app-playlist',

src/app/features/saved-tracks/saved-tracks.component.spec.ts

@@ -10,8 +10,8 @@ import {
   provideHttpClient,
   withInterceptorsFromDi,
 } from '@angular/common/http';
-import { MockBackendInterceptor } from '../../tests/mock-backend.interceptor';
-import { PlayerService } from '../shared/services/player.service';
+import { PlayerService } from '@app/shared/services/player.service';
+import { MockBackendInterceptor } from '@tests/mock-backend.interceptor';
 
 describe('SavedComponent', () => {
   test('should render', async () => {

src/app/features/saved-tracks/saved-tracks.component.ts

@@ -1,8 +1,8 @@
 import { Component, inject, signal } from '@angular/core';
 import { PageEvent } from '@angular/material/paginator';
+import { TrackListComponent } from '@app/shared/components/track-list/track-list.component';
+import { TrackService } from '@app/shared/services/track.service';
 import { injectQuery } from '@tanstack/angular-query-experimental';
-import { TrackListComponent } from 'src/app/shared/components/track-list/track-list.component';
-import { TrackService } from 'src/app/shared/services/track.service';
 
 @Component({
   selector: 'app-saved-tracks',

src/app/features/search-tracks/search-tracks.component.spec.ts

@@ -13,10 +13,10 @@ import {
   provideHttpClient,
   withInterceptorsFromDi,
 } from '@angular/common/http';
-import { MockBackendInterceptor } from '../../tests/mock-backend.interceptor';
 import { SearchTracksComponent } from './search-tracks.component';
-import { PlayerService } from '../shared/services/player.service';
 import userEvent from '@testing-library/user-event';
+import { PlayerService } from '@app/shared/services/player.service';
+import { MockBackendInterceptor } from '@tests/mock-backend.interceptor';
 
 describe('SearchComponent', () => {
   const renderComponent = () =>

src/app/features/search-tracks/search-tracks.component.ts

@@ -7,10 +7,10 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { NgOptimizedImage } from '@angular/common';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-import { DurationPipe } from 'src/app/shared/pipes/duration/duration.pipe';
-import { TrackComponent } from 'src/app/shared/components/track/track.component';
-import { TrackService } from 'src/app/shared/services/track.service';
-import { PlayerService } from 'src/app/shared/services/player.service';
+import { DurationPipe } from '@app/shared/pipes/duration/duration.pipe';
+import { TrackComponent } from '@app/shared/components/track/track.component';
+import { TrackService } from '@app/shared/services/track.service';
+import { PlayerService } from '@app/shared/services/player.service';
 
 @Component({
   selector: 'app-search-tracks',

src/app/features/top-tracks/top-tracks.component.spec.ts

@@ -14,8 +14,8 @@ import {
   provideHttpClient,
   withInterceptorsFromDi,
 } from '@angular/common/http';
-import { MockBackendInterceptor } from '../../../tests/mock-backend.interceptor';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { MockBackendInterceptor } from '@tests/mock-backend.interceptor';
 
 describe('TopTracksComponent', () => {
   test('should render', async () => {

src/app/shared/components/track-list/track-list.component.spec.ts

@@ -1,12 +1,11 @@
 import { render, screen } from '@testing-library/angular';
 import { TrackListComponent } from './track-list.component';
-import { savedTracks } from '../../../../tests/mocks';
-import { PlayerService } from '../../services/player.service';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
 import {
   provideHttpClient,
   withInterceptorsFromDi,
 } from '@angular/common/http';
+import { savedTracks } from '@tests/mocks';
+import { PlayerService } from '@app/shared/services/player.service';
 
 describe('TrackListComponent', () => {
   test('should render', async () => {

src/stories/button.stories.ts

@@ -1,7 +1,7 @@
 import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { ButtonDirective } from 'src/app/shared/directives/button/button.directive';
 import { CommonModule } from '@angular/common';
-import { IconComponent } from 'src/app/shared/components/icon/icon.component';
+import { IconComponent } from '@app/shared/components/icon/icon.component';
+import { ButtonDirective } from '@app/shared/directives/button/button.directive';
 
 const meta: Meta<ButtonDirective> = {
   title: 'Components/Button',
@@ -49,10 +49,10 @@ export const Text: Story = {
 
 export const Icon: Story = {
   args: {
-    mode: 'text'
+    mode: 'text',
   },
-  render: ({mode}) => {
-    console.log("🚀 ~ mode:", mode)
+  render: ({ mode }) => {
+    console.log('🚀 ~ mode:', mode);
     return {
       template: `<button type="button" mode="${mode}" appButton> <app-icon class="icon" type="menu"></app-icon></button>`,
     };

src/stories/dialog.stories.ts

@@ -1,25 +1,33 @@
 import { type Meta, type StoryObj } from '@storybook/angular';
-import { TrackComponent } from 'src/app/shared/components/track/track.component';
-import { savedTracks } from 'src/tests/mocks';
 
-import { Component, inject } from "@angular/core";
-import { DialogComponent } from 'src/app/shared/components/dialog/dialog.component';
-import { DIALOG_CONTEXT, DialogService, RETURN_DATA } from 'src/app/shared/components/dialog/dialog.service';
-import { ButtonDirective } from 'src/app/shared/directives/button/button.directive';
+import { Component, inject } from '@angular/core';
 import { Subject } from 'rxjs';
+import { DialogComponent } from '@app/shared/components/dialog/dialog.component';
+import { ButtonDirective } from '@app/shared/directives/button/button.directive';
+import {
+  DIALOG_CONTEXT,
+  DialogService,
+  RETURN_DATA,
+} from '@app/shared/components/dialog/dialog.service';
+import { TrackComponent } from '@app/shared/components/track/track.component';
+import { savedTracks } from '@tests/mocks';
 
 @Component({
   selector: 'app-dialog-example',
   imports: [DialogComponent, ButtonDirective],
   template: `
-  <app-dialog>
-  <div header>{{dialogContext}}</div>  
-  <div style="height: 200px;">dialog content!</div>
-  <div style="display: flex; gap: 8px;" footer> <button type="button" (click)="confirmData()" appButton>primary</button>  <button type="button" [mode]="'text'" appButton>secondary</button> </div>
-</app-dialog>
-    `,
+    <app-dialog>
+      <div header>{{ dialogContext }}</div>
+      <div style="height: 200px;">dialog content!</div>
+      <div style="display: flex; gap: 8px;" footer>
+        <button type="button" (click)="confirmData()" appButton>primary</button>
+        <button type="button" [mode]="'text'" appButton>secondary</button>
+      </div>
+    </app-dialog>
+  `,
   standalone: true,
-}) export class DialogExampleComponent {
+})
+export class DialogExampleComponent {
   dialogContext = inject<string>(DIALOG_CONTEXT);
   returnData = inject<Subject<string>>(RETURN_DATA);
   dialogService = inject(DialogService);
@@ -35,14 +43,15 @@ import { Subject } from 'rxjs';
   selector: 'app-example-view',
   imports: [DialogExampleComponent, ButtonDirective],
   template: `
-       <button type="button" (click)="openDialog()" appButton>button</button>
-    `,
+    <button type="button" (click)="openDialog()" appButton>button</button>
+  `,
   standalone: true,
-}) export class ExampleViewComponent {
-  private dialogService = inject(DialogService)
+})
+export class ExampleViewComponent {
+  private dialogService = inject(DialogService);
 
   openDialog() {
-    this.dialogService.open(DialogExampleComponent,  'dialogTitle')
+    this.dialogService.open(DialogExampleComponent, 'dialogTitle');
   }
 }
 

src/stories/fade.stories.ts

@@ -1,30 +1,42 @@
 import { Component, signal } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
-import { applicationConfig, type Meta, type StoryObj } from '@storybook/angular';
-import { appFade } from 'src/app/shared/animations/fade.animation';
-import { ButtonDirective } from 'src/app/shared/directives/button/button.directive';
-import { TrackComponent } from 'src/app/shared/components/track/track.component';
-import { savedTracks } from 'src/tests/mocks';
+import { appFade } from '@app/shared/animations/fade.animation';
+import { TrackComponent } from '@app/shared/components/track/track.component';
+import { ButtonDirective } from '@app/shared/directives/button/button.directive';
+import {
+  applicationConfig,
+  type Meta,
+  type StoryObj,
+} from '@storybook/angular';
+import { savedTracks } from '@tests/mocks';
 
 @Component({
   selector: 'app-example-view',
   imports: [ButtonDirective, TrackComponent],
-  animations: [appFade ],
+  animations: [appFade],
   template: `
     <div style="height: 200px;">
-       <button style="margin-bottom: 16px;" type="button" (click)="toggleContent()" appButton>button</button>
-       @if(showContent()){
+      <button
+        style="margin-bottom: 16px;"
+        type="button"
+        (click)="toggleContent()"
+        appButton
+      >
+        button
+      </button>
+      @if (showContent()) {
         <app-track @appFade [track]="savedTracks.items[0].track"></app-track>
-       }
+      }
     </div>
-    `,
+  `,
   standalone: true,
-}) export class ExampleViewComponent {
-  showContent = signal(false)
+})
+export class ExampleViewComponent {
+  showContent = signal(false);
   savedTracks = savedTracks;
 
   toggleContent() {
-    this.showContent.update(val => !val)
+    this.showContent.update((val) => !val);
   }
 }
 
@@ -33,7 +45,7 @@ const meta: Meta<TrackComponent> = {
   component: ExampleViewComponent,
   tags: ['autodocs'],
   decorators: [
-   applicationConfig({
+    applicationConfig({
       providers: [provideAnimations()],
     }),
   ],

src/stories/icon.stories.ts

@@ -1,6 +1,6 @@
+import { IconComponent } from '@app/shared/components/icon/icon.component';
+import { Icons } from '@app/shared/utils/icons';
 import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
-import { IconComponent } from 'src/app/shared/components/icon/icon.component';
-import { Icons } from 'src/app/shared/utils/icons';
 
 const meta: Meta<IconComponent> = {
   title: 'Components/Icon',