refactor: downgrading version and fixing tests

Author: anandtiwary

package-lock.json

@@ -64,7 +64,7 @@
     "iso8601-duration": "^1.3.0",
     "lodash-es": "^4.17.21",
     "mixpanel-browser": "^2.42.0",
-    "ngx-color": "^7.3.3",
+    "ngx-color": "7.0.0",
     "rxjs": "~6.6.7",
     "tslib": "^2.3.1",
     "uuid": "^8.3.2",

package.json

@@ -28,7 +28,7 @@
     "d3-scale": "^3.3.0",
     "d3-selection": "^1.4.2",
     "d3-shape": "^1.3.5",
-    "ngx-color": "^7.3.3"
+    "ngx-color": "7.0.0"
   },
   "devDependencies": {
     "@hypertrace/test-utils": "^0.0.0"

projects/components/package.json

@@ -1,26 +1,32 @@
+import { CommonModule } from '@angular/common';
+import { fakeAsync } from '@angular/core/testing';
 import { IconType } from '@hypertrace/assets-library';
+import { Color, NavigationService } from '@hypertrace/common';
 import { IconComponent } from '@hypertrace/components';
 import { createHostFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
-import { ColorPickerComponent } from './color-picker.component';
+import { MockComponent } from 'ng-mocks';
 import { SketchComponent } from 'ngx-color/sketch';
-import { PopoverModule } from '../popover/popover.module';
+import { NEVER, Observable } from 'rxjs';
 import { NotificationService } from '../notification/notification.service';
-import { CommonModule } from '@angular/common';
-import { Observable } from 'rxjs';
-import { MockComponent } from 'ng-mocks';
+import { PopoverModule } from '../popover/popover.module';
+import { ColorPickerComponent } from './color-picker.component';
 
 describe('Color Picker component', () => {
   let spectator: Spectator<ColorPickerComponent>;
 
   const createHost = createHostFactory({
     component: ColorPickerComponent,
     imports: [CommonModule, PopoverModule],
-    providers: [mockProvider(NotificationService, { withNotification: (x: Observable<unknown>) => x })],
-    declareComponent: false,
+    providers: [
+      mockProvider(NotificationService, { withNotification: (x: Observable<unknown>) => x }),
+      mockProvider(NavigationService, {
+        navigation$: NEVER
+      })
+    ],
     declarations: [MockComponent(SketchComponent), MockComponent(IconComponent)]
   });
 
-  test('should render color picker with default colors', () => {
+  test('should render color picker with default colors', fakeAsync(() => {
     const onSelectionChangeSpy = jest.fn();
     spectator = createHost(
       `<ht-color-picker (selectedChange)="onSelectionChange($event)">
@@ -32,7 +38,17 @@ describe('Color Picker component', () => {
       }
     );
 
-    expect(spectator.queryAll('.color-picker .color').length).toBe(7);
+    const colors = spectator.queryAll('.color-picker .color');
+    expect(colors.length).toBe(7);
     expect(spectator.query(IconComponent)?.icon).toBe(IconType.Add);
-  });
+
+    spectator.click(colors[1]);
+    expect(spectator.component.selected).toEqual(Color.Blue3);
+    expect(onSelectionChangeSpy).toHaveBeenCalledWith(Color.Blue3);
+
+    spectator.click('.add-icon');
+    spectator.tick();
+
+    expect(spectator.query('.color-sketch', { root: true })).toExist();
+  }));
 });

projects/components/src/color-picker/color-picker.component.test.ts

@@ -26,7 +26,7 @@ import { IconSize } from '../icon/icon-size';
       ></div>
       <ht-popover>
         <ht-popover-trigger>
-          <ht-icon icon="${IconType.Add}" size="${IconSize.Small}"></ht-icon>
+          <ht-icon class="add-icon" icon="${IconType.Add}" size="${IconSize.Small}"></ht-icon>
         </ht-popover-trigger>
         <ht-popover-content>
           <div class="container">

projects/components/src/color-picker/color-picker.component.ts

@@ -16,6 +16,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "downlevelIteration": true,
+    "allowJs": true,
     "lib": ["es2015", "es2016", "es2017", "esnext.string", "esnext.array", "esnext.asynciterable", "dom"],
     "paths": {
       "@hypertrace/assets-library": ["projects/assets-library/src/public-api.ts"],