From 1ade8701ac72ae4b8cddfa4fae1010ac41535293 Mon Sep 17 00:00:00 2001 From: Elain T Date: Fri, 14 Jun 2024 09:10:25 -0600 Subject: [PATCH] feat(design)!: remove `DaffQtyDropdownComponent` from `@daffodil/design` (#2864) BREAKING CHANGE: `DaffQtyDropdownComponent` has been removed from `@daffodil/design`. Use the `DaffQuantityFieldComponent` instead. --- .../cart-item/cart-item.component.html | 8 +- .../cart-item/cart-item.component.spec.ts | 43 +-- .../cart-item/cart-item.component.ts | 27 +- .../components/cart-item/cart-item.module.ts | 10 +- .../components/product/product.component.html | 8 +- .../product/product.component.spec.ts | 60 +--- .../components/product/product.component.ts | 18 ++ .../components/product/product.module.ts | 11 +- .../design-land/src/app/app-routing.module.ts | 1 - .../qty-dropdown-routing.module.ts | 23 -- .../qty-dropdown/qty-dropdown.component.html | 6 - .../qty-dropdown/qty-dropdown.component.scss | 0 .../qty-dropdown.component.spec.ts | 29 -- .../qty-dropdown/qty-dropdown.component.ts | 23 -- .../app/qty-dropdown/qty-dropdown.module.ts | 26 -- apps/design-land/src/assets/nav.json | 7 - .../src/molecules/qty-dropdown/README.md | 0 .../src/molecules/qty-dropdown/public_api.ts | 2 - .../qty-dropdown/qty-dropdown.component.html | 7 - .../qty-dropdown/qty-dropdown.component.scss | 5 - .../qty-dropdown.component.spec.ts | 285 ------------------ .../qty-dropdown/qty-dropdown.component.ts | 127 -------- .../qty-dropdown/qty-dropdown.module.ts | 25 -- libs/design/src/public_api.ts | 3 - 24 files changed, 85 insertions(+), 669 deletions(-) delete mode 100644 apps/design-land/src/app/qty-dropdown/qty-dropdown-routing.module.ts delete mode 100644 apps/design-land/src/app/qty-dropdown/qty-dropdown.component.html delete mode 100644 apps/design-land/src/app/qty-dropdown/qty-dropdown.component.scss delete mode 100644 apps/design-land/src/app/qty-dropdown/qty-dropdown.component.spec.ts delete mode 100644 apps/design-land/src/app/qty-dropdown/qty-dropdown.component.ts delete mode 100644 apps/design-land/src/app/qty-dropdown/qty-dropdown.module.ts delete mode 100644 libs/design/src/molecules/qty-dropdown/README.md delete mode 100644 libs/design/src/molecules/qty-dropdown/public_api.ts delete mode 100644 libs/design/src/molecules/qty-dropdown/qty-dropdown.component.html delete mode 100644 libs/design/src/molecules/qty-dropdown/qty-dropdown.component.scss delete mode 100644 libs/design/src/molecules/qty-dropdown/qty-dropdown.component.spec.ts delete mode 100644 libs/design/src/molecules/qty-dropdown/qty-dropdown.component.ts delete mode 100644 libs/design/src/molecules/qty-dropdown/qty-dropdown.module.ts diff --git a/apps/demo/src/app/cart/components/cart-item/cart-item.component.html b/apps/demo/src/app/cart/components/cart-item/cart-item.component.html index b8fe36d6d6..8f5f143347 100644 --- a/apps/demo/src/app/cart/components/cart-item/cart-item.component.html +++ b/apps/demo/src/app/cart/components/cart-item/cart-item.component.html @@ -13,7 +13,13 @@ Qty: {{item.qty}} - + + + +
diff --git a/apps/demo/src/app/cart/components/cart-item/cart-item.component.spec.ts b/apps/demo/src/app/cart/components/cart-item/cart-item.component.spec.ts index 56e8aa9fa6..c156cff26a 100644 --- a/apps/demo/src/app/cart/components/cart-item/cart-item.component.spec.ts +++ b/apps/demo/src/app/cart/components/cart-item/cart-item.component.spec.ts @@ -4,28 +4,27 @@ import { ComponentFixture, TestBed, } from '@angular/core/testing'; +import { ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { Router } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; import { DaffCartItem } from '@daffodil/cart'; -import { - DaffCartItemDelete, - DaffCartItemUpdate, -} from '@daffodil/cart/state'; +import { DaffCartItemDelete } from '@daffodil/cart/state'; import { DaffCartStateTestingModule, MockDaffCartFacade, } from '@daffodil/cart/state/testing'; import { DaffCartItemFactory } from '@daffodil/cart/testing'; import { - DaffQtyDropdownModule, - DaffQtyDropdownComponent, + DaffQuantityFieldComponent, + DaffQuantityFieldModule, } from '@daffodil/design'; import { DaffProductImageFactory } from '@daffodil/product/testing'; import { CartItemComponent } from './cart-item.component'; + @Component({ template: '' }) class WrapperComponent { cartItemValue: DaffCartItem; @@ -35,7 +34,7 @@ describe('CartItemComponent', () => { let wrapper: WrapperComponent; let fixture: ComponentFixture; let cartItemComponent; - let qtyDropdownComponent: DaffQtyDropdownComponent; + let quantityFieldComponent: DaffQuantityFieldComponent; let router: Router; let cartItemFactory: DaffCartItemFactory; let productImageFactory: DaffProductImageFactory; @@ -46,8 +45,9 @@ describe('CartItemComponent', () => { TestBed.configureTestingModule({ imports: [ RouterTestingModule, - DaffQtyDropdownModule, + DaffQuantityFieldModule, DaffCartStateTestingModule, + ReactiveFormsModule, ], declarations: [ CartItemComponent, @@ -70,7 +70,7 @@ describe('CartItemComponent', () => { wrapper.cartItemValue = mockCartItem; cartItemComponent = fixture.debugElement.query(By.css('demo-cart-item')); - qtyDropdownComponent = fixture.debugElement.query(By.css('daff-qty-dropdown')).componentInstance; + quantityFieldComponent = fixture.debugElement.query(By.css('daff-quantity-field')).componentInstance; fixture.detectChanges(); }); @@ -83,19 +83,8 @@ describe('CartItemComponent', () => { expect(cartItemComponent.componentInstance.item).toEqual(mockCartItem); }); - it('renders a ', () => { - expect(qtyDropdownComponent).not.toBeNull(); - }); - - describe('on ', () => { - - it('sets qty', () => { - expect(qtyDropdownComponent.qty).toEqual(mockCartItem.qty); - }); - - it('sets id', () => { - expect(qtyDropdownComponent.id).toEqual(mockCartItem.item_id); - }); + it('renders a ', () => { + expect(quantityFieldComponent).not.toBeNull(); }); describe('redirectToProduct', () => { @@ -127,16 +116,6 @@ describe('CartItemComponent', () => { }); }); - describe('when the user changes the quantity of the item', () => { - - it('should notify state of the quantity change', () => { - const newQuantity = 3; - qtyDropdownComponent.qtyChanged.emit(newQuantity); - - expect(facade.dispatch).toHaveBeenCalledWith(new DaffCartItemUpdate(mockCartItem.item_id, { qty: newQuantity })); - }); - }); - describe('when the user clicks the remove button', () => { it('should remove the item from the cart', () => { diff --git a/apps/demo/src/app/cart/components/cart-item/cart-item.component.ts b/apps/demo/src/app/cart/components/cart-item/cart-item.component.ts index e3bf97cd5c..3ad06a8dcf 100644 --- a/apps/demo/src/app/cart/components/cart-item/cart-item.component.ts +++ b/apps/demo/src/app/cart/components/cart-item/cart-item.component.ts @@ -1,7 +1,13 @@ import { Component, + Inject, Input, + OnInit, } from '@angular/core'; +import { + UntypedFormBuilder, + UntypedFormControl, +} from '@angular/forms'; import { Router } from '@angular/router'; import { DaffCartItem } from '@daffodil/cart'; @@ -10,27 +16,38 @@ import { DaffCartItemDelete, DaffCartItemUpdate, } from '@daffodil/cart/state'; +import { + DaffBase64Service, + DaffBase64ServiceToken, +} from '@daffodil/core'; @Component({ selector: 'demo-cart-item', templateUrl: './cart-item.component.html', styleUrls: ['./cart-item.component.scss'], }) -export class CartItemComponent { +export class CartItemComponent implements OnInit { @Input() item: DaffCartItem; + quantity: UntypedFormControl; constructor( private router: Router, private facade: DaffCartFacade, + private formBuilder: UntypedFormBuilder, + @Inject(DaffBase64ServiceToken) private base64: DaffBase64Service, ) { } - redirectToProduct() { - this.router.navigateByUrl('/product/' + this.item.product_id); + ngOnInit() { + this.quantity = this.formBuilder.control(this.item.qty); } - onQtyChanged(qty) { - this.facade.dispatch(new DaffCartItemUpdate(this.item.item_id, { qty })); + get quantityId() { + return `cart-quantity-${this.base64.encode(this.item.id)}`; + } + + redirectToProduct() { + this.router.navigateByUrl('/product/' + this.item.product_id); } removeItem() { diff --git a/apps/demo/src/app/cart/components/cart-item/cart-item.module.ts b/apps/demo/src/app/cart/components/cart-item/cart-item.module.ts index bb344908b2..5773d0c1f3 100644 --- a/apps/demo/src/app/cart/components/cart-item/cart-item.module.ts +++ b/apps/demo/src/app/cart/components/cart-item/cart-item.module.ts @@ -1,14 +1,20 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; -import { DaffQtyDropdownModule } from '@daffodil/design'; +import { + DaffFormFieldModule, + DaffQuantityFieldModule, +} from '@daffodil/design'; import { CartItemComponent } from './cart-item.component'; @NgModule({ imports: [ CommonModule, - DaffQtyDropdownModule, + ReactiveFormsModule, + DaffFormFieldModule, + DaffQuantityFieldModule, ], declarations: [ CartItemComponent, diff --git a/apps/demo/src/app/product/components/product/product.component.html b/apps/demo/src/app/product/components/product/product.component.html index fcedba88a7..20ebd62d61 100644 --- a/apps/demo/src/app/product/components/product/product.component.html +++ b/apps/demo/src/app/product/components/product/product.component.html @@ -11,7 +11,13 @@

{{product.name}}

Quantity - + + + +
diff --git a/apps/demo/src/app/product/components/product/product.component.spec.ts b/apps/demo/src/app/product/components/product/product.component.spec.ts index 356f181f2f..c2f2d5e2ea 100644 --- a/apps/demo/src/app/product/components/product/product.component.spec.ts +++ b/apps/demo/src/app/product/components/product/product.component.spec.ts @@ -7,15 +7,13 @@ import { ComponentFixture, TestBed, } from '@angular/core/testing'; +import { ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Router } from '@angular/router'; import { RouterTestingModule } from '@angular/router/testing'; -import { - DaffQtyDropdownModule, - DaffQtyDropdownComponent, -} from '@daffodil/design'; +import { DaffQuantityFieldModule } from '@daffodil/design'; import { DaffAccordionModule } from '@daffodil/design/accordion'; import { DaffContainerModule } from '@daffodil/design/container'; import { DaffProduct } from '@daffodil/product'; @@ -41,16 +39,16 @@ describe('ProductComponent', () => { let productFactory: DaffProductFactory; let router; let stubProduct: DaffProduct; - let stubQty = 1; let productComponent: ProductComponent; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ RouterTestingModule, + ReactiveFormsModule, DaffContainerModule, DaffAccordionModule, - DaffQtyDropdownModule, + DaffQuantityFieldModule, NoopAnimationsModule, ], declarations: [ @@ -72,7 +70,6 @@ describe('ProductComponent', () => { router = TestBed.inject(Router); spyOn(router, 'navigateByUrl'); wrapper.productValue = stubProduct; - wrapper.qtyValue = stubQty; fixture.detectChanges(); @@ -87,10 +84,6 @@ describe('ProductComponent', () => { expect(productComponent.product).toEqual(stubProduct); }); - it('should be able to take a qty input', () => { - expect(productComponent.qty).toEqual(stubQty); - }); - describe('on ', () => { it('should set images', () => { @@ -100,51 +93,6 @@ describe('ProductComponent', () => { }); }); - describe('on ', () => { - - let qtyDropdownComponent: DaffQtyDropdownComponent; - - beforeEach(() => { - qtyDropdownComponent = fixture.debugElement.query(By.css('daff-qty-dropdown')).componentInstance; - }); - - it('should set id', () => { - expect(qtyDropdownComponent.id.toString()).toEqual(stubProduct.id); - }); - - it('should set qty', () => { - expect(qtyDropdownComponent.qty).toEqual(stubQty); - }); - - it('should call updateQty.emit when qtyChanged is called', () => { - spyOn(productComponent.updateQty, 'emit'); - const newQty = 2; - qtyDropdownComponent.qtyChanged.emit(newQty); - - expect(productComponent.updateQty.emit).toHaveBeenCalledWith(newQty); - }); - }); - - it('should call updateQtyFunction when updateQty is emitted', () => { - const payload = 4; - spyOn(wrapper, 'updateQtyFunction'); - - productComponent.updateQty.emit(payload); - - expect(wrapper.updateQtyFunction).toHaveBeenCalledWith(payload); - }); - - describe('onUpdateQty', () => { - - it('should call updateQty.emit', () => { - spyOn(productComponent.updateQty, 'emit'); - stubQty = 4; - productComponent.onUpdateQty(stubQty); - - expect(productComponent.updateQty.emit).toHaveBeenCalledWith(stubQty); - }); - }); - describe('when product is null', () => { it('should redirect to the 404 not-found page', () => { diff --git a/apps/demo/src/app/product/components/product/product.component.ts b/apps/demo/src/app/product/components/product/product.component.ts index 8f71f0a9e7..dc39487e8f 100644 --- a/apps/demo/src/app/product/components/product/product.component.ts +++ b/apps/demo/src/app/product/components/product/product.component.ts @@ -5,9 +5,18 @@ import { EventEmitter, Output, ViewEncapsulation, + Inject, } from '@angular/core'; +import { + UntypedFormBuilder, + UntypedFormControl, +} from '@angular/forms'; import { Router } from '@angular/router'; +import { + DaffBase64Service, + DaffBase64ServiceToken, +} from '@daffodil/core'; import { DaffProduct } from '@daffodil/product'; @Component({ @@ -21,17 +30,26 @@ export class ProductComponent implements OnInit { @Input() qty: number; @Output() updateQty: EventEmitter = new EventEmitter(); + quantity: UntypedFormControl; + constructor( private router: Router, + private formBuilder: UntypedFormBuilder, + @Inject(DaffBase64ServiceToken) private base64: DaffBase64Service, ) {} ngOnInit() { if (!this.product) { this.router.navigateByUrl('/404'); } + this.quantity = this.formBuilder.control(this.qty); } onUpdateQty(qty: number) { this.updateQty.emit(qty); } + + get quantityId() { + return `cart-quantity-${this.base64.encode(this.product.id)}`; + } } diff --git a/apps/demo/src/app/product/components/product/product.module.ts b/apps/demo/src/app/product/components/product/product.module.ts index 4fe3c76c2d..b868ae4db6 100644 --- a/apps/demo/src/app/product/components/product/product.module.ts +++ b/apps/demo/src/app/product/components/product/product.module.ts @@ -1,8 +1,11 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { ReactiveFormsModule } from '@angular/forms'; - -import { DaffQtyDropdownModule } from '@daffodil/design'; +import { + DaffFormFieldModule, + DaffQuantityFieldModule, +} from '@daffodil/design'; import { DaffAccordionModule } from '@daffodil/design/accordion'; import { DaffContainerModule } from '@daffodil/design/container'; import { DaffLoadingIconModule } from '@daffodil/design/loading-icon'; @@ -13,11 +16,13 @@ import { ImageGalleryModule } from '../../../core/image-gallery/image-gallery.mo @NgModule({ imports: [ CommonModule, + ReactiveFormsModule, ImageGalleryModule, DaffLoadingIconModule, - DaffQtyDropdownModule, DaffAccordionModule, DaffContainerModule, + DaffFormFieldModule, + DaffQuantityFieldModule, ], declarations: [ ProductComponent, diff --git a/apps/design-land/src/app/app-routing.module.ts b/apps/design-land/src/app/app-routing.module.ts index ceb9a957ca..fe2e9c7e1a 100644 --- a/apps/design-land/src/app/app-routing.module.ts +++ b/apps/design-land/src/app/app-routing.module.ts @@ -34,7 +34,6 @@ export const appRoutes: Routes = [ { path: 'notification', loadChildren: () => import('./notification/notification.module').then(m => m.DesignLandNotificationModule) }, { path: 'paginator', loadChildren: () => import('./paginator/paginator.module').then(m => m.DesignLandPaginatorModule) }, { path: 'progress-bar', loadChildren: () => import('./progress-bar/progress-bar.module').then(m => m.DesignLandProgressBarModule) }, - { path: 'qty-dropdown', loadChildren: () => import('./qty-dropdown/qty-dropdown.module').then(m => m.DesignLandQtyDropdownModule) }, { path: 'quantity-field', loadChildren: () => import('./quantity-field/quantity-field.module').then(m => m.DesignLandQuantityFieldModule) }, { path: 'sidebar', loadChildren: () => import('./sidebar/sidebar.module').then(m => m.DesignLandSidebarModule) }, { path: 'radio', loadChildren: () => import('./radio/radio.module').then(m => m.DesignLandRadioModule) }, diff --git a/apps/design-land/src/app/qty-dropdown/qty-dropdown-routing.module.ts b/apps/design-land/src/app/qty-dropdown/qty-dropdown-routing.module.ts deleted file mode 100644 index 5a233dcaaa..0000000000 --- a/apps/design-land/src/app/qty-dropdown/qty-dropdown-routing.module.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { NgModule } from '@angular/core'; -import { - Routes, - RouterModule, -} from '@angular/router'; - -import { DesignLandQtyDropdownComponent } from './qty-dropdown.component'; - - - -export const qtyDropdownRoutes: Routes = [ - { path: '', component: DesignLandQtyDropdownComponent }, -]; - -@NgModule({ - imports: [ - RouterModule.forChild(qtyDropdownRoutes), - ], - exports: [ - RouterModule, - ], -}) -export class DesignLandQtyDropdownRoutingModule {} diff --git a/apps/design-land/src/app/qty-dropdown/qty-dropdown.component.html b/apps/design-land/src/app/qty-dropdown/qty-dropdown.component.html deleted file mode 100644 index 1e147facc9..0000000000 --- a/apps/design-land/src/app/qty-dropdown/qty-dropdown.component.html +++ /dev/null @@ -1,6 +0,0 @@ -

Daff Quantity Drowdown

-

Quantity Dropdown is deprecated in favor of Quantity Field.

- -

Quantity Selected: {{selectedValue}}

- - \ No newline at end of file diff --git a/apps/design-land/src/app/qty-dropdown/qty-dropdown.component.scss b/apps/design-land/src/app/qty-dropdown/qty-dropdown.component.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/apps/design-land/src/app/qty-dropdown/qty-dropdown.component.spec.ts b/apps/design-land/src/app/qty-dropdown/qty-dropdown.component.spec.ts deleted file mode 100644 index 0e56ecb99e..0000000000 --- a/apps/design-land/src/app/qty-dropdown/qty-dropdown.component.spec.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { - waitForAsync, - ComponentFixture, - TestBed, -} from '@angular/core/testing'; - -import { DesignLandQtyDropdownComponent } from './qty-dropdown.component'; - -describe('DesignLandQtyDropdownComponent', () => { - let component: DesignLandQtyDropdownComponent; - let fixture: ComponentFixture; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [ DesignLandQtyDropdownComponent ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(DesignLandQtyDropdownComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/apps/design-land/src/app/qty-dropdown/qty-dropdown.component.ts b/apps/design-land/src/app/qty-dropdown/qty-dropdown.component.ts deleted file mode 100644 index 98489f3e75..0000000000 --- a/apps/design-land/src/app/qty-dropdown/qty-dropdown.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { - Component, - OnInit, - Output, - EventEmitter, -} from '@angular/core'; - -@Component({ - selector: 'design-land-qty-dropdown', - templateUrl: './qty-dropdown.component.html', - styleUrls: ['./qty-dropdown.component.scss'], -}) -export class DesignLandQtyDropdownComponent{ - selectedValue = 1; - - updateValue(qty: number){ - if(qty % 1 !== 0){ - this.selectedValue = 1; - } else{ - this.selectedValue = qty; - } - } -} diff --git a/apps/design-land/src/app/qty-dropdown/qty-dropdown.module.ts b/apps/design-land/src/app/qty-dropdown/qty-dropdown.module.ts deleted file mode 100644 index 5112e1a841..0000000000 --- a/apps/design-land/src/app/qty-dropdown/qty-dropdown.module.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; - -import { DaffQtyDropdownModule } from '@daffodil/design'; - -import { DesignLandQtyDropdownRoutingModule } from './qty-dropdown-routing.module'; -import { DesignLandQtyDropdownComponent } from './qty-dropdown.component'; - - - -@NgModule({ - declarations: [ - DesignLandQtyDropdownComponent, - ], - imports: [ - CommonModule, - RouterModule, - - DesignLandQtyDropdownRoutingModule, - DaffQtyDropdownModule, - ], -}) -export class DesignLandQtyDropdownModule { - -} diff --git a/apps/design-land/src/assets/nav.json b/apps/design-land/src/assets/nav.json index f5967f1080..7346238cb5 100644 --- a/apps/design-land/src/assets/nav.json +++ b/apps/design-land/src/assets/nav.json @@ -222,13 +222,6 @@ "items": [], "data": {} }, - { - "title": "Quantity Dropdown", - "url": "qty-dropdown", - "id": "qty-dropdown", - "items": [], - "data": {} - }, { "title": "Sidebar", "url": "sidebar", diff --git a/libs/design/src/molecules/qty-dropdown/README.md b/libs/design/src/molecules/qty-dropdown/README.md deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/libs/design/src/molecules/qty-dropdown/public_api.ts b/libs/design/src/molecules/qty-dropdown/public_api.ts deleted file mode 100644 index f19fe1d190..0000000000 --- a/libs/design/src/molecules/qty-dropdown/public_api.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { DaffQtyDropdownModule } from './qty-dropdown.module'; -export * from './qty-dropdown.component'; diff --git a/libs/design/src/molecules/qty-dropdown/qty-dropdown.component.html b/libs/design/src/molecules/qty-dropdown/qty-dropdown.component.html deleted file mode 100644 index 080ae72e6e..0000000000 --- a/libs/design/src/molecules/qty-dropdown/qty-dropdown.component.html +++ /dev/null @@ -1,7 +0,0 @@ - - - - \ No newline at end of file diff --git a/libs/design/src/molecules/qty-dropdown/qty-dropdown.component.scss b/libs/design/src/molecules/qty-dropdown/qty-dropdown.component.scss deleted file mode 100644 index 869a47a736..0000000000 --- a/libs/design/src/molecules/qty-dropdown/qty-dropdown.component.scss +++ /dev/null @@ -1,5 +0,0 @@ -.daff-qty-dropdown { - &__input { - width: 50px; - } -} diff --git a/libs/design/src/molecules/qty-dropdown/qty-dropdown.component.spec.ts b/libs/design/src/molecules/qty-dropdown/qty-dropdown.component.spec.ts deleted file mode 100644 index dcf503dcbb..0000000000 --- a/libs/design/src/molecules/qty-dropdown/qty-dropdown.component.spec.ts +++ /dev/null @@ -1,285 +0,0 @@ -import { Component } from '@angular/core'; -import { - waitForAsync, - ComponentFixture, - TestBed, -} from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; -import { By } from '@angular/platform-browser'; - -import { DaffQtyDropdownComponent } from './qty-dropdown.component'; -import { DaffFormFieldModule } from '../../atoms/form/form-field/public_api'; -import { DaffInputModule } from '../../atoms/form/input/input.module'; -import { DaffNativeSelectModule } from '../../atoms/form/native-select/public_api'; - -@Component({ template: '' }) -class WrapperComponent { - qtyValue: string; - idValue: string; -} - -describe('DaffQtyDropdownComponent', () => { - let wrapper: WrapperComponent; - let fixture: ComponentFixture; - const mockQty = '3'; - const mockId = 'id'; - let qtyDropdownComponent; - - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - imports: [ - FormsModule, - DaffFormFieldModule, - DaffNativeSelectModule, - DaffInputModule, - ], - declarations: [ - WrapperComponent, - DaffQtyDropdownComponent, - ], - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(WrapperComponent); - wrapper = fixture.componentInstance; - wrapper.qtyValue = mockQty; - wrapper.idValue = mockId; - - qtyDropdownComponent = fixture.debugElement.query(By.css('daff-qty-dropdown')); - - fixture.detectChanges(); - }); - - it('should create', () => { - expect(wrapper).toBeTruthy(); - }); - - it('can be passed a qty input', () => { - expect(qtyDropdownComponent.componentInstance.qty).toEqual(mockQty); - }); - - it('can be passed an id input', () => { - expect(qtyDropdownComponent.componentInstance.id).toEqual(mockId); - }); - - describe('ngOnInit', () => { - - it('should create the dropdownItemCounter array', () => { - expect(qtyDropdownComponent.componentInstance.dropdownItemCounter.length).toEqual(9); - }); - - describe('when qty is not given as input', () => { - - beforeEach(() => { - fixture = TestBed.createComponent(WrapperComponent); - wrapper = fixture.componentInstance; - - fixture.detectChanges(); - qtyDropdownComponent = fixture.debugElement.query(By.css('daff-qty-dropdown')); - }); - - it('should set qty to 1', () => { - expect(qtyDropdownComponent.componentInstance.qty).toEqual(1); - }); - }); - }); - - describe('writeValue', () => { - - const newQtyValue = 'newQtyValue'; - - beforeEach(() => { - spyOn(qtyDropdownComponent.componentInstance, 'onChange'); - qtyDropdownComponent.componentInstance.writeValue(newQtyValue); - }); - - it('sets qty to argument', () => { - expect(qtyDropdownComponent.componentInstance.qty).toEqual(newQtyValue); - }); - - it('calls onChange with qty', () => { - expect(qtyDropdownComponent.componentInstance.onChange) - .toHaveBeenCalledWith(qtyDropdownComponent.componentInstance.qty); - }); - }); - - describe('registerOnChange', () => { - - const givenFunction = () => {}; - - beforeEach(() => { - qtyDropdownComponent.componentInstance.registerOnChange(givenFunction); - }); - - it('sets onChange to given function', () => { - expect(qtyDropdownComponent.componentInstance.onChange).toEqual(givenFunction); - }); - }); - - describe('registerOnTouched', () => { - - const givenFunction = () => {}; - - beforeEach(() => { - qtyDropdownComponent.componentInstance.registerOnTouched(givenFunction); - }); - - it('sets onTouched to given function', () => { - expect(qtyDropdownComponent.componentInstance.onTouched).toEqual(givenFunction); - }); - }); - - describe('setDisabledState', () => { - - describe('when inputHasBeenShown is false', () => { - - beforeEach(() => { - qtyDropdownComponent.componentInstance.inputHasBeenShown = false; - - fixture.detectChanges(); - }); - - describe('when argument is false', () => { - - it('should not disable ', () => { - qtyDropdownComponent.componentInstance.setDisabledState(true); - - expect(fixture.debugElement.query(By.css('select')).properties.disabled).toBeTruthy(); - }); - }); - }); - - describe('when inputHasBeenShown is true', () => { - - beforeEach(() => { - qtyDropdownComponent.componentInstance.inputHasBeenShown = true; - - fixture.detectChanges(); - }); - - describe('when argument is false', () => { - - it('should not disable ', () => { - qtyDropdownComponent.componentInstance.setDisabledState(false); - - expect(fixture.debugElement.query(By.css('input')).properties.disabled).toBeFalsy(); - }); - }); - - describe('when argument is true', () => { - - it('should disable ', () => { - qtyDropdownComponent.componentInstance.setDisabledState(true); - - expect(fixture.debugElement.query(By.css('input')).properties.disabled).toBeTruthy(); - }); - }); - }); - }); - - describe('showQtyInputField', () => { - - describe('when qty is less than dropdownRange', () => { - - describe('and inputHasBeenShown is false', () => { - - beforeEach(() => { - qtyDropdownComponent.componentInstance.inputHasBeenShown = false; - fixture.detectChanges(); - }); - - it('should return false', () => { - expect(qtyDropdownComponent.componentInstance.showQtyInputField).toBeFalsy(); - }); - }); - - describe('and inputHasBeenShown is true', () => { - - beforeEach(() => { - qtyDropdownComponent.componentInstance.inputHasBeenShown = true; - fixture.detectChanges(); - }); - - it('should return true', () => { - expect(qtyDropdownComponent.componentInstance.showQtyInputField).toBeTruthy(); - }); - }); - }); - - describe('when qty is greater than dropdownRange', () => { - - beforeEach(() => { - qtyDropdownComponent.componentInstance.qty = 10; - fixture.detectChanges(); - }); - - it('should set inputHasBeenShown to true', () => { - expect(qtyDropdownComponent.componentInstance.showQtyInputField).toBeTruthy(); - }); - - it('should return true', () => { - expect(qtyDropdownComponent.componentInstance.showQtyInputField).toBeTruthy(); - }); - }); - }); - - describe('onChangedWrapper', () => { - - let input; - - beforeEach(() => { - input = '2'; - spyOn(qtyDropdownComponent.componentInstance, 'selectInput').and.callThrough(); - }); - - it('calls onChange with argument', () => { - spyOn(qtyDropdownComponent.componentInstance, 'onChange'); - qtyDropdownComponent.componentInstance.onChangedWrapper(input); - - expect(qtyDropdownComponent.componentInstance.onChange).toHaveBeenCalledWith(parseInt(input, 10)); - }); - - it('calls qtyChanged.emit', () => { - spyOn(qtyDropdownComponent.componentInstance.qtyChanged, 'emit'); - - qtyDropdownComponent.componentInstance.onChangedWrapper(input); - - expect(qtyDropdownComponent.componentInstance.qtyChanged.emit).toHaveBeenCalledWith(parseInt(input, 10)); - }); - - describe('when value is 10', () => { - - beforeEach(() => { - qtyDropdownComponent.componentInstance.inputHasBeenShown = true; - fixture.detectChanges(); - qtyDropdownComponent.componentInstance.onChangedWrapper('10'); - }); - - it('should calls selectInput', () => { - expect(qtyDropdownComponent.componentInstance.selectInput).toHaveBeenCalledWith(); - }); - }); - - describe('when value is not 10', () => { - - beforeEach(() => { - qtyDropdownComponent.componentInstance.onChangedWrapper('2'); - }); - - it('does not call selectInput', () => { - expect(qtyDropdownComponent.componentInstance.selectInput).not.toHaveBeenCalled(); - }); - }); - }); -}); diff --git a/libs/design/src/molecules/qty-dropdown/qty-dropdown.component.ts b/libs/design/src/molecules/qty-dropdown/qty-dropdown.component.ts deleted file mode 100644 index 76a0d20a79..0000000000 --- a/libs/design/src/molecules/qty-dropdown/qty-dropdown.component.ts +++ /dev/null @@ -1,127 +0,0 @@ -import { - Component, - OnInit, - Input, - Renderer2, - Output, - EventEmitter, -} from '@angular/core'; - -/** - * @deprecated See {@link DaffQuantityFieldComponent} - */ -// ChangeDetection is ignored because this component is deprecated and will be removed -// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection -@Component({ - selector: 'daff-qty-dropdown', - styleUrls: ['./qty-dropdown.component.scss'], - templateUrl: './qty-dropdown.component.html', -}) -export class DaffQtyDropdownComponent implements OnInit { - - private readonly dropdownRange = 9; - - @Input() qty: number; - @Input() id: number | string; - @Output() qtyChanged: EventEmitter = new EventEmitter(); - - /** - * @docs-private - */ - dropdownItemCounter: number[]; - /** - * @docs-private - */ - inputHasBeenShown: boolean; - /** - * @docs-private - */ - onChange = (qty: number) => {}; - /** - * @docs-private - */ - onTouched = () => {}; - - constructor(private renderer: Renderer2) { } - - /** - * @docs-private - */ - ngOnInit() { - this.dropdownItemCounter = Array.from(Array(this.dropdownRange),(x,i)=>i); - - if (!this.qty) { - this.qty = 1; - } - } - - /** - * @docs-private - */ - writeValue(qty: number): void { - this.qty = qty; - this.onChange(this.qty); - } - - /** - * @docs-private - */ - registerOnChange(fn: (qty: number) => void): void { - this.onChange = fn; - } - - /** - * @docs-private - */ - registerOnTouched(fn: any): void { - this.onTouched = fn; - } - - /** - * @docs-private - */ - setDisabledState(isDisabled: boolean): void { - if (this.inputHasBeenShown) { - this.renderer.setProperty(document.getElementById('input_' + this.id), 'disabled', isDisabled); - } else { - this.renderer.setProperty(document.getElementById('select_' + this.id), 'disabled', isDisabled); - } - } - - /** - * @docs-private - */ - get showQtyInputField(): boolean { - if (!this.isQtyOutsideDropdownRange() && !this.inputHasBeenShown) { - return false; - } else { - this.inputHasBeenShown = true; - return true; - } - } - - /** - * @docs-private - */ - onChangedWrapper(value: any) { - value = parseInt(value, 10); - if (value === 10) { - this.selectInput(); - } - this.qtyChanged.emit(value); - this.onChange(value); - } - - private isQtyOutsideDropdownRange() { - return this.qty > this.dropdownRange; - } - - private selectInput() { - // TODO: readdress this method - // why use `setTimeout` instead of angular patterns? - setTimeout(() => { - const input = document.getElementById('input_' + this.id); - input?.select(); - }); - } -} diff --git a/libs/design/src/molecules/qty-dropdown/qty-dropdown.module.ts b/libs/design/src/molecules/qty-dropdown/qty-dropdown.module.ts deleted file mode 100644 index 76a274b500..0000000000 --- a/libs/design/src/molecules/qty-dropdown/qty-dropdown.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; - -import { DaffQtyDropdownComponent } from './qty-dropdown.component'; -import { DaffFormFieldModule } from '../../atoms/form/form-field/form-field.module'; -import { DaffInputModule } from '../../atoms/form/input/input.module'; -import { DaffNativeSelectModule } from '../../atoms/form/native-select/public_api'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - DaffFormFieldModule, - DaffNativeSelectModule, - DaffInputModule, - ], - declarations: [ - DaffQtyDropdownComponent, - ], - exports: [ - DaffQtyDropdownComponent, - ], -}) -export class DaffQtyDropdownModule { } diff --git a/libs/design/src/public_api.ts b/libs/design/src/public_api.ts index d33504aad9..22e6481e13 100644 --- a/libs/design/src/public_api.ts +++ b/libs/design/src/public_api.ts @@ -13,9 +13,6 @@ export * from './atoms/form/quantity-field/public_api'; export * from './atoms/form/radio/public_api'; export * from './atoms/form/form-label/public_api'; -// Molecules -export * from './molecules/qty-dropdown/public_api'; - // Core export * from './core/public_api';