feat: consulta pública de pedidos por código

.gitignore

@@ -30,3 +30,8 @@ pnpm-debug.log*
 # Deploy environment files
 deploy/.env.staging
 deploy/.env.production
+
+# Generated type declarations
+/auto-imports.d.ts
+/components.d.ts
+/typed-router.d.ts

package.json

@@ -5,7 +5,9 @@
     "dev": "vite --host 0.0.0.0",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint . --fix --ignore-path .gitignore"
+    "lint": "eslint . --fix --ignore-path .gitignore",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@mdi/font": "7.4.47",
@@ -18,6 +20,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/test-utils": "^2.4.11",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-vuetify": "^1.0.0",
@@ -26,8 +30,10 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.4.0",
     "eslint-plugin-vue": "^9.27.0",
+    "jsdom": "^26.1.0",
     "pinia": "^2.1.7",
     "sass": "1.77.6",
+    "typescript": "^5.9.3",
     "unplugin-auto-import": "^0.17.6",
     "unplugin-fonts": "^1.1.1",
     "unplugin-vue-components": "^0.27.2",
@@ -35,6 +41,7 @@
     "vite": "^5.3.3",
     "vite-plugin-vue-layouts": "^0.11.0",
     "vite-plugin-vuetify": "^2.0.3",
+    "vitest": "^3.2.7",
     "vue-router": "^4.4.0"
   }
 }

src/components/CatalogSalesManagement.vue

@@ -103,6 +103,21 @@
                 :items-per-page-options="[10, 25, 50, 100]"
                 show-expand
               >
+                <!-- Código -->
+                <template #item.code="{ item }">
+                  <span v-if="item.code" class="d-flex align-center">
+                    <code class="mr-1">{{ item.code }}</code>
+                    <v-btn
+                      icon="mdi-content-copy"
+                      size="x-small"
+                      variant="text"
+                      :title="`Copiar código ${item.code}`"
+                      @click="copyCode(item.code)"
+                    ></v-btn>
+                  </span>
+                  <span v-else>-</span>
+                </template>
+
                 <!-- Fecha formateada -->
                 <template #item.date="{ item }">
                   {{ formatDate(item.date) }}
@@ -267,6 +282,21 @@
                 :items-per-page-options="[10, 25, 50, 100]"
                 show-expand
               >
+                <!-- Código -->
+                <template #item.code="{ item }">
+                  <span v-if="item.code" class="d-flex align-center">
+                    <code class="mr-1">{{ item.code }}</code>
+                    <v-btn
+                      icon="mdi-content-copy"
+                      size="x-small"
+                      variant="text"
+                      :title="`Copiar código ${item.code}`"
+                      @click="copyCode(item.code)"
+                    ></v-btn>
+                  </span>
+                  <span v-else>-</span>
+                </template>
+
                 <!-- Fecha formateada -->
                 <template #item.date="{ item }">
                   {{ formatDate(item.date) }}
@@ -406,6 +436,7 @@ const activeTab = ref('pending'); // Tab activo por defecto
 // Headers para tabla de ventas sin sincronizar
 const pendingHeaders = [
   { title: 'ID', key: 'id', sortable: true },
+  { title: 'Código', key: 'code', sortable: true },
   { title: 'Fecha', key: 'date', sortable: true },
   { title: 'Cliente', key: 'customer_name', sortable: true },
   { title: 'Total', key: 'total', sortable: true },
@@ -416,6 +447,7 @@ const pendingHeaders = [
 // Headers para tabla de ventas sincronizadas
 const syncedHeaders = [
   { title: 'ID', key: 'id', sortable: true },
+  { title: 'Código', key: 'code', sortable: true },
   { title: 'Fecha', key: 'date', sortable: true },
   { title: 'Cliente', key: 'customer_name', sortable: true },
   { title: 'Total', key: 'total', sortable: true },
@@ -509,6 +541,17 @@ function clearFilters() {
   dateTo.value = '';
 }
 
+async function copyCode(code) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(code)
+    }
+    snackbar.value = { show: true, message: 'Código copiado', color: 'success' }
+  } catch {
+    snackbar.value = { show: true, message: 'No se pudo copiar el código', color: 'error' }
+  }
+}
+
 onMounted(() => {
   loadCatalogSales();
 });

src/components/NavBar.vue

@@ -100,6 +100,7 @@
             { title: 'Inicio', route: '/', icon: 'mdi-home'},
             { title: 'Comprar', route:'/comprar', icon: 'mdi-cart'},
             { title: 'Ver Catálogo', route: '/catalog', icon: 'mdi-store'},
+            { title: 'Consultar mi pedido', route: '/pedido', icon: 'mdi-magnify-scan'},
         ],
          menuAdminItems: [
              { title: 'Cuadrar tarro', route: '/cuadrar_tarro', icon: 'mdi-calculator'},

src/components/PublicOrderSummary.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <v-container v-if="loading" class="text-center py-8">
+      <v-progress-circular color="primary" indeterminate />
+      <p class="text-body-1 text-grey mt-4">Cargando pedido...</p>
+    </v-container>
+
+    <v-alert v-else-if="error" class="my-4" type="error">
+      {{ error }}
+    </v-alert>
+
+    <v-card v-else-if="purchase" class="rounded-lg">
+      <v-card-item>
+        <template #prepend>
+          <v-icon color="primary" size="36">mdi-receipt-text-outline</v-icon>
+        </template>
+        <v-card-title class="font-weight-bold text-h6">
+          Resumen del pedido
+        </v-card-title>
+      </v-card-item>
+      <v-divider />
+      <v-card-text>
+        <OrderAccessInfo :code="purchase.code" />
+        <v-divider class="my-3" />
+        <v-list>
+          <v-list-item>
+            <template #prepend>
+              <v-icon>mdi-calendar</v-icon>
+            </template>
+            <v-list-item-title>Fecha</v-list-item-title>
+            <v-list-item-subtitle>{{ purchase.date }}</v-list-item-subtitle>
+          </v-list-item>
+          <OrderCustomer :customer="purchase.customer" />
+          <OrderPayment
+            v-if="purchase.type === 'sale'"
+            :payment-method="purchase.payment_method"
+          />
+        </v-list>
+        <v-divider class="my-3" />
+        <OrderLines :lines="purchase.lines" />
+        <v-divider class="my-3" />
+        <OrderTotal :total="calculateTotal(purchase.lines)" />
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+  import OrderAccessInfo from '@/components/order/OrderAccessInfo.vue'
+  import OrderCustomer from '@/components/order/OrderCustomer.vue'
+  import OrderLines from '@/components/order/OrderLines.vue'
+  import OrderPayment from '@/components/order/OrderPayment.vue'
+  import OrderTotal from '@/components/order/OrderTotal.vue'
+
+  defineProps({
+    purchase: {
+      type: Object,
+      default: null,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    error: {
+      type: String,
+      default: '',
+    },
+  })
+
+  function calculateTotal (lines = []) {
+    return lines.reduce((total, line) => {
+      return total + Number(line.unit_price || 0) * Number(line.quantity || 0)
+    }, 0)
+  }
+</script>

src/components/ReconciliationJar.vue

@@ -52,7 +52,7 @@
         :key="payment_method"
         :value="payment_method"
       >
-        {{ payment_method }}&nbsp; <CurrencyText :value="totalByMethod(payment_method)"</CurrencyText>
+        {{ payment_method }}&nbsp; <CurrencyText :value="totalByMethod(payment_method)" />
       </v-tab>
     </v-tabs>
 

src/components/ReconciliationJarView.vue

@@ -41,7 +41,7 @@
             v-for="(elements, paymentMethod) in purchases"
             :key="paymentMethod"
           >
-            {{ paymentMethod }}&nbsp; <CurrencyText :value="elements.total"</CurrencyText>
+            {{ paymentMethod }}&nbsp; <CurrencyText :value="elements.total" />
           </v-tab>
         </v-tabs>
         <v-tabs-window v-model="tab">
@@ -63,7 +63,7 @@
                   <td><v-btn @click="openSummaryModal(purchase.id)">{{ purchase.id }}</v-btn></td>
                   <td>{{ purchase.date }}</td>
                   <td>{{ purchase.customer }}</td>
-                  <td><CurrencyText :value="purchase.total"</CurrencyText></td>
+                  <td><CurrencyText :value="purchase.total" /></td>
 
                 </tr>
               </tbody>

src/components/SummaryPurchase.vue

@@ -10,6 +10,7 @@
       <v-toolbar>
         <v-toolbar-title> {{ type === 'catalog' ? 'Resumen del pedido' : 'Resumen de la compra' }} {{ id }}</v-toolbar-title>
       </v-toolbar>
+      <OrderAccessInfo v-if="purchase.code" :code="purchase.code" />
       <v-list>
         <v-list-item>
             <v-list-item-title>Fecha:</v-list-item-title>

src/components/Wellcome.vue

@@ -108,6 +108,16 @@
             >
               Ir a Comprar
             </v-btn>
+            <v-btn
+              :to="{ path: 'pedido' }"
+              color="orange-darken-2"
+              size="x-large"
+              prepend-icon="mdi-magnify-scan"
+              variant="elevated"
+              class="px-8"
+            >
+              Consultar mi pedido
+            </v-btn>
           </div>
         </v-col>
       </v-row>

src/components/order/OrderAccessInfo.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <v-list density="compact">
+      <v-list-item>
+        <template #prepend>
+          <v-icon>mdi-tag</v-icon>
+        </template>
+        <v-list-item-title>Código del pedido</v-list-item-title>
+        <v-list-item-subtitle>
+          <code class="order-code">{{ code }}</code>
+        </v-list-item-subtitle>
+        <template #append>
+          <v-btn
+            data-test="copy-code"
+            icon="mdi-content-copy"
+            size="small"
+            title="Copiar código"
+            variant="text"
+            @click="copyText(code)"
+          />
+        </template>
+      </v-list-item>
+      <v-list-item>
+        <template #prepend>
+          <v-icon>mdi-link-variant</v-icon>
+        </template>
+        <v-list-item-title>Link de consulta</v-list-item-title>
+        <v-list-item-subtitle>
+          <code class="order-link">{{ publicLink }}</code>
+        </v-list-item-subtitle>
+        <template #append>
+          <v-btn
+            data-test="copy-link"
+            icon="mdi-content-copy"
+            size="small"
+            title="Copiar link"
+            variant="text"
+            @click="copyText(publicLink)"
+          />
+        </template>
+      </v-list-item>
+    </v-list>
+
+    <v-snackbar v-model="snackbar" color="success" location="top" :timeout="2000">
+      Copiado
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup>
+  import { computed, ref } from 'vue'
+
+  const props = defineProps({
+    code: {
+      type: String,
+      required: true,
+    },
+  })
+
+  const snackbar = ref(false)
+
+  const publicLink = computed(() => {
+    return `${window.location.origin}/pedido/${props.code}`
+  })
+
+  async function copyText (text) {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+    }
+    snackbar.value = true
+  }
+</script>
+
+<style scoped>
+.order-code,
+.order-link {
+  word-break: break-all;
+}
+</style>

src/components/order/OrderCustomer.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-list-item v-if="customer">
+    <template #prepend>
+      <v-icon>mdi-account</v-icon>
+    </template>
+    <v-list-item-title>Cliente</v-list-item-title>
+    <v-list-item-subtitle>{{ customer.name }}</v-list-item-subtitle>
+  </v-list-item>
+</template>
+
+<script setup>
+  defineProps({
+    customer: {
+      type: Object,
+      default: null,
+    },
+  })
+</script>

src/components/order/OrderLines.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-table density="compact">
+    <thead>
+      <tr>
+        <th class="text-left">Producto</th>
+        <th class="text-right">Precio</th>
+        <th class="text-right">Cantidad</th>
+        <th class="text-right">Subtotal</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(line, index) in lines" :key="index">
+        <td>{{ line.product?.name }}</td>
+        <td class="text-right">
+          <CurrencyText :value="Number(line.unit_price)" />
+        </td>
+        <td class="text-right">{{ line.quantity }}</td>
+        <td class="text-right">
+          <CurrencyText :value="subtotal(line)" />
+        </td>
+      </tr>
+    </tbody>
+  </v-table>
+</template>
+
+<script setup>
+  import CurrencyText from '@/components/CurrencyText.vue'
+
+  defineProps({
+    lines: {
+      type: Array,
+      default: () => [],
+    },
+  })
+
+  function subtotal (line) {
+    return Number(line.unit_price || 0) * Number(line.quantity || 0)
+  }
+</script>

src/components/order/OrderPayment.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-list-item v-if="paymentMethod">
+    <template #prepend>
+      <v-icon>mdi-credit-card</v-icon>
+    </template>
+    <v-list-item-title>Pagado en</v-list-item-title>
+    <v-list-item-subtitle>{{ paymentMethod }}</v-list-item-subtitle>
+  </v-list-item>
+</template>
+
+<script setup>
+  defineProps({
+    paymentMethod: {
+      type: String,
+      default: '',
+    },
+  })
+</script>

src/components/order/OrderTotal.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="d-flex justify-space-between align-center">
+    <span class="font-weight-bold">Total</span>
+    <span class="font-weight-bold">
+      <CurrencyText :value="total" />
+    </span>
+  </div>
+</template>
+
+<script setup>
+  import CurrencyText from '@/components/CurrencyText.vue'
+
+  defineProps({
+    total: {
+      type: Number,
+      required: true,
+    },
+  })
+</script>

src/pages/pedido/[code].vue

@@ -0,0 +1,79 @@
+<template>
+  <v-container class="pa-4 pa-md-6" fluid>
+    <v-sheet class="rounded-lg pa-4 pa-md-6 mb-4">
+      <h1 class="text-h5 font-weight-bold">Consultar mi pedido</h1>
+      <p class="text-body-2 text-medium-emphasis mb-4">
+        Ingresa el código de tu pedido o abre el link que recibiste para revisar su estado.
+      </p>
+      <v-form @submit.prevent="onConsult">
+        <v-row align="center">
+          <v-col cols="12" md="6" sm="8">
+            <v-text-field
+              v-model="inputCode"
+              clearable
+              density="comfortable"
+              hide-details
+              label="Código del pedido"
+              variant="outlined"
+            />
+          </v-col>
+          <v-col class="d-flex align-center" cols="12" md="6" sm="4">
+            <v-btn color="primary" prepend-icon="mdi-magnify-scan" type="submit">
+              Consultar
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-sheet>
+
+    <PublicOrderSummary :error="error" :loading="loading" :purchase="purchase" />
+  </v-container>
+</template>
+
+<script setup>
+  import { inject, ref, watch } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import PublicOrderSummary from '@/components/PublicOrderSummary.vue'
+
+  const route = useRoute()
+  const router = useRouter()
+  const api = inject('api')
+
+  const inputCode = ref(route.params.code || '')
+  const purchase = ref(null)
+  const loading = ref(false)
+  const error = ref('')
+
+  async function fetchOrder (code) {
+    loading.value = true
+    error.value = ''
+    purchase.value = null
+    try {
+      purchase.value = await api.getPublicOrderSummary(code)
+    } catch (e) {
+      error.value =
+        e?.response?.status === 404
+          ? 'No se encontró un pedido con ese código.'
+          : 'Ocurrió un error al consultar el pedido. Inténtalo de nuevo.'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function onConsult () {
+    const code = inputCode.value.trim()
+    if (!code) return
+    router.push(`/pedido/${code}`)
+  }
+
+  watch(
+    () => route.params.code,
+    code => {
+      if (code) {
+        inputCode.value = code
+        fetchOrder(code)
+      }
+    },
+    { immediate: true }
+  )
+</script>

src/services/api.js

@@ -27,6 +27,10 @@ class Api {
         return this.apiImplementation.getSummaryCatalogPurchase(purchaseId);
     }
 
+    getPublicOrderSummary(code) {
+        return this.apiImplementation.getPublicOrderSummary(code);
+    }
+
     getPurchasesForReconciliation() {
         return this.apiImplementation.getPurchasesForReconciliation();
     }

src/services/django-api.js

@@ -57,6 +57,12 @@ class DjangoApi {
         return this.getRequest(url);
     }
 
+    getPublicOrderSummary(code) {
+        const url =
+            this.base + `/don_confiao/api/resumen_publico/${code}`;
+        return this.getRequest(url);
+    }
+
     getPurchasesForReconciliation() {
         const url = this.base + "/don_confiao/purchases/for_reconciliation";
         return this.getRequest(url);

tests/setup.js

@@ -0,0 +1,44 @@
+import { afterEach, vi } from 'vitest'
+import { enableAutoUnmount } from '@vue/test-utils'
+
+enableAutoUnmount(afterEach)
+
+if (!navigator.clipboard) {
+  navigator.clipboard = { writeText: vi.fn().mockResolvedValue(undefined) }
+}
+
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class ResizeObserver {
+    observe () {}
+    unobserve () {}
+    disconnect () {}
+  }
+}
+
+if (typeof globalThis.IntersectionObserver === 'undefined') {
+  globalThis.IntersectionObserver = class IntersectionObserver {
+    observe () {}
+    unobserve () {}
+    disconnect () {}
+    takeRecords () {
+      return []
+    }
+  }
+}
+
+if (typeof window.matchMedia !== 'function') {
+  window.matchMedia = query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  })
+}
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})

tests/unit/components/OrderAccessInfo.spec.js

@@ -0,0 +1,47 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import OrderAccessInfo from '@/components/order/OrderAccessInfo.vue'
+import vuetify from '@/plugins/vuetify'
+
+function mountAccessInfo (code) {
+  return mount(OrderAccessInfo, {
+    props: { code },
+    global: { plugins: [vuetify] },
+  })
+}
+
+describe('OrderAccessInfo', () => {
+  beforeEach(() => {
+    navigator.clipboard.writeText.mockClear()
+  })
+
+  it('muestra el código del pedido', () => {
+    const wrapper = mountAccessInfo('abc123')
+    expect(wrapper.text()).toContain('abc123')
+  })
+
+  it('muestra el link público construido con el código', () => {
+    const wrapper = mountAccessInfo('abc123')
+    expect(wrapper.text()).toContain(
+      `${window.location.origin}/pedido/abc123`
+    )
+  })
+
+  it('copia el link al presionar el botón de copiar link', async () => {
+    const wrapper = mountAccessInfo('abc123')
+
+    await wrapper.find('[data-test="copy-link"]').trigger('click')
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+      `${window.location.origin}/pedido/abc123`
+    )
+  })
+
+  it('copia el código al presionar el botón de copiar código', async () => {
+    const wrapper = mountAccessInfo('abc123')
+
+    await wrapper.find('[data-test="copy-code"]').trigger('click')
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('abc123')
+  })
+})

tests/unit/components/PublicOrderSummary.spec.js

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PublicOrderSummary from '@/components/PublicOrderSummary.vue'
+import OrderAccessInfo from '@/components/order/OrderAccessInfo.vue'
+import OrderCustomer from '@/components/order/OrderCustomer.vue'
+import OrderLines from '@/components/order/OrderLines.vue'
+import OrderTotal from '@/components/order/OrderTotal.vue'
+import OrderPayment from '@/components/order/OrderPayment.vue'
+import vuetify from '@/plugins/vuetify'
+
+const saleData = {
+  id: 5,
+  code: 'abc123',
+  date: '2024-09-02T00:00:00Z',
+  customer: { id: 1, name: 'Camilo' },
+  payment_method: 'CASH',
+  lines: [
+    { product: { id: 10, name: 'Panela' }, quantity: 2, unit_price: 3000 },
+    { product: { id: 11, name: 'Arroz' }, quantity: 1, unit_price: 5000 },
+  ],
+  type: 'sale',
+}
+
+const catalogData = {
+  id: 7,
+  code: 'def456',
+  date: '2024-09-02T00:00:00Z',
+  customer: { id: 1, name: 'Camilo' },
+  lines: [{ product: { id: 10, name: 'Panela' }, quantity: 2, unit_price: 3000 }],
+  type: 'catalog',
+}
+
+function mountSummary (props) {
+  return mount(PublicOrderSummary, {
+    props,
+    global: { plugins: [vuetify] },
+  })
+}
+
+describe('PublicOrderSummary', () => {
+  it('renderiza el resumen de una venta con sus partes', () => {
+    const wrapper = mountSummary({ purchase: saleData })
+
+    expect(wrapper.findComponent(OrderAccessInfo).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderCustomer).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderLines).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderTotal).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderPayment).exists()).toBe(true)
+    expect(wrapper.text()).toContain('Camilo')
+    expect(wrapper.text()).toContain('Panela')
+    expect(wrapper.text()).toContain('Arroz')
+    expect(wrapper.text().replace(/\u00A0/g, ' ')).toContain('11.000')
+  })
+
+  it('renderiza un pedido de catálogo sin bloque de pago', () => {
+    const wrapper = mountSummary({ purchase: catalogData })
+
+    expect(wrapper.findComponent(OrderAccessInfo).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderCustomer).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderLines).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderTotal).exists()).toBe(true)
+    expect(wrapper.findComponent(OrderPayment).exists()).toBe(false)
+    expect(wrapper.text()).toContain('Camilo')
+    expect(wrapper.text()).toContain('Panela')
+  })
+
+  it('muestra el estado de carga', () => {
+    const wrapper = mountSummary({ purchase: null, loading: true })
+
+    expect(wrapper.text()).toContain('Cargando')
+  })
+
+  it('muestra el mensaje de error cuando lo recibe', () => {
+    const wrapper = mountSummary({
+      purchase: null,
+      error: 'No se encontró un pedido con ese código.',
+    })
+
+    expect(wrapper.text()).toContain('No se encontró un pedido con ese código.')
+  })
+
+  it('no renderiza datos cuando no hay pedido, carga ni error', () => {
+    const wrapper = mountSummary({ purchase: null })
+
+    expect(wrapper.text()).not.toContain('Camilo')
+    expect(wrapper.findComponent(OrderLines).exists()).toBe(false)
+  })
+})

tests/unit/pages/pedido.spec.js

@@ -0,0 +1,92 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { createMemoryHistory, createRouter } from 'vue-router'
+import PedidoPage from '@/pages/pedido/[code].vue'
+import PublicOrderSummary from '@/components/PublicOrderSummary.vue'
+import vuetify from '@/plugins/vuetify'
+
+const saleData = {
+  id: 1,
+  code: 'abc123',
+  date: '2024-09-02T00:00:00Z',
+  customer: { id: 1, name: 'Camilo' },
+  payment_method: 'CASH',
+  lines: [
+    { product: { id: 10, name: 'Panela' }, quantity: 2, unit_price: 3000 },
+  ],
+  type: 'sale',
+}
+
+async function mountPage (api, path) {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [{ path: '/pedido/:code?', component: PedidoPage }],
+  })
+  router.push(path)
+  await router.isReady()
+  const wrapper = mount(PedidoPage, {
+    global: {
+      plugins: [router, vuetify],
+      provide: { api },
+    },
+  })
+  return { router, wrapper }
+}
+
+async function waitForRouteParam (router, param, value, timeout = 1000) {
+  const start = Date.now()
+  while (Date.now() - start < timeout) {
+    if (router.currentRoute.value.params[param] === value) return
+    await new Promise(resolve => setTimeout(resolve, 10))
+  }
+  throw new Error(`route param ${param} nunca llegó a ser ${value}`)
+}
+
+describe('página pública /pedido', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('sin código no consulta la API y muestra el buscador', async () => {
+    const api = { getPublicOrderSummary: vi.fn() }
+    const { wrapper } = await mountPage(api, '/pedido')
+    await flushPromises()
+
+    expect(api.getPublicOrderSummary).not.toHaveBeenCalled()
+    expect(wrapper.text()).toContain('Código del pedido')
+  })
+
+  it('con código por URL consulta y muestra el resumen', async () => {
+    const api = { getPublicOrderSummary: vi.fn().mockResolvedValue(saleData) }
+    const { wrapper } = await mountPage(api, '/pedido/abc123')
+    await flushPromises()
+
+    expect(api.getPublicOrderSummary).toHaveBeenCalledWith('abc123')
+    expect(wrapper.findComponent(PublicOrderSummary).props('purchase')).toEqual(saleData)
+    expect(wrapper.text()).toContain('Camilo')
+  })
+
+  it('muestra mensaje de no encontrado cuando el código no existe', async () => {
+    const api = {
+      getPublicOrderSummary: vi.fn().mockRejectedValue({ response: { status: 404 } }),
+    }
+    const { wrapper } = await mountPage(api, '/pedido/zzzzzz')
+    await flushPromises()
+
+    expect(wrapper.findComponent(PublicOrderSummary).props('error')).toContain('No se encontró')
+  })
+
+  it('al consultar un código navega a /pedido/<code> y vuelve a consultar', async () => {
+    const api = { getPublicOrderSummary: vi.fn().mockResolvedValue(saleData) }
+    const { router, wrapper } = await mountPage(api, '/pedido/abc123')
+    await flushPromises()
+    api.getPublicOrderSummary.mockClear()
+
+    await wrapper.find('input').setValue('newcode')
+    await wrapper.find('form').trigger('submit')
+    await waitForRouteParam(router, 'code', 'newcode')
+
+    expect(router.currentRoute.value.params.code).toBe('newcode')
+    expect(api.getPublicOrderSummary).toHaveBeenCalledWith('newcode')
+  })
+})

tests/unit/services/django-api.spec.js

@@ -0,0 +1,34 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import http from '@/services/http'
+import DjangoApi from '@/services/django-api'
+
+vi.mock('@/services/http', () => ({
+  default: {
+    get: vi.fn(),
+    post: vi.fn(),
+    patch: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn(),
+  },
+}))
+
+describe('DjangoApi.getPublicOrderSummary', () => {
+  beforeEach(() => {
+    vi.stubEnv('VITE_DJANGO_BASE_URL', 'http://backend.test')
+    http.get.mockReset()
+    http.get.mockResolvedValue({ data: { code: 'abc123', type: 'sale' } })
+  })
+
+  it('consulta el resumen público por código en la ruta resumen_publico', async () => {
+    const api = new DjangoApi()
+
+    const result = await api.getPublicOrderSummary('abc123')
+
+    expect(http.get).toHaveBeenCalledTimes(1)
+    expect(http.get).toHaveBeenCalledWith(
+      'http://backend.test/don_confiao/api/resumen_publico/abc123'
+    )
+    expect(result).toEqual({ code: 'abc123', type: 'sale' })
+  })
+})

vitest.config.mjs

@@ -0,0 +1,34 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+import Vue from '@vitejs/plugin-vue'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+
+export default defineConfig({
+  plugins: [
+    Vue({
+      template: { transformAssetUrls },
+    }),
+    Vuetify({
+      autoImport: true,
+      styles: {
+        configFile: 'src/styles/settings.scss',
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  test: {
+    environment: 'jsdom',
+    globals: false,
+    setupFiles: ['./tests/setup.js'],
+    include: ['tests/**/*.spec.js'],
+    server: {
+      deps: {
+        inline: ['vuetify'],
+      },
+    },
+  },
+})