diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue index 327db6291..b9df2e900 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue @@ -225,7 +225,7 @@ const openRecord = () => {
{ diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js index d6cec362f..10bc38bee 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js +++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js @@ -79,7 +79,9 @@ describe('ReportDrilldownDrawer.vue', () => { attachTo: options?.attachTo, global: { stubs: { - Teleport: true, + TeleportWithDirection: { + template: '
', + }, Transition: false, Spinner: true, Button: { @@ -248,6 +250,27 @@ describe('ReportDrilldownDrawer.vue', () => { expect(wrapper.text()).toContain('5 conversations'); }); + it('anchors the drawer to the inline-end edge so it flips in RTL', async () => { + const wrapper = mountDrawer(); + await flushPromises(); + + const drawer = wrapper.get('[role="dialog"]'); + expect(drawer.classes()).toContain('end-0'); + expect(drawer.classes()).not.toContain('right-0'); + }); + + it('flips the navigation caret icons in RTL', async () => { + const wrapper = mountDrawer({ props: { canPrev: true, canNext: true } }); + await flushPromises(); + + expect( + wrapper.get('[aria-label="REPORT.DRILLDOWN.PREVIOUS_BUCKET"]').classes() + ).toContain('rtl:rotate-180'); + expect( + wrapper.get('[aria-label="REPORT.DRILLDOWN.NEXT_BUCKET"]').classes() + ).toContain('rtl:rotate-180'); + }); + it('emits close when the drawer close button is clicked', async () => { const wrapper = mountDrawer(); await flushPromises();