Merge branch...

Merge branch '872-merge-glskeletonloading-into-glskeletonloader-gitlab-ui-integration-test' into 'master'

GitLab UI: 872-merge-glskeletonloading-into-glskeletonloader integration test

See merge request gitlab-org/gitlab!38663

package.json

@@ -43,7 +43,7 @@
     "@babel/preset-env": "^7.10.1",
     "@gitlab/at.js": "1.5.5",
     "@gitlab/svgs": "1.161.0",
-    "@gitlab/ui": "20.9.1",
+    "@gitlab/ui": "20.10.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3-1",
     "@sentry/browser": "^5.10.2",

spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Resizable Skeleton Loader default setup renders the bars, labels, and grid with correct position, size, and rx percentages 1`] = `
-<gl-skeleton-loader-stub
-  baseurl=""
+<svg
+  class="gl-skeleton-loader"
+  preserveAspectRatio="xMidYMid meet"
+  version="1.1"
+  viewBox="0 0 400 130"
+>
+  <rect
+    clip-path="url(#null-idClip)"
     height="130"
-  preserveaspectratio="xMidYMid meet"
+    style="fill: url(#null-idGradient);"
     width="400"
->
+    x="0"
+    y="0"
+  />
+  <defs>
+    <clippath
+      id="null-idClip"
+    >
       <rect
         data-testid="skeleton-chart-grid"
         height="1px"
@@ -158,17 +170,67 @@ exports[`Resizable Skeleton Loader default setup renders the bars, labels, and g
         x="89.125%"
         y="95%"
       />
-</gl-skeleton-loader-stub>
+    </clippath>
+    <lineargradient
+      id="null-idGradient"
+    >
+      <stop
+        class="primary-stop"
+        offset="0%"
+      >
+        <animate
+          attributeName="offset"
+          dur="1s"
+          repeatCount="indefinite"
+          values="-2; 1"
+        />
+      </stop>
+      <stop
+        class="secondary-stop"
+        offset="50%"
+      >
+        <animate
+          attributeName="offset"
+          dur="1s"
+          repeatCount="indefinite"
+          values="-1.5; 1.5"
+        />
+      </stop>
+      <stop
+        class="primary-stop"
+        offset="100%"
+      >
+        <animate
+          attributeName="offset"
+          dur="1s"
+          repeatCount="indefinite"
+          values="-1; 2"
+        />
+      </stop>
+    </lineargradient>
+  </defs>
+</svg>
 `;
 
 exports[`Resizable Skeleton Loader with custom settings renders the correct position, and size percentages for bars and labels with different settings 1`] = `
-<gl-skeleton-loader-stub
-  baseurl=""
+<svg
+  class="gl-skeleton-loader"
+  preserveAspectRatio="xMidYMid meet"
+  version="1.1"
+  viewBox="0 0 400 130"
+>
+  <rect
+    clip-path="url(#-idClip)"
     height="130"
-  preserveaspectratio="xMidYMid meet"
-  uniquekey=""
+    style="fill: url(#-idGradient);"
     width="400"
->
+    x="0"
+    y="0"
+  />
+  <defs>
+    <clippath
+      id="-idClip"
+    >
       <rect
         data-testid="skeleton-chart-grid"
         height="1px"
@@ -320,5 +382,44 @@ exports[`Resizable Skeleton Loader with custom settings renders the correct posi
         x="88.9375%"
         y="98%"
       />
-</gl-skeleton-loader-stub>
+    </clippath>
+    <lineargradient
+      id="-idGradient"
+    >
+      <stop
+        class="primary-stop"
+        offset="0%"
+      >
+        <animate
+          attributeName="offset"
+          dur="1s"
+          repeatCount="indefinite"
+          values="-2; 1"
+        />
+      </stop>
+      <stop
+        class="secondary-stop"
+        offset="50%"
+      >
+        <animate
+          attributeName="offset"
+          dur="1s"
+          repeatCount="indefinite"
+          values="-1.5; 1.5"
+        />
+      </stop>
+      <stop
+        class="primary-stop"
+        offset="100%"
+      >
+        <animate
+          attributeName="offset"
+          dur="1s"
+          repeatCount="indefinite"
+          values="-1; 2"
+        />
+      </stop>
+    </lineargradient>
+  </defs>
+</svg>
 `;

spec/frontend/vue_shared/components/resizable_chart/skeleton_loader_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import ChartSkeletonLoader from '~/vue_shared/components/resizable_chart/skeleton_loader.vue';
 
 describe('Resizable Skeleton Loader', () => {
   let wrapper;
 
   const createComponent = (propsData = {}) => {
-    wrapper = shallowMount(ChartSkeletonLoader, {
+    wrapper = mount(ChartSkeletonLoader, {
       propsData,
     });
   };

yarn.lock

@@ -848,10 +848,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.161.0.tgz#661e8d19862dfba0e4c558e2eb6d64b402c1453e"
   integrity sha512-qsbboEICn08ZoEoAX/TuYygsFaXlzsCY+CfmdOzqvJbOdfHhVXmrJBxd2hP2qqjTZm2PkbRRmn+03+ce1jvatQ==
 
-"@gitlab/ui@20.9.1":
-  version "20.9.1"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-20.9.1.tgz#1e5960102a0c41925a531d6b8d00072b4717da54"
-  integrity sha512-6C03BakNqharsDVChnIYzMbp0vj4syfoo4YDxJ1Ktfev8wq4gy5HrcoZt5dgNNXEfmwbyFnJlXaKBNDlLpbmVA==
+"@gitlab/ui@20.10.0":
+  version "20.10.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-20.10.0.tgz#5efdb5394d7cc8c95ce4bc5ec5b85d33e15b41d6"
+  integrity sha512-A6SDIZb7Vgj+k5iYKNLMYOp61bWFhjtsab2u3Z32sgx7GkOIZo5dB9ILJHBlLvZ5oOfQ/7Ch+3FmhGxsDjRIuQ==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"