1 files changed, 106 insertions, 0 deletions
diff --git a/spec/frontend/packages/shared/components/package_list_row_spec.js b/spec/frontend/packages/shared/components/package_list_row_spec.js
new file mode 100644
index 00000000000..c0ae972d519
--- /dev/null
+++ b/spec/frontend/packages/shared/components/package_list_row_spec.js
@@ -0,0 +1,106 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import PackagesListRow from '~/packages/shared/components/package_list_row.vue';
+import PackageTags from '~/packages/shared/components/package_tags.vue';
+import { packageList } from '../../mock_data';
+
+describe('packages_list_row', () => {
+  let wrapper;
+  let store;
+
+  const [packageWithoutTags, packageWithTags] = packageList;
+
+  const findPackageTags = () => wrapper.find(PackageTags);
+  const findProjectLink = () => wrapper.find('[data-testid="packages-row-project"]');
+  const findDeleteButton = () => wrapper.find('[data-testid="action-delete"]');
+  const findPackageType = () => wrapper.find('[data-testid="package-type"]');
+
+  const mountComponent = ({
+    isGroup = false,
+    packageEntity = packageWithoutTags,
+    shallow = true,
+    showPackageType = true,
+    disableDelete = false,
+  } = {}) => {
+    const mountFunc = shallow ? shallowMount : mount;
+
+    wrapper = mountFunc(PackagesListRow, {
+      store,
+      propsData: {
+        packageLink: 'foo',
+        packageEntity,
+        isGroup,
+        showPackageType,
+        disableDelete,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders', () => {
+    mountComponent();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  describe('tags', () => {
+    it('renders package tags when a package has tags', () => {
+      mountComponent({ isGroup: false, packageEntity: packageWithTags });
+
+      expect(findPackageTags().exists()).toBe(true);
+    });
+
+    it('does not render when there are no tags', () => {
+      mountComponent();
+
+      expect(findPackageTags().exists()).toBe(false);
+    });
+  });
+
+  describe('when is is group', () => {
+    beforeEach(() => {
+      mountComponent({ isGroup: true });
+    });
+
+    it('has project field', () => {
+      expect(findProjectLink().exists()).toBe(true);
+    });
+  });
+
+  describe('showPackageType', () => {
+    it('shows the type when set', () => {
+      mountComponent();
+
+      expect(findPackageType().exists()).toBe(true);
+    });
+
+    it('does not show the type when not set', () => {
+      mountComponent({ showPackageType: false });
+
+      expect(findPackageType().exists()).toBe(false);
+    });
+  });
+
+  describe('deleteAvailable', () => {
+    it('does not show when not set', () => {
+      mountComponent({ disableDelete: true });
+
+      expect(findDeleteButton().exists()).toBe(false);
+    });
+  });
+
+  describe('delete event', () => {
+    beforeEach(() => mountComponent({ packageEntity: packageWithoutTags, shallow: false }));
+
+    it('emits the packageToDelete event when the delete button is clicked', () => {
+      findDeleteButton().trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.emitted('packageToDelete')).toBeTruthy();
+        expect(wrapper.emitted('packageToDelete')[0]).toEqual([packageWithoutTags]);
+      });
+    });
+  });
+});