refactor: edit chain to extend settings base add edit class
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
<app-chain-edit #c>
|
||||
<app-chain-form [form]="c.form"/>
|
||||
</app-chain-edit>
|
||||
@@ -0,0 +1,39 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ChainEditPage } from './chain-edit-page';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
import { of } from 'rxjs';
|
||||
import { Chain } from '../../../../models/Chain';
|
||||
import { ChainSettings } from '../../../../services/chain-settings';
|
||||
import { provideTranslateService } from '@ngx-translate/core';
|
||||
|
||||
describe('ChainEditPage', () => {
|
||||
let component: ChainEditPage;
|
||||
let fixture: ComponentFixture<ChainEditPage>;
|
||||
|
||||
let activatedRoute: Partial<ActivatedRoute>;
|
||||
|
||||
beforeEach(async () => {
|
||||
activatedRoute = {
|
||||
data: of({chain: new Chain('Mock', '', 1)}),
|
||||
};
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ChainEditPage],
|
||||
providers: [
|
||||
{ provide: ActivatedRoute, useValue: activatedRoute },
|
||||
{ provide: ChainSettings, useValue: {} },
|
||||
provideTranslateService()
|
||||
],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ChainEditPage);
|
||||
component = fixture.componentInstance;
|
||||
await fixture.whenStable();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { ChainEdit } from "../../../../components/chain-edit/chain-edit";
|
||||
import { ChainForm } from "../chain-form/chain-form";
|
||||
|
||||
@Component({
|
||||
selector: 'app-chain-edit-page',
|
||||
imports: [ChainEdit, ChainForm],
|
||||
templateUrl: './chain-edit-page.html',
|
||||
styleUrl: './chain-edit-page.scss',
|
||||
})
|
||||
export class ChainEditPage {
|
||||
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
<h3>{{'settings.chain.edit_chain'|translate|upperfirst}}</h3>
|
||||
<app-chain-form [form]="form"/>
|
||||
<app-action-btn
|
||||
(click)="update()"
|
||||
(keydown)="update()"
|
||||
[disabled]="this.disabled"
|
||||
class="top-auto"
|
||||
text="{{'common.update'|translate|upperfirst}}"
|
||||
/>
|
||||
@@ -1,79 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ChainEdit } from './chain-edit';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
import { Chain } from '../../../../models/Chain';
|
||||
import { provideTranslateService } from '@ngx-translate/core';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { ImageStorage } from '../../../../services/image-storage';
|
||||
import { ChainSettings } from '../../../../services/chain-settings';
|
||||
|
||||
const CHAIN_MOCK = new Chain('Mock', '', 1);
|
||||
describe('ChainEdit', () => {
|
||||
let component: ChainEdit;
|
||||
let fixture: ComponentFixture<ChainEdit>;
|
||||
|
||||
let activatedRoute: Partial<ActivatedRoute>;
|
||||
let chainSettings: Partial<ChainSettings>;
|
||||
let imageStorage: Partial<ImageStorage>;
|
||||
|
||||
const dataSubject = new BehaviorSubject({ chain: CHAIN_MOCK });
|
||||
beforeEach(async () => {
|
||||
activatedRoute = {
|
||||
data: dataSubject,
|
||||
};
|
||||
chainSettings = {
|
||||
update: vi.fn(),
|
||||
};
|
||||
imageStorage = {
|
||||
getImage: vi.fn(),
|
||||
saveImage: vi.fn(),
|
||||
deleteImage: vi.fn(),
|
||||
};
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ChainEdit],
|
||||
providers: [
|
||||
provideTranslateService(),
|
||||
{ provide: ActivatedRoute, useValue: activatedRoute },
|
||||
{ provide: ChainSettings, useValue: chainSettings },
|
||||
{ provide: ImageStorage, useValue: imageStorage },
|
||||
],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ChainEdit);
|
||||
component = fixture.componentInstance;
|
||||
});
|
||||
|
||||
it('should create', async () => {
|
||||
await fixture.whenStable();
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should call chainSettings update on chain update', async () => {
|
||||
const CHAIN_NAME_UPDATE_MOCK = 'name update mock';
|
||||
await fixture.whenStable();
|
||||
const chainNameInput = fixture.debugElement.query(By.css('[formControlName="name"]'));
|
||||
chainNameInput.triggerEventHandler('input', { target: { value: CHAIN_NAME_UPDATE_MOCK } });
|
||||
fixture.whenStable();
|
||||
const actionBtn = fixture.debugElement.query(By.css('app-action-btn'));
|
||||
actionBtn.triggerEventHandler('click');
|
||||
await fixture.whenStable();
|
||||
expect(chainSettings.update).toHaveBeenCalledExactlyOnceWith(
|
||||
CHAIN_MOCK,
|
||||
new Chain(CHAIN_NAME_UPDATE_MOCK, component['chain']!.image, component['chain']!.id),
|
||||
component.form.controls.image.value,
|
||||
);
|
||||
});
|
||||
|
||||
it('should patch form with chain data', async () => {
|
||||
const IMAGE_FILE_MOCK = new Blob([], { type: 'image/png' });
|
||||
imageStorage.getImage = vi.fn().mockResolvedValue(IMAGE_FILE_MOCK);
|
||||
const CHAIN_MOCK = new Chain('name', 'image.png', 1);
|
||||
dataSubject.next({ chain: CHAIN_MOCK });
|
||||
await fixture.whenStable();
|
||||
expect(component.form.controls.name.value).toEqual(CHAIN_MOCK.name);
|
||||
expect(component.form.controls.image.value?.type).toEqual(IMAGE_FILE_MOCK.type);
|
||||
});
|
||||
});
|
||||
@@ -1,65 +0,0 @@
|
||||
import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
|
||||
import { ChainFormGroup } from '../chain-formgroup';
|
||||
import { ChainForm } from '../chain-form/chain-form';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Observable, take, tap } from 'rxjs';
|
||||
import { Chain } from '../../../../models/Chain';
|
||||
import { ImageStorage } from '../../../../services/image-storage';
|
||||
import { ActionBtn } from '../../../../components/action-btn/action-btn';
|
||||
import { TranslatePipe } from '@ngx-translate/core';
|
||||
import { UpperfirstPipe } from '../../../../pipes/upperfirst-pipe';
|
||||
import { ChainSettings } from '../../../../services/chain-settings';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chain-edit',
|
||||
imports: [ChainForm, ActionBtn, TranslatePipe, UpperfirstPipe],
|
||||
templateUrl: './chain-edit.html',
|
||||
styleUrl: './chain-edit.scss',
|
||||
})
|
||||
export class ChainEdit implements OnInit {
|
||||
readonly form = new ChainFormGroup();
|
||||
protected readonly activatedRoute = inject(ActivatedRoute);
|
||||
private readonly cd = inject(ChangeDetectorRef);
|
||||
private chain?: Chain;
|
||||
private readonly imageStorage = inject(ImageStorage);
|
||||
private readonly chainSettings = inject(ChainSettings);
|
||||
|
||||
ngOnInit() {
|
||||
(<Observable<{ chain: Chain }>>this.activatedRoute.data)
|
||||
.pipe(
|
||||
take(1),
|
||||
tap((data) => (this.chain = new Chain(data.chain.name, data.chain.image, data.chain.id))),
|
||||
tap(async (data) => await this.patchForm(data.chain)),
|
||||
)
|
||||
.subscribe();
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this.form.invalid || this.form.pristine;
|
||||
}
|
||||
|
||||
async patchForm(chain: Chain) {
|
||||
try {
|
||||
this.form.controls.name.patchValue(chain.name);
|
||||
if (chain.image) {
|
||||
const imgName = chain.image;
|
||||
const blob = await this.imageStorage.getImage(imgName);
|
||||
const file = new File([blob], imgName, { type: blob.type });
|
||||
this.form.controls.image.patchValue(file);
|
||||
this.cd.detectChanges();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
//TODO: reportar error
|
||||
}
|
||||
}
|
||||
|
||||
async update() {
|
||||
if (this.chain) {
|
||||
const updatedName = this.form.controls.name.value;
|
||||
const updatedImg = this.form.controls.image.value;
|
||||
const updatedChain = new Chain(updatedName, '', this.chain.id);
|
||||
await this.chainSettings.update(this.chain, updatedChain, updatedImg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -27,7 +27,7 @@ export const routes: Route[] = [
|
||||
},
|
||||
{
|
||||
path: 'edit/:id',
|
||||
loadComponent: () => import('./chains/chain-edit/chain-edit').then(c => c.ChainEdit),
|
||||
loadComponent: () => import('./chains/chain-edit-page/chain-edit-page').then(c => c.ChainEditPage),
|
||||
resolve: {chain: chainResolver}
|
||||
}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user