Added tests and minor fixes

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>

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";

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>

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 enter text", fakeAsync(() => {
+        const newRowsNumber = 76;
+        expect(component.rowsNumber).toEqual(AppValues.SQL_QUERY_LIMIT);
+        dispatchInputEvent(fixture, "row-limit-input", newRowsNumber.toString());
+        expect(component.rowsNumber).toEqual(newRowsNumber);
+    }));
+});

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({

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