@rededor/site-front-end-lib 20.0.26 → 20.0.27

package/components/algolia-search/components/algolia-search/algolia-search.component.ts

@@ -0,0 +1,415 @@
+import {
+  Component,
+  OnInit,
+  AfterContentInit,
+  OnDestroy,
+  PLATFORM_ID,
+  HostListener,
+  ElementRef,
+  ViewEncapsulation,
+  inject,
+  input,
+  output,
+  contentChildren,
+  model,
+  computed,
+  signal,
+  Signal,
+  OutputRefSubscription,
+} from '@angular/core';
+import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { UntypedFormControl } from '@angular/forms';
+import { AlgoliaComponentStyle } from '../../models/algolia-component-style.enum';
+import algoliasearch from 'algoliasearch/lite';
+import { AlgoliaSearchResultsComponent } from '../algolia-search-results/algolia-search-results.component';
+import { AlgoliaSearchTooltipComponent } from '../algolia-search-tooltip/algolia-search-tooltip.component';
+import { AlgoliaConfig } from '../../models/algolia-config.model';
+import { AlgoliaHint } from '../../models/algolia-hint.model';
+import { AlgoliaSearchParams } from '../../models/algolia-search-params.model';
+import { AlgoliaSearchApiService } from '@rededor/site-front-end-lib/services/algolia-search-api';
+import { checkSafariAgent } from '@rededor/site-front-end-lib/core';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+import { AlgoliaSearchFieldComponent } from '../algolia-search-field/algolia-search-field.component';
+import { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+
+@Component({
+  selector: 'algolia-search',
+  imports: [CommonModule, CuraIconComponent, CuraLabelComponent, AlgoliaSearchFieldComponent],
+  templateUrl: './algolia-search.component.html',
+  encapsulation: ViewEncapsulation.None,
+  styleUrl: './algolia-search.component.scss',
+  host: {
+    '[style.--font-family]': 'this.curaService.theme.fonts.getFamily()',
+  },
+})
+export class AlgoliaSearchComponent implements OnInit, OnDestroy, AfterContentInit {
+  private readonly algoliaSearchApiService = inject(AlgoliaSearchApiService);
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly document = inject<Document>(DOCUMENT);
+  public readonly curaService = inject(CuraApiService);
+  private elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  rdslAlgoliaComponentStyle: typeof AlgoliaComponentStyle = AlgoliaComponentStyle;
+
+  readonly algoliaConfig = input<AlgoliaConfig>({ id: '', key: '' });
+  readonly searchControl = input<UntypedFormControl>(new UntypedFormControl(''));
+  readonly searchParams = input<AlgoliaSearchParams>({});
+  readonly debounceTime = input<number>(480);
+  readonly startSearchAtCharLen = input<number>(3);
+  readonly hint = input<AlgoliaHint | null>({ label: '', value: '' });
+  readonly label = input<string>('O que está procurando?');
+  readonly fixedLabel = input<boolean>(false);
+  readonly placeholder = input<string>('Faça sua busca');
+  readonly facetsNames = input<string[]>([]);
+  readonly searchTermFallback = input<boolean>(true);
+  readonly actionIcon = input<string>('search');
+  readonly componentStyle = input<AlgoliaComponentStyle>(AlgoliaComponentStyle.DEFAULT);
+  readonly initialTerm = input<string>('');
+  readonly cache = input(false);
+  readonly suggestions = input<boolean>(false);
+  readonly showLabel = input<boolean>(true);
+  readonly enableOverlay = input<boolean>(true);
+  readonly starTheme = input<boolean>(false);
+  readonly maternityStarTheme = input<boolean>(false);
+
+  readonly setFocus = model<boolean>(false);
+
+  readonly updateResults = output<{
+    term: string;
+    hits: any[];
+  }>();
+  readonly updateAlgoliaResults = output<any>();
+  readonly itemSelect = output<any>();
+  readonly fieldFocus = output<any>();
+  readonly fieldBlur = output<any>();
+
+  readonly queryResultsContainer = contentChildren(AlgoliaSearchResultsComponent);
+
+  resultsContainer: AlgoliaSearchResultsComponent | null = null;
+
+  // Algolia
+  readonly client: Signal<any> = computed(() => {
+    if (this.algoliaConfig()?.id && this.algoliaConfig()?.key && (this.algoliaConfig()?.index || this.algoliaConfig()?.multipleIndex)) {
+      return algoliasearch(this.algoliaConfig()?.id, this.algoliaConfig()?.key);
+    }
+    return null;
+  });
+  readonly index: Signal<any> = computed(() => {
+    if (this.client()) {
+      return this.client()!.initIndex(this.algoliaConfig()?.index!);
+    }
+    return null;
+  });
+  readonly isMultiple = computed(() => (this.algoliaConfig().multipleIndex ? true : false));
+
+  // State
+  ready: boolean = false;
+  readonly focus = computed(() => this.setFocus() && !this.isMobile());
+  readonly focusMobile = computed(() => this.setFocus() && this.isMobile());
+  noResults = signal(false);
+  preselectedIndex = signal<any>(null);
+  preselectedItem: any = null;
+  preselectedSubscription?: OutputRefSubscription;
+  isMobile = signal(false);
+  suggestionsResult: any;
+  mediumBreakpoint: number = 768;
+  scrollY: number = 0;
+  overlayHasHeight: boolean = false;
+
+  readonly tooltip = contentChildren(AlgoliaSearchTooltipComponent);
+  hasTooltip: boolean = false;
+  activeTooltip: boolean = true;
+  checkResultTooltip: boolean = false;
+
+  isSafari = signal(false);
+  @HostListener('window:resize', ['$event'])
+  checkBrowserWidth(event: any) {
+    this.isMobile.set(event.target.innerWidth < this.mediumBreakpoint);
+  }
+
+  @HostListener('window:scroll')
+  onScroll() {
+    const resultsOverlay = this.elementRef.nativeElement.querySelectorAll('.algolia-search-results-overlay').item(0);
+    this.overlayHasHeight = Boolean(resultsOverlay.clientHeight);
+    if (this.isMobile() && this.isSafari() && this.focusMobile() && this.overlayHasHeight) {
+      window.scrollTo(0, 0);
+    }
+  }
+
+  @HostListener('document:keypress', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    if (event.key === 'Enter' && event.keyCode === 13 && this.isSafari() && this.focusMobile() && this.overlayHasHeight) {
+      this.manageScrollPosition();
+    }
+  }
+
+  ngOnInit(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      const viewportInnerWidth = window.innerWidth;
+      this.isMobile.set(viewportInnerWidth < this.mediumBreakpoint);
+      this.isSafari.set(checkSafariAgent());
+    }
+
+    const initialTerm = this.initialTerm();
+    if (initialTerm) {
+      this.searchControl().setValue(initialTerm);
+      this.searchTerm();
+    }
+
+    if (this.suggestions()) {
+      this.searchSuggestions();
+    }
+  }
+
+  ngAfterContentInit(): void {
+    this.hasTooltip = this.tooltip()?.at(0)! ? true : false;
+    const queryResultsContainer = this.queryResultsContainer();
+    this.resultsContainer = queryResultsContainer?.length ? queryResultsContainer.at(0)! : null;
+    if (this.resultsContainer) {
+      this.preselectedSubscription = this.resultsContainer.updatePreselected.subscribe((preselected) => {
+        this.preselectedIndex.set(preselected.index);
+        this.preselectedItem = preselected.item;
+      });
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.preselectedSubscription) {
+      this.preselectedSubscription.unsubscribe();
+    }
+  }
+
+  searchTerm(): void {
+    const searchControl = this.searchControl();
+    if (searchControl.value?.length >= this.startSearchAtCharLen()) {
+      if (!this.isMultiple()) {
+        if (this.cache() && this.algoliaConfig().index) {
+          this.algoliaSearchApiService.search(searchControl.value, this.algoliaConfig().index!, this.searchParams()).subscribe({
+            next: (results) => {
+              this.checkResultTooltip = !!results?.hits?.length;
+              this.emitResults(results?.hits);
+              this.updateAlgoliaResults.emit(results);
+            },
+          });
+        } else {
+          this.index()!
+            .search(searchControl.value, this.searchParams())
+            .then((results: any) => {
+              this.checkResultTooltip = !!results?.hits?.length;
+              this.emitResults(results?.hits);
+              this.updateAlgoliaResults.emit(results);
+            });
+        }
+      } else {
+        if (!this.algoliaConfig().multipleIndex) return;
+        const queries = this.algoliaConfig().multipleIndex!.map((i: any) => {
+          return { ...i, query: this.searchControl().value };
+        });
+
+        if (this.cache()) {
+          this.algoliaSearchApiService.searchMultipleIndexes(queries).subscribe({
+            next: ({ results = [] } = { results: [] }) => {
+              this.checkResultTooltip = results?.some((result) => result?.hits?.length);
+              this.emitResults(results);
+            },
+          });
+        } else {
+          this.client()!
+            .multipleQueries(queries)
+            .then(({ results = [] }: { results: any[] } = { results: [] }) => {
+              this.checkResultTooltip = results?.some((result: any) => result?.hits?.length);
+              this.emitResults(results);
+            });
+        }
+      }
+    } else if (!searchControl.value && this.suggestions()) {
+      this.searchSuggestions();
+    } else {
+      this.noResults.set(false);
+      this.updateResults.emit({ term: '', hits: [] });
+      this.updateAlgoliaResults.emit(null);
+    }
+    this.resetPreselected();
+  }
+
+  searchTermFacet(): void {
+    if (this.searchControl().value?.length >= this.startSearchAtCharLen()) {
+      this.searchForFacetValues();
+    } else {
+      this.noResults.set(false);
+      this.updateResults.emit({ term: '', hits: [] });
+    }
+    this.resetPreselected();
+  }
+
+  private searchForFacetValues(index = 0): void {
+    this.index()!
+      .searchForFacetValues(this.facetsNames()[index], this.searchControl().value, this.searchParams())
+      .then(({ facetHits }: any) => {
+        if (facetHits && facetHits.length > 0) {
+          this.emitResults(facetHits);
+        } else {
+          if (index < this.facetsNames().length - 1) {
+            this.searchForFacetValues(++index);
+          } else if (this.searchTermFallback()) {
+            this.searchTerm();
+          }
+        }
+      });
+  }
+
+  searchSuggestions(): void {
+    if (this.suggestionsResult) {
+      this.getSuggestionsResult();
+    } else {
+      this.setSuggestionsResult();
+    }
+  }
+
+  getSuggestionsResult(): void {
+    if (!this.isMultiple()) {
+      this.emitResults(this.suggestionsResult.hits);
+      this.updateAlgoliaResults.emit(this.suggestionsResult);
+    } else {
+      this.emitResults(this.suggestionsResult);
+    }
+  }
+
+  setSuggestionsResult(): void {
+    if (!this.isMultiple()) {
+      this.index()!
+        .search('', this.searchParams())
+        .then((results: any) => {
+          this.checkResultTooltip = !!results.hits.length;
+          this.suggestionsResult = results;
+          this.emitResults(this.suggestionsResult.hits.sort((a: any, b: any) => (a.firstLine > b.firstLine ? 1 : -1)));
+          this.updateAlgoliaResults.emit(this.suggestionsResult);
+        });
+    } else {
+      const config = JSON.parse(JSON.stringify(this.algoliaConfig()));
+      config.multipleIndex!.forEach((search: any) => {
+        search.params.filters = search.params.filters ? `${search.params.filters} AND suggestion: true` : `suggestion: true`;
+      });
+      const queries = config.multipleIndex.map((i: any) => {
+        return { ...i, query: '' };
+      });
+      this.client()!
+        .multipleQueries(queries)
+        .then(({ results }: any) => {
+          this.checkResultTooltip = results.some((result: any) => result.hits.length);
+          this.suggestionsResult = results;
+          this.suggestionsResult[0].hits = this.suggestionsResult[0].hits.sort((a: any, b: any) => (a.firstLine > b.firstLine ? 1 : -1));
+          this.emitResults(this.suggestionsResult);
+        });
+    }
+  }
+
+  private emitResults(results: any[]): void {
+    if (!results?.length) {
+      this.noResults.set(true);
+      this.updateResults.emit({ term: '', hits: [] });
+      this.updateAlgoliaResults.emit(null);
+    } else {
+      if (this.multipleIndexIsEmpty(results)) {
+        this.noResults.set(true);
+        this.updateResults.emit({ term: '', hits: [] });
+        this.updateAlgoliaResults.emit(null);
+      } else {
+        this.noResults.set(false);
+        this.updateResults.emit({ term: this.searchControl().value, hits: results });
+      }
+    }
+  }
+
+  selectHint(): void {
+    const hint = this.hint();
+    if (this.preselectedItem) {
+      this.itemSelect.emit(this.preselectedItem.item);
+    } else if (hint?.value) {
+      this.itemSelect.emit(hint.value);
+    }
+  }
+
+  setResultsHeight(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      const viewportInnerHeight = window.innerHeight;
+      const resultsHeight = viewportInnerHeight - 72;
+      const docElement = this.document.documentElement;
+      docElement.style.setProperty('--results-height', `${resultsHeight}px`);
+    }
+  }
+
+  clean() {
+    this.noResults.set(false);
+    this.updateResults.emit({ term: '', hits: [] });
+    this.updateAlgoliaResults.emit(null);
+    this.searchControl().setValue('');
+    if (this.isMobile()) {
+      this.manageScrollPosition();
+    }
+    this.setFocus.set(false);
+    this.resetPreselected();
+  }
+
+  onBlur() {
+    if (!this.isMobile()) {
+      this.resetPreselected();
+      setTimeout(() => this.setFocus.set(false), 250);
+    } else {
+      this.setFocus.set(false);
+      this.manageScrollPosition();
+    }
+    this.fieldBlur.emit(null);
+  }
+
+  onFocus() {
+    if (this.isMobile()) {
+      this.scrollY = window.scrollY;
+      if (isPlatformBrowser(this.platformId)) {
+        window.scrollTo(0, 0);
+      }
+    }
+    this.setFocus.set(true);
+    this.fieldFocus.emit(null);
+    this.setResultsHeight();
+  }
+
+  overlayClick() {
+    if (this.isMobile()) {
+      this.manageScrollPosition();
+    }
+    this.setFocus.set(false);
+  }
+
+  closeTooltip() {
+    this.setFocus.set(true);
+    this.activeTooltip = false;
+  }
+
+  manageScrollPosition() {
+    if (isPlatformBrowser(this.platformId)) {
+      window.scrollTo({ top: this.scrollY });
+    }
+  }
+
+  onNavDown() {
+    if (this.resultsContainer) {
+      this.resultsContainer.navigateDown();
+    }
+  }
+
+  onNavUp() {
+    if (this.resultsContainer) {
+      this.resultsContainer.navigateUp();
+    }
+  }
+
+  resetPreselected() {
+    this.resultsContainer?.resetSelection();
+  }
+
+  multipleIndexIsEmpty(results: any[]): boolean {
+    return !results.some((result) => result.nbHits !== 0);
+  }
+}

package/components/algolia-search/components/algolia-search-field/algolia-search-field.component.html

@@ -0,0 +1,23 @@
+<div
+  class="algolia-search-controls-field"
+  [ngClass]="{
+    'on-focus': focus(),
+    disabled: !searchControl().enabled,
+  }"
+  data-testid="_algolia-search-controls-field"
+>
+  <input
+    #search
+    type="text"
+    name="term"
+    autocomplete="off"
+    [placeholder]="placeholder()"
+    [formControl]="searchControl()"
+    [readonly]="readonly()"
+    (focus)="onFocus()"
+    (blur)="onBlur()"
+    (keyup.enter)="onSubmit($event)"
+    (keyup.arrowup)="onNavUp($event)"
+    (keyup.arrowdown)="onNavDown($event)"
+  />
+</div>

package/components/algolia-search/components/algolia-search-field/algolia-search-field.component.scss

@@ -0,0 +1,5 @@
+.algolia-search-controls-field {
+  * {
+    font-family: var(--font-family);
+  }
+}

package/components/algolia-search/components/algolia-search-field/algolia-search-field.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AlgoliaSearchFieldComponent } from './algolia-search-field.component';
+import { ReactiveFormsModule } from '@angular/forms';
+
+describe('AlgoliaSearchFieldComponent', () => {
+  let component: AlgoliaSearchFieldComponent;
+  let fixture: ComponentFixture<AlgoliaSearchFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AlgoliaSearchFieldComponent, ReactiveFormsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AlgoliaSearchFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/components/algolia-search/components/algolia-search-field/algolia-search-field.component.ts

@@ -0,0 +1,90 @@
+import { Component, OnInit, OnDestroy, ElementRef, inject, input, output, viewChild, signal, PLATFORM_ID, AfterViewInit } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { AlgoliaComponentStyle } from '../../models/algolia-component-style.enum';
+import { Subscription } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+
+@Component({
+  selector: 'algolia-search-field',
+  imports: [CommonModule, ReactiveFormsModule],
+  templateUrl: './algolia-search-field.component.html',
+  styleUrl: './algolia-search-field.component.scss',
+  host: {
+    '[style.--font-family]': 'curaService.theme.fonts.getFamily()',
+  },
+})
+export class AlgoliaSearchFieldComponent implements OnInit, OnDestroy, AfterViewInit {
+  private readonly curaService = inject(CuraApiService);
+  private readonly platformId = inject(PLATFORM_ID);
+
+  componentStyles = AlgoliaComponentStyle;
+  readonly searchControl = input<FormControl<any>>(new FormControl(null));
+  readonly debounceTime = input(480);
+  readonly placeholder = input('Faça sua busca');
+  readonly componentStyle = input<AlgoliaComponentStyle>(this.componentStyles.DEFAULT);
+  readonly readonly = input(false);
+  readonly setFocus = input(false);
+
+  readonly searchField = viewChild<ElementRef | null>('search');
+
+  readonly controlBlur = output();
+  readonly controlFocus = output();
+  readonly controlReset = output();
+  readonly controlEnterKey = output<string>();
+  readonly navUp = output();
+  readonly navDown = output();
+  readonly termChange = output<string>();
+
+  preSelected = false;
+  focus = signal(false);
+  controlSubscription?: Subscription;
+
+  ngOnInit(): void {
+    this.controlSubscription = this.searchControl()
+      ?.valueChanges.pipe(debounceTime(this.debounceTime()))
+      .subscribe((term) => this.onChange(term));
+  }
+
+  ngAfterViewInit(): void {
+    if (isPlatformBrowser(this.platformId) && this.setFocus()) {
+      Promise.resolve(null)
+        .then(() => this.searchField()?.nativeElement.focus())
+        .catch((error) => console.log(JSON.stringify(error)));
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.controlSubscription?.unsubscribe();
+  }
+
+  onChange(term: string): void {
+    this.termChange.emit(term);
+  }
+
+  onFocus(): void {
+    this.focus.set(true);
+    this.controlFocus.emit();
+  }
+
+  onBlur(): void {
+    this.focus.set(false);
+    this.controlBlur.emit();
+  }
+
+  onSubmit($event: any): void {
+    this.controlEnterKey.emit($event.target.value);
+    $event.target.blur();
+  }
+
+  onNavDown($event: any): void {
+    $event.preventDefault();
+    this.navDown.emit();
+  }
+
+  onNavUp($event: any): void {
+    $event.preventDefault();
+    this.navUp.emit();
+  }
+}

package/components/algolia-search/components/algolia-search-result-item/algolia-search-result-item.component.html

@@ -0,0 +1,70 @@
+@if (!isGroup()) {
+  <div
+    class="algolia-search-results-item"
+    [ngClass]="{ preselected: preselected() }"
+    (mouseover)="mouseOver.emit(null)"
+    (mousedown)="onSelect()"
+    #resultItem
+    data-testid="_algolia-search-results-item"
+  >
+    @if (img()) {
+      <div class="algolia-search-results-item-img" data-testid="_algolia-search-results-item-img">
+        <rdsite-image [imageDefaultSrc]="img()" [alt]="alt()"></rdsite-image>
+      </div>
+    }
+
+    @if (distance()) {
+      <cura-badge-distance class="algolia-search-results-item-distance" [distance]="item()?.distance"></cura-badge-distance>
+    } @else if (icon()) {
+      <div class="algolia-search-results-item-icon" data-testid="_algolia-search-results-item-icon">
+        <cura-icon [name]="icon()" color="neutral-dark" size="24"></cura-icon>
+      </div>
+    }
+
+    @if (title()) {
+      <h4 [innerHTML]="title()" [class]="{ hasSubtitle: subtitle() }"></h4>
+    }
+
+    @if (subtitle()) {
+      <p [innerHTML]="subtitle()"></p>
+    }
+
+    @if (description()) {
+      <h5 [innerHTML]="description()"></h5>
+    }
+
+    @if (ctaUrl() && (ctaLabel() || ctaIcon())) {
+      <div class="algolia-search-results-item-action" data-testid="_algolia-search-results-item-action">
+        @if (externalCta()) {
+          <a [href]="ctaUrl()" [title]="ctaLabel()" target="_blank" (click)="$event.stopPropagation()">
+            @if (ctaLabel()) {
+              <span [innerHTML]="ctaLabel()"></span>
+            }
+            @if (ctaIcon()) {
+              <cura-icon [name]="ctaIcon()" color="accent-darker" size="32"></cura-icon>
+            }
+          </a>
+        } @else {
+          <a [routerLink]="ctaUrl()" [title]="ctaLabel()" (click)="$event.stopPropagation()">
+            @if (ctaLabel()) {
+              <span [innerHTML]="ctaLabel()"></span>
+            }
+            @if (ctaIcon()) {
+              <cura-icon [name]="ctaIcon()" color="accent-darker" size="32"></cura-icon>
+            }
+          </a>
+        }
+      </div>
+    } @else {
+      @if (showDefaultCta()) {
+        <div class="algolia-search-results-item-action" data-testid="_algolia-search-results-item-action">
+          <cura-icon name="iconRightCircle" color="accent-darker" size="32"></cura-icon>
+        </div>
+      }
+    }
+  </div>
+} @else {
+  <div class="algolia-search-results-group" data-testid="_algolia-search-results-group">
+    {{ title() }}
+  </div>
+}

package/components/algolia-search/components/algolia-search-result-item/algolia-search-result-item.component.scss

@@ -0,0 +1,27 @@
+.algolia-search-results-item-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--size, 32px);
+  height: var(--size, 32px);
+  min-width: var(--size, 32px);
+  min-height: var(--size, 32px);
+  border: var(--border) solid var(--border-color);
+  border-radius: var(--border-radius);
+  background: var(--background-color);
+  overflow: hidden;
+
+  rdsite-image {
+    width: 100%;
+    height: 100%;
+    display: block;
+
+    ::ng-deep img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+  }
+}

package/components/algolia-search/components/algolia-search-result-item/algolia-search-result-item.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AlgoliaSearchResultItemComponent } from './algolia-search-result-item.component';
+
+describe('AlgoliaSearchResultItemComponent', () => {
+  let component: AlgoliaSearchResultItemComponent;
+  let fixture: ComponentFixture<AlgoliaSearchResultItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AlgoliaSearchResultItemComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AlgoliaSearchResultItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});