fix: use search api, fix tests

Author: honzikec

angular-ngrx-scss/src/app/fixtures/repository.fixtures.ts

@@ -1,16 +1,16 @@
+import { HttpHeaders, HttpResponse } from '@angular/common/http';
+import { PullRequest } from '../repository/services/repository.interfaces';
 import {
   ISSUE_STATE,
   PullRequestAPIResponse,
-  PullRequestItemAPIResponse,
   IssueLabel,
-  RepoPullRequests,
 } from '../state/repository';
 
 export const generatePullRequestAPIResponseFixture = (
   state: ISSUE_STATE = 'open',
-): PullRequestAPIResponse => {
+): HttpResponse<PullRequestAPIResponse> => {
   const closedDate = new Date(2022, 2, 1).toISOString();
-  return {
+  const body = {
     incomplete_results: false,
     total_count: 1,
     items: [
@@ -37,30 +37,18 @@ export const generatePullRequestAPIResponseFixture = (
           } as IssueLabel,
         ],
         comments: 305,
-      } as PullRequestItemAPIResponse,
+      } as unknown as PullRequest,
     ],
   };
-};
-
-const prObject = generatePullRequestAPIResponseFixture().items[0];
 
-export const pullRequestFixture: RepoPullRequests = {
-  totalCount: 1,
-  pullRequests: [
-    {
-      id: prObject.id,
-      login: prObject.user.login,
-      title: prObject.title,
-      number: prObject.number,
-      state: prObject.state,
-      closedAt: prObject.closed_at ? new Date(prObject.closed_at) : null,
-      mergedAt: prObject.pull_request.merged_at
-        ? new Date(prObject.pull_request.merged_at)
-        : null,
-      createdAt: new Date(prObject.created_at),
-      labels: prObject.labels,
-      commentCount: prObject.comments,
-      labelCount: prObject.labels.length,
-    },
-  ],
+  return {
+    headers: new HttpHeaders(),
+    status: 200,
+    statusText: 'OK',
+    ok: true,
+    type: 4,
+    url: 'https://api.github.com/search/issues?q=repo:thisdot/open-source/issues+type:pr+state:open',
+    clone: jasmine.createSpy('clone'),
+    body,
+  };
 };

angular-ngrx-scss/src/app/pull-requests/components/pull-request-card/pull-request-card.component.spec.ts

@@ -2,9 +2,9 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PullRequestCardComponent } from './pull-request-card.component';
 import { ChangeDetectionStrategy } from '@angular/core';
-import { RepoPullRequest } from '../../../state/repository';
 import { By } from '@angular/platform-browser';
 import { SharedModule } from '../../../shared/shared.module';
+import { PullRequest } from 'src/app/repository/services/repository.interfaces';
 
 describe('PullRequestCardComponent', () => {
   let component: PullRequestCardComponent;
@@ -26,11 +26,11 @@ describe('PullRequestCardComponent', () => {
     component = fixture.componentInstance;
     component.pullRequest = {
       id: 1,
-      login: 'thisdot',
+      user: { login: 'thisdot' },
       title: 'Get PRs information',
       number: 45,
       state: 'open',
-      createdAt: new Date('01/01/2022'),
+      created_at: new Date('01/01/2022'),
       labels: [
         {
           id: 2,
@@ -40,8 +40,8 @@ describe('PullRequestCardComponent', () => {
           color: 'D4C5F9',
         },
       ],
-      commentCount: 3,
-    } as RepoPullRequest;
+      comments: 3,
+    } as unknown as PullRequest;
     fixture.detectChanges();
   });
 

angular-ngrx-scss/src/app/pull-requests/components/pull-requests-header/pull-requests-header.component.html

@@ -22,12 +22,18 @@
       name="Label"
       description="Select label"
       [isRepo]="true"
+      [toggle]="true"
       [items]="(labels$ | async) ?? []"
+      (setFilter)="setLabel($event)"
+      [current]="filterParams.labels"
     ></app-filter-dropdown>
     <app-filter-dropdown
       name="Sort"
       description="Select sort"
       [isRepo]="true"
+      [items]="sortOptions"
+      (setFilter)="setSort($event)"
+      [current]="filterParams.sort"
     ></app-filter-dropdown>
   </div>
 </div>

angular-ngrx-scss/src/app/pull-requests/components/pull-requests-header/pull-requests-header.component.ts

@@ -8,10 +8,14 @@ import {
 import {
   ISSUE_STATE,
   RepoPullRequests,
+  fetchPullRequests,
   selectLabels,
 } from '../../../state/repository';
 import { Store } from '@ngrx/store';
 import { map } from 'rxjs';
+import { FilterOption } from 'src/app/shared/components/filter-dropdown/filter-dropdown.component';
+import { SORTING_OPTIONS } from 'src/app/shared/constants';
+import { Sort } from 'src/app/repository/services/repository.interfaces';
 
 @Component({
   selector: 'app-pull-requests-header',
@@ -20,11 +24,19 @@ import { map } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PullRequestsHeaderComponent {
+  @Input() owner!: string;
+  @Input() repoName!: string;
   @Input() openPullRequests!: RepoPullRequests | null;
   @Input() closedPullRequests!: RepoPullRequests | null;
   @Input() viewState: ISSUE_STATE = 'open';
   @Output() viewStateChange = new EventEmitter<ISSUE_STATE>();
 
+  filterParams: { labels?: string; sort: Sort } = {
+    sort: 'created',
+  };
+
+  sortOptions: FilterOption[] = SORTING_OPTIONS;
+
   labels$ = this.store
     .select(selectLabels)
     .pipe(
@@ -39,4 +51,31 @@ export class PullRequestsHeaderComponent {
     this.viewState = state;
     this.viewStateChange.emit(this.viewState);
   }
+
+  setLabel(label: string) {
+    this.filterParams.labels = label;
+    this.refetchPulls();
+  }
+
+  setSort(sort: string) {
+    this.filterParams.sort = sort as Sort;
+    this.refetchPulls();
+  }
+
+  private refetchPulls() {
+    this.store.dispatch(
+      fetchPullRequests({
+        owner: this.owner,
+        repoName: this.repoName,
+        params: { state: 'open', ...this.filterParams },
+      }),
+    );
+    this.store.dispatch(
+      fetchPullRequests({
+        owner: this.owner,
+        repoName: this.repoName,
+        params: { state: 'closed', ...this.filterParams },
+      }),
+    );
+  }
 }

angular-ngrx-scss/src/app/pull-requests/components/pull-requests-list/pull-requests-list.component.spec.ts

@@ -2,8 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PullRequestsListComponent } from './pull-requests-list.component';
 import { ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { RepoPullRequest } from '../../../state/repository';
 import { By } from '@angular/platform-browser';
+import { PullRequest } from 'src/app/repository/services/repository.interfaces';
 
 describe('PullRequestsListComponent', () => {
   let component: PullRequestsListComponent;
@@ -42,15 +42,20 @@ describe('PullRequestsListComponent', () => {
 
   it('should render pull request cards', () => {
     component.pullRequests = {
-      totalCount: 1,
+      total: 1,
+      paginationParams: {
+        page: 1,
+        canNext: false,
+        canPrev: false,
+      },
       pullRequests: [
         {
           id: 1,
-          login: 'thisdot',
+          user: { login: 'thisdot' },
           title: 'Get PRs information',
           number: 45,
           state: 'open',
-          createdAt: new Date('01/01/2021'),
+          created_at: new Date('01/01/2021'),
           labels: [
             {
               id: 2,
@@ -61,7 +66,7 @@ describe('PullRequestsListComponent', () => {
             },
           ],
           commentCount: 3,
-        } as RepoPullRequest,
+        } as unknown as PullRequest,
       ],
     };
     fixture.detectChanges();

angular-ngrx-scss/src/app/pull-requests/pull-requests.component.html

@@ -4,6 +4,8 @@
     [closedPullRequests]="closedPullRequests$ | async"
     [viewState]="viewState"
     (viewStateChange)="viewStateChange($event)"
+    [owner]="owner"
+    [repoName]="repoName"
   ></app-pull-requests-header>
   <app-pull-requests-list
     [pullRequests]="

angular-ngrx-scss/src/app/pull-requests/pull-requests.component.spec.ts

@@ -68,9 +68,11 @@ describe('PullRequestsComponent', () => {
     store.scannedActions$.subscribe((action) => {
       expect(action).toEqual(
         fetchPullRequests({
-          prState: 'closed',
           owner: 'thisdot',
           repoName: 'starter.dev-github-showcases',
+          params: {
+            state: 'closed',
+          },
         }),
       );
       done();

angular-ngrx-scss/src/app/repository/services/repository.interfaces.ts

@@ -56,6 +56,8 @@ export interface RepositoryIssuesApiParams {
 
 export interface RepositoryPullsApiParams {
   state: 'open' | 'closed' | 'all';
+  labels?: string;
+  sort?: Sort;
   page?: number;
 }
 

angular-ngrx-scss/src/app/repository/services/repository.service.spec.ts

@@ -11,12 +11,9 @@ import {
   RepoApiResponse,
   RepoContentsApiResponse,
   RepoIssues,
+  RepoPullRequests,
 } from 'src/app/state/repository';
-import {
-  IssueComments,
-  PullRequest,
-  PullRequests,
-} from './repository.interfaces';
+import { IssueComments, PullRequest } from './repository.interfaces';
 
 import { generatePullRequestAPIResponseFixture } from '../../fixtures/repository.fixtures';
 import { RepositoryService } from './repository.service';
@@ -192,7 +189,7 @@ const MOCK_PULL_REQUEST_COMMENTS: IssueComments = [
   },
 ];
 
-const MOCK_PULL_REQUEST: PullRequest = {
+const MOCK_PULL_REQUEST = {
   title: 'Et quis culpa ex sapiente dolores qui quo qui.',
   number: MOCK_PULL_REQUEST_NUMBER,
   user: {
@@ -204,9 +201,9 @@ const MOCK_PULL_REQUEST: PullRequest = {
   },
   closed_at: '2022-07-01T23:46:12Z',
   created_at: '2022-07-01T23:46:12Z',
-};
+} as PullRequest;
 
-const MOCK_PULL_REQUESTS: PullRequests = [
+const MOCK_PULL_REQUESTS = [
   {
     title: 'Et quis culpa ex sapiente dolores qui quo qui.',
     number: MOCK_PULL_REQUEST_NUMBER,
@@ -233,7 +230,32 @@ const MOCK_PULL_REQUESTS: PullRequests = [
     closed_at: '2022-07-02T23:46:12Z',
     created_at: '2022-07-02T23:46:12Z',
   },
-];
+] as PullRequest[];
+
+const EXPECTED_PULL_REQUESTS: RepoPullRequests = {
+  total: 3,
+  paginationParams: {
+    page: 1,
+    canNext: false,
+    canPrev: false,
+  },
+  pullRequests: MOCK_PULL_REQUESTS,
+};
+
+const MOCK_PULL_REQUESTS_RESPONSE: HttpResponse<IssueAPIResponse> = {
+  headers: new HttpHeaders(),
+  clone: jasmine.createSpy('clone'),
+  type: HttpEventType.Response,
+  status: 200,
+  statusText: 'OK',
+  ok: true,
+  url: 'http://localhost',
+  body: {
+    total_count: 3,
+    incomplete_results: false,
+    items: MOCK_PULL_REQUESTS,
+  },
+};
 
 describe('RepositoryService', () => {
   let repoService: RepositoryService;
@@ -381,23 +403,25 @@ describe('RepositoryService', () => {
   });
 
   it('should return multiple pull requests for a given repository', (done) => {
-    httpClientSpy.get.and.returnValue(of(MOCK_PULL_REQUESTS));
+    httpClientSpy.get.and.returnValue(of(MOCK_PULL_REQUESTS_RESPONSE));
 
-    repoService.getRepositoryPullRequests('FakeCo', 'fake-repo').subscribe({
-      next: (pullRequests) => {
-        expect(pullRequests).toBe(MOCK_PULL_REQUESTS);
+    repoService
+      .getRepositoryPullRequests('FakeCo', 'fake-repo', { state: 'all' })
+      .subscribe({
+        next: (pullRequests) => {
+          expect(pullRequests).toEqual(EXPECTED_PULL_REQUESTS);
 
-        expect(httpClientSpy.get).toHaveBeenCalledWith(
-          `https://api.github.com/repos/FakeCo/fake-repo/pulls`,
-          jasmine.objectContaining({
-            headers: {
-              Accept: 'application/vnd.github.v3+json',
-            },
-          }),
-        );
-      },
-      complete: done,
-    });
+          expect(httpClientSpy.get).toHaveBeenCalledWith(
+            `https://api.github.com/search/issues?q=repo:FakeCo/fake-repo+type:pr+state:all`,
+            jasmine.objectContaining({
+              headers: {
+                Accept: 'application/vnd.github.v3+json',
+              },
+            }),
+          );
+        },
+        complete: done,
+      });
   });
 
   it('should return pull request comments when given a pull request number', (done) => {
@@ -468,15 +492,15 @@ describe('RepositoryService', () => {
       });
   });
 
-  describe('getPullRequests', () => {
+  describe('getRepositoryPullRequests', () => {
     it('should return pull request for given repository', (done) => {
-      const apiResponse: PullRequestAPIResponse =
+      const apiResponse: HttpResponse<PullRequestAPIResponse> =
         generatePullRequestAPIResponseFixture();
 
       httpClientSpy.get.and.returnValue(of(apiResponse).pipe(delay(0)));
       repoService
-        .getPullRequests('thisdot', 'starter.dev-github-showcases', 'open')
-        .subscribe((res) => {
+        .getRepositoryPullRequest('thisdot', 'starter.dev-github-showcases', 1)
+        .subscribe((res: unknown) => {
           expect(res).toEqual(apiResponse);
           done();
         });
@@ -485,7 +509,7 @@ describe('RepositoryService', () => {
         .withContext('called once')
         .toBe(1);
       expect(httpClientSpy.get).toHaveBeenCalledOnceWith(
-        'https://api.github.com/search/issues?q=repo:thisdot/starter.dev-github-showcases+type:pr+state:open',
+        'https://api.github.com/repos/thisdot/starter.dev-github-showcases/pulls/1',
         jasmine.objectContaining({
           headers: {
             Accept: 'application/vnd.github.v3+json',