Skip to content

G
gitlab-ce
Commit e2a6b74f authored by peterhegman's avatar peterhegman
Browse files
Options

Update skeleton loader snapshot 

To account for changes to `GLSkeletonLoader`
parent 7d6a27e2
Hide whitespace changes
Inline Side-by-side
Showing with 414 additions and 313 deletions
spec/frontend/vue_shared/components/resizable_chart/__snapshots__/skeleton_loader_spec.js.snap
View file @ e2a6b74f
// 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"
<svg
class="gl-skeleton-loader"
preserveAspectRatio="xMidYMid meet"
version="1.1"
viewBox="0 0 400 130"
>
<rect
data-testid="skeleton-chart-grid"
height="1px"
width="100%"
clip-path="url(#null-idClip)"
height="130"
style="fill: url(#null-idGradient);"
width="400"
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>
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="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%"
/>
</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=""
height="130"
preserveaspectratio="xMidYMid meet"
uniquekey=""
width="400"
<svg
class="gl-skeleton-loader"
preserveAspectRatio="xMidYMid meet"
version="1.1"
viewBox="0 0 400 130"
>
<rect
data-testid="skeleton-chart-grid"
height="1px"
width="100%"
clip-path="url(#-idClip)"
height="130"
style="fill: url(#-idGradient);"
width="400"
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>
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>
`;
spec/frontend/vue_shared/components/resizable_chart/skeleton_loader_spec.js
View file @ e2a6b74f
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,
});
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7