@pequity/squirrel 5.2.2 → 5.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/chunks/component.js +4 -0
- package/dist/cjs/chunks/p-dropdown-select.js +1 -1
- package/dist/cjs/chunks/p-icon.js +2180 -0
- package/dist/cjs/chunks/string.js +13 -0
- package/dist/cjs/component.js +28 -0
- package/dist/cjs/index.js +32 -2188
- package/dist/cjs/p-input-search.js +3 -2
- package/dist/cjs/p-loading.js +4 -7
- package/dist/cjs/p-modal.js +5 -2
- package/dist/cjs/string.js +32 -11
- package/dist/cjs/useSelectList.js +1 -1
- package/dist/es/chunks/component.js +5 -0
- package/dist/es/chunks/p-dropdown-select.js +1 -1
- package/dist/es/chunks/p-icon.js +2181 -0
- package/dist/es/chunks/string.js +14 -0
- package/dist/es/component.js +27 -0
- package/dist/es/index.js +31 -2187
- package/dist/es/p-input-search.js +3 -2
- package/dist/es/p-loading.js +4 -7
- package/dist/es/p-modal.js +5 -2
- package/dist/es/string.js +32 -12
- package/dist/es/useSelectList.js +1 -1
- package/dist/squirrel/components/p-action-bar/p-action-bar.types.d.ts +3 -2
- package/dist/squirrel/utils/component.d.ts +2 -0
- package/dist/squirrel/utils/component.spec.d.ts +1 -0
- package/dist/squirrel/utils/string.d.ts +1 -0
- package/dist/squirrel/utils/string.spec.d.ts +1 -0
- package/dist/style.css +33 -33
- package/package.json +22 -27
- package/squirrel/components/p-action-bar/p-action-bar.spec.js +47 -15
- package/squirrel/components/p-action-bar/p-action-bar.stories.js +6 -0
- package/squirrel/components/p-action-bar/p-action-bar.types.ts +4 -2
- package/squirrel/components/p-action-bar/p-action-bar.vue +9 -3
- package/squirrel/components/p-alert/p-alert.spec.js +1 -1
- package/squirrel/components/p-avatar/p-avatar.spec.js +16 -1
- package/squirrel/components/p-btn/p-btn.spec.js +3 -7
- package/squirrel/components/p-card/p-card.spec.js +1 -1
- package/squirrel/components/p-checkbox/p-checkbox.spec.js +1 -1
- package/squirrel/components/p-chips/p-chips.spec.js +1 -1
- package/squirrel/components/p-close-btn/p-close-btn.spec.js +1 -1
- package/squirrel/components/p-dropdown/p-dropdown.spec.js +5 -9
- package/squirrel/components/p-dropdown-select/p-dropdown-select.spec.js +4 -5
- package/squirrel/components/p-file-upload/p-file-upload.spec.js +1 -1
- package/squirrel/components/p-icon/p-icon.spec.js +15 -29
- package/squirrel/components/p-info-icon/p-info-icon.spec.js +1 -1
- package/squirrel/components/p-inline-date-picker/p-inline-date-picker.spec.js +4 -4
- package/squirrel/components/p-input/p-input.spec.js +1 -1
- package/squirrel/components/p-input-number/p-input-number.spec.js +1 -1
- package/squirrel/components/p-input-percent/p-input-percent.spec.js +1 -1
- package/squirrel/components/p-input-search/p-input-search.spec.js +1 -1
- package/squirrel/components/p-input-search/p-input-search.vue +1 -1
- package/squirrel/components/p-link/p-link.spec.js +3 -7
- package/squirrel/components/p-loading/p-loading.spec.js +23 -23
- package/squirrel/components/p-loading/p-loading.vue +2 -7
- package/squirrel/components/p-modal/p-modal-basic.spec.js +1 -1
- package/squirrel/components/p-modal/p-modal-events.spec.js +1 -1
- package/squirrel/components/p-modal/p-modal-features.spec.js +1 -1
- package/squirrel/components/p-modal/p-modal.vue +4 -0
- package/squirrel/components/p-pagination/p-pagination.spec.js +1 -1
- package/squirrel/components/p-pagination-info/p-pagination-info.spec.js +1 -1
- package/squirrel/components/p-progress-bar/p-progess-bar.spec.js +1 -1
- package/squirrel/components/p-ring-loader/p-ring-loader.spec.js +1 -1
- package/squirrel/components/p-select/p-select.spec.js +1 -1
- package/squirrel/components/p-select-btn/p-select-btn.spec.js +1 -1
- package/squirrel/components/p-select-list/p-select-list.spec.js +4 -5
- package/squirrel/components/p-select-pill/p-select-pill.spec.js +1 -1
- package/squirrel/components/p-skeleton-loader/p-skeleton-loader.spec.js +1 -1
- package/squirrel/components/p-table/p-table.spec.js +1 -1
- package/squirrel/components/p-table-header-cell/p-filter-icon.spec.js +1 -1
- package/squirrel/components/p-table-header-cell/p-table-header-cell.spec.js +1 -1
- package/squirrel/components/p-table-loader/p-table-loader.spec.js +1 -1
- package/squirrel/components/p-table-sort/p-table-sort.spec.js +1 -1
- package/squirrel/components/p-table-td/p-table-td.spec.js +35 -1
- package/squirrel/components/p-tabs/p-tabs.spec.js +1 -1
- package/squirrel/components/p-textarea/p-textarea.spec.js +1 -1
- package/squirrel/components/p-toggle/p-toggle.spec.js +1 -1
- package/squirrel/composables/useInputClasses.spec.js +41 -0
- package/squirrel/index.spec.js +21 -0
- package/squirrel/utils/component.spec.ts +29 -0
- package/squirrel/utils/component.ts +5 -0
- package/squirrel/utils/dom.spec.js +2 -3
- package/squirrel/utils/listKeyboardNavigation.spec.js +5 -9
- package/squirrel/utils/sanitization.spec.js +1 -1
- package/squirrel/utils/{string.spec.js → string.spec.ts} +19 -1
- package/squirrel/utils/string.ts +2 -0
- package/squirrel/utils/tailwind.spec.js +27 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import PAvatar from '@squirrel/components/p-avatar/p-avatar.vue';
|
|
2
|
-
import { createWrapperFor } from '@tests/
|
|
2
|
+
import { createWrapperFor } from '@tests/vitest.helpers';
|
|
3
3
|
|
|
4
4
|
describe('PAvatar.vue', () => {
|
|
5
5
|
it('renders label when no imageSrc is provided', () => {
|
|
@@ -67,4 +67,19 @@ describe('PAvatar.vue', () => {
|
|
|
67
67
|
|
|
68
68
|
expect(wrapper.find('div.items-center').classes()).toContain('custom-label-class');
|
|
69
69
|
});
|
|
70
|
+
|
|
71
|
+
it('should reset imageBroken when imageSrc changes', async () => {
|
|
72
|
+
const wrapper = createWrapperFor(PAvatar, {
|
|
73
|
+
props: {
|
|
74
|
+
label: 'Test Label',
|
|
75
|
+
imageSrc: 'initial-src.jpg',
|
|
76
|
+
},
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
await wrapper.setData({ imageBroken: true });
|
|
80
|
+
expect(wrapper.vm.imageBroken).toBe(true);
|
|
81
|
+
|
|
82
|
+
await wrapper.setProps({ imageSrc: 'new-src.jpg' });
|
|
83
|
+
expect(wrapper.vm.imageBroken).toBe(false);
|
|
84
|
+
});
|
|
70
85
|
});
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import PBtn from '@squirrel/components/p-btn/p-btn.vue';
|
|
2
|
-
import { createWrapperFor } from '@tests/
|
|
2
|
+
import { createWrapperFor } from '@tests/vitest.helpers';
|
|
3
3
|
import { sanitizeUrl } from '@squirrel/utils/sanitization';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
vi.mock('@squirrel/utils/sanitization', () => {
|
|
6
6
|
return {
|
|
7
|
-
sanitizeUrl:
|
|
7
|
+
sanitizeUrl: vi.fn((str) => `sanitized-${str}`),
|
|
8
8
|
};
|
|
9
9
|
});
|
|
10
10
|
|
|
@@ -15,10 +15,6 @@ const ELEMENTS_MAP = {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
describe('PBtn.vue', () => {
|
|
18
|
-
afterEach(() => {
|
|
19
|
-
jest.clearAllMocks();
|
|
20
|
-
});
|
|
21
|
-
|
|
22
18
|
Object.keys(ELEMENTS_MAP).forEach((el) => {
|
|
23
19
|
const to = ELEMENTS_MAP[el];
|
|
24
20
|
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import PDropdown from '@squirrel/components/p-dropdown/p-dropdown.vue';
|
|
2
|
-
import { createWrapperFor } from '@tests/
|
|
2
|
+
import { createWrapperFor } from '@tests/vitest.helpers';
|
|
3
3
|
import { setupListKeyboardNavigation } from '@squirrel/utils/listKeyboardNavigation';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
vi.mock('@squirrel/utils/listKeyboardNavigation', () => {
|
|
6
6
|
return {
|
|
7
|
-
setupListKeyboardNavigation:
|
|
7
|
+
setupListKeyboardNavigation: vi.fn(),
|
|
8
8
|
};
|
|
9
9
|
});
|
|
10
10
|
|
|
11
|
-
const destroyFn =
|
|
12
|
-
const initFn =
|
|
11
|
+
const destroyFn = vi.fn();
|
|
12
|
+
const initFn = vi.fn();
|
|
13
13
|
|
|
14
14
|
const createMockedKbdNavigationSvc = () => {
|
|
15
15
|
return {
|
|
@@ -52,10 +52,6 @@ const createVDropdownStub = () => {
|
|
|
52
52
|
};
|
|
53
53
|
|
|
54
54
|
describe('PDropdown.vue', () => {
|
|
55
|
-
afterEach(() => {
|
|
56
|
-
jest.clearAllMocks();
|
|
57
|
-
});
|
|
58
|
-
|
|
59
55
|
it('renders correctly', async () => {
|
|
60
56
|
const wrapper = createWrapperFor(PDropdown, {
|
|
61
57
|
props: {
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import PDropdownSelect from '@squirrel/components/p-dropdown-select/p-dropdown-select.vue';
|
|
2
2
|
import filterListItems from '@squirrel/components/p-dropdown-select/p-dropdown-select.mock.json';
|
|
3
3
|
import { cloneDeep } from 'lodash-es';
|
|
4
|
-
import { createWrapperFor, sleep, waitRAF } from '@tests/
|
|
4
|
+
import { createWrapperFor, sleep, waitRAF } from '@tests/vitest.helpers';
|
|
5
5
|
import { ref } from 'vue';
|
|
6
6
|
import { useVirtualizer } from '@tanstack/vue-virtual';
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
useVirtualizer:
|
|
8
|
+
vi.mock('@tanstack/vue-virtual', () => ({
|
|
9
|
+
useVirtualizer: vi.fn(),
|
|
10
10
|
}));
|
|
11
11
|
|
|
12
12
|
const createMockedVirtualizer = (count) => {
|
|
@@ -96,13 +96,12 @@ const cleanup = async (wrapper) => {
|
|
|
96
96
|
|
|
97
97
|
describe('PDropdownSelect.vue', () => {
|
|
98
98
|
beforeEach(() => {
|
|
99
|
-
|
|
99
|
+
vi.spyOn(console, 'warn').mockImplementation(() => {});
|
|
100
100
|
});
|
|
101
101
|
|
|
102
102
|
// When using `attachTo: document.body` we have to cleanup the DOM and call `wrapper.destroy()` after each test
|
|
103
103
|
afterEach(() => {
|
|
104
104
|
document.body.innerHTML = '';
|
|
105
|
-
jest.clearAllMocks();
|
|
106
105
|
});
|
|
107
106
|
|
|
108
107
|
it('renders correctly', async () => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import PFileUpload from '@squirrel/components/p-file-upload/p-file-upload.vue';
|
|
2
|
-
import { createWrapperFor } from '@tests/
|
|
2
|
+
import { createWrapperFor } from '@tests/vitest.helpers';
|
|
3
3
|
|
|
4
4
|
const createFile = () => {
|
|
5
5
|
const file = new File(['filename'], 'filename.txt', {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import PIcon from '@squirrel/components/p-icon/p-icon.vue';
|
|
2
2
|
import { P_ICON_ALIASES } from '@squirrel/components/p-icon/p-icon.types';
|
|
3
|
-
import { createWrapperFor } from '@tests/
|
|
3
|
+
import { createWrapperFor } from '@tests/vitest.helpers';
|
|
4
4
|
|
|
5
5
|
const createWrapper = (props, attrs) => {
|
|
6
6
|
return createWrapperFor(PIcon, {
|
|
@@ -9,11 +9,6 @@ const createWrapper = (props, attrs) => {
|
|
|
9
9
|
...props,
|
|
10
10
|
},
|
|
11
11
|
attrs,
|
|
12
|
-
global: {
|
|
13
|
-
stubs: {
|
|
14
|
-
'iconify-icon': true,
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
12
|
});
|
|
18
13
|
};
|
|
19
14
|
|
|
@@ -23,43 +18,34 @@ describe('PIcon.vue', () => {
|
|
|
23
18
|
icon: 'ant-design:build-twotone',
|
|
24
19
|
});
|
|
25
20
|
|
|
26
|
-
const icon = wrapper.findComponent('iconify-icon
|
|
21
|
+
const icon = wrapper.findComponent('iconify-icon');
|
|
27
22
|
|
|
28
23
|
expect(icon.exists()).toBe(true);
|
|
29
|
-
expect(icon.
|
|
24
|
+
expect(icon.props().icon).toBe('ant-design:build-twotone');
|
|
30
25
|
});
|
|
31
26
|
|
|
32
27
|
it('passes arbitrary attrs to the icon component', async () => {
|
|
33
28
|
const wrapper = createWrapper({}, { 'data-test': 'test' });
|
|
34
29
|
|
|
35
|
-
const icon = wrapper.findComponent('iconify-icon
|
|
30
|
+
const icon = wrapper.findComponent('iconify-icon');
|
|
36
31
|
|
|
37
32
|
expect(icon.attributes()['data-test']).toBe('test');
|
|
38
33
|
});
|
|
39
34
|
|
|
40
35
|
it('passes down events to the icon component', async () => {
|
|
41
|
-
const clickFn =
|
|
36
|
+
const clickFn = vi.fn();
|
|
42
37
|
|
|
43
|
-
const wrapper = createWrapperFor(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
PIcon,
|
|
48
|
-
},
|
|
49
|
-
methods: {
|
|
50
|
-
onClick: clickFn,
|
|
51
|
-
},
|
|
38
|
+
const wrapper = createWrapperFor({
|
|
39
|
+
template: '<PIcon icon="ant-design:build-twotone" @click="onClick" />',
|
|
40
|
+
components: {
|
|
41
|
+
PIcon,
|
|
52
42
|
},
|
|
53
|
-
{
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
}
|
|
60
|
-
);
|
|
43
|
+
methods: {
|
|
44
|
+
onClick: clickFn,
|
|
45
|
+
},
|
|
46
|
+
});
|
|
61
47
|
|
|
62
|
-
const icon = wrapper.findComponent('iconify-icon
|
|
48
|
+
const icon = wrapper.findComponent('iconify-icon');
|
|
63
49
|
|
|
64
50
|
await icon.trigger('click');
|
|
65
51
|
|
|
@@ -71,7 +57,7 @@ describe('PIcon.vue', () => {
|
|
|
71
57
|
async (iconAliasKey, iconAlias) => {
|
|
72
58
|
const wrapper = createWrapper({ icon: iconAliasKey });
|
|
73
59
|
|
|
74
|
-
const icon = wrapper.findComponent('iconify-icon
|
|
60
|
+
const icon = wrapper.findComponent('iconify-icon');
|
|
75
61
|
|
|
76
62
|
expect(icon.attributes().icon).toBe(iconAlias);
|
|
77
63
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import PInfoIcon from '@squirrel/components/p-info-icon/p-info-icon.vue';
|
|
2
|
-
import { createWrapperFor } from '@tests/
|
|
2
|
+
import { createWrapperFor } from '@tests/vitest.helpers';
|
|
3
3
|
|
|
4
4
|
describe('PInfoIcon.vue', () => {
|
|
5
5
|
it('renders an info icon', async () => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import PInlineDatePicker from '@squirrel/components/p-inline-date-picker/p-inline-date-picker.vue';
|
|
2
|
-
import { createWrapperFor } from '@tests/
|
|
2
|
+
import { createWrapperFor } from '@tests/vitest.helpers';
|
|
3
3
|
|
|
4
4
|
const createWrapper = (props) => {
|
|
5
5
|
return createWrapperFor(PInlineDatePicker, {
|
|
@@ -81,9 +81,9 @@ describe('PInlineDatePicker.vue', () => {
|
|
|
81
81
|
it('passes listeners to the datepicker', () => {
|
|
82
82
|
// Since DatePicker emits are not defined on PInlineDatePicker we need to Spy on console.warn and mock the implementation to suppress the warning:
|
|
83
83
|
// [Vue warn]: Component emitted event "update:view" but it is neither declared in the emits option nor as an "onUpdate:view" prop.
|
|
84
|
-
const warnSpy =
|
|
84
|
+
const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
|
|
85
85
|
|
|
86
|
-
const testFn =
|
|
86
|
+
const testFn = vi.fn();
|
|
87
87
|
|
|
88
88
|
const wrapper = createWrapperFor({
|
|
89
89
|
template: `<PInlineDatePicker v-model="dateStrVal" @update:view="testEvent" />`,
|
|
@@ -139,7 +139,7 @@ describe('PInlineDatePicker.vue', () => {
|
|
|
139
139
|
const wrapper = createWrapper({ modelValue: '2024-09-01' });
|
|
140
140
|
|
|
141
141
|
const datePicker = wrapper.findComponent({ name: 'DatePicker' });
|
|
142
|
-
datePicker.vm.move =
|
|
142
|
+
datePicker.vm.move = vi.fn();
|
|
143
143
|
|
|
144
144
|
expect(datePicker.props().modelValue).toEqual(new Date('2024-09-01'));
|
|
145
145
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import PInputSearch from '@squirrel/components/p-input-search/p-input-search.vue';
|
|
2
|
-
import { createWrapperFor } from '@tests/
|
|
2
|
+
import { createWrapperFor } from '@tests/vitest.helpers';
|
|
3
3
|
|
|
4
4
|
describe('PInputSearch.vue', () => {
|
|
5
5
|
it('renders correctly', async () => {
|
|
@@ -92,7 +92,7 @@ export default defineComponent({
|
|
|
92
92
|
clearSearch() {
|
|
93
93
|
this.query = '';
|
|
94
94
|
requestAnimationFrame(() => {
|
|
95
|
-
(this.$refs.searchInput as PInputInstance)
|
|
95
|
+
(this.$refs.searchInput as PInputInstance)?.$el.querySelector('input').focus();
|
|
96
96
|
});
|
|
97
97
|
},
|
|
98
98
|
keydownEnter() {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import PLink from '@squirrel/components/p-link/p-link.vue';
|
|
2
|
-
import { createWrapperFor } from '@tests/
|
|
2
|
+
import { createWrapperFor } from '@tests/vitest.helpers';
|
|
3
3
|
import { isExternalLink } from '@squirrel/utils/link';
|
|
4
4
|
import { sanitizeUrl } from '@squirrel/utils/sanitization';
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
vi.mock('@squirrel/utils/sanitization');
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
vi.mock('@squirrel/utils/link');
|
|
9
9
|
|
|
10
10
|
const createWrapper = (props, attrs) => {
|
|
11
11
|
return createWrapperFor(PLink, {
|
|
@@ -23,10 +23,6 @@ const createWrapper = (props, attrs) => {
|
|
|
23
23
|
};
|
|
24
24
|
|
|
25
25
|
describe('PLink.vue', () => {
|
|
26
|
-
afterEach(() => {
|
|
27
|
-
jest.clearAllMocks();
|
|
28
|
-
});
|
|
29
|
-
|
|
30
26
|
it('renders a router link when the link is internal', () => {
|
|
31
27
|
isExternalLink.mockReturnValue(false);
|
|
32
28
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import PLoading from '@squirrel/components/p-loading/p-loading.vue';
|
|
2
2
|
import PSkeletonLoader from '@squirrel/components/p-skeleton-loader/p-skeleton-loader.vue';
|
|
3
|
-
import { createWrapperFor, waitNT } from '@tests/
|
|
3
|
+
import { createWrapperFor, waitNT } from '@tests/vitest.helpers';
|
|
4
4
|
import { defineComponent, ref } from 'vue';
|
|
5
5
|
import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
|
|
6
6
|
|
|
@@ -65,11 +65,11 @@ describe('PLoading.vue', () => {
|
|
|
65
65
|
let appWrapper;
|
|
66
66
|
|
|
67
67
|
beforeAll(() => {
|
|
68
|
-
|
|
68
|
+
vi.useFakeTimers();
|
|
69
69
|
});
|
|
70
70
|
|
|
71
71
|
afterAll(() => {
|
|
72
|
-
|
|
72
|
+
vi.useRealTimers();
|
|
73
73
|
});
|
|
74
74
|
|
|
75
75
|
beforeEach(() => {
|
|
@@ -94,7 +94,7 @@ describe('PLoading.vue', () => {
|
|
|
94
94
|
const wrapper = createWrapper({ delay: 1000 });
|
|
95
95
|
|
|
96
96
|
await wrapper.find('.show').trigger('click');
|
|
97
|
-
|
|
97
|
+
vi.advanceTimersByTime(500);
|
|
98
98
|
await waitNT(appWrapper.vm);
|
|
99
99
|
expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
|
|
100
100
|
});
|
|
@@ -104,11 +104,11 @@ describe('PLoading.vue', () => {
|
|
|
104
104
|
|
|
105
105
|
await wrapper.find('.request-1-sec').trigger('click');
|
|
106
106
|
|
|
107
|
-
|
|
107
|
+
vi.advanceTimersByTime(500);
|
|
108
108
|
await waitNT(appWrapper.vm);
|
|
109
109
|
expect(appWrapper.find('[aria-busy]').exists()).toBe(true);
|
|
110
110
|
|
|
111
|
-
|
|
111
|
+
vi.advanceTimersByTime(1000);
|
|
112
112
|
await waitNT(appWrapper.vm);
|
|
113
113
|
expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
|
|
114
114
|
});
|
|
@@ -118,13 +118,13 @@ describe('PLoading.vue', () => {
|
|
|
118
118
|
|
|
119
119
|
await wrapper.find('.request-1-sec').trigger('click');
|
|
120
120
|
|
|
121
|
-
|
|
121
|
+
vi.advanceTimersByTime(500);
|
|
122
122
|
await waitNT(appWrapper.vm);
|
|
123
123
|
expect(appWrapper.find('[aria-busy]').exists()).toBe(true);
|
|
124
124
|
|
|
125
125
|
await wrapper.find('.request-3-secs').trigger('click');
|
|
126
126
|
|
|
127
|
-
|
|
127
|
+
vi.advanceTimersByTime(500);
|
|
128
128
|
await waitNT(appWrapper.vm);
|
|
129
129
|
|
|
130
130
|
await wrapper.find('.hide').trigger('click');
|
|
@@ -136,17 +136,17 @@ describe('PLoading.vue', () => {
|
|
|
136
136
|
|
|
137
137
|
await wrapper.find('.request-1-sec').trigger('click');
|
|
138
138
|
|
|
139
|
-
|
|
139
|
+
vi.advanceTimersByTime(500);
|
|
140
140
|
await waitNT(appWrapper.vm);
|
|
141
141
|
expect(appWrapper.find('[aria-busy]').exists()).toBe(true);
|
|
142
142
|
|
|
143
143
|
await wrapper.find('.request-3-secs').trigger('click');
|
|
144
144
|
|
|
145
|
-
|
|
145
|
+
vi.advanceTimersByTime(1000);
|
|
146
146
|
await waitNT(appWrapper.vm);
|
|
147
147
|
expect(appWrapper.find('[aria-busy]').exists()).toBe(true);
|
|
148
148
|
|
|
149
|
-
|
|
149
|
+
vi.advanceTimersByTime(2000);
|
|
150
150
|
await waitNT(appWrapper.vm);
|
|
151
151
|
expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
|
|
152
152
|
});
|
|
@@ -156,13 +156,13 @@ describe('PLoading.vue', () => {
|
|
|
156
156
|
|
|
157
157
|
await wrapper.find('.show').trigger('click');
|
|
158
158
|
|
|
159
|
-
|
|
159
|
+
vi.advanceTimersByTime(500);
|
|
160
160
|
await waitNT(appWrapper.vm);
|
|
161
161
|
expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
|
|
162
162
|
|
|
163
163
|
await wrapper.find('.show').trigger('click');
|
|
164
164
|
|
|
165
|
-
|
|
165
|
+
vi.advanceTimersByTime(200);
|
|
166
166
|
await waitNT(appWrapper.vm);
|
|
167
167
|
expect(appWrapper.find('[aria-busy]').exists()).toBe(true);
|
|
168
168
|
});
|
|
@@ -172,21 +172,21 @@ describe('PLoading.vue', () => {
|
|
|
172
172
|
|
|
173
173
|
await wrapper.find('.request-3-secs-text').trigger('click');
|
|
174
174
|
|
|
175
|
-
|
|
175
|
+
vi.advanceTimersByTime(300);
|
|
176
176
|
await waitNT(appWrapper.vm);
|
|
177
177
|
expect(appWrapper.find('[aria-busy]').text()).toBe('3 secs');
|
|
178
178
|
|
|
179
179
|
await wrapper.find('.request-1-sec-text').trigger('click');
|
|
180
180
|
|
|
181
|
-
|
|
181
|
+
vi.advanceTimersByTime(300);
|
|
182
182
|
await waitNT(appWrapper.vm);
|
|
183
183
|
expect(appWrapper.find('[aria-busy]').text()).toBe('1 sec');
|
|
184
184
|
|
|
185
|
-
|
|
185
|
+
vi.advanceTimersByTime(1200);
|
|
186
186
|
await waitNT(appWrapper.vm);
|
|
187
187
|
expect(appWrapper.find('[aria-busy]').text()).toBe('3 secs');
|
|
188
188
|
|
|
189
|
-
|
|
189
|
+
vi.advanceTimersByTime(1200);
|
|
190
190
|
await waitNT(appWrapper.vm);
|
|
191
191
|
expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
|
|
192
192
|
});
|
|
@@ -196,12 +196,12 @@ describe('PLoading.vue', () => {
|
|
|
196
196
|
|
|
197
197
|
await wrapper.find('.request-1-sec-component').trigger('click');
|
|
198
198
|
|
|
199
|
-
|
|
199
|
+
vi.advanceTimersByTime(300);
|
|
200
200
|
await waitNT(appWrapper.vm);
|
|
201
201
|
expect(appWrapper.find('[aria-busy]').exists()).toBe(true);
|
|
202
202
|
expect(appWrapper.findComponent(PSkeletonLoader).exists()).toBe(true);
|
|
203
203
|
|
|
204
|
-
|
|
204
|
+
vi.advanceTimersByTime(800);
|
|
205
205
|
await waitNT(appWrapper.vm);
|
|
206
206
|
expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
|
|
207
207
|
});
|
|
@@ -270,7 +270,7 @@ describe('PLoading.vue', () => {
|
|
|
270
270
|
|
|
271
271
|
await wrapper.find('.request-1-sec-component-props').trigger('click');
|
|
272
272
|
|
|
273
|
-
|
|
273
|
+
vi.advanceTimersByTime(300);
|
|
274
274
|
await waitNT(appWrapper.vm);
|
|
275
275
|
const getTestComponent = () => appWrapper.findComponent(TestComponent);
|
|
276
276
|
|
|
@@ -278,12 +278,12 @@ describe('PLoading.vue', () => {
|
|
|
278
278
|
expect(getTestComponent().exists()).toBe(true);
|
|
279
279
|
expect(getTestComponent().props().modelValue).toBe(10);
|
|
280
280
|
|
|
281
|
-
|
|
281
|
+
vi.advanceTimersByTime(300);
|
|
282
282
|
await waitNT(appWrapper.vm);
|
|
283
283
|
await wrapper.find('.update-props').trigger('click');
|
|
284
284
|
expect(getTestComponent().props().modelValue).toBe(20);
|
|
285
285
|
|
|
286
|
-
|
|
286
|
+
vi.advanceTimersByTime(500);
|
|
287
287
|
await waitNT(appWrapper.vm);
|
|
288
288
|
expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
|
|
289
289
|
});
|
|
@@ -293,7 +293,7 @@ describe('PLoading.vue', () => {
|
|
|
293
293
|
|
|
294
294
|
await wrapper.find('.request-1-sec-component').trigger('click');
|
|
295
295
|
|
|
296
|
-
|
|
296
|
+
vi.advanceTimersByTime(300);
|
|
297
297
|
await waitNT(appWrapper.vm);
|
|
298
298
|
|
|
299
299
|
expect(wrapper.vm.show).toBe(true);
|
|
@@ -28,7 +28,8 @@
|
|
|
28
28
|
</template>
|
|
29
29
|
|
|
30
30
|
<script setup lang="ts">
|
|
31
|
-
import {
|
|
31
|
+
import { isComponent } from '@squirrel/utils/component';
|
|
32
|
+
import { onBeforeUnmount, ref, toValue, watch } from 'vue';
|
|
32
33
|
import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
|
|
33
34
|
|
|
34
35
|
const textDivClass = `overflow-hidden whitespace-nowrap px-4 pt-1 h-8 text-center text-sm font-semibold text-p-purple-60`;
|
|
@@ -53,12 +54,6 @@ watch(
|
|
|
53
54
|
{ flush: 'post' }
|
|
54
55
|
);
|
|
55
56
|
|
|
56
|
-
const isComponent = (content: unknown): content is Component => {
|
|
57
|
-
const isComponent = typeof content === 'object' && content !== null;
|
|
58
|
-
|
|
59
|
-
return isComponent;
|
|
60
|
-
};
|
|
61
|
-
|
|
62
57
|
onBeforeUnmount(() => {
|
|
63
58
|
loadingHide();
|
|
64
59
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import PModal from '@squirrel/components/p-modal/p-modal.vue';
|
|
2
2
|
import { mount } from '@vue/test-utils';
|
|
3
|
-
import { waitRAF } from '@tests/
|
|
3
|
+
import { waitRAF } from '@tests/vitest.helpers';
|
|
4
4
|
|
|
5
5
|
const createWrapperContainer = (componentArgs) => {
|
|
6
6
|
const args = componentArgs || {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import PModal from '@squirrel/components/p-modal/p-modal.vue';
|
|
2
2
|
import { mount } from '@vue/test-utils';
|
|
3
|
-
import { sleep, waitRAF } from '@tests/
|
|
3
|
+
import { sleep, waitRAF } from '@tests/vitest.helpers';
|
|
4
4
|
|
|
5
5
|
const createWrapper = () => {
|
|
6
6
|
return mount(PModal, {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import PModal from '@squirrel/components/p-modal/p-modal.vue';
|
|
2
2
|
import { mount } from '@vue/test-utils';
|
|
3
|
-
import { sleep, waitNT } from '@tests/
|
|
3
|
+
import { sleep, waitNT } from '@tests/vitest.helpers';
|
|
4
4
|
|
|
5
5
|
const originalOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight');
|
|
6
6
|
const originalOffsetWidth = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetWidth');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import PPagination from '@squirrel/components/p-pagination/p-pagination.vue';
|
|
2
|
-
import { createWrapperFor } from '@tests/
|
|
2
|
+
import { createWrapperFor } from '@tests/vitest.helpers';
|
|
3
3
|
|
|
4
4
|
describe('PPagination.vue', () => {
|
|
5
5
|
it('renders the controls correctly', async () => {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import PProgressBar from '@squirrel/components/p-progress-bar/p-progress-bar.vue';
|
|
2
|
-
import { createWrapperFor } from '@tests/
|
|
2
|
+
import { createWrapperFor } from '@tests/vitest.helpers';
|
|
3
3
|
|
|
4
4
|
const items = [
|
|
5
5
|
{ vaLue: 50, label: 'bar1', color: 'rgb(204, 204, 204)' },
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import PRingLoader from '@squirrel/components/p-ring-loader/p-ring-loader.vue';
|
|
2
|
-
import { createWrapperFor } from '@tests/
|
|
2
|
+
import { createWrapperFor } from '@tests/vitest.helpers';
|
|
3
3
|
|
|
4
4
|
describe('PRingLoader.vue', () => {
|
|
5
5
|
it('renders correctly with custom props', async () => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import PSelect from '@squirrel/components/p-select/p-select.vue';
|
|
2
2
|
import { cloneDeep } from 'lodash-es';
|
|
3
|
-
import { createWrapperFor, sleep, waitNT } from '@tests/
|
|
3
|
+
import { createWrapperFor, sleep, waitNT } from '@tests/vitest.helpers';
|
|
4
4
|
|
|
5
5
|
const baseClasses = () => [
|
|
6
6
|
'text-night',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import PSelectBtn from '@squirrel/components/p-select-btn/p-select-btn.vue';
|
|
2
2
|
import { cloneDeep } from 'lodash-es';
|
|
3
|
-
import { createWrapperFor } from '@tests/
|
|
3
|
+
import { createWrapperFor } from '@tests/vitest.helpers';
|
|
4
4
|
|
|
5
5
|
const items = [
|
|
6
6
|
{ textCustom: 'Option 1', valueCustom: 1 },
|