From 28ca706c4564f1c5374e4812c2f5612c78d679cc Mon Sep 17 00:00:00 2001
From: Oleksii Aleksandrov <“alexof3@gmail.com”>
Date: Wed, 30 Aug 2023 17:59:57 +0300
Subject: [PATCH] Added tests and minor fixes

---
 .../data-component/data-component.html        |  4 +-
 .../data-component/data-component.spec.ts     |  2 +-
 .../load-more/load-more.component.html        | 10 +++-
 .../load-more/load-more.component.sass        |  1 +
 .../load-more/load-more.component.spec.ts     | 46 +++++++++++++++++++
 .../load-more/load-more.component.ts          |  1 +
 src/assets/styles/var.sass                    |  2 +-
 7 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 src/app/dataset-view/additional-components/data-component/load-more/load-more.component.spec.ts

diff --git a/src/app/dataset-view/additional-components/data-component/data-component.html b/src/app/dataset-view/additional-components/data-component/data-component.html
index ed8011bc2..01b76fe00 100644
--- a/src/app/dataset-view/additional-components/data-component/data-component.html
+++ b/src/app/dataset-view/additional-components/data-component/data-component.html
@@ -72,7 +72,7 @@ <h2 class="box-title align-items-center pb-3 pt-3 m-0">Saved Queries</h2>
                                     data-test-id="runSqlQueryRequestCode"
                                     name="run sql button"
                                     (click)="runSQLRequest({ query: item.query })"
-                                    class="sql-run-button rounded-2 btnGroup-item btn d-flex justify-content-center align-items-center"
+                                    class="sql-run-button rounded-2 btn-group-item btn d-flex justify-content-center align-items-center"
                                 >
                                     <span>Run</span><mat-icon>play_arrow</mat-icon>
                                 </button>
@@ -94,7 +94,7 @@ <h2 class="box-title align-items-center pb-3 m-0">Query:</h2>
                     name="run sql button"
                     (click)="runSQLRequest({ query: sqlRequestCode })"
                     [disabled]="!currentData.length && !sqlErrorMarker"
-                    class="sql-run-button rounded-left-2 border-right-0 btnGroup-item btn d-flex justify-content-center align-items-center"
+                    class="sql-run-button rounded-left-2 border-right-0 btn-group-item btn d-flex justify-content-center align-items-center"
                 >
                     <span>Run</span><mat-icon>play_arrow</mat-icon>
                 </button>
diff --git a/src/app/dataset-view/additional-components/data-component/data-component.spec.ts b/src/app/dataset-view/additional-components/data-component/data-component.spec.ts
index 8eade4f6e..a1feacc12 100644
--- a/src/app/dataset-view/additional-components/data-component/data-component.spec.ts
+++ b/src/app/dataset-view/additional-components/data-component/data-component.spec.ts
@@ -1,4 +1,4 @@
-import { mockDatasetBasicsFragment } from "./../../../search/mock.data";
+import { mockDatasetBasicsFragment } from "../../../search/mock.data";
 import { CdkAccordionModule } from "@angular/cdk/accordion";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { MatIconModule } from "@angular/material/icon";
diff --git a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.html b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.html
index f570fb9a6..1eeadfb16 100644
--- a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.html
+++ b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.html
@@ -18,9 +18,15 @@
     <p class="mb-0 mr-4">Select number of rows to load:</p>
     <mat-button-toggle-group name="query-limits" [(ngModel)]="rowsNumber" class="mr-4">
         <ng-container *ngFor="let option of ROWS_OPTIONS;">
-            <mat-button-toggle [checked]="option === rowsNumber" [value]="option">{{ option }}</mat-button-toggle>
+            <mat-button-toggle
+                [checked]="option === rowsNumber"
+                [value]="option"
+                [attr.data-test-id]="'row-limit-' + option"
+            >
+                {{ option }}
+            </mat-button-toggle>
         </ng-container>
     </mat-button-toggle-group>
     <p class="mb-0 mr-4">Or enter your number:</p>
-    <input type="number" placeholder="Enter number of rows" [(ngModel)]="rowsNumber" class="form-control small-width">
+    <input type="number" placeholder="Enter number of rows" class="form-control small-width" [(ngModel)]="rowsNumber" data-test-id="row-limit-input">
 </div>
\ No newline at end of file
diff --git a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.sass b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.sass
index 0591f4446..066886a84 100644
--- a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.sass
+++ b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.sass
@@ -9,6 +9,7 @@
 button
   border: 1px solid transparent
   transition: background-color .3s ease-in-out
+
   &:hover:not([disabled])
     background-color: #C4C4C4
 
diff --git a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.spec.ts b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.spec.ts
new file mode 100644
index 000000000..c4b245ad6
--- /dev/null
+++ b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.spec.ts
@@ -0,0 +1,46 @@
+import { ComponentFixture, fakeAsync, TestBed } from "@angular/core/testing";
+import { MatIconModule } from "@angular/material/icon";
+import { MatButtonToggleModule } from "@angular/material/button-toggle";
+
+import { LoadMoreComponent } from "./load-more.component";
+import AppValues from "../../../../common/app.values";
+import { FormsModule } from "@angular/forms";
+import {
+    dispatchInputEvent,
+    emitClickOnElement,
+    emitClickOnElementByDataTestId,
+} from "../../../../common/base-test.helpers.spec";
+
+describe("LoadMoreComponent", () => {
+    let component: LoadMoreComponent;
+    let fixture: ComponentFixture<LoadMoreComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [MatButtonToggleModule, FormsModule, MatIconModule],
+            declarations: [LoadMoreComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(LoadMoreComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it("should create", () => {
+        expect(component).toBeTruthy();
+    });
+
+    it("should change number of rows on button click", fakeAsync(() => {
+        const options = component.ROWS_OPTIONS;
+        expect(component.rowsNumber).toEqual(AppValues.SQL_QUERY_LIMIT);
+        emitClickOnElement(fixture, `[data-test-id="row-limit-${options[0]}"] button`);
+        expect(component.rowsNumber).toEqual(options[0]);
+    }));
+
+    it("should change number of rows on new input value", fakeAsync(() => {
+        const newRowsNumber = 76;
+        expect(component.rowsNumber).toEqual(AppValues.SQL_QUERY_LIMIT);
+        dispatchInputEvent(fixture, "row-limit-input", newRowsNumber.toString());
+        expect(component.rowsNumber).toEqual(newRowsNumber);
+    }));
+});
diff --git a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.ts b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.ts
index 6849e1028..64e0a3a24 100644
--- a/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.ts
+++ b/src/app/dataset-view/additional-components/data-component/load-more/load-more.component.ts
@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
+
 import AppValues from "../../../../common/app.values";
 
 @Component({
diff --git a/src/assets/styles/var.sass b/src/assets/styles/var.sass
index 34c0edb6a..73b94702a 100644
--- a/src/assets/styles/var.sass
+++ b/src/assets/styles/var.sass
@@ -8,7 +8,7 @@ $app-emperor: #535353
 $app-veryLightGray: #DEDEDE
 $app-darkSeaGreen: #86BA90
 $app-navyBlue: #0969da
-$app-aliceBlue: #f6f8faDEDEDE
+$app-aliceBlue: #f6f8fa
 $app-lightGrayishBlue: #dee2e6
 $app-cloudy: #57606a
 $app-nero: #282828