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 @@
Saved Queries
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"
>
Runplay_arrow
@@ -94,7 +94,7 @@ Query:
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"
>
Runplay_arrow
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 @@
Select number of rows to load:
- {{ option }}
+
+ {{ option }}
+
Or enter your number:
-
+
\ 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..57ada6a7b
--- /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;
+
+ 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);
+ }));
+});
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