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 | 324 |
1 files changed, 324 insertions, 0 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 new file mode 100644 index 00000000000..103b53cb280 --- /dev/null +++ b/spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap @@ -0,0 +1,324 @@ +// 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" +> + <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> +`; + +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" +> + <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> +`; |