1 files changed, 112 insertions, 0 deletions
diff --git a/spec/frontend/admin/broadcast_messages/components/base_spec.js b/spec/frontend/admin/broadcast_messages/components/base_spec.js
new file mode 100644
index 00000000000..020e1c1d7c1
--- /dev/null
+++ b/spec/frontend/admin/broadcast_messages/components/base_spec.js
@@ -0,0 +1,112 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlPagination } from '@gitlab/ui';
+import AxiosMockAdapter from 'axios-mock-adapter';
+import { TEST_HOST } from 'helpers/test_constants';
+import waitForPromises from 'helpers/wait_for_promises';
+import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
+import { createAlert } from '~/flash';
+import axios from '~/lib/utils/axios_utils';
+import { redirectTo } from '~/lib/utils/url_utility';
+import BroadcastMessagesBase from '~/admin/broadcast_messages/components/base.vue';
+import MessagesTable from '~/admin/broadcast_messages/components/messages_table.vue';
+import { generateMockMessages, MOCK_MESSAGES } from '../mock_data';
+
+jest.mock('~/flash');
+jest.mock('~/lib/utils/url_utility');
+
+describe('BroadcastMessagesBase', () => {
+  let wrapper;
+  let axiosMock;
+
+  useMockLocationHelper();
+
+  const findTable = () => wrapper.findComponent(MessagesTable);
+  const findPagination = () => wrapper.findComponent(GlPagination);
+
+  function createComponent(props = {}) {
+    wrapper = shallowMount(BroadcastMessagesBase, {
+      propsData: {
+        page: 1,
+        messagesCount: MOCK_MESSAGES.length,
+        messages: MOCK_MESSAGES,
+        ...props,
+      },
+    });
+  }
+
+  beforeEach(() => {
+    axiosMock = new AxiosMockAdapter(axios);
+  });
+
+  afterEach(() => {
+    axiosMock.restore();
+    wrapper.destroy();
+  });
+
+  it('renders the table and pagination when there are existing messages', () => {
+    createComponent();
+
+    expect(findTable().exists()).toBe(true);
+    expect(findPagination().exists()).toBe(true);
+  });
+
+  it('does not render the table when there are no visible messages', () => {
+    createComponent({ messages: [] });
+
+    expect(findTable().exists()).toBe(false);
+    expect(findPagination().exists()).toBe(true);
+  });
+
+  it('does not remove a deleted message if it was not in visibleMessages', async () => {
+    createComponent();
+
+    findTable().vm.$emit('delete-message', -1);
+    await waitForPromises();
+
+    expect(axiosMock.history.delete).toHaveLength(0);
+    expect(wrapper.vm.visibleMessages.length).toBe(MOCK_MESSAGES.length);
+  });
+
+  it('does not remove a deleted message if the request fails', async () => {
+    createComponent();
+    const { id, delete_path } = MOCK_MESSAGES[0];
+    axiosMock.onDelete(delete_path).replyOnce(500);
+
+    findTable().vm.$emit('delete-message', id);
+    await waitForPromises();
+
+    expect(wrapper.vm.visibleMessages.find((m) => m.id === id)).not.toBeUndefined();
+    expect(createAlert).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: BroadcastMessagesBase.i18n.deleteError,
+      }),
+    );
+  });
+
+  it('removes a deleted message from visibleMessages on success', async () => {
+    createComponent();
+    const { id, delete_path } = MOCK_MESSAGES[0];
+    axiosMock.onDelete(delete_path).replyOnce(200);
+
+    findTable().vm.$emit('delete-message', id);
+    await waitForPromises();
+
+    expect(wrapper.vm.visibleMessages.find((m) => m.id === id)).toBeUndefined();
+    expect(wrapper.vm.totalMessages).toBe(MOCK_MESSAGES.length - 1);
+  });
+
+  it('redirects to the first page when totalMessages changes from 21 to 20', async () => {
+    window.location.pathname = `${TEST_HOST}/admin/broadcast_messages`;
+
+    const messages = generateMockMessages(21);
+    const { id, delete_path } = messages[0];
+    createComponent({ messages, messagesCount: messages.length });
+
+    axiosMock.onDelete(delete_path).replyOnce(200);
+
+    findTable().vm.$emit('delete-message', id);
+    await waitForPromises();
+
+    expect(redirectTo).toHaveBeenCalledWith(`${TEST_HOST}/admin/broadcast_messages?page=1`);
+  });
+});