Unknown error component + full tests

Author: EmmanuelLefevre

docs/ARCHITECTURE.md

@@ -114,6 +114,7 @@
  ┣ 🖼️assets
  ┃ ┣ ⚙️_config
  ┃ ┣ 💾_data
+ ┃ ┣ 🎬animations
  ┃ ┣ 🌄background
  ┃ ┣ 🔡fonts
  ┃ ┣ 🗣️i18n

package.json

@@ -100,6 +100,7 @@
     "@fortawesome/free-brands-svg-icons": "7.1.0",
     "@fortawesome/free-regular-svg-icons": "7.1.0",
     "@fortawesome/free-solid-svg-icons": "7.1.0",
+    "@lottiefiles/dotlottie-wc": "0.9.8",
     "@ngx-translate/core": "17.0.0",
     "@ngx-translate/http-loader": "17.0.0",
     "rxjs": "7.8.2",

pnpm-lock.yaml

@@ -29,8 +29,8 @@ export const TEAM_DEVELOPERS: Developer[] = [
     id: 5,
     name: 'Jason Parse',
     photoUrl: 'https://api.dicebear.com/9.x/fun-emoji/svg?seed=JasonParse&backgroundColor=b6e3f4',
-    photoScale: 0.9,
-    photoTranslateY: '7px',
+    photoScale: 1.1,
+    photoTranslateY: '0px',
     apologizesMessage: 'PAGES.ERROR.SERVER.APOLOGIZES.DEV.3'
   }
 ];

src/app/core/_config/team/developers.constant.ts

@@ -3,12 +3,14 @@ <h1 class="error-view__title">
     {{ 'PAGES.ERROR.NOT_FOUND.TITLE' | translate }}
   </h1>
 
-  <h3
-    class="error-view__code"
-    [class.is-english]="translate.getCurrentLang() === 'en'">
-    <span class="error-view__label">{{ 'PAGES.ERROR.NOT_FOUND.LABEL' | translate }}</span>
-    <span class="error-view__code-value">{{ code() }}</span>
-  </h3>
+  @if (code()) {
+    <h3
+      class="error-view__code"
+      [class.is-english]="translate.getCurrentLang() === 'en'">
+      <span class="error-view__label">{{ 'PAGES.ERROR.NOT_FOUND.LABEL' | translate }}</span>
+      <span class="error-view__code-value">{{ code() }}</span>
+    </h3>
+  }
 
   <div class="error-view__content">
     <router-outlet />

src/app/shared/error-handler/error-handler.component.html

@@ -335,10 +335,46 @@ describe('ErrorHandlerComponent', () => {
       expect(buttonDebugEl.componentInstance.label()).toBe('Se connecter');
       expect(router.navigate).toHaveBeenCalledWith(['/login']);
     });
+
+    it('should NOT render the error code block when code is empty (unknown error)', () => {
+      // --- ARRANGE ---
+      Object.defineProperty(router, 'url', { value: '/error/unknown-error', configurable: true });
+      queryParams$.next({});
+
+      // --- ACT ---
+      fixture.detectChanges();
+
+      // --- ASSERT ---
+      expect(component.code()).toBe('');
+
+      const codeContainer = fixture.debugElement.query(By.css('.error-view__code'));
+
+      expect(codeContainer).toBeNull();
+    });
+
+    it('should render the error code block when code is provided', () => {
+      // --- ARRANGE ---
+      Object.defineProperty(router, 'url', { value: '/error/unfound-error', configurable: true });
+      queryParams$.next({ code: '404' });
+
+      // --- ACT ---
+      fixture.detectChanges();
+
+      // --- ASSERT ---
+      expect(component.code()).toBe('404');
+
+      const codeContainer = fixture.debugElement.query(By.css('.error-view__code'));
+
+      expect(codeContainer).toBeTruthy();
+      expect(codeContainer.nativeElement.textContent).toContain('404');
+    });
   });
 
   describe('Internationalization (i18n)', () => {
     it('should display the default French translations on init', () => {
+      // --- ARRANGE ---
+      queryParams$.next({ code: '404' });
+
       // --- ACT ---
       fixture.detectChanges();
 
@@ -352,6 +388,7 @@ describe('ErrorHandlerComponent', () => {
 
     it('should update static texts when language is switched to English', () => {
       // --- ARRANGE ---
+      queryParams$.next({ code: '404' });
       fixture.detectChanges();
 
       // --- ACT ---
@@ -409,6 +446,9 @@ describe('ErrorHandlerComponent', () => {
     });
 
     it('should apply "is-english" class to the code container when language is English', () => {
+      // --- ARRANGE ---
+      queryParams$.next({ code: '404' });
+
       // --- ACT ---
       translate.use('en');
       fixture.detectChanges();
@@ -420,6 +460,9 @@ describe('ErrorHandlerComponent', () => {
     });
 
     it('should NOT apply "is-english" class when language is French', () => {
+      // --- ARRANGE ---
+      queryParams$.next({ code: '404' });
+
       // --- ACT ---
       translate.use('fr');
       fixture.detectChanges();

src/app/shared/error-handler/error-handler.component.spec.ts

@@ -1 +1,21 @@
-<p>Hello World unknown-error works!</p>
+<section class="unknown-error">
+  <div class="unknown-error__content">
+    <div class="unknown-error__animation-wrapper">
+      <dotlottie-wc
+        src="assets/animations/unknown-error-abduction.lottie"
+        autoplay
+        loop
+        role="img"
+        [attr.aria-label]="'PAGES.ERROR.UNKNOWN.IMG.ALT.ABDUCTION' | translate"
+        class="unknown-error__lottie" />
+    </div>
+
+    <h4 class="unknown-error__title">
+      {{ 'PAGES.ERROR.UNKNOWN.TITLE' | translate }}
+    </h4>
+
+    <h5 class="unknown-error__subtitle">
+      {{ 'PAGES.ERROR.UNKNOWN.SUBTITLE' | translate }}
+    </h5>
+  </div>
+</section>

src/app/shared/error-handler/error-views/unknown-error/unknown-error.component.html

@@ -1,3 +1,52 @@
+@use 'abstracts' as *;
+
 :host {
   display: block;
 }
+
+.unknown-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: var(--bg-color);
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+    max-width: 600px;
+  }
+
+  &__animation-wrapper {
+    width: 100%;
+    max-width: 300px;
+    margin: 0 auto;
+    animation: float 6s ease-in-out infinite;
+  }
+
+  &__lottie {
+    display: block;
+    aspect-ratio: 1 / 1;
+    width: 100%;
+    height: auto;
+    border-radius: 16px;
+    border: solid 2px var(--primary-color);
+    overflow: hidden;
+  }
+
+  &__title {
+    color: var(--primary-color);
+    margin: 0;
+  }
+
+  &__subtitle {
+    color: transparent;
+    margin: 0;
+    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+}