From ad7f0b2e3eb879f6b569de46b7c2e1b093de9268 Mon Sep 17 00:00:00 2001
From: thediaval <thediavall@gmail.com>
Date: Wed, 27 Nov 2019 16:40:09 +0300
Subject: [PATCH] test(theme-shared): add sort-order-icon component test

---
 .../sort-order-icon.component.ts              | 49 ++++++++++++++-----
 .../tests/sort-order-icon.component.spec.ts   | 46 +++++++++++++++++
 2 files changed, 84 insertions(+), 11 deletions(-)
 create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/tests/sort-order-icon.component.spec.ts

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts
index d42603d3a2a..0daa31c597e 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/sort-order-icon/sort-order-icon.component.ts
@@ -5,29 +5,53 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   templateUrl: './sort-order-icon.component.html',
 })
 export class SortOrderIconComponent {
-  private _order: string;
-  private _selectedKey: string;
+  private _order: 'asc' | 'desc' | '';
+  private _selectedSortKey: string;
 
+  /**
+   * @deprecated use selectedSortKey instead.
+   */
   @Input()
   set selectedKey(value: string) {
-    this._selectedKey = value;
+    this.selectedSortKey = value;
     this.selectedKeyChange.emit(value);
   }
   get selectedKey(): string {
-    return this._selectedKey;
+    return this._selectedSortKey;
+  }
+
+  @Input()
+  set selectedSortKey(value: string) {
+    this._selectedSortKey = value;
+    this.selectedSortKeyChange.emit(value);
+  }
+  get selectedSortKey(): string {
+    return this._selectedSortKey;
   }
 
   @Output() readonly selectedKeyChange = new EventEmitter<string>();
+  @Output() readonly selectedSortKeyChange = new EventEmitter<string>();
+
+  /**
+   * @deprecated use sortKey instead.
+   */
+  @Input()
+  get key(): string {
+    return this.sortKey;
+  }
+  set key(value: string) {
+    this.sortKey = value;
+  }
 
   @Input()
-  key: string;
+  sortKey: string;
 
   @Input()
-  set order(value: string) {
+  set order(value: 'asc' | 'desc' | '') {
     this._order = value;
     this.orderChange.emit(value);
   }
-  get order(): string {
+  get order(): 'asc' | 'desc' | '' {
     return this._order;
   }
 
@@ -37,16 +61,18 @@ export class SortOrderIconComponent {
   iconClass: string;
 
   get icon(): string {
-    if (!this.selectedKey) return 'fa-sort';
-    if (this.selectedKey === this.key) return `fa-sort-${this.order}`;
+    if (!this.selectedSortKey) return 'fa-sort';
+    if (this.selectedSortKey === this.sortKey) return `fa-sort-${this.order}`;
     else return '';
   }
 
   sort(key: string) {
-    this.selectedKey = key;
+    this.selectedKey = key; // TODO: To be removed
+    this.selectedSortKey = key;
     switch (this.order) {
       case '':
         this.order = 'asc';
+        this.orderChange.emit('asc');
         break;
       case 'asc':
         this.order = 'desc';
@@ -54,7 +80,8 @@ export class SortOrderIconComponent {
         break;
       case 'desc':
         this.order = '';
-        this.selectedKey = '';
+        this.selectedKey = ''; // TODO: To be removed
+        this.orderChange.emit('');
         break;
     }
   }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/sort-order-icon.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/sort-order-icon.component.spec.ts
new file mode 100644
index 00000000000..ae14fc175b8
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/sort-order-icon.component.spec.ts
@@ -0,0 +1,46 @@
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
+import { SortOrderIconComponent } from '../components/sort-order-icon/sort-order-icon.component';
+
+describe('SortOrderIconComponent', () => {
+  let spectator: SpectatorHost<SortOrderIconComponent>;
+  let component: SortOrderIconComponent;
+  const createHost = createHostFactory(SortOrderIconComponent);
+
+  beforeEach(() => {
+    spectator = createHost(
+      '<abp-sort-order-icon key="testKey" [(selectedSortKey)]="selectedSortKey" [(order)]="order"></abp-sort-order-icon>',
+      {
+        hostProps: {
+          selectedSortKey: '',
+          order: '',
+        },
+      },
+    );
+    component = spectator.component;
+  });
+
+  test('should have correct icon class when selectedSortKey and sortKey are the same', () => {
+    const newKey = 'testKey';
+    component.sort(newKey);
+    expect(component.selectedSortKey).toBe(newKey);
+    expect(component.order).toBe('asc');
+    expect(component.icon).toBe('fa-sort-asc');
+  });
+
+  test("shouldn't have any icon class when sortKey and selectedSortKey are different", () => {
+    const newKey = 'otherKey';
+    component.sort(newKey);
+    expect(component.selectedSortKey).toBe(newKey);
+    expect(component.order).toBe('asc');
+    expect(component.icon).toBe('');
+  });
+
+  test('should change order correctly when sort function called', () => {
+    component.sort('testKey');
+    expect(component.order).toBe('asc');
+    component.sort('testKey');
+    expect(component.order).toBe('desc');
+    component.sort('testKey');
+    expect(component.order).toBe('');
+  });
+});