1 files changed, 44 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/papa_parse_alert_spec.js b/spec/frontend/vue_shared/components/papa_parse_alert_spec.js
new file mode 100644
index 00000000000..9be2de17d01
--- /dev/null
+++ b/spec/frontend/vue_shared/components/papa_parse_alert_spec.js
@@ -0,0 +1,44 @@
+import { GlAlert } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import PapaParseAlert from '~/vue_shared/components/papa_parse_alert.vue';
+
+describe('app/assets/javascripts/vue_shared/components/papa_parse_alert.vue', () => {
+  let wrapper;
+
+  const createComponent = ({ errorMessages } = {}) => {
+    wrapper = shallowMount(PapaParseAlert, {
+      propsData: {
+        papaParseErrors: errorMessages,
+      },
+    });
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render alert with correct props', async () => {
+    createComponent({ errorMessages: [{ code: 'MissingQuotes' }] });
+    await nextTick;
+
+    expect(findAlert().props()).toMatchObject({
+      variant: 'danger',
+    });
+    expect(findAlert().text()).toContain(
+      'Failed to render the CSV file for the following reasons:',
+    );
+    expect(findAlert().text()).toContain('Quoted field unterminated');
+  });
+
+  it('should render original message if no translation available', async () => {
+    createComponent({
+      errorMessages: [{ code: 'NotDefined', message: 'Error code is undefined' }],
+    });
+    await nextTick;
+
+    expect(findAlert().text()).toContain('Error code is undefined');
+  });
+});