test: add QRCode unit testing (#6441)
selicens
GitHub
parent
637656b0c3
commit
bf97057c2c
|
|
@ -0,0 +1,113 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/qrcode/demo/base.vue correctly 1`] = `
|
||||
<div style="width: 160px; height: 160px;" class="css-dev-only-do-not-override-1gbr67s ant-qrcode">
|
||||
<!----><canvas style="height: 134px; width: 134px;"></canvas>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/qrcode/demo/customColor.vue correctly 1`] = `
|
||||
<div class="ant-space css-dev-only-do-not-override-1gbr67s ant-space-horizontal ant-space-align-center">
|
||||
<div class="ant-space-item" style="margin-right: 8px;">
|
||||
<div>
|
||||
<div style="width: 160px; height: 160px;" class="css-dev-only-do-not-override-1gbr67s ant-qrcode">
|
||||
<!----><canvas style="height: 134px; width: 134px;"></canvas>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div>
|
||||
<div style="width: 160px; height: 160px;" class="css-dev-only-do-not-override-1gbr67s ant-qrcode">
|
||||
<!----><canvas style="height: 134px; width: 134px;"></canvas>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/qrcode/demo/customSize.vue correctly 1`] = `
|
||||
<div class="ant-btn-group css-dev-only-do-not-override-1gbr67s"><button class="css-dev-only-do-not-override-1gbr67s ant-btn ant-btn-default" type="button"><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span><span>samll</span></button><button class="css-dev-only-do-not-override-1gbr67s ant-btn ant-btn-default" type="button"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span><span>large</span></button></div>
|
||||
<br>
|
||||
<br>
|
||||
<div style="width: 160px; height: 160px;" class="css-dev-only-do-not-override-1gbr67s ant-qrcode">
|
||||
<!----><canvas style="height: 134px; width: 134px;"></canvas><img src="https://www.antdv.com/assets/logo.1ef800a8.svg" style="display: none;">
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/qrcode/demo/download.vue correctly 1`] = `
|
||||
<div style="width: 160px; height: 160px;" class="css-dev-only-do-not-override-1gbr67s ant-qrcode">
|
||||
<!----><canvas style="height: 134px; width: 134px;"></canvas>
|
||||
<!---->
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button class="css-dev-only-do-not-override-1gbr67s ant-btn ant-btn-primary" type="button">
|
||||
<!----><span>Downlaod</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/qrcode/demo/errorLevel.vue correctly 1`] = `
|
||||
<div style="width: 160px; height: 160px;" class="css-dev-only-do-not-override-1gbr67s ant-qrcode">
|
||||
<!----><canvas style="height: 134px; width: 134px;"></canvas>
|
||||
<!---->
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="ant-segmented css-dev-only-do-not-override-1gbr67s">
|
||||
<div class="ant-segmented-group">
|
||||
<!----><label class="ant-segmented-item ant-segmented-item-selected"><input class="ant-segmented-item-input" type="radio">
|
||||
<div class="ant-segmented-item-label" title="L">L</div>
|
||||
</label><label class="ant-segmented-item"><input class="ant-segmented-item-input" type="radio">
|
||||
<div class="ant-segmented-item-label" title="M">M</div>
|
||||
</label><label class="ant-segmented-item"><input class="ant-segmented-item-input" type="radio">
|
||||
<div class="ant-segmented-item-label" title="Q">Q</div>
|
||||
</label><label class="ant-segmented-item"><input class="ant-segmented-item-input" type="radio">
|
||||
<div class="ant-segmented-item-label" title="H">H</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/qrcode/demo/icon.vue correctly 1`] = `
|
||||
<div style="width: 160px; height: 160px;" class="css-dev-only-do-not-override-1gbr67s ant-qrcode">
|
||||
<!----><canvas style="height: 134px; width: 134px;"></canvas><img src="https://www.antdv.com/assets/logo.1ef800a8.svg" style="display: none;">
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/qrcode/demo/popover.vue correctly 1`] = `<img width="100" height="100" src="https://aliyuncdn.antdv.com/logo.png">`;
|
||||
|
||||
exports[`renders ./components/qrcode/demo/status.vue correctly 1`] = `
|
||||
<div class="ant-space css-dev-only-do-not-override-1gbr67s ant-space-horizontal ant-space-align-center">
|
||||
<div class="ant-space-item" style="margin-right: 8px;">
|
||||
<div>
|
||||
<div style="width: 160px; height: 160px;" class="css-dev-only-do-not-override-1gbr67s ant-qrcode">
|
||||
<div class="ant-qrcode-mask">
|
||||
<div class="css-dev-only-do-not-override-1gbr67s ant-spin ant-spin-spinning" aria-live="polite" aria-busy="true"><span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
|
||||
<!---->
|
||||
</div>
|
||||
<!---->
|
||||
</div><canvas style="height: 134px; width: 134px;"></canvas>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="ant-space-item">
|
||||
<div>
|
||||
<div style="width: 160px; height: 160px;" class="css-dev-only-do-not-override-1gbr67s ant-qrcode">
|
||||
<div class="ant-qrcode-mask">
|
||||
<!---->
|
||||
<p class="ant-qrcode-expired">QR code expired</p><button class="css-dev-only-do-not-override-1gbr67s ant-btn ant-btn-link" type="button"><span role="img" aria-label="reload" class="anticon anticon-reload"><svg focusable="false" class="" data-icon="reload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"></path></svg></span><span>Refresh</span></button>
|
||||
</div><canvas style="height: 134px; width: 134px;"></canvas>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,91 @@
|
|||
import { ref } from 'vue';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import QRCode from '..';
|
||||
|
||||
describe('QRCode test', () => {
|
||||
it('should correct render', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return <QRCode value="test" />;
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.ant-qrcode')).toBeTruthy();
|
||||
expect(wrapper.find('canvas')).toBeTruthy();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('support custom icon', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return <QRCode value="test" icon="test" />;
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.ant-qrcode')).toBeTruthy();
|
||||
expect(wrapper.find('image')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('support custom size', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return <QRCode value="test" size={100} />;
|
||||
},
|
||||
});
|
||||
expect(wrapper.vm.$el.style.width).toBe('100px');
|
||||
expect(wrapper.vm.$el.style.height).toBe('100px');
|
||||
});
|
||||
|
||||
it('support refresh', async () => {
|
||||
const refresh = jest.fn();
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return <QRCode value="test" status="expired" onRefresh={refresh} />;
|
||||
},
|
||||
});
|
||||
await wrapper.find('.ant-btn-link').trigger('click');
|
||||
expect(refresh).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('support loading', async () => {
|
||||
const Demo = () => {
|
||||
const status = ref('active');
|
||||
const setStatus = val => (status.value = val);
|
||||
return (
|
||||
<>
|
||||
<QRCode value="test" status={status.value} />
|
||||
<button type="button" onClick={() => setStatus('loading')}>
|
||||
set loading
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return <Demo />;
|
||||
},
|
||||
});
|
||||
await wrapper.find('button').trigger('click');
|
||||
expect(wrapper.find('.ant-spin-spinning')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('support bordered', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return <QRCode value="test" bordered={false} />;
|
||||
},
|
||||
});
|
||||
expect(wrapper.vm.$el.__vnode.el.className).toContain('-borderless');
|
||||
});
|
||||
|
||||
it('should console Error when icon exist && errorLevel is `L`', () => {
|
||||
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
mount({
|
||||
render() {
|
||||
return <QRCode value="test" icon="test" errorLevel="L" />;
|
||||
},
|
||||
});
|
||||
expect(errSpy).toHaveBeenCalledWith(
|
||||
'Warning: [ant-design-vue: QRCode] ErrorLevel `L` is not recommended to be used with `icon`, for scanning result would be affected by low level.',
|
||||
);
|
||||
errSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue