2 files changed, 37 insertions, 26 deletions

diff --git a/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap b/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap
index eb9d4faa964..4b1346925cc 100644
--- a/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap
+++ b/spec/frontend/packages/shared/components/__snapshots__/package_list_row_spec.js.snap
@@ -14,22 +14,23 @@ exports[`packages_list_row renders 1`] = `
       class="gl-display-flex gl-xs-flex-direction-column gl-justify-content-space-between gl-align-items-stretch gl-flex-fill-1"
     >
       <div
-        class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3"
+        class="gl-display-flex gl-flex-direction-column gl-justify-content-space-between gl-xs-mb-3 gl-min-w-0 gl-flex-grow-1"
       >
         <div
-          class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6"
+          class="gl-display-flex gl-align-items-center gl-text-body gl-font-weight-bold gl-min-h-6 gl-min-w-0"
         >
           <div
-            class="gl-display-flex gl-align-items-center gl-mr-3"
+            class="gl-display-flex gl-align-items-center gl-mr-3 gl-min-w-0"
           >
             <gl-link-stub
-              class="gl-text-body"
+              class="gl-text-body gl-min-w-0"
               data-qa-selector="package_link"
               href="foo"
             >
-              
-        Test package
-      
+              <gl-truncate-stub
+                position="end"
+                text="Test package"
+              />
             </gl-link-stub>
              
             <!---->
@@ -39,7 +40,7 @@ exports[`packages_list_row renders 1`] = `
         </div>
          
         <div
-          class="gl-text-gray-500 gl-mt-1 gl-min-h-6"
+          class="gl-text-gray-500 gl-mt-1 gl-min-h-6 gl-min-w-0 gl-flex-fill-1"
         >
           <div
             class="gl-display-flex"
@@ -54,19 +55,20 @@ exports[`packages_list_row renders 1`] = `
               class="gl-display-flex gl-align-items-center"
             >
               <gl-icon-stub
-                class="gl-ml-3 gl-mr-2"
+                class="gl-ml-3 gl-mr-2 gl-min-w-0"
                 name="review-list"
                 size="16"
               />
                
               <gl-link-stub
-                class="gl-text-body"
+                class="gl-text-body gl-min-w-0"
                 data-testid="packages-row-project"
                 href="/foo/bar/baz"
               >
-                
-          
-        
+                <gl-truncate-stub
+                  position="end"
+                  text="foo/bar/baz"
+                />
               </gl-link-stub>
             </div>
              
@@ -89,7 +91,7 @@ exports[`packages_list_row renders 1`] = `
       </div>
        
       <div
-        class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500"
+        class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-gray-500 gl-flex-shrink-0"
       >
         <div
           class="gl-sm-text-body gl-sm-font-weight-bold gl-min-h-6"
diff --git a/spec/frontend/packages/shared/components/packages_list_loader_spec.js b/spec/frontend/packages/shared/components/packages_list_loader_spec.js
index c8c2e2a4ba4..115a3a7095d 100644
--- a/spec/frontend/packages/shared/components/packages_list_loader_spec.js
+++ b/spec/frontend/packages/shared/components/packages_list_loader_spec.js
@@ -12,8 +12,8 @@ describe('PackagesListLoader', () => {
     });
   };
 
-  const getShapes = () => wrapper.vm.desktopShapes;
-  const findSquareButton = () => wrapper.find({ ref: 'button-loader' });
+  const findDesktopShapes = () => wrapper.find('[data-testid="desktop-loader"]');
+  const findMobileShapes = () => wrapper.find('[data-testid="mobile-loader"]');
 
   beforeEach(createComponent);
 
@@ -22,21 +22,30 @@ describe('PackagesListLoader', () => {
     wrapper = null;
   });
 
-  describe('when used for projects', () => {
-    it('should return 5 rects with last one being a square', () => {
-      expect(getShapes()).toHaveLength(5);
-      expect(findSquareButton().exists()).toBe(true);
+  describe('desktop loader', () => {
+    it('produces the right loader', () => {
+      expect(findDesktopShapes().findAll('rect[width="1000"]')).toHaveLength(20);
+    });
+
+    it('has the correct classes', () => {
+      expect(findDesktopShapes().classes()).toEqual([
+        'gl-display-none',
+        'gl-display-sm-flex',
+        'gl-flex-direction-column',
+      ]);
     });
   });
 
-  describe('when used for groups', () => {
-    beforeEach(() => {
-      createComponent({ isGroup: true });
+  describe('mobile loader', () => {
+    it('produces the right loader', () => {
+      expect(findMobileShapes().findAll('rect[height="170"]')).toHaveLength(5);
     });
 
-    it('should return 5 rects with no square', () => {
-      expect(getShapes()).toHaveLength(5);
-      expect(findSquareButton().exists()).toBe(false);
+    it('has the correct classes', () => {
+      expect(findMobileShapes().classes()).toEqual([
+        'gl-flex-direction-column',
+        'gl-display-sm-none',
+      ]);
     });
   });
 });