diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap')
| -rw-r--r-- | spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap | 739 |
1 files changed, 424 insertions, 315 deletions
diff --git a/spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap b/spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap index 103b53cb280..3990248d021 100644 --- a/spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap +++ b/spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap @@ -1,324 +1,433 @@ // 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="" - height="130" - preserveaspectratio="xMidYMid meet" - width="400" +<div + class="gl-px-8" > - <rect - data-testid="skeleton-chart-grid" - height="1px" - width="100%" - x="0" - y="30%" - /> - <rect - data-testid="skeleton-chart-grid" - height="1px" - width="100%" - x="0" - y="60%" - /> - <rect - data-testid="skeleton-chart-grid" - height="1px" - width="100%" - x="0" - y="90%" - /> - - <rect - data-testid="skeleton-chart-bar" - height="5%" - rx="0.4%" - width="6%" - x="5.875%" - y="85%" - /> - <rect - data-testid="skeleton-chart-bar" - height="7%" - rx="0.4%" - width="6%" - x="17.625%" - y="83%" - /> - <rect - data-testid="skeleton-chart-bar" - height="9%" - rx="0.4%" - width="6%" - x="29.375%" - y="81%" - /> - <rect - data-testid="skeleton-chart-bar" - height="14%" - rx="0.4%" - width="6%" - x="41.125%" - y="76%" - /> - <rect - data-testid="skeleton-chart-bar" - height="21%" - rx="0.4%" - width="6%" - x="52.875%" - y="69%" - /> - <rect - data-testid="skeleton-chart-bar" - height="35%" - rx="0.4%" - width="6%" - x="64.625%" - y="55%" - /> - <rect - data-testid="skeleton-chart-bar" - height="50%" - rx="0.4%" - width="6%" - x="76.375%" - y="40%" - /> - <rect - data-testid="skeleton-chart-bar" - height="80%" - rx="0.4%" - width="6%" - x="88.125%" - y="10%" - /> - - <rect - data-testid="skeleton-chart-label" - height="5%" - rx="0.4%" - width="4%" - x="6.875%" - y="95%" - /> - <rect - data-testid="skeleton-chart-label" - height="5%" - rx="0.4%" - width="4%" - x="18.625%" - y="95%" - /> - <rect - data-testid="skeleton-chart-label" - height="5%" - rx="0.4%" - width="4%" - x="30.375%" - y="95%" - /> - <rect - data-testid="skeleton-chart-label" - height="5%" - rx="0.4%" - width="4%" - x="42.125%" - y="95%" - /> - <rect - data-testid="skeleton-chart-label" - height="5%" - rx="0.4%" - width="4%" - x="53.875%" - y="95%" - /> - <rect - data-testid="skeleton-chart-label" - height="5%" - rx="0.4%" - width="4%" - x="65.625%" - y="95%" - /> - <rect - data-testid="skeleton-chart-label" - height="5%" - rx="0.4%" - width="4%" - x="77.375%" - y="95%" - /> - <rect - data-testid="skeleton-chart-label" - height="5%" - rx="0.4%" - width="4%" - x="89.125%" - y="95%" - /> -</gl-skeleton-loader-stub> + <svg + class="gl-skeleton-loader" + preserveAspectRatio="xMidYMid meet" + version="1.1" + viewBox="0 0 400 130" + > + <rect + clip-path="url(#null-idClip)" + height="130" + style="fill: url(#null-idGradient);" + width="400" + x="0" + y="0" + /> + <defs> + <clippath + id="null-idClip" + > + <rect + data-testid="skeleton-chart-grid" + height="1px" + width="100%" + x="0" + y="30%" + /> + <rect + data-testid="skeleton-chart-grid" + height="1px" + width="100%" + x="0" + y="60%" + /> + <rect + data-testid="skeleton-chart-grid" + height="1px" + width="100%" + x="0" + y="90%" + /> + + <rect + data-testid="skeleton-chart-bar" + height="5%" + rx="0.4%" + width="4%" + x="6%" + y="85%" + /> + <rect + data-testid="skeleton-chart-bar" + height="7%" + rx="0.4%" + width="4%" + x="18%" + y="83%" + /> + <rect + data-testid="skeleton-chart-bar" + height="9%" + rx="0.4%" + width="4%" + x="30%" + y="81%" + /> + <rect + data-testid="skeleton-chart-bar" + height="14%" + rx="0.4%" + width="4%" + x="42%" + y="76%" + /> + <rect + data-testid="skeleton-chart-bar" + height="21%" + rx="0.4%" + width="4%" + x="54%" + y="69%" + /> + <rect + data-testid="skeleton-chart-bar" + height="35%" + rx="0.4%" + width="4%" + x="66%" + y="55%" + /> + <rect + data-testid="skeleton-chart-bar" + height="50%" + rx="0.4%" + width="4%" + x="78%" + y="40%" + /> + <rect + data-testid="skeleton-chart-bar" + height="80%" + rx="0.4%" + width="4%" + x="90%" + y="10%" + /> + + <rect + data-testid="skeleton-chart-label" + height="3%" + rx="0.4%" + width="3%" + x="6.5%" + y="97%" + /> + <rect + data-testid="skeleton-chart-label" + height="3%" + rx="0.4%" + width="3%" + x="18.5%" + y="97%" + /> + <rect + data-testid="skeleton-chart-label" + height="3%" + rx="0.4%" + width="3%" + x="30.5%" + y="97%" + /> + <rect + data-testid="skeleton-chart-label" + height="3%" + rx="0.4%" + width="3%" + x="42.5%" + y="97%" + /> + <rect + data-testid="skeleton-chart-label" + height="3%" + rx="0.4%" + width="3%" + x="54.5%" + y="97%" + /> + <rect + data-testid="skeleton-chart-label" + height="3%" + rx="0.4%" + width="3%" + x="66.5%" + y="97%" + /> + <rect + data-testid="skeleton-chart-label" + height="3%" + rx="0.4%" + width="3%" + x="78.5%" + y="97%" + /> + <rect + data-testid="skeleton-chart-label" + height="3%" + rx="0.4%" + width="3%" + x="90.5%" + y="97%" + /> + </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> +</div> `; 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="" - height="130" - preserveaspectratio="xMidYMid meet" - uniquekey="" - width="400" +<div + class="gl-px-8" > - <rect - data-testid="skeleton-chart-grid" - height="1px" - width="100%" - x="0" - y="30%" - /> - <rect - data-testid="skeleton-chart-grid" - height="1px" - width="100%" - x="0" - y="60%" - /> - <rect - data-testid="skeleton-chart-grid" - height="1px" - width="100%" - x="0" - y="90%" - /> - - <rect - data-testid="skeleton-chart-bar" - height="5%" - rx="0.6%" - width="3%" - x="6.0625%" - y="85%" - /> - <rect - data-testid="skeleton-chart-bar" - height="7%" - rx="0.6%" - width="3%" - x="18.1875%" - y="83%" - /> - <rect - data-testid="skeleton-chart-bar" - height="9%" - rx="0.6%" - width="3%" - x="30.3125%" - y="81%" - /> - <rect - data-testid="skeleton-chart-bar" - height="14%" - rx="0.6%" - width="3%" - x="42.4375%" - y="76%" - /> - <rect - data-testid="skeleton-chart-bar" - height="21%" - rx="0.6%" - width="3%" - x="54.5625%" - y="69%" - /> - <rect - data-testid="skeleton-chart-bar" - height="35%" - rx="0.6%" - width="3%" - x="66.6875%" - y="55%" - /> - <rect - data-testid="skeleton-chart-bar" - height="50%" - rx="0.6%" - width="3%" - x="78.8125%" - y="40%" - /> - <rect - data-testid="skeleton-chart-bar" - height="80%" - rx="0.6%" - width="3%" - x="90.9375%" - y="10%" - /> - - <rect - data-testid="skeleton-chart-label" - height="2%" - rx="0.6%" - width="7%" - x="4.0625%" - y="98%" - /> - <rect - data-testid="skeleton-chart-label" - height="2%" - rx="0.6%" - width="7%" - x="16.1875%" - y="98%" - /> - <rect - data-testid="skeleton-chart-label" - height="2%" - rx="0.6%" - width="7%" - x="28.3125%" - y="98%" - /> - <rect - data-testid="skeleton-chart-label" - height="2%" - rx="0.6%" - width="7%" - x="40.4375%" - y="98%" - /> - <rect - data-testid="skeleton-chart-label" - height="2%" - rx="0.6%" - width="7%" - x="52.5625%" - y="98%" - /> - <rect - data-testid="skeleton-chart-label" - height="2%" - rx="0.6%" - width="7%" - x="64.6875%" - y="98%" - /> - <rect - data-testid="skeleton-chart-label" - height="2%" - rx="0.6%" - width="7%" - x="76.8125%" - y="98%" - /> - <rect - data-testid="skeleton-chart-label" - height="2%" - rx="0.6%" - width="7%" - x="88.9375%" - y="98%" - /> -</gl-skeleton-loader-stub> + <svg + class="gl-skeleton-loader" + preserveAspectRatio="xMidYMid meet" + version="1.1" + viewBox="0 0 400 130" + > + <rect + clip-path="url(#-idClip)" + height="130" + style="fill: url(#-idGradient);" + width="400" + x="0" + y="0" + /> + <defs> + <clippath + id="-idClip" + > + <rect + data-testid="skeleton-chart-grid" + height="1px" + width="100%" + x="0" + y="30%" + /> + <rect + data-testid="skeleton-chart-grid" + height="1px" + width="100%" + x="0" + y="60%" + /> + <rect + data-testid="skeleton-chart-grid" + height="1px" + width="100%" + x="0" + y="90%" + /> + + <rect + data-testid="skeleton-chart-bar" + height="5%" + rx="0.6%" + width="3%" + x="6.0625%" + y="85%" + /> + <rect + data-testid="skeleton-chart-bar" + height="7%" + rx="0.6%" + width="3%" + x="18.1875%" + y="83%" + /> + <rect + data-testid="skeleton-chart-bar" + height="9%" + rx="0.6%" + width="3%" + x="30.3125%" + y="81%" + /> + <rect + data-testid="skeleton-chart-bar" + height="14%" + rx="0.6%" + width="3%" + x="42.4375%" + y="76%" + /> + <rect + data-testid="skeleton-chart-bar" + height="21%" + rx="0.6%" + width="3%" + x="54.5625%" + y="69%" + /> + <rect + data-testid="skeleton-chart-bar" + height="35%" + rx="0.6%" + width="3%" + x="66.6875%" + y="55%" + /> + <rect + data-testid="skeleton-chart-bar" + height="50%" + rx="0.6%" + width="3%" + x="78.8125%" + y="40%" + /> + <rect + data-testid="skeleton-chart-bar" + height="80%" + rx="0.6%" + width="3%" + x="90.9375%" + y="10%" + /> + + <rect + data-testid="skeleton-chart-label" + height="2%" + rx="0.6%" + width="7%" + x="4.0625%" + y="98%" + /> + <rect + data-testid="skeleton-chart-label" + height="2%" + rx="0.6%" + width="7%" + x="16.1875%" + y="98%" + /> + <rect + data-testid="skeleton-chart-label" + height="2%" + rx="0.6%" + width="7%" + x="28.3125%" + y="98%" + /> + <rect + data-testid="skeleton-chart-label" + height="2%" + rx="0.6%" + width="7%" + x="40.4375%" + y="98%" + /> + <rect + data-testid="skeleton-chart-label" + height="2%" + rx="0.6%" + width="7%" + x="52.5625%" + y="98%" + /> + <rect + data-testid="skeleton-chart-label" + height="2%" + rx="0.6%" + width="7%" + x="64.6875%" + y="98%" + /> + <rect + data-testid="skeleton-chart-label" + height="2%" + rx="0.6%" + width="7%" + x="76.8125%" + y="98%" + /> + <rect + data-testid="skeleton-chart-label" + height="2%" + rx="0.6%" + width="7%" + x="88.9375%" + y="98%" + /> + </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> +</div> `; |