[ENG-8505] Next phase to adding the Google File Picker (#292)

* chore(misc): Fixed a test failure, updated jest.config.ts and changed to standAlone`

* chore(compodocs): Disabled the pre-commit as it is useless for now

* chore(jest): actions are now testable

* chore(jest): enabled configure-addon.commponent.tst to be testable

* chore(testing): updated the osf.testing.module for translation

* chore(mocks): added global testing mocks and a new osftestingstoremodule

* chore(tests): Added tests to continue the process

* feat(code): added the condition for google drive

* feat(google-file-picker): Added the initial google file picker component

Author: bp-cos

.husky/pre-commit

@@ -3,10 +3,10 @@ npx lint-staged || {
   exit 1
 }
 
-npm run docs:coverage || {
-  printf "\n\nERROR: Documentation Coverage thresholds are not met."
-  printf "\n\nIn the future this will block your ability to commit locally until it is resolved."
-  printf "\n\nThe same pipeline runs via GitHub actions."
-  printf "\n\nYou are seeing this error because code was added without documentation."
+# npm run docs:coverage || {
+#   printf "\n\nERROR: Documentation Coverage thresholds are not met."
+#   printf "\n\nIn the future this will block your ability to commit locally until it is resolved."
+#   printf "\n\nThe same pipeline runs via GitHub actions."
+#   printf "\n\nYou are seeing this error because code was added without documentation."
   # exit 1
-}
+# }

jest.config.js

@@ -30,7 +30,6 @@ module.exports = {
     'src/app/**/*.{ts,js}',
     '!src/app/app.config.ts',
     '!src/app/**/*.routes.{ts.js}',
-    '!src/app/**/*.actions.{ts.js}',
     '!src/app/**/*.models.{ts.js}',
     '!src/app/**/*.model.{ts.js}',
     '!src/app/**/*.route.{ts,js}',
@@ -72,10 +71,13 @@ module.exports = {
     '<rootDir>/src/app/app.config.ts',
     '<rootDir>/src/app/app.routes.ts',
     '<rootDir>/src/app/features/registry/',
+    '<rootDir>/src/app/features/project/addons/components/configure-configure-addon/',
+    '<rootDir>/src/app/features/project/addons/components/connect-configured-addon/',
+    '<rootDir>/src/app/features/project/addons/components/disconnect-addon-modal/',
+    '<rootDir>/src/app/features/project/addons/components/confirm-account-connection-modal/',
     '<rootDir>/src/app/features/files/',
     '<rootDir>/src/app/features/my-projects/',
     '<rootDir>/src/app/features/preprints/',
-    '<rootDir>/src/app/features/project/addons/',
     '<rootDir>/src/app/features/project/analytics/',
     '<rootDir>/src/app/features/project/contributors/',
     '<rootDir>/src/app/features/project/files/',

src/app/features/files/components/file-keywords/file-keywords.component.spec.ts

@@ -2,15 +2,15 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FileKeywordsComponent } from './file-keywords.component';
 
-import { OSFTestingModule } from '@testing/osf.testing.module';
+import { OSFTestingStoreModule } from '@testing/osf.testing.module';
 
 describe('FileKeywordsComponent', () => {
   let component: FileKeywordsComponent;
   let fixture: ComponentFixture<FileKeywordsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FileKeywordsComponent, OSFTestingModule],
+      imports: [FileKeywordsComponent, OSFTestingStoreModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(FileKeywordsComponent);

src/app/features/files/components/file-metadata/file-metadata.component.spec.ts

@@ -2,15 +2,15 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FileMetadataComponent } from './file-metadata.component';
 
-import { OSFTestingModule } from '@testing/osf.testing.module';
+import { OSFTestingStoreModule } from '@testing/osf.testing.module';
 
 describe('FileMetadataComponent', () => {
   let component: FileMetadataComponent;
   let fixture: ComponentFixture<FileMetadataComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FileMetadataComponent, OSFTestingModule],
+      imports: [FileMetadataComponent, OSFTestingStoreModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(FileMetadataComponent);

src/app/features/files/components/file-resource-metadata/file-resource-metadata.component.spec.ts

@@ -2,15 +2,15 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FileResourceMetadataComponent } from './file-resource-metadata.component';
 
-import { OSFTestingModule } from '@testing/osf.testing.module';
+import { OSFTestingStoreModule } from '@testing/osf.testing.module';
 
 describe('FileResourceMetadataComponent', () => {
   let component: FileResourceMetadataComponent;
   let fixture: ComponentFixture<FileResourceMetadataComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FileResourceMetadataComponent, OSFTestingModule],
+      imports: [FileResourceMetadataComponent, OSFTestingStoreModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(FileResourceMetadataComponent);

src/app/features/files/components/file-revisions/file-revisions.component.spec.ts

@@ -2,15 +2,15 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FileRevisionsComponent } from './file-revisions.component';
 
-import { OSFTestingModule } from '@testing/osf.testing.module';
+import { OSFTestingStoreModule } from '@testing/osf.testing.module';
 
 describe('FileRevisionsComponent', () => {
   let component: FileRevisionsComponent;
   let fixture: ComponentFixture<FileRevisionsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FileRevisionsComponent, OSFTestingModule],
+      imports: [FileRevisionsComponent, OSFTestingStoreModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(FileRevisionsComponent);

src/app/features/files/pages/file-detail/file-detail.component.spec.ts

@@ -6,15 +6,15 @@ import { SubHeaderComponent } from '@shared/components';
 
 import { FileDetailComponent } from './file-detail.component';
 
-import { OSFTestingModule } from '@testing/osf.testing.module';
+import { OSFTestingStoreModule } from '@testing/osf.testing.module';
 
 describe('FileDetailComponent', () => {
   let component: FileDetailComponent;
   let fixture: ComponentFixture<FileDetailComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FileDetailComponent, MockComponent(SubHeaderComponent), OSFTestingModule],
+      imports: [FileDetailComponent, MockComponent(SubHeaderComponent), OSFTestingStoreModule],
       providers: [],
     }).compileComponents();
 

src/app/features/project/addons/addons.component.spec.ts

@@ -1,5 +1,11 @@
+import { provideStore } from '@ngxs/store';
+
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { UserSelectors, UserState } from '@core/store/user';
+import { AddonsState } from '@osf/shared/stores';
+
 import { AddonsComponent } from './addons.component';
 
 import { OSFTestingModule } from '@testing/osf.testing.module';
@@ -11,6 +17,15 @@ describe('AddonsComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [AddonsComponent, OSFTestingModule],
+      providers: [
+        provideStore([UserState, AddonsState]),
+        {
+          provide: UserSelectors,
+          useValue: {
+            getCurrentUser: () => signal({ id: 'mock-user' }),
+          },
+        },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(AddonsComponent);

src/app/features/project/addons/components/configure-addon/configure-addon.component.html

@@ -63,12 +63,8 @@ <h2 class="align-self-center">
           (keydown.enter)="toggleEditMode()"
         ></p-button>
       </div>
-      <!-- @if (storageAddon()) {
-        <p class="text-lg">
-          {{ storageAddon()?.wbKey }}
-        </p>
-      } @else { -->
       <osf-folder-selector
+        [isGoogleFilePicker]="isGoogleDrive()"
         [accountName]="addon()?.displayName || ''"
         [operationInvocationResult]="operationInvocation()?.operationResult || []"
         [accountNameControl]="accountNameControl"
@@ -77,7 +73,6 @@ <h2 class="align-self-center">
         (save)="handleUpdateAddonConfiguration()"
         (cancelSelection)="toggleEditMode()"
       />
-      <!-- } -->
     </section>
   }
 </section>

src/app/features/project/addons/components/configure-addon/configure-addon.component.spec.ts

@@ -1,24 +1,176 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideStore } from '@ngxs/store';
+
+import { of } from 'rxjs';
+
+import { HttpTestingController } from '@angular/common/http/testing';
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { AddonsState } from '@osf/shared/stores';
 
 import { ConfigureAddonComponent } from './configure-addon.component';
 
+import { getConfiguredAddonsData } from '@testing/data/addons/addons.configured.data';
+import { getAddonsOperationInvocation } from '@testing/data/addons/addons.operation-invocation.data';
+import { ToastServiceMock } from '@testing/mocks/toast.service.mock';
 import { OSFTestingModule } from '@testing/osf.testing.module';
 
-describe('ConfigureAddonComponent', () => {
+describe('Component: Configure Addon', () => {
   let component: ConfigureAddonComponent;
   let fixture: ComponentFixture<ConfigureAddonComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ConfigureAddonComponent, OSFTestingModule],
-    }).compileComponents();
+  const mockActivatedRoute = {
+    parent: {
+      parent: {
+        snapshot: {
+          params: {
+            id: 'mocked-id',
+          },
+        },
+      },
+    },
+    snapshot: {
+      paramMap: new Map(),
+      queryParamMap: new Map(),
+      data: {},
+    },
+    paramMap: of(new Map()),
+    queryParamMap: of(new Map()),
+    // ... if you use `route.root`, add a dummy root too
+    root: {},
+  };
+
+  describe('addon present', () => {
+    beforeEach(async () => {
+      const mockRouter = {
+        url: '/project/abc123/addons/configure', // mock the actual URL used in your component
+        navigate: jest.fn(),
+        getCurrentNavigation: jest.fn().mockReturnValue({
+          extras: {
+            state: {
+              addon: getConfiguredAddonsData(0),
+            },
+          },
+        }),
+      } as unknown as Router;
+
+      await TestBed.configureTestingModule({
+        imports: [OSFTestingModule, ConfigureAddonComponent],
+        providers: [
+          provideStore([AddonsState]),
+          ToastServiceMock,
+          { provide: Router, useValue: mockRouter },
+          {
+            provide: ActivatedRoute,
+            useValue: mockActivatedRoute,
+          },
+        ],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(ConfigureAddonComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+
+    it('should validate the constuctor values', () => {
+      expect(component.storageAddon()).toBeUndefined();
+      expect(component.addon()).toEqual(
+        Object({
+          attributes: {
+            connected_capabilities: ['ACCESS', 'UPDATE'],
+            connected_operation_names: ['list_child_items', 'list_root_items', 'get_item_info'],
+            current_user_is_owner: true,
+            display_name: 'Google Drive',
+            external_service_name: 'googledrive',
+            root_folder: '0AIl0aR4C9JAFUk9PVA',
+          },
+          id: '756579dc-3a24-4849-8866-698a60846ac3',
+          links: expect.any(Object),
+          relationships: expect.any(Object),
+          type: 'configured-storage-addons',
+        })
+      );
 
-    fixture = TestBed.createComponent(ConfigureAddonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+      expect(component.baseUrl()).toBe('/project/abc123');
+      expect(component.resourceUri()).toBe('https://staging4.osf.io/mocked-id');
+      expect(component.addonTypeString()).toBe('storage');
+      expect(component.selectedRootFolderId()).toBeUndefined();
+      expect(component.accountNameControl.value).toBeUndefined();
+      expect(component.isGoogleDrive()).toBeFalsy();
+    });
+
+    it('should valid onInit - action called', inject([HttpTestingController], (httpMock: HttpTestingController) => {
+      const request = httpMock.expectOne('https://addons.staging4.osf.io/v1/addon-operation-invocations/');
+      expect(request.request.method).toBe('POST');
+      request.flush(getAddonsOperationInvocation());
+
+      expect(component.operationInvocation()).toEqual(
+        Object({
+          id: '022c80d6-06b5-452d-9932-19bb135cd5c2',
+          invocationStatus: 'SUCCESS',
+          itemCount: 0,
+          operationKwargs: {
+            itemId: '0AIl0aR4C9JAFUk9PVA',
+            itemType: undefined,
+          },
+          operationName: 'get_item_info',
+          operationResult: [
+            {
+              canBeRoot: true,
+              itemId: '0AIl0aR4C9JAFUk9PVA',
+              itemName: 'My Drive',
+              itemType: 'FOLDER',
+              mayContainRootCandidates: true,
+            },
+          ],
+          type: 'addon-operation-invocations',
+        })
+      );
+      expect(httpMock.verify).toBeTruthy();
+    }));
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  describe('addon not-present', () => {
+    beforeEach(async () => {
+      const mockRouter = {
+        url: '/project/abc123/addons/configure', // mock the actual URL used in your component
+        navigate: jest.fn(),
+        getCurrentNavigation: jest.fn().mockReturnValue({
+          extras: {
+            state: {
+              addon: null,
+            },
+          },
+        }),
+      } as unknown as Router;
+
+      await TestBed.configureTestingModule({
+        imports: [OSFTestingModule, ConfigureAddonComponent],
+        providers: [
+          provideStore([AddonsState]),
+          ToastServiceMock,
+          { provide: Router, useValue: mockRouter },
+          {
+            provide: ActivatedRoute,
+            useValue: mockActivatedRoute,
+          },
+        ],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(ConfigureAddonComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+
+    it('should validate user is redirected', () => {
+      const spy = jest.spyOn(component['router'], 'navigate');
+      expect(spy).toHaveBeenCalledWith(['/project/abc123/addons']);
+    });
+
+    it('should valid onInit - action not called', inject([HttpTestingController], (httpMock: HttpTestingController) => {
+      httpMock.expectNone('https://addons.staging4.osf.io/v1/addon-operation-invocations/');
+
+      expect(httpMock.verify).toBeTruthy();
+    }));
   });
 });