feat(catalog) : M6 — écran Ajouter un produit /admin/products/new (ERP-205)

Formulaire principal de création produit (admin-only) : état, sites, nom, code, catégorie (type PRODUIT), types de stockage, booléens conditionnels. - RG-6.03 : « Fabriqué » / « Contient de la mélasse » visibles uniquement si l'état contient « Vendu » - RG-6.06 : cascade Site → Type de stockage (rechargement + purge des types indisponibles) dans useProductForm - RG-6.01 : POST /products (toast:false) ; 422 mappées inline (useFormErrors), 409 doublon de code → setError + toast - bouton « Valider » toujours actif, validation autoritaire serveur (ERP-101) - composables useSiteOptions / useCategoryOptions / useStorageTypeOptions (?pagination=false) - i18n admin.products.form ; 15 tests Vitest (useProductForm + page)
2026-06-25 17:52:02 +02:00
parent f12a378126
commit ce0e274743
6 changed files with 796 additions and 2 deletions
@@ -0,0 +1,138 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { defineComponent, h, Suspense } from 'vue'
+
+// ── Mock du composable form (sa logique est testee a part : useProductForm.spec).
+// Ici on teste le WIRING de la page : rendu conditionnel RG-6.03 + submit→redirect.
+// Les refs partagees sont creees DANS la factory (vue est initialise au moment ou
+// la page est importee) et exposees via un holder hoiste pour pilotage par test.
+const fx = vi.hoisted(() => ({
+    isSale: null as unknown as { value: boolean },
+    submit: vi.fn(),
+    loadReferentials: vi.fn(),
+}))
+
+vi.mock('~/modules/catalog/composables/useProductForm', async () => {
+    const { ref, reactive } = await import('vue')
+    fx.isSale = ref(false)
+    return {
+        PRODUCT_STATES: ['PURCHASE', 'SALE', 'OTHER'],
+        useProductForm: () => ({
+            form: reactive({
+                code: null, name: null, states: [], siteIris: [],
+                categoryIri: null, storageTypeIris: [], manufactured: false, containsMolasses: false,
+            }),
+            errors: reactive({}),
+            submitting: ref(false),
+            isSale: fx.isSale,
+            siteOptions: ref([]),
+            categoryOptions: ref([]),
+            storageTypeOptions: ref([]),
+            setStates: vi.fn(),
+            setCategory: vi.fn(),
+            setStorageTypes: vi.fn(),
+            setSites: vi.fn(),
+            loadReferentials: fx.loadReferentials,
+            submit: fx.submit,
+        }),
+    }
+})
+
+// ── Auto-imports Nuxt stubbes globalement ───────────────────────────────────
+const mockPush = vi.hoisted(() => vi.fn())
+const mockNavigateTo = vi.hoisted(() => vi.fn())
+const mockCan = vi.hoisted(() => vi.fn())
+
+vi.stubGlobal('useI18n', () => ({ t: (key: string) => key }))
+vi.stubGlobal('useHead', () => undefined)
+vi.stubGlobal('useRouter', () => ({ push: mockPush }))
+vi.stubGlobal('usePermissions', () => ({ can: mockCan }))
+vi.stubGlobal('navigateTo', mockNavigateTo)
+
+const NewPage = (await import('../admin/products/new.vue')).default
+
+const ButtonStub = defineComponent({
+    props: { label: { type: String, default: '' }, disabled: { type: Boolean, default: false } },
+    emits: ['click'],
+    setup(props, { emit }) {
+        return () => h('button', { 'data-label': props.label, onClick: () => emit('click') }, props.label)
+    },
+})
+const InputStub = defineComponent({
+    props: { label: { type: String, default: '' }, modelValue: { default: null } },
+    setup(props) { return () => h('input', { 'data-label': props.label }) },
+})
+const CheckboxStub = defineComponent({
+    props: { label: { type: String, default: '' }, modelValue: { type: Boolean, default: false } },
+    setup(props) { return () => h('input', { 'type': 'checkbox', 'data-label': props.label }) },
+})
+
+const stubs = {
+    MalioButtonIcon: ButtonStub,
+    MalioButton: ButtonStub,
+    MalioInputText: InputStub,
+    MalioSelect: InputStub,
+    MalioSelectCheckbox: InputStub,
+    MalioCheckbox: CheckboxStub,
+}
+
+async function mountPage() {
+    const wrapper = mount(defineComponent({
+        components: { NewPage },
+        setup: () => () => h(Suspense, null, { default: () => h(NewPage) }),
+    }), { global: { stubs } })
+    await flushPromises()
+    return wrapper
+}
+
+describe('Écran Ajouter un produit (page /admin/products/new)', () => {
+    beforeEach(() => {
+        fx.submit.mockReset().mockResolvedValue(true)
+        fx.loadReferentials.mockReset().mockResolvedValue(undefined)
+        mockPush.mockReset()
+        mockNavigateTo.mockReset()
+        mockCan.mockReset().mockReturnValue(true)
+        fx.isSale.value = false
+    })
+
+    it('redirige vers la liste sans la permission manage', async () => {
+        mockCan.mockReturnValue(false)
+        await mountPage()
+        expect(mockNavigateTo).toHaveBeenCalledWith('/admin/products')
+    })
+
+    it('charge les referentiels au montage', async () => {
+        await mountPage()
+        expect(fx.loadReferentials).toHaveBeenCalled()
+    })
+
+    it('RG-6.03 : masque Fabriqué / mélasse tant que l\'etat ne contient pas « Vendu »', async () => {
+        fx.isSale.value = false
+        const wrapper = await mountPage()
+        expect(wrapper.find('[data-label="admin.products.form.manufactured"]').exists()).toBe(false)
+        expect(wrapper.find('[data-label="admin.products.form.containsMolasses"]').exists()).toBe(false)
+    })
+
+    it('RG-6.03 : affiche Fabriqué / mélasse quand l\'etat contient « Vendu »', async () => {
+        fx.isSale.value = true
+        const wrapper = await mountPage()
+        expect(wrapper.find('[data-label="admin.products.form.manufactured"]').exists()).toBe(true)
+        expect(wrapper.find('[data-label="admin.products.form.containsMolasses"]').exists()).toBe(true)
+    })
+
+    it('« Valider » : submit puis retour a la liste au succes', async () => {
+        const wrapper = await mountPage()
+        await wrapper.find('[data-label="admin.products.form.submit"]').trigger('click')
+        await flushPromises()
+        expect(fx.submit).toHaveBeenCalled()
+        expect(mockPush).toHaveBeenCalledWith('/admin/products')
+    })
+
+    it('ne redirige pas si submit echoue (erreurs inline)', async () => {
+        fx.submit.mockResolvedValueOnce(false)
+        const wrapper = await mountPage()
+        await wrapper.find('[data-label="admin.products.form.submit"]').trigger('click')
+        await flushPromises()
+        expect(mockPush).not.toHaveBeenCalled()
+    })
+})