Rodax_Software/FactuGES_ERP
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(proformas): mejorar la estructura de la página de actualización de proformas y corregir selectores en pruebas E2E

Browse Source
This commit is contained in:
David Arranz 2026-09-14 16:41:35 +02:00
parent ed58bd1e64
commit 6b05ee01f3
3 changed files with 98 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
modules/customer-invoices/src/web/proformas/update/ui/pages/proforma-update-page.tsx
View File

@ -49,14 +49,22 @@ export const ProformaUpdatePage = () => {
}; };
if (ctrl.isInitialLoading) { if (ctrl.isInitialLoading) {
return <ProformaUpdateSkeleton />; return (
<RdxPageFrame>
<RdxPageContainer width="content">
<RdxPageContent>
<ProformaUpdateSkeleton />
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
);
} }
if (ctrl.pageError) { if (ctrl.pageError) {
return ( return (
<RdxPageFrame> <RdxPageFrame>
<RdxPageContainer width="full"> <RdxPageContainer width="content">
<div className="mx-auto w-full max-w-3xl"> <RdxPageContent>
<PageErrorState <PageErrorState
description={ctrl.pageError.description} description={ctrl.pageError.description}
primaryAction={ primaryAction={
@ -90,13 +98,12 @@ export const ProformaUpdatePage = () => {
title={ctrl.pageError.title} title={ctrl.pageError.title}
variant={ctrl.pageError.variant} variant={ctrl.pageError.variant}
/> />
</div> </RdxPageContent>
</RdxPageContainer> </RdxPageContainer>
</RdxPageFrame> </RdxPageFrame>
); );
} }
const hasPageAlerts = updateCtrl.isUpdateError || updateCtrl.isSeriesLoadError;
const actionBar = ( const actionBar = (
<RdxEditorActionBar <RdxEditorActionBar
leading={ leading={
@ -120,6 +127,7 @@ export const ProformaUpdatePage = () => {
primary={ primary={
<RhfSubmitActionButton <RhfSubmitActionButton
busyLabel="Guardando..." busyLabel="Guardando..."
data-testid="proforma-update-submit"
disabled={updateCtrl.isUpdating} disabled={updateCtrl.isUpdating}
formId={updateCtrl.formId} formId={updateCtrl.formId}
isBusy={updateCtrl.form.formState.isSubmitting} isBusy={updateCtrl.form.formState.isSubmitting}
@ -188,26 +196,18 @@ export const ProformaUpdatePage = () => {
} }
> >
<RdxPageContainer width="full"> <RdxPageContainer width="full">
{hasPageAlerts ? ( <RdxPageContent>
<RdxPageContainer className="pb-0" width="full"> {updateCtrl.isUpdateError ? (
<RdxPageContent spacing="compact">
{updateCtrl.isUpdateError && (
<ErrorAlert <ErrorAlert
message={ message={
(updateCtrl.updateError as Error)?.message ?? (updateCtrl.updateError as Error)?.message ??
t( t("pages.proformas.update.error_msg", "Revisa los datos e inténtalo de nuevo.")
"pages.proformas.update.error_msg",
"Revisa los datos e inténtalo de nuevo."
)
} }
title={t( title={t("pages.proformas.update.error_title", "No se pudo guardar los cambios")}
"pages.proformas.update.error_title",
"No se pudo guardar los cambios"
)}
/> />
)} ) : null}
{updateCtrl.isSeriesLoadError && ( {updateCtrl.isSeriesLoadError ? (
<ErrorAlert <ErrorAlert
message={ message={
updateCtrl.seriesLoadError instanceof Error updateCtrl.seriesLoadError instanceof Error
@ -222,13 +222,9 @@ export const ProformaUpdatePage = () => {
"No se pudieron cargar las series de facturación" "No se pudieron cargar las series de facturación"
)} )}
/> />
)}
</RdxPageContent>
</RdxPageContainer>
) : null} ) : null}
<ProformaUpdateEditorForm <ProformaUpdateEditorForm
className={hasPageAlerts ? "pt-0" : undefined}
formId={updateCtrl.formId} formId={updateCtrl.formId}
isSubmitting={updateCtrl.isUpdating} isSubmitting={updateCtrl.isUpdating}
itemsCtrl={updateCtrl.itemsCtrl} itemsCtrl={updateCtrl.itemsCtrl}
@ -243,6 +239,7 @@ export const ProformaUpdatePage = () => {
taxCtrl={updateCtrl.taxCtrl} taxCtrl={updateCtrl.taxCtrl}
totalsCtrl={updateCtrl.totalsCtrl} totalsCtrl={updateCtrl.totalsCtrl}
/> />
</RdxPageContent>
</RdxPageContainer> </RdxPageContainer>
</RdxPageFrame> </RdxPageFrame>

47
modules/customers/src/web/update/ui/pages/customer-update-page.tsx
View File

@ -29,6 +29,7 @@ export const CustomerUpdatePage = () => {
return ( return (
<RdxPageFrame> <RdxPageFrame>
<RdxPageContainer width="content"> <RdxPageContainer width="content">
<RdxPageContent>
<PageErrorState <PageErrorState
description={ctrl.pageError.description} description={ctrl.pageError.description}
primaryAction={ primaryAction={
@ -62,19 +63,17 @@ export const CustomerUpdatePage = () => {
title={ctrl.pageError.title} title={ctrl.pageError.title}
variant={ctrl.pageError.variant} variant={ctrl.pageError.variant}
/> />
</RdxPageContent>
</RdxPageContainer> </RdxPageContainer>
</RdxPageFrame> </RdxPageFrame>
); );
} }
const hasPageAlerts = updateCtrl.isUpdateError;
return ( return (
<FormProvider {...updateCtrl.form}> <FormProvider {...updateCtrl.form}>
<UnsavedChangesProvider isDirty={updateCtrl.form.formState.isDirty}> <UnsavedChangesProvider isDirty={updateCtrl.form.formState.isDirty}>
<RdxPageFrame <RdxPageFrame
contentClassName="bg-muted/20" contentClassName="bg-red-500"
footer={<h1>hola</h1>}
header={ header={
<CustomerUpdateHeader <CustomerUpdateHeader
formId={updateCtrl.formId} formId={updateCtrl.formId}
@ -99,28 +98,16 @@ export const CustomerUpdatePage = () => {
/> />
} }
> >
<RdxPageContainer className="bg-white" width="content"> <RdxPageContainer width="content">
<RdxPageContent> <RdxPageContent>
{hasPageAlerts ? ( {updateCtrl.isUpdateError ? (
<RdxPageContainer className="pb-0" width="full">
<div className="flex min-w-0 flex-col gap-4">
{updateCtrl.isUpdateError && (
<ErrorAlert <ErrorAlert
message={ message={
(updateCtrl.updateError as Error)?.message ?? (updateCtrl.updateError as Error)?.message ??
t( t("pages.customers.update.error_msg", "Revisa los datos e inténtalo de nuevo.")
"pages.customers.update.error_msg",
"Revisa los datos e inténtalo de nuevo."
)
} }
title={t( title={t("pages.customers.update.error_title", "No se pudo guardar los cambios")}
"pages.customers.update.error_title",
"No se pudo guardar los cambios"
)}
/> />
)}
</div>
</RdxPageContainer>
) : null} ) : null}
<CustomerUpdateEditorForm <CustomerUpdateEditorForm
@ -130,26 +117,6 @@ export const CustomerUpdatePage = () => {
onReset={updateCtrl.resetForm} onReset={updateCtrl.resetForm}
onSubmit={updateCtrl.onSubmit} onSubmit={updateCtrl.onSubmit}
/> />
<div className="rounded-2xl border border-border/60 bg-background px-4 py-4 shadow-xs md:px-6 md:py-6">
<div className="flex min-w-0 flex-col gap-6">
{updateCtrl.isUpdateError ? (
<ErrorAlert
message={
(updateCtrl.updateError as Error)?.message ??
t(
"pages.customers.update.error_msg",
"Revisa los datos e inténtalo de nuevo."
)
}
title={t(
"pages.customers.update.error_title",
"No se pudo guardar los cambios"
)}
/>
) : null}
</div>
</div>
</RdxPageContent> </RdxPageContent>
</RdxPageContainer> </RdxPageContainer>
</RdxPageFrame> </RdxPageFrame>

8
tests/e2e/customer-invoices/proformas/update-proforma.spec.ts
View File

@ -12,18 +12,18 @@ test("CUSTOMER-INVOICES-PROFORMA-UPDATE-001: modifica referencia y descripción
const reference = `E2E ${proforma.token}`; const reference = `E2E ${proforma.token}`;
const description = `E2E updated draft ${proforma.token}`; const description = `E2E updated draft ${proforma.token}`;
await page.locator('input[name="reference"]').fill(reference); await page.locator('input[name="reference"]').fill(reference);
await page.locator('textarea[name="description"]').fill(description); await page.locator('input[name="description"]').fill(description);
const responsePromise = page.waitForResponse( const responsePromise = page.waitForResponse(
(response) => (response) =>
response.request().method() === "PUT" && response.request().method() === "PUT" &&
new URL(response.url()).pathname.endsWith(`/proformas/${proforma.id}`) new URL(response.url()).pathname.endsWith(`/proformas/${proforma.id}`)
); );
await page.getByTestId("submit-button").click(); await page.getByTestId("proforma-update-submit").click();
expect((await responsePromise).status()).toBe(200); expect((await responsePromise).status()).toBe(200);
await expect(page).toHaveURL((url) => url.pathname === `/proformas/${proforma.id}/edit`); await expect(page).toHaveURL((url) => url.pathname === `/proformas/${proforma.id}/edit`);
await expect(page.locator('input[name="reference"]')).toHaveValue(reference); await expect(page.locator('input[name="reference"]')).toHaveValue(reference);
await expect(page.locator('textarea[name="description"]')).toHaveValue(description); await expect(page.locator('input[name="description"]')).toHaveValue(description);
await page.reload(); await page.reload();
await expect(page.locator('input[name="reference"]')).toHaveValue(reference); await expect(page.locator('input[name="reference"]')).toHaveValue(reference);
await expect(page.locator('textarea[name="description"]')).toHaveValue(description); await expect(page.locator('input[name="description"]')).toHaveValue(description);
}); });