+ {{ metric.label }} +
++ {{ metric.value }} +
++ {{ metric.description }} +
++ Top campaigns ranked by unique views and click volume. +
++ {{ formatCount(campaignStatistics.length) }} campaigns +
++ Confirmation coverage for the configured sending domain. +
+Domain
++ {{ domainConfirmation.domain || 'Unknown domain' }} +
+Confirmed
++ {{ formatCount(domainConfirmation.confirmed) }} +
+Unconfirmed
++ {{ formatCount(domainConfirmation.unconfirmed) }} +
++ Subscriber counts by email domain. +
++ {{ formatCount(topDomains.length) }} domains +
+| Domain | +Subscribers | +
|---|---|
| + No domain statistics found. + | +|
| + {{ domain.domain || 'Unknown domain' }} + | ++ {{ formatCount(domain.subscribers) }} + | +
+ Most common subscriber usernames. +
++ {{ formatCount(topLocalParts.length) }} values +
+| Local part | +Count | +Share | +
|---|---|---|
| + No local-part statistics found. + | +||
| + {{ part.localPart || 'Unknown' }} + | ++ {{ formatCount(part.count) }} + | ++ {{ formatPercentage(part.percentage) }} + | +
+ Open and click activity by campaign. +
++ {{ formatCount(campaignStatistics.length) }} records +
+| Campaign | +Sent | +Views | +Open rate | +Clicks | +Bounce | +
|---|---|---|---|---|---|
| + No campaign statistics found. + | +|||||
|
+
+ {{ campaign.subject || `Campaign #${campaign.campaignId}` }}
+
+
+ Sent {{ campaign.dateSent ? formatDate(campaign.dateSent) : 'unknown date' }}
+
+ |
+ + {{ formatCount(campaign.sent) }} + | ++ {{ formatCount(campaign.uniqueViews) }} + | ++ {{ formatPercentage(calcRate(campaign.uniqueViews, campaign.sent)) }} + | ++ {{ formatCount(campaign.totalClicks) }} + | ++ {{ formatCount(campaign.bounces) }} + | +
Test content
') + await wrapper.vm.$nextTick() + + // Go to lists step and select a list + const stepButtons = wrapper.findAll('button') + const step4Button = stepButtons.find((btn) => btn.text().includes('4')) + await step4Button.trigger('click') + await wrapper.vm.$nextTick() + + const listCheckboxes = wrapper.findAll('input[type="checkbox"]') + if (listCheckboxes.length > 0) { + await listCheckboxes[0].setValue(true) + } + + // Save + const saveButton = wrapper.findAll('button').find( + (btn) => btn.text().includes('Save and continue editing') + ) + await saveButton.trigger('click') + await flushPromises() + + expect(campaignClientMock.createCampaign).toHaveBeenCalled() + }) + + it('updates existing campaign when in edit mode', async () => { + routeMock.name = 'campaign-edit' + routeMock.params = { campaignId: '42' } + + const wrapper = mountComponent() + await flushPromises() + + // Modify subject + const subjectInput = wrapper.find('#campaign-subject') + await subjectInput.setValue('Updated Campaign') + + // Save + const saveButton = wrapper.findAll('button').find( + (btn) => btn.text().includes('Save and continue editing') + ) + await saveButton.trigger('click') + await flushPromises() + + expect(campaignClientMock.updateCampaign).toHaveBeenCalledWith(42, expect.any(Object)) + }) + + it('shows save error message when save fails', async () => { + campaignClientMock.createCampaign.mockRejectedValue( + new Error('Server error') + ) + + const wrapper = mountComponent() + await flushPromises() + + // Fill in minimal required fields + const subjectInput = wrapper.find('#campaign-subject') + await subjectInput.setValue('Test Campaign') + + // Go to step 4 and select a list + const stepButtons = wrapper.findAll('button') + const step4Button = stepButtons.find((btn) => btn.text().includes('4')) + await step4Button.trigger('click') + await wrapper.vm.$nextTick() + + const listCheckboxes = wrapper.findAll('input[type="checkbox"]') + if (listCheckboxes.length > 0) { + await listCheckboxes[0].setValue(true) + } + + // Try to save + const saveButton = wrapper.findAll('button').find( + (btn) => btn.text().includes('Save and continue editing') + ) + await saveButton.trigger('click') + await flushPromises() + + expect(wrapper.text()).toContain('Server error') + }) + + it('shows success message after saving', async () => { + routeMock.name = 'campaign-edit' + routeMock.params = { campaignId: '42' } + + const wrapper = mountComponent() + await flushPromises() + + const saveButton = wrapper.findAll('button').find( + (btn) => btn.text().includes('Save and continue editing') + ) + await saveButton.trigger('click') + await flushPromises() + + expect(wrapper.text()).toContain('Campaign saved successfully') + }) + }) + + describe('Queue Campaign', () => { + it('queues campaign to send when button is clicked', async () => { + routeMock.name = 'campaign-edit' + routeMock.params = { campaignId: '42' } + + const wrapper = mountComponent() + await flushPromises() + + // Navigate to finish step + const stepButtons = wrapper.findAll('button') + const step6Button = stepButtons.find((btn) => btn.text().includes('6')) + await step6Button.trigger('click') + await wrapper.vm.$nextTick() + + // Select lists + const step4Button = stepButtons.find((btn) => btn.text().includes('4')) + await step4Button.trigger('click') + await wrapper.vm.$nextTick() + + const listCheckboxes = wrapper.findAll('input[type="checkbox"]') + if (listCheckboxes.length > 0) { + await listCheckboxes[0].setValue(true) + } + + // Find queue button + const queueButton = wrapper.findAll('button').find( + (btn) => btn.text().includes('Place campaign in a queue to send') + ) + + if (queueButton) { + await queueButton.trigger('click') + await flushPromises() + + expect(campaignClientMock.updateCampaignStatus).toHaveBeenCalledWith(42, 'submitted') + } + }) + + it('does not show queue button when campaign is already submitted', async () => { + routeMock.name = 'campaign-edit' + routeMock.params = { campaignId: '42' } + + campaignClientMock.getCampaign.mockResolvedValueOnce({ + id: 42, + messageContent: {}, + messageOptions: {}, + messageFormat: {}, + messageSchedule: {}, + messageMetadata: { status: 'submitted' }, + }) + + const wrapper = mountComponent() + await flushPromises() + + const queueButton = wrapper.findAll('button').find( + (btn) => btn.text().includes('Place campaign in a queue to send') + ) + + expect(queueButton).toBeUndefined() + }) + }) + + describe('Form State Management', () => { + it('switches between webpage and compose modes', async () => { + const wrapper = mountComponent() + await flushPromises() + + // Start in compose mode + expect(wrapper.findComponent({ name: 'CkEditorField' }).exists()).toBe(true) + + // Switch to webpage mode + const webpageRadio = wrapper.findAll('input[type="radio"]').find( + (input) => input.element.value === 'webpage' + ) + await webpageRadio.setValue(true) + await wrapper.vm.$nextTick() + + const urlInput = wrapper.find('#campaign-webpage-url') + expect(urlInput.exists()).toBe(true) + }) + + it('caches HTML content when switching modes', async () => { + const wrapper = mountComponent() + await flushPromises() + + // Add HTML content in compose mode + const ckEditor = wrapper.findComponent({ name: 'CkEditorField' }) + await ckEditor.vm.$emit('update:modelValue', 'Cached content
') + await wrapper.vm.$nextTick() + + // Switch to webpage mode + const webpageRadio = wrapper.findAll('input[type="radio"]').find( + (input) => input.element.value === 'webpage' + ) + await webpageRadio.setValue(true) + await wrapper.vm.$nextTick() + + // Switch back to compose mode + const composeRadio = wrapper.findAll('input[type="radio"]').find( + (input) => input.element.value === 'compose' + ) + await composeRadio.setValue(true) + await wrapper.vm.$nextTick() + + // Content should be restored (this tests the cache functionality) + expect(wrapper.vm.form.composeHtml).toBe('Cached content
') + }) + + it('extracts webpage URL from [URL:...] token', async () => { + routeMock.name = 'campaign-edit' + routeMock.params = { campaignId: '42' } + + campaignClientMock.getCampaign.mockResolvedValue({ + id: 42, + messageContent: { + subject: 'Campaign', + text: '[URL:https://example.com/page]', + footer: '', + }, + messageOptions: {}, + messageFormat: { htmlFormated: false, sendFormat: 'html' }, + messageSchedule: {}, + messageMetadata: { status: 'draft' }, + }) + + const wrapper = mountComponent() + await flushPromises() + + expect(wrapper.vm.form.webpageUrl).toBe('https://example.com/page') + expect(wrapper.vm.form.composeMode).toBe('webpage') + }) + }) + + describe('Template Loading', () => { + it('loads templates on mount', async () => { + const wrapper = mountComponent() + await flushPromises() + + expect(templateClientMock.getTemplates).toHaveBeenCalledWith(0, 1000) + }) + + it('displays loaded templates in dropdown', async () => { + const wrapper = mountComponent() + await flushPromises() + + // Navigate to format step where template dropdown is shown + const stepButtons = wrapper.findAll('button') + const step2Button = stepButtons.find((btn) => btn.text().includes('2')) + await step2Button.trigger('click') + await wrapper.vm.$nextTick() + + const templateSelect = wrapper.find('#campaign-template') + expect(templateSelect.exists()).toBe(true) + + const options = templateSelect.findAll('option') + expect(options.some((opt) => opt.text() === 'Template 1')).toBe(true) + expect(options.some((opt) => opt.text() === 'Template 2')).toBe(true) + }) + + it('handles template loading error gracefully', async () => { + templateClientMock.getTemplates.mockRejectedValue(new Error('Failed to load')) + + const wrapper = mountComponent() + await flushPromises() + + // Navigate to format step + const stepButtons = wrapper.findAll('button') + const step2Button = stepButtons.find((btn) => btn.text().includes('2')) + await step2Button.trigger('click') + await wrapper.vm.$nextTick() + + // Component should render without templates even if loading fails + const templateSelect = wrapper.find('#campaign-template') + expect(templateSelect.exists()).toBe(true) + }) + }) + + describe('List Synchronization', () => { + it('associates selected lists with campaign on save', async () => { + routeMock.name = 'campaign-edit' + routeMock.params = { campaignId: '42' } + + listMessagesClientMock.getListsByMessage.mockResolvedValue({ + items: [], + }) + + const wrapper = mountComponent() + await flushPromises() + + // Go to lists step + const stepButtons = wrapper.findAll('button') + const step4Button = stepButtons.find((btn) => btn.text().includes('4')) + await step4Button.trigger('click') + await wrapper.vm.$nextTick() + + // Select a list + const listCheckboxes = wrapper.findAll('input[type="checkbox"]') + if (listCheckboxes.length > 0) { + await listCheckboxes[0].setValue(true) + } + + // Save campaign + const saveButton = wrapper.findAll('button').find( + (btn) => btn.text().includes('Save and continue editing') + ) + await saveButton.trigger('click') + await flushPromises() + + expect(listMessagesClientMock.associateMessageWithList).toHaveBeenCalled() + }) + }) + + describe('Back to Campaigns Link', () => { + it('displays back to campaigns link', async () => { + const wrapper = mountComponent() + await flushPromises() + + const backLink = wrapper.findComponent({ name: 'RouterLink' }) + expect(backLink.exists()).toBe(true) + expect(backLink.text()).toContain('Back to Campaigns') + }) + + it('links to campaigns route', async () => { + const wrapper = mountComponent() + await flushPromises() + + const backLink = wrapper.findComponent({ name: 'RouterLink' }) + expect(backLink.props('to')).toBe('/campaigns') + }) + }) +}) + diff --git a/tests/Unit/assets/vue/views/CampaignsView.spec.js b/tests/Unit/assets/vue/views/CampaignsView.spec.js new file mode 100644 index 0000000..a0877bc --- /dev/null +++ b/tests/Unit/assets/vue/views/CampaignsView.spec.js @@ -0,0 +1,48 @@ +// tests/views/CampaignsView.spec.js + +import { describe, it, expect } from 'vitest' +import { mount } from '@vue/test-utils' +import CampaignsView from '../../../../../assets/vue/views/CampaignsView.vue' + +const AdminLayoutStub = { + template: ` +Hello World
', + text: 'Hello World', + }) + + vi.spyOn(api.templateClient, 'updateTemplate').mockResolvedValue({}) + vi.spyOn(api.templateClient, 'createTemplate').mockResolvedValue({ + id: 2, + }) + }) + + const mountComponent = async () => { + const wrapper = mount(TemplateEditView, { + global: { + stubs: { + AdminLayout: { + template: '