fix(search) : add some test + fix design modal

debug.log

+[1021/094448.838:ERROR:directory_reader_win.cc(43)] FindFirstFile: Le chemin daccs spcifi est introuvable. (0x3)

src/app/structure-list/components/search/search.component.html

@@ -55,35 +55,42 @@
     fxLayoutAlign="space-between"
     [ngClass]="['modal', 'modal' + modalTypeOpened]"
   >
-    <div class="contentModal" fxLayout="row wrap" fxLayoutAlign="flex-start" *ngIf="categories.length > 0">
-      <!--<div class="blockFiltre" *ngFor="let s of services">-->
-      <div class="blockFiltre" *ngFor="let c of categories">
-        <h4>{{ c.name }}</h4>
+    <div class="borderTricks">
+      <div class="contentModal" fxLayout="row wrap" fxLayoutAlign="flex-start" *ngIf="categories.length > 0">
+        <!--<div class="blockFiltre" *ngFor="let s of services">-->
+        <div class="blockFiltre" *ngFor="let c of categories">
+          <h4>{{ c.name }}</h4>
 
-        <ul class="blockLigne">
-          <div fxLayout="row" class="ligneFiltre" fxLayoutAlign="space-between center" *ngFor="let module of c.modules">
-            <li class="checkbox">
-              <div class="checkboxItem">
-                <label>
-                  <input
-                    type="checkbox"
-                    [checked]="getIndex(module.id, c.name) > -1"
-                    [value]="module.id"
-                    (change)="onCheckboxChange($event, c.name)"
-                  />
-                  <span class="customCheck"></span>
-                  <div class="label">{{ module.text }}</div>
-                </label>
-              </div>
-            </li>
-            <span class="nbResult">{{ module.count ? module.count : '0' }}</span>
-          </div>
-        </ul>
+          <ul class="blockLigne">
+            <div
+              fxLayout="row"
+              class="ligneFiltre"
+              fxLayoutAlign="space-between center"
+              *ngFor="let module of c.modules"
+            >
+              <li class="checkbox">
+                <div class="checkboxItem">
+                  <label>
+                    <input
+                      type="checkbox"
+                      [checked]="getIndex(module.id, c.name) > -1"
+                      [value]="module.id"
+                      (change)="onCheckboxChange($event, c.name)"
+                    />
+                    <span class="customCheck"></span>
+                    <div class="label">{{ module.text }}</div>
+                  </label>
+                </div>
+              </li>
+              <span class="nbResult">{{ module.count ? module.count : '0' }}</span>
+            </div>
+          </ul>
+        </div>
+      </div>
+      <div class="footer" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="3vw">
+        <a (click)="clearFilters()">Effacer</a>
+        <button type="button" (click)="applyFilter(searchForm.value.searchTerm)">Appliquer</button>
       </div>
-    </div>
-    <div class="footer" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="3vw">
-      <a (click)="clearFilters()">Effacer</a>
-      <button type="button" (click)="applyFilter(searchForm.value.searchTerm)">Appliquer</button>
     </div>
   </div>
 </div>

src/app/structure-list/components/search/search.component.scss

@@ -103,13 +103,18 @@
   margin-left: 412px;
 }
 .modal {
-  -moz-box-shadow: -5px 5px 10px 0px $grey;
-  box-shadow: -5px 5px 10px 0px $grey;
   max-height: 648px;
   max-width: 754px;
   width: 94%;
   background: $white;
-  border: 1px solid $grey;
+  border-left: 6.5px solid transparent;
+  border-bottom: 6.5px solid transparent;
+  border-radius: 11px;
+  //repeating-linear-gradient(37deg, transparent 0, transparent 1px, $grey 2px, $grey 2px) 12;
+  //border-image: repeating-linear-gradient(-45deg, transparent 0, transparent 4px, $grey 4px, $grey 5px) 8;
+
+  background: linear-gradient($white, $white) padding-box,
+    repeating-linear-gradient(-45deg, transparent 0, transparent 4px, $grey 4px, $grey 5px) border-box;
   box-sizing: border-box;
   z-index: 1;
   position: absolute;
@@ -125,12 +130,15 @@
     background: $grey;
     border-radius: 6px;
   }
-
+  .borderTricks {
+    border: 1px solid #e0e0e0;
+  }
   .contentModal {
     overflow-y: auto;
     max-width: 1100px;
     border-bottom: 1px solid $grey;
     margin-bottom: 10px;
+    max-height: 500px;
 
     .blockFiltre {
       width: 100%;

src/app/structure-list/components/search/search.component.spec.ts

 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ReactiveFormsModule } from '@angular/forms';
+import { Category } from '../../models/category.model';
+import { Filter } from '../../models/filter.model';
+import { Module } from '../../models/module.model';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { SearchComponent } from './search.component';
+import { SearchService } from '../../services/search.service';
 
-describe('RechercheComponent', () => {
+describe('SearchComponent', () => {
   let component: SearchComponent;
   let fixture: ComponentFixture<SearchComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [SearchComponent],
+      imports: [HttpClientTestingModule, ReactiveFormsModule],
     }).compileComponents();
   });
 
@@ -21,4 +27,22 @@ describe('RechercheComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should emit filters', () => {
+    const filter: Filter[] = [new Filter('nom', 'valInput', false)];
+    spyOn(component.searchEvent, 'emit');
+    component.applyFilter('valInput');
+    expect(component.searchEvent.emit).toHaveBeenCalled();
+    expect(component.searchEvent.emit).toHaveBeenCalledWith(filter);
+  });
+
+  it('should update categories', () => {
+    let categories: Category[] = [new Category({ name: 'Accompagnement des démarches' })];
+    categories[0].modules = [];
+    for (let i = 0; i < 7; i++) {
+      categories[0].modules.push(new Module(5 + i, 'CAF' + i));
+    }
+    component.openModal('accompagnement');
+    expect(component.categories).toEqual(categories);
+  });
 });

src/app/structure-list/services/search.service.spec.ts

 import { TestBed } from '@angular/core/testing';
-
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { SearchService } from './search.service';
 
 describe('SearchService', () => {
   let service: SearchService;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
     service = TestBed.inject(SearchService);
   });
 

src/app/structure-list/services/structure-list.service.spec.ts

-import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { inject, TestBed } from '@angular/core/testing';
 import { Day } from '../models/day.model';
 import { Structure } from '../models/structure.model';
@@ -7,15 +7,15 @@ import { StructureService } from './structure-list.service';
 const { DateTime } = require('luxon');
 
 describe('StructureService', () => {
+  let structureService: StructureService;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientModule],
+      imports: [HttpClientTestingModule],
+      providers: [StructureService],
     });
+    structureService = TestBed.inject(StructureService);
   });
-  let structureService: StructureService;
-  beforeEach(inject([StructureService], (s: StructureService) => {
-    structureService = s;
-  }));
 
   it('Mise à jour ouverture de la structure : should return true', () => {
     // Init structure avec aucun horaire