MET-6239 Debias Info: tweaks / tests

projects/sandbox/cypress/e2e/debias.cy.ts

@@ -5,6 +5,27 @@ context('Sandbox', () => {
     const txtNoDetections = 'No Biases Found';
     const pollInterval = 2000;
 
+    it('should toggle the info', () => {
+      cy.visit('/dataset/3');
+      cy.wait(pollInterval);
+      cy.get(selDebiasLink)
+        .last()
+        .click(force);
+      cy.wait(pollInterval);
+
+      const selHeader = '.debias-header';
+      const selInfoToggle = '.debias .open-info';
+      const selOverlay = '.debias-overlay.active';
+
+      cy.get(selHeader).should('have.class', 'closed');
+      cy.get(selOverlay).should('not.exist');
+
+      cy.get(selInfoToggle).click(force);
+
+      cy.get(selHeader).should('not.have.class', 'closed');
+      cy.get(selOverlay).should('exist');
+    });
+
     it('should not allow debias checks for failed datasets', () => {
       cy.visit('/dataset/909');
       cy.wait(1000);

projects/sandbox/src/app/_directives/is-scrollable/is-scrollable.directive.spec.ts

@@ -5,20 +5,44 @@ import { IsScrollableDirective } from '.';
 @Component({
   imports: [IsScrollableDirective],
   template: `
-    <div class="cmp">
-      <div class="scrollable" appIsScrollable #scrollInfo="scrollInfo" id="scrollInfo"></div>
-      <a class="back" (click)="scrollInfo.back()">BACK</a>
-      <a class="fwd" (click)="scrollInfo.fwd()">FWD</a>
+    <div>
+      <div class="scrollable" appIsScrollable #scrollInfo="scrollInfo">
+        <div class="item">Hello</div>
+        <div class="item">Hello</div>
+        <div class="item">Hello</div>
+        <div class="item">Hello</div>
+      </div>
+      <div class="output-1">{{ scrollInfo.canScrollFwd }}</div>
+      <div class="output-2">{{ scrollInfo.canScrollBack }}</div>
     </div>
   `,
-  styles: ['.scrollable{ width: 100px; max-width: 100px; }'],
+  styles: [
+    `
+      .scrollable {
+        display: flex;
+        flex-direction: column;
+        height: 100px;
+        width: 100px;
+        max-height: 100px;
+        overflow-y: auto;
+      }
+      .item {
+        display: block;
+        height: 300px;
+        width: 100px;
+      }
+    `
+  ],
   standalone: true
 })
 class TestIsScrollableDirectiveComponent {}
 
 describe('IsScrollableDirective', () => {
   let fixture: ComponentFixture<TestIsScrollableDirectiveComponent>;
   let testComponent: TestIsScrollableDirectiveComponent;
+  let elScrollable: HTMLElement;
+  let elOutput1: HTMLElement;
+  let elOutput2: HTMLElement;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -30,10 +54,43 @@ describe('IsScrollableDirective', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(TestIsScrollableDirectiveComponent);
     testComponent = fixture.componentInstance;
+    elScrollable = fixture.debugElement.nativeElement.querySelector('.scrollable');
+    elOutput1 = fixture.debugElement.nativeElement.querySelector('.output-1');
+    elOutput2 = fixture.debugElement.nativeElement.querySelector('.output-2');
+    elScrollable.dispatchEvent(new Event('scroll'));
     fixture.detectChanges();
   });
 
   it('it should create', () => {
     expect(testComponent).toBeTruthy();
   });
+
+  it('it should re-caluculate on scroll', () => {
+    expect(elOutput1.innerHTML).toEqual('true');
+    expect(elOutput2.innerHTML).toEqual('false');
+
+    elScrollable.scrollTop = 1000;
+    elScrollable.dispatchEvent(new Event('scroll'));
+    fixture.detectChanges();
+
+    expect(elOutput1.innerHTML).toEqual('false');
+    expect(elOutput2.innerHTML).toEqual('true');
+  });
+
+  it('it should re-caluculate when elements are added', () => {
+    expect(elOutput1.innerHTML).toEqual('true');
+    expect(elOutput2.innerHTML).toEqual('false');
+
+    fixture.debugElement.nativeElement.querySelectorAll('.item').forEach((el: Element) => {
+      if (el.parentNode) {
+        el.parentNode.removeChild(el);
+      }
+    });
+
+    elScrollable.dispatchEvent(new Event('scroll'));
+    fixture.detectChanges();
+
+    expect(elOutput1.innerHTML).toEqual('false');
+    expect(elOutput2.innerHTML).toEqual('false');
+  });
 });

projects/sandbox/src/app/_directives/is-scrollable/is-scrollable.directive.ts

@@ -11,9 +11,7 @@ export class IsScrollableDirective implements AfterViewInit {
 
   constructor(private readonly elementRef: ElementRef) {
     const element = this.elementRef.nativeElement;
-
     new MutationObserver((_: MutationRecord[]) => {
-      console.log('mutate...');
       this.calc();
     }).observe(element, {
       childList: true

projects/sandbox/src/app/debias/debias.component.html

@@ -18,7 +18,6 @@
     <a class="open-info" (click)="toggleDebiasInfo($event)"></a>
 
     <div
-      *ngIf="debiasReport.state === DebiasState.COMPLETED && debiasReport.detections.length > 0"
       class="debias-header"
       #scrollInfo="scrollInfo"
       appIsScrollable
@@ -45,11 +44,14 @@
         terms that were found in the analyzed field values.
       </p>
 
-      <p *ngIf="'https://pro.europeana.eu/project/de-bias'; let linkUrl">
+      <p>
         This functionality is one of the results of the de-bias project (2023 - 2024) and is
-        provided as-is. For more information see:
-        <br />
-        <a [href]="linkUrl" target="_blank">{{ linkUrl }}</a
+        provided as-is.
+      </p>
+
+      <p *ngIf="'https://pro.europeana.eu/project/de-bias'; let linkUrl">
+        For more information see:
+        <a [href]="linkUrl" target="_blank" class="external-link-debias">{{ linkUrl }}</a
         >.
       </p>
     </div>

projects/sandbox/src/app/debias/debias.component.scss

@@ -1,3 +1,4 @@
+@import 'shared-styles/assets/sass/scss/generic/variables-bp';
 @import 'shared-styles/assets/sass/scss/generic/variables-colours';
 @import 'shared-styles/assets/sass/scss/iconography/svg-icons-metis';
 
@@ -104,6 +105,11 @@ $transition-time-open: 0.4s;
 
 .debias-header {
   background-color: $white;
+  background-image: svg-url-debias($eu-grey-light);
+  background-size: calc(100% - 3em);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center 1em;
   border-right: 1px solid $eu-grey-middle;
   clear: both;
   display: flex;
@@ -115,10 +121,7 @@ $transition-time-open: 0.4s;
   max-height: 60vh;
   overflow-x: hidden;
   overflow-y: auto;
-  padding-top: 1em;
-  padding-bottom: 1em;
-  padding-left: 1.5em;
-  padding-right: 1.5em;
+  padding: 1em 1.5em;
   position: relative;
   transform: translateX(0);
   transition: transform $transition-time-open linear;
@@ -161,6 +164,26 @@ $transition-time-open: 0.4s;
     & + p {
       margin-top: 1em;
     }
+
+    &:first-of-type {
+      padding-top: 3em;
+    }
+  }
+}
+
+@media (min-width: $bp-med) {
+  .debias-header p:first-of-type {
+    padding-top: 4em;
+  }
+}
+@media (min-width: $bp-xl) {
+  .debias-header p:first-of-type {
+    padding-top: 7em;
+  }
+}
+@media (min-width: $bp-xxl) {
+  .debias-header p:first-of-type {
+    padding-top: 8em;
   }
 }
 

projects/sandbox/src/app/debias/dedias.component.spec.ts

@@ -43,6 +43,31 @@ describe('DebiasComponent', () => {
       expect(component.debiasReport).toBeTruthy();
       tick(component.apiSettings.interval);
     }));
+
+    const getEvent = (): Event => {
+      return ({
+        stopPropagation: jasmine.createSpy()
+      } as unknown) as Event;
+    };
+
+    it('should close the debias info', () => {
+      const e = getEvent();
+      component.debiasHeaderOpen = true;
+      component.closeDebiasInfo(e);
+      expect(component.debiasHeaderOpen).toBeFalsy();
+      expect(e.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should toggle the debias info', () => {
+      const e = getEvent();
+      component.debiasHeaderOpen = true;
+      component.toggleDebiasInfo(e);
+      expect(component.debiasHeaderOpen).toBeFalsy();
+      expect(e.stopPropagation).toHaveBeenCalledTimes(1);
+      component.toggleDebiasInfo(e);
+      expect(component.debiasHeaderOpen).toBeTruthy();
+      expect(e.stopPropagation).toHaveBeenCalledTimes(2);
+    });
   });
 
   describe('Error Handling', () => {