Skip to content

ENG-9720 | fix(addons): Fix GitLab pagination Load More button not showing #847

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sh-andriy wants to merge 1 commit into
base: feature/pbs-25-24
Choose a base branch
from
Open

ENG-9720 | fix(addons): Fix GitLab pagination Load More button not showing #847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 142 additions & 0 deletions ...pp/shared/components/addons/storage-item-selector/storage-item-selector.component.spec.ts
View file
Open in desktop
Copy link
Collaborator

@nsemets nsemets Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would suggest such code:

import { MockComponents, MockProvider } from 'ng-mocks';

import { DialogService } from 'primeng/dynamicdialog';

import { signal, WritableSignal } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { OperationNames } from '@shared/enums/operation-names.enum';
import { OperationInvocation } from '@shared/models/addons/operation-invocation.model';
import { AddonsSelectors } from '@shared/stores/addons';

import { GoogleFilePickerComponent } from '../../google-file-picker/google-file-picker.component';
import { SelectComponent } from '../../select/select.component';

import { StorageItemSelectorComponent } from './storage-item-selector.component';

import { OSFTestingModule } from '@testing/osf.testing.module';
import { DialogServiceMockBuilder } from '@testing/providers/dialog-provider.mock';
import { provideMockStore } from '@testing/providers/store-provider.mock';

describe('StorageItemSelectorComponent', () => {
  let component: StorageItemSelectorComponent;
  let fixture: ComponentFixture<StorageItemSelectorComponent>;
  let mockDialogService: ReturnType<DialogServiceMockBuilder['build']>;
  let mockOperationInvocation: WritableSignal<OperationInvocation | null>;

  beforeEach(async () => {
    mockDialogService = DialogServiceMockBuilder.create().withOpenMock().build();
    mockOperationInvocation = signal<OperationInvocation | null>(null);

    await TestBed.configureTestingModule({
      imports: [
        StorageItemSelectorComponent,
        OSFTestingModule,
        ...MockComponents(GoogleFilePickerComponent, SelectComponent),
      ],
      providers: [
        provideMockStore({
          signals: [
            {
              selector: AddonsSelectors.getSelectedStorageItem,
              value: null,
            },
            {
              selector: AddonsSelectors.getOperationInvocationSubmitting,
              value: false,
            },
            {
              selector: AddonsSelectors.getCreatedOrUpdatedConfiguredAddonSubmitting,
              value: false,
            },
            {
              selector: AddonsSelectors.getOperationInvocation,
              value: mockOperationInvocation,
            },
          ],
        }),
        MockProvider(DialogService, mockDialogService),
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(StorageItemSelectorComponent);
    component = fixture.componentInstance;
    fixture.componentRef.setInput('isGoogleFilePicker', false);
    fixture.componentRef.setInput('accountName', 'test-account');
    fixture.componentRef.setInput('accountId', 'test-id');
    fixture.componentRef.setInput('operationInvocationResult', []);
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should emit operationInvoke with correct data', () => {
    const operationName = OperationNames.LIST_ROOT_ITEMS;
    const itemId = 'test-id';
    const operationInvokeSpy = jest.spyOn(component.operationInvoke, 'emit');

    (component as any).handleCreateOperationInvocation(operationName, itemId);

    expect(operationInvokeSpy).toHaveBeenCalledWith({
      operationName,
      itemId,
    });
  });

  it('should update breadcrumbs and trim them', () => {
    const operationName = OperationNames.LIST_CHILD_ITEMS;
    const itemId = 'test-id';
    const itemName = 'Test Folder';

    (component as any).handleCreateOperationInvocation(operationName, itemId, itemName, true);

    expect((component as any).breadcrumbItems().length).toBeGreaterThan(0);
  });

  it('should emit save event', () => {
    const saveSpy = jest.spyOn(component.save, 'emit');

    (component as any).handleSave();

    expect(saveSpy).toHaveBeenCalled();
  });

  it('should emit cancelSelection event', () => {
    const cancelSpy = jest.spyOn(component.cancelSelection, 'emit');

    (component as any).handleCancel();

    expect(cancelSpy).toHaveBeenCalled();
  });

  it('should clear breadcrumbs for LIST_ROOT_ITEMS operation', () => {
    (component as any).updateBreadcrumbs(OperationNames.LIST_ROOT_ITEMS, 'test-id');

    expect((component as any).breadcrumbItems()).toEqual([]);
  });

  it('should add breadcrumb item for valid operation', () => {
    const itemId = 'test-id';
    const itemName = 'Test Folder';

    (component as any).updateBreadcrumbs(OperationNames.LIST_CHILD_ITEMS, itemId, itemName, true);

    const breadcrumbs = (component as any).breadcrumbItems();
    expect(breadcrumbs.length).toBe(1);
    expect(breadcrumbs[0].id).toBe(itemId);
    expect(breadcrumbs[0].label).toBe(itemName);
  });

  describe('showLoadMoreButton', () => {
    it('should return false when operationInvocation is null', () => {
      mockOperationInvocation.set(null);
      fixture.detectChanges();

      expect(component.showLoadMoreButton()).toBe(false);
    });

    it('should return false when nextSampleCursor is not present', () => {
      mockOperationInvocation.set({
        id: 'test-id',
        type: 'operation-invocation',
        invocationStatus: 'success',
        operationName: 'list_root_items',
        operationKwargs: {},
        operationResult: [],
        itemCount: 10,
        thisSampleCursor: 'cursor-1',
      });
      fixture.detectChanges();

      expect(component.showLoadMoreButton()).toBe(false);
    });

    it('should return true when nextSampleCursor differs from thisSampleCursor', () => {
      mockOperationInvocation.set({
        id: 'test-id',
        type: 'operation-invocation',
        invocationStatus: 'success',
        operationName: 'list_root_items',
        operationKwargs: {},
        operationResult: [],
        itemCount: 20,
        thisSampleCursor: 'cursor-1',
        nextSampleCursor: 'cursor-2',
      });
      fixture.detectChanges();

      expect(component.showLoadMoreButton()).toBe(true);
    });

    it('should return true for opaque/base64 cursors like GitLab uses', () => {
      // GitLab uses base64-encoded cursors where lexicographic comparison doesn't work
      mockOperationInvocation.set({
        id: 'test-id',
        type: 'operation-invocation',
        invocationStatus: 'success',
        operationName: 'list_root_items',
        operationKwargs: {},
        operationResult: [],
        itemCount: 20,
        thisSampleCursor: 'eyJpZCI6MTIzfQ==',
        nextSampleCursor: 'eyJpZCI6MTQ1fQ==',
      });
      fixture.detectChanges();

      expect(component.showLoadMoreButton()).toBe(true);
    });

    it('should return false when nextSampleCursor equals thisSampleCursor', () => {
      mockOperationInvocation.set({
        id: 'test-id',
        type: 'operation-invocation',
        invocationStatus: 'success',
        operationName: 'list_root_items',
        operationKwargs: {},
        operationResult: [],
        itemCount: 10,
        thisSampleCursor: 'cursor-1',
        nextSampleCursor: 'cursor-1',
      });
      fixture.detectChanges();

      expect(component.showLoadMoreButton()).toBe(false);
    });

    it('should return true when nextSampleCursor exists but thisSampleCursor is undefined', () => {
      mockOperationInvocation.set({
        id: 'test-id',
        type: 'operation-invocation',
        invocationStatus: 'success',
        operationName: 'list_root_items',
        operationKwargs: {},
        operationResult: [],
        itemCount: 20,
        nextSampleCursor: 'cursor-2',
      });
      fixture.detectChanges();

      expect(component.showLoadMoreButton()).toBe(true);
    });
  });
});

Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@ import { MockComponents, MockProvider } from 'ng-mocks';

import { DialogService } from 'primeng/dynamicdialog';

import { signal, WritableSignal } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { OperationNames } from '@shared/enums/operation-names.enum';
import { OperationInvocation } from '@shared/models/addons/operation-invocation.model';
import { AddonsSelectors } from '@shared/stores/addons';

import { GoogleFilePickerComponent } from '../../google-file-picker/google-file-picker.component';
Expand Down Expand Up @@ -115,4 +117,144 @@ describe('StorageItemSelectorComponent', () => {
expect(breadcrumbs[0].id).toBe(itemId);
expect(breadcrumbs[0].label).toBe(itemName);
});

describe('showLoadMoreButton', () => {
let mockOperationInvocation: WritableSignal<OperationInvocation | null>;

beforeEach(async () => {
mockDialogService = DialogServiceMockBuilder.create().withOpenMock().build();
mockOperationInvocation = signal<OperationInvocation | null>(null);

await TestBed.resetTestingModule()
.configureTestingModule({
imports: [
StorageItemSelectorComponent,
OSFTestingModule,
...MockComponents(GoogleFilePickerComponent, SelectComponent),
],
providers: [
provideMockStore({
signals: [
{
selector: AddonsSelectors.getSelectedStorageItem,
value: null,
},
{
selector: AddonsSelectors.getOperationInvocationSubmitting,
value: false,
},
{
selector: AddonsSelectors.getCreatedOrUpdatedConfiguredAddonSubmitting,
value: false,
},
{
selector: AddonsSelectors.getOperationInvocation,
value: mockOperationInvocation,
},
],
}),
MockProvider(DialogService, mockDialogService),
],
})
.compileComponents();

fixture = TestBed.createComponent(StorageItemSelectorComponent);
component = fixture.componentInstance;
fixture.componentRef.setInput('isGoogleFilePicker', false);
fixture.componentRef.setInput('accountName', 'test-account');
fixture.componentRef.setInput('accountId', 'test-id');
fixture.componentRef.setInput('operationInvocationResult', []);
});
Comment on lines +121 to +167
Copy link
Collaborator

@nsemets nsemets Jan 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The nested describe('showLoadMoreButton') block completely resets and reconfigures the TestBed with TestBed.resetTestingModule(), duplicating almost all the configuration from the parent beforeEach. Move the mockOperationInvocation signal and the AddonsSelectors.getOperationInvocation selector to the parent beforeEach. The nested describe block can remain for logical grouping, but the redundant setup should be removed.


it('should return false when operationInvocation is null', () => {
mockOperationInvocation.set(null);
fixture.detectChanges();

expect(component.showLoadMoreButton()).toBe(false);
});

it('should return false when nextSampleCursor is not present', () => {
mockOperationInvocation.set({
id: 'test-id',
type: 'operation-invocation',
invocationStatus: 'success',
operationName: 'list_root_items',
operationKwargs: {},
operationResult: [],
itemCount: 10,
thisSampleCursor: 'cursor-1',
});
fixture.detectChanges();

expect(component.showLoadMoreButton()).toBe(false);
});

it('should return true when nextSampleCursor differs from thisSampleCursor', () => {
mockOperationInvocation.set({
id: 'test-id',
type: 'operation-invocation',
invocationStatus: 'success',
operationName: 'list_root_items',
operationKwargs: {},
operationResult: [],
itemCount: 20,
thisSampleCursor: 'cursor-1',
nextSampleCursor: 'cursor-2',
});
fixture.detectChanges();

expect(component.showLoadMoreButton()).toBe(true);
});

it('should return true for opaque/base64 cursors like GitLab uses', () => {
// GitLab uses base64-encoded cursors where lexicographic comparison doesn't work
mockOperationInvocation.set({
id: 'test-id',
type: 'operation-invocation',
invocationStatus: 'success',
operationName: 'list_root_items',
operationKwargs: {},
operationResult: [],
itemCount: 20,
thisSampleCursor: 'eyJpZCI6MTIzfQ==',
nextSampleCursor: 'eyJpZCI6MTQ1fQ==',
});
fixture.detectChanges();

expect(component.showLoadMoreButton()).toBe(true);
});

it('should return false when nextSampleCursor equals thisSampleCursor', () => {
mockOperationInvocation.set({
id: 'test-id',
type: 'operation-invocation',
invocationStatus: 'success',
operationName: 'list_root_items',
operationKwargs: {},
operationResult: [],
itemCount: 10,
thisSampleCursor: 'cursor-1',
nextSampleCursor: 'cursor-1',
});
fixture.detectChanges();

expect(component.showLoadMoreButton()).toBe(false);
});

it('should return true when nextSampleCursor exists but thisSampleCursor is undefined', () => {
mockOperationInvocation.set({
id: 'test-id',
type: 'operation-invocation',
invocationStatus: 'success',
operationName: 'list_root_items',
operationKwargs: {},
operationResult: [],
itemCount: 20,
nextSampleCursor: 'cursor-2',
});
fixture.detectChanges();

expect(component.showLoadMoreButton()).toBe(true);
});
});
});
4 changes: 2 additions & 2 deletions src/app/shared/components/addons/storage-item-selector/storage-item-selector.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,10 +193,10 @@ export class StorageItemSelectorComponent implements OnInit {

readonly showLoadMoreButton = computed(() => {
const invocation = this.operationInvocation();
if (!invocation?.nextSampleCursor || !invocation?.thisSampleCursor) {
if (!invocation?.nextSampleCursor) {
return false;
}
return invocation.nextSampleCursor > invocation.thisSampleCursor;
return invocation.nextSampleCursor !== invocation.thisSampleCursor;
});

handleCreateOperationInvocation(
Expand Down