From 2e313172d198a24098dfaede341f3ee2ade02e15 Mon Sep 17 00:00:00 2001 From: ouyangxq <775153912@qq.com> Date: Sun, 30 Aug 2026 18:12:16 +0800 Subject: [PATCH] fix(admin): contain relationship drawer body --- .../InboundCodeRelationshipDrawer.test.ts | 34 +++++++++++++++++-- .../InboundCodeRelationshipDrawer.vue | 4 +-- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/src/shared/components/InboundCodeRelationshipDrawer.test.ts b/src/shared/components/InboundCodeRelationshipDrawer.test.ts index b84e1163..a0321eab 100644 --- a/src/shared/components/InboundCodeRelationshipDrawer.test.ts +++ b/src/shared/components/InboundCodeRelationshipDrawer.test.ts @@ -3,6 +3,7 @@ import { resolve } from 'node:path' import { defineComponent } from 'vue' import { flushPromises, mount } from '@vue/test-utils' import { beforeEach, describe, expect, it, vi } from 'vitest' +import ElementPlus from 'element-plus' import { getLoadingAssociationSummary, getOverseasInboundCodeRelationship, @@ -140,11 +141,40 @@ describe('InboundCodeRelationshipDrawer contract', () => { }) it('keeps sections and status badges within the drawer at desktop and narrow widths', () => { - expect(source).toContain('.relationship-sections{display:grid;width:100%;min-width:0') + expect(source).toContain('class="inbound-relationship-drawer"') + expect(source).toContain(':global(.inbound-relationship-drawer .el-drawer__body){box-sizing:border-box;min-width:0;max-width:100%;overflow-x:hidden;padding-right:calc(var(--el-drawer-padding-primary) + 8px)}') + expect(source).toContain(':global(.inbound-relationship-drawer .app-drawer__body){box-sizing:border-box;width:auto;max-width:100%;min-width:0;overflow-x:hidden}') + expect(source).toContain('.relationship-sections{display:grid;width:auto;max-width:100%;min-width:0;grid-template-columns:minmax(0,1fr)') expect(source).toContain('.relationship-section{box-sizing:border-box;width:100%;min-width:0') expect(source).toContain('flex-wrap:wrap') expect(source).toContain('.relationship-section h3{flex:1 1 auto;min-width:0') expect(source).toContain('.relationship-status{flex:0 0 auto;max-width:100%}') - expect(source).toContain('.inventory-table{max-width:100%') + expect(source).toContain('.inventory-table{width:100%;max-width:100%;min-width:0') + }) + + it('mounts the containment class through the real AppDrawer and Element Plus drawer DOM', async () => { + const wrapper = mount(InboundCodeRelationshipDrawer, { + attachTo: document.body, + props: { + modelValue: true, + inboundCode: 'NYEXX2608300027', + canReadBase: true, + canReadLoading: true, + canReadOverseas: true, + }, + global: { plugins: [ElementPlus] }, + }) + await flushPromises() + + const drawer = document.querySelector('.inbound-relationship-drawer') + const elementBody = drawer?.querySelector('.el-drawer__body') + const appBody = drawer?.querySelector('.app-drawer__body') + expect(drawer).not.toBeNull() + expect(elementBody).not.toBeNull() + expect(appBody).not.toBeNull() + expect(appBody?.querySelectorAll('.relationship-section')).toHaveLength(3) + expect(appBody?.querySelectorAll('.relationship-status')).toHaveLength(3) + + wrapper.unmount() }) }) diff --git a/src/shared/components/InboundCodeRelationshipDrawer.vue b/src/shared/components/InboundCodeRelationshipDrawer.vue index ae7a9d05..bce1f6c4 100644 --- a/src/shared/components/InboundCodeRelationshipDrawer.vue +++ b/src/shared/components/InboundCodeRelationshipDrawer.vue @@ -47,7 +47,7 @@ watch(() => [props.modelValue, props.inboundCode, props.canReadBase, props.canRe