Skip to content

Commit 724287a

Browse files
LianaHarris360LianaHarris360
authored
Merge pull request #1139 from AlexVelezLl/kbreadcrumbs-visual-tests
KBreadcrumbs visual tests in one file
2 parents 6510904 + 4c58b16 commit 724287a

File tree

9 files changed

+106
-108
lines changed

9 files changed

+106
-108
lines changed

‎examples/KBreadcrumbs/HiddenSingleItem.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
3+
<KBreadcrumbs :items="[{ text: 'Home', link: null }]" />
4+
5+
</template>

‎examples/KBreadcrumbs/LongText.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
3+
<KBreadcrumbs
4+
:items="[
5+
{ text: 'Home', link: { path: '/' } },
6+
{ text: 'Data', link: { path: '/' } },
7+
{
8+
text: 'Very long breadcrumb that should truncate properly when displayed in the component',
9+
link: { path: '/long' },
10+
},
11+
]"
12+
/>
13+
14+
</template>

‎examples/KBreadcrumbs/NoOverflow.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
3+
<KBreadcrumbs
4+
:items="[
5+
{ text: 'Home', link: { path: '/' } },
6+
{ text: 'Library', link: { path: '/lib' } },
7+
{ text: 'Data', link: null },
8+
]"
9+
/>
10+
11+
</template>

‎examples/KBreadcrumbs/ShowSingleItem.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
3+
<KBreadcrumbs
4+
showSingleItem
5+
:items="[{ text: 'Home', link: null }]"
6+
/>
7+
8+
</template>

‎examples/KBreadcrumbs/WithLinks.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
3+
<KBreadcrumbs
4+
:items="[
5+
{ text: 'Home', link: { path: '/' } },
6+
{ text: 'Library', link: { path: '/lib' } },
7+
{ text: 'Files', link: { path: '/files' } },
8+
]"
9+
/>
10+
11+
</template>

‎examples/KBreadcrumbs/WithOverflow.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
3+
<KBreadcrumbs
4+
:items="[
5+
{ text: 'Home', link: { path: '/' } },
6+
{ text: 'Library', link: null },
7+
{ text: 'Category', link: { path: '/category' } },
8+
{ text: 'Subcategory', link: { path: '/subcategory' } },
9+
{ text: 'Files', link: null },
10+
]"
11+
/>
12+
13+
</template>

‎jest.conf/visual.load-test-components.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import KButtonWithDropdownTest from '~~/lib/buttons-and-links/__tests__/componen
66
import KDropdownMenuVisualTest from '~~/lib/KDropdownMenu/__tests__/components/KDropdownMenuVisualTest.vue';
77
import KCheckboxSlotTest from '~~/lib/KCheckbox/__tests__/components/KCheckboxSlotTest.vue';
88
import KCheckboxVisualTest from '~~/lib/KCheckbox/__tests__/components/KCheckboxVisualTest.vue';
9-
import KBreadcrumbs from '~~/lib/KBreadcrumbs/index.vue';
109
import KImgTest from '~~/examples/KImg/Base.vue';
1110
import KImgAspectRatioTest from '~~/examples/KImg/AspectRatio.vue';
1211
import KImgContentOnTopTest from '~~/examples/KImg/ContentOnTop.vue';
@@ -22,6 +21,7 @@ import KTextboxVisualTest from '~~/lib/KTextbox/__tests__/components/KTextboxVis
2221
import KTableVisualTest from '~~/lib/KTable/__tests__/components/KTableVisualTest.vue';
2322
import CardsVisualTest from '~~/lib/cards/__tests__/components/CardsVisualTest.vue';
2423
import KLogoVisualTest from '~~/lib/KLogo/__tests__/components/KLogoVisualTest.vue';
24+
import KBreadcrumbsVisualTest from '~~/lib/KBreadcrumbs/__tests__/components/KBreadcrumbsVisualTest.vue';
2525

2626
// Visual tests helper components
2727
Vue.component('VisualTestExample', VisualTestExample);
@@ -45,6 +45,6 @@ Vue.component('KIconVisualTest', KIconVisualTest);
4545
Vue.component('KTextboxVisualTest', KTextboxVisualTest);
4646
Vue.component('KTableVisualTest', KTableVisualTest);
4747
Vue.component('CardsVisualTest', CardsVisualTest);
48-
Vue.component('KBreadcrumbs', KBreadcrumbs);
4948
Vue.component('KLogoVisualTest', KLogoVisualTest);
5049
Vue.component('KDropdownMenuVisualTest', KDropdownMenuVisualTest);
50+
Vue.component('KBreadcrumbsVisualTest', KBreadcrumbsVisualTest);

‎lib/KBreadcrumbs/__tests__/KBreadcrumbs.spec.js‎

Lines changed: 5 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -2,117 +2,16 @@ import {
22
renderComponentForVisualTest,
33
takeSnapshot,
44
click,
5-
waitFor,
65
} from '../../../jest.conf/visual.testUtils';
76

87
describe.visual('KBreadcrumbs Visual Tests', () => {
9-
const snapshotOptions = { widths: [375, 768], minHeight: 200 };
8+
const snapshotOptions = { widths: [800], minHeight: 1000 };
109

11-
it('Breadcrumbs - Single Item (showSingleItem)', async () => {
12-
await renderComponentForVisualTest('KBreadcrumbs', {
13-
items: [{ text: 'Single Item', link: null }],
14-
showSingleItem: true,
15-
});
16-
await takeSnapshot('KBreadcrumbs - Single Item', snapshotOptions);
17-
});
18-
19-
it('Breadcrumbs - Single Item (hidden)', async () => {
20-
await renderComponentForVisualTest('KBreadcrumbs', {
21-
items: [{ text: 'Single Item', link: null }],
22-
showSingleItem: false,
23-
});
24-
await takeSnapshot('KBreadcrumbs - Single Item Hidden', snapshotOptions);
25-
});
26-
27-
it('Breadcrumbs - Multiple Items (no overflow)', async () => {
28-
await renderComponentForVisualTest('KBreadcrumbs', {
29-
items: [
30-
{ text: 'Home', link: { path: '/' } },
31-
{ text: 'Library', link: { path: '/lib' } },
32-
{ text: 'Data', link: null },
33-
],
34-
});
35-
await takeSnapshot('KBreadcrumbs - No Overflow', snapshotOptions);
36-
});
37-
38-
it('Breadcrumbs - Multiple Items with Long Text', async () => {
39-
await renderComponentForVisualTest('KBreadcrumbs', {
40-
items: [
41-
{ text: 'Home', link: { path: '/' } },
42-
{
43-
text: 'A very long breadcrumb text that should truncate properly when displayed in the component',
44-
link: { path: '/long' },
45-
},
46-
{ text: 'Data', link: null },
47-
],
48-
});
49-
await takeSnapshot('KBreadcrumbs - Long Text', snapshotOptions);
50-
});
51-
52-
it('Breadcrumbs - With Links', async () => {
53-
await renderComponentForVisualTest('KBreadcrumbs', {
54-
items: [
55-
{ text: 'Home', link: { path: '/' } },
56-
{ text: 'Library', link: { path: '/lib' } },
57-
{ text: 'Files', link: { path: '/files' } },
58-
],
59-
});
60-
await takeSnapshot('KBreadcrumbs - With Links', snapshotOptions);
61-
});
62-
63-
it('Breadcrumbs - Overflow with Dropdown Open (with links)', async () => {
64-
const narrowSnapshotOptions = { widths: [300], minHeight: 200 };
65-
66-
await renderComponentForVisualTest('KBreadcrumbs', {
67-
items: [
68-
{ text: 'Home', link: { path: '/' } },
69-
{ text: 'Library', link: { path: '/lib' } },
70-
{ text: 'Category', link: { path: '/category' } },
71-
{ text: 'Subcategory', link: { path: '/subcategory' } },
72-
{ text: 'Files', link: null },
73-
],
74-
});
75-
76-
// First, check if dropdown button exists, if not, take snapshot without dropdown
77-
try {
78-
await waitFor('.breadcrumbs-dropdown-wrapper button');
79-
await click('.breadcrumbs-dropdown-wrapper button');
80-
await waitFor('.breadcrumbs-dropdown-menu');
81-
} catch (error) {
82-
// Dropdown button not found, component may not be overflowing
83-
}
84-
85-
await takeSnapshot(
86-
'KBreadcrumbs - Overflow with Dropdown Open (with links)',
87-
narrowSnapshotOptions,
88-
);
89-
});
90-
91-
it('Breadcrumbs - Overflow with Dropdown Open (without links)', async () => {
92-
const narrowSnapshotOptions = { widths: [300], minHeight: 200 };
93-
94-
await renderComponentForVisualTest('KBreadcrumbs', {
95-
items: [
96-
{ text: 'Home', link: null },
97-
{ text: 'Library', link: null },
98-
{ text: 'Category', link: null },
99-
{ text: 'Subcategory', link: null },
100-
{ text: 'Files', link: null },
101-
],
102-
});
10+
it('Breadcrumbs - Visual Tests', async () => {
11+
await renderComponentForVisualTest('KBreadcrumbsVisualTest');
10312

104-
// First, check if dropdown button exists
105-
try {
106-
await waitFor('.breadcrumbs-dropdown-wrapper button');
107-
await click('.breadcrumbs-dropdown-wrapper button');
108-
await waitFor('.breadcrumbs-dropdown-menu');
109-
} catch (error) {
110-
// Dropdown button not found, component may not be overflowing
111-
}
13+
await click('#with-overflow .breadcrumbs-dropdown-wrapper button');
11214

113-
await takeSnapshot(
114-
'KBreadcrumbs - Overflow with Dropdown Open (without links)',
115-
narrowSnapshotOptions,
116-
);
15+
await takeSnapshot('KBreadcrumbs visual tests', snapshotOptions);
11716
});
11817
});

‎lib/KBreadcrumbs/__tests__/components/KBreadcrumbsVisualTest.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
3+
<VisualTestLayout>
4+
<VisualTestExample
5+
title="Show single item"
6+
loadExample="KBreadcrumbs/ShowSingleItem.vue"
7+
width="300px"
8+
/>
9+
<VisualTestExample
10+
title="Hidden single item"
11+
loadExample="KBreadcrumbs/HiddenSingleItem.vue"
12+
width="300px"
13+
/>
14+
<VisualTestExample
15+
title="Multiple items, no overflow"
16+
loadExample="KBreadcrumbs/NoOverflow.vue"
17+
width="300px"
18+
/>
19+
<VisualTestExample
20+
title="Long text"
21+
loadExample="KBreadcrumbs/LongText.vue"
22+
width="700px"
23+
/>
24+
<VisualTestExample
25+
title="With links"
26+
loadExample="KBreadcrumbs/WithLinks.vue"
27+
width="300px"
28+
/>
29+
<VisualTestExample
30+
id="with-overflow"
31+
title="With overflow"
32+
loadExample="KBreadcrumbs/WithOverflow.vue"
33+
width="300px"
34+
/>
35+
</VisualTestLayout>
36+
37+
</template>

0 commit comments

Comments
 (0)