feat(proformas): mejorar la estructura de la página de actualización de proformas y corregir selectores en pruebas E2E
This commit is contained in:
parent
ed58bd1e64
commit
6b05ee01f3
@ -49,14 +49,22 @@ export const ProformaUpdatePage = () => {
|
||||
};
|
||||
|
||||
if (ctrl.isInitialLoading) {
|
||||
return <ProformaUpdateSkeleton />;
|
||||
return (
|
||||
<RdxPageFrame>
|
||||
<RdxPageContainer width="content">
|
||||
<RdxPageContent>
|
||||
<ProformaUpdateSkeleton />
|
||||
</RdxPageContent>
|
||||
</RdxPageContainer>
|
||||
</RdxPageFrame>
|
||||
);
|
||||
}
|
||||
|
||||
if (ctrl.pageError) {
|
||||
return (
|
||||
<RdxPageFrame>
|
||||
<RdxPageContainer width="full">
|
||||
<div className="mx-auto w-full max-w-3xl">
|
||||
<RdxPageContainer width="content">
|
||||
<RdxPageContent>
|
||||
<PageErrorState
|
||||
description={ctrl.pageError.description}
|
||||
primaryAction={
|
||||
@ -90,13 +98,12 @@ export const ProformaUpdatePage = () => {
|
||||
title={ctrl.pageError.title}
|
||||
variant={ctrl.pageError.variant}
|
||||
/>
|
||||
</div>
|
||||
</RdxPageContent>
|
||||
</RdxPageContainer>
|
||||
</RdxPageFrame>
|
||||
);
|
||||
}
|
||||
|
||||
const hasPageAlerts = updateCtrl.isUpdateError || updateCtrl.isSeriesLoadError;
|
||||
const actionBar = (
|
||||
<RdxEditorActionBar
|
||||
leading={
|
||||
@ -120,6 +127,7 @@ export const ProformaUpdatePage = () => {
|
||||
primary={
|
||||
<RhfSubmitActionButton
|
||||
busyLabel="Guardando..."
|
||||
data-testid="proforma-update-submit"
|
||||
disabled={updateCtrl.isUpdating}
|
||||
formId={updateCtrl.formId}
|
||||
isBusy={updateCtrl.form.formState.isSubmitting}
|
||||
@ -188,61 +196,50 @@ export const ProformaUpdatePage = () => {
|
||||
}
|
||||
>
|
||||
<RdxPageContainer width="full">
|
||||
{hasPageAlerts ? (
|
||||
<RdxPageContainer className="pb-0" width="full">
|
||||
<RdxPageContent spacing="compact">
|
||||
{updateCtrl.isUpdateError && (
|
||||
<ErrorAlert
|
||||
message={
|
||||
(updateCtrl.updateError as Error)?.message ??
|
||||
t(
|
||||
"pages.proformas.update.error_msg",
|
||||
"Revisa los datos e inténtalo de nuevo."
|
||||
<RdxPageContent>
|
||||
{updateCtrl.isUpdateError ? (
|
||||
<ErrorAlert
|
||||
message={
|
||||
(updateCtrl.updateError as Error)?.message ??
|
||||
t("pages.proformas.update.error_msg", "Revisa los datos e inténtalo de nuevo.")
|
||||
}
|
||||
title={t("pages.proformas.update.error_title", "No se pudo guardar los cambios")}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{updateCtrl.isSeriesLoadError ? (
|
||||
<ErrorAlert
|
||||
message={
|
||||
updateCtrl.seriesLoadError instanceof Error
|
||||
? updateCtrl.seriesLoadError.message
|
||||
: t(
|
||||
"pages.proformas.update.series_load_error.message",
|
||||
"Inténtalo de nuevo más tarde."
|
||||
)
|
||||
}
|
||||
title={t(
|
||||
"pages.proformas.update.error_title",
|
||||
"No se pudo guardar los cambios"
|
||||
)}
|
||||
/>
|
||||
}
|
||||
title={t(
|
||||
"pages.proformas.update.series_load_error.title",
|
||||
"No se pudieron cargar las series de facturación"
|
||||
)}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{updateCtrl.isSeriesLoadError && (
|
||||
<ErrorAlert
|
||||
message={
|
||||
updateCtrl.seriesLoadError instanceof Error
|
||||
? updateCtrl.seriesLoadError.message
|
||||
: t(
|
||||
"pages.proformas.update.series_load_error.message",
|
||||
"Inténtalo de nuevo más tarde."
|
||||
)
|
||||
}
|
||||
title={t(
|
||||
"pages.proformas.update.series_load_error.title",
|
||||
"No se pudieron cargar las series de facturación"
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</RdxPageContent>
|
||||
</RdxPageContainer>
|
||||
) : null}
|
||||
|
||||
<ProformaUpdateEditorForm
|
||||
className={hasPageAlerts ? "pt-0" : undefined}
|
||||
formId={updateCtrl.formId}
|
||||
isSubmitting={updateCtrl.isUpdating}
|
||||
itemsCtrl={updateCtrl.itemsCtrl}
|
||||
onChangeCustomerClick={selectCustomerCtrl.selectCtrl.openDialog}
|
||||
onCreateCustomerClick={selectCustomerCtrl.openQuickCreateDialog}
|
||||
onPaymentTermChange={updateCtrl.handlePaymentTermChange}
|
||||
onReset={updateCtrl.resetForm}
|
||||
onSubmit={updateCtrl.onSubmit}
|
||||
paymentCtrl={updateCtrl.paymentCtrl}
|
||||
selectedCustomer={updateCtrl.selectedCustomer}
|
||||
seriesOptions={updateCtrl.seriesOptions}
|
||||
taxCtrl={updateCtrl.taxCtrl}
|
||||
totalsCtrl={updateCtrl.totalsCtrl}
|
||||
/>
|
||||
<ProformaUpdateEditorForm
|
||||
formId={updateCtrl.formId}
|
||||
isSubmitting={updateCtrl.isUpdating}
|
||||
itemsCtrl={updateCtrl.itemsCtrl}
|
||||
onChangeCustomerClick={selectCustomerCtrl.selectCtrl.openDialog}
|
||||
onCreateCustomerClick={selectCustomerCtrl.openQuickCreateDialog}
|
||||
onPaymentTermChange={updateCtrl.handlePaymentTermChange}
|
||||
onReset={updateCtrl.resetForm}
|
||||
onSubmit={updateCtrl.onSubmit}
|
||||
paymentCtrl={updateCtrl.paymentCtrl}
|
||||
selectedCustomer={updateCtrl.selectedCustomer}
|
||||
seriesOptions={updateCtrl.seriesOptions}
|
||||
taxCtrl={updateCtrl.taxCtrl}
|
||||
totalsCtrl={updateCtrl.totalsCtrl}
|
||||
/>
|
||||
</RdxPageContent>
|
||||
</RdxPageContainer>
|
||||
</RdxPageFrame>
|
||||
|
||||
|
||||
@ -29,52 +29,51 @@ export const CustomerUpdatePage = () => {
|
||||
return (
|
||||
<RdxPageFrame>
|
||||
<RdxPageContainer width="content">
|
||||
<PageErrorState
|
||||
description={ctrl.pageError.description}
|
||||
primaryAction={
|
||||
ctrl.pageError.canRetry
|
||||
? {
|
||||
label: ctrl.isRetrying
|
||||
? t("update.page_error.actions.retrying")
|
||||
: t("update.page_error.actions.retry"),
|
||||
onClick: ctrl.retryUpdate,
|
||||
isLoading: ctrl.isRetrying,
|
||||
}
|
||||
: ctrl.pageError.variant === "forbidden"
|
||||
<RdxPageContent>
|
||||
<PageErrorState
|
||||
description={ctrl.pageError.description}
|
||||
primaryAction={
|
||||
ctrl.pageError.canRetry
|
||||
? {
|
||||
label: t("update.page_error.actions.go_home"),
|
||||
onClick: ctrl.goHome,
|
||||
label: ctrl.isRetrying
|
||||
? t("update.page_error.actions.retrying")
|
||||
: t("update.page_error.actions.retry"),
|
||||
onClick: ctrl.retryUpdate,
|
||||
isLoading: ctrl.isRetrying,
|
||||
}
|
||||
: {
|
||||
: ctrl.pageError.variant === "forbidden"
|
||||
? {
|
||||
label: t("update.page_error.actions.go_home"),
|
||||
onClick: ctrl.goHome,
|
||||
}
|
||||
: {
|
||||
label: t("update.page_error.actions.back_to_list"),
|
||||
onClick: ctrl.goBackToList,
|
||||
}
|
||||
}
|
||||
reference={ctrl.pageError.reference}
|
||||
secondaryAction={
|
||||
ctrl.pageError.canRetry
|
||||
? {
|
||||
label: t("update.page_error.actions.back_to_list"),
|
||||
onClick: ctrl.goBackToList,
|
||||
}
|
||||
}
|
||||
reference={ctrl.pageError.reference}
|
||||
secondaryAction={
|
||||
ctrl.pageError.canRetry
|
||||
? {
|
||||
label: t("update.page_error.actions.back_to_list"),
|
||||
onClick: ctrl.goBackToList,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
title={ctrl.pageError.title}
|
||||
variant={ctrl.pageError.variant}
|
||||
/>
|
||||
: undefined
|
||||
}
|
||||
title={ctrl.pageError.title}
|
||||
variant={ctrl.pageError.variant}
|
||||
/>
|
||||
</RdxPageContent>
|
||||
</RdxPageContainer>
|
||||
</RdxPageFrame>
|
||||
);
|
||||
}
|
||||
|
||||
const hasPageAlerts = updateCtrl.isUpdateError;
|
||||
|
||||
return (
|
||||
<FormProvider {...updateCtrl.form}>
|
||||
<UnsavedChangesProvider isDirty={updateCtrl.form.formState.isDirty}>
|
||||
<RdxPageFrame
|
||||
contentClassName="bg-muted/20"
|
||||
footer={<h1>hola</h1>}
|
||||
contentClassName="bg-red-500"
|
||||
header={
|
||||
<CustomerUpdateHeader
|
||||
formId={updateCtrl.formId}
|
||||
@ -99,28 +98,16 @@ export const CustomerUpdatePage = () => {
|
||||
/>
|
||||
}
|
||||
>
|
||||
<RdxPageContainer className="bg-white" width="content">
|
||||
<RdxPageContainer width="content">
|
||||
<RdxPageContent>
|
||||
{hasPageAlerts ? (
|
||||
<RdxPageContainer className="pb-0" width="full">
|
||||
<div className="flex min-w-0 flex-col gap-4">
|
||||
{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"
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</RdxPageContainer>
|
||||
{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}
|
||||
|
||||
<CustomerUpdateEditorForm
|
||||
@ -130,26 +117,6 @@ export const CustomerUpdatePage = () => {
|
||||
onReset={updateCtrl.resetForm}
|
||||
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>
|
||||
</RdxPageContainer>
|
||||
</RdxPageFrame>
|
||||
|
||||
@ -12,18 +12,18 @@ test("CUSTOMER-INVOICES-PROFORMA-UPDATE-001: modifica referencia y descripción
|
||||
const reference = `E2E ${proforma.token}`;
|
||||
const description = `E2E updated draft ${proforma.token}`;
|
||||
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(
|
||||
(response) =>
|
||||
response.request().method() === "PUT" &&
|
||||
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);
|
||||
await expect(page).toHaveURL((url) => url.pathname === `/proformas/${proforma.id}/edit`);
|
||||
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 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);
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user