Skip to content

Commit 566f6eb

Browse files
graphierosgraphieros
committed
Add tests, include passing tests as a requirement to generate build
1 parent 39b07d4 commit 566f6eb

File tree

8 files changed

+351
-5
lines changed

8 files changed

+351
-5
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,9 @@
5858
"dev": "vite",
5959
"clean": "node cleanup.cjs",
6060
"build": "npm run clean && vite build --mode production && node copy-types.cjs && npm i",
61+
"prod": "npm run test && npx cypress run --component && npm run clean && vite build --mode production && node copy-types.cjs && npm i",
6162
"build:dev": "npm run build && npm run dev",
62-
"preview": "vite preview",
63-
"test": "vitest",
63+
"test": "vitest --run",
6464
"test:e2e": "npx cypress open"
6565
},
6666
"devDependencies": {

‎src/atoms/Shape.cy.js‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import { createApp } from 'vue';
2+
import Shape from './Shape.vue';
3+
4+
describe('<Shape />', () => {
5+
function cleanup() {
6+
cy.document().then((doc) => {
7+
const svgs = doc.querySelectorAll('svg')
8+
svgs.forEach((svg) => svg.remove());
9+
});
10+
}
11+
it('renders a circle', () => {
12+
cy.viewport(200, 200)
13+
cy.document().then((doc) => {
14+
const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
15+
svg.setAttribute('width', '100%');
16+
svg.setAttribute('viewBox', '0 0 20 20');
17+
doc.body.appendChild(svg);
18+
19+
const app = createApp(Shape, {
20+
shape: 'circle',
21+
color: '#000000',
22+
plot: { x: 10, y: 10 },
23+
radius: 10,
24+
});
25+
26+
app.mount(svg);
27+
});
28+
29+
cy.get('svg').should('exist');
30+
cy.get('circle').should('exist');
31+
cy.get('circle').should('have.attr', 'fill', '#000000')
32+
});
33+
34+
it('renders a triangle', () => {
35+
cleanup()
36+
cy.viewport(200, 200)
37+
cy.document().then((doc) => {
38+
const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
39+
svg.setAttribute('width', '100%');
40+
svg.setAttribute('viewBox', '0 0 20 20');
41+
doc.body.appendChild(svg);
42+
43+
const app = createApp(Shape, {
44+
shape: 'triangle',
45+
color: '#000000',
46+
plot: { x: 10, y: 10 },
47+
radius: 8,
48+
});
49+
50+
app.mount(svg);
51+
});
52+
53+
cy.get('svg').should('exist');
54+
cy.get('path').should('exist');
55+
cy.get('path').should('have.attr', 'd', 'M17.81037261709885,14.47192124059363 2.2220162933732697,14.52802047913314 9.967611089527882,1.0000582802732314 Z');
56+
cy.get('path').should('have.attr', 'fill', '#000000')
57+
});
58+
59+
it('renders a square', () => {
60+
cleanup();
61+
cy.viewport(200, 200)
62+
cy.document().then((doc) => {
63+
const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
64+
svg.setAttribute('width', '100%');
65+
svg.setAttribute('viewBox', '0 0 20 20');
66+
doc.body.appendChild(svg);
67+
68+
const app = createApp(Shape, {
69+
shape: 'square',
70+
color: '#000000',
71+
plot: { x: 10, y: 10 },
72+
radius: 10
73+
});
74+
75+
app.mount(svg);
76+
});
77+
78+
cy.get('svg').should('exist');
79+
cy.get('path').should('exist');
80+
cy.get('path').should('have.attr', 'd', 'M17.66377380281882,17.89091699989475 2.109083000105252,17.663773802818824 2.336226197181178,2.109083000105252 17.89091699989475,2.336226197181177 Z');
81+
cy.get('path').should('have.attr', 'fill', '#000000')
82+
});
83+
84+
it('renders a diamond', () => {
85+
cleanup();
86+
cy.viewport(200, 200)
87+
cy.document().then((doc) => {
88+
const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
89+
svg.setAttribute('width', '100%');
90+
svg.setAttribute('viewBox', '0 0 20 20');
91+
doc.body.appendChild(svg);
92+
93+
const app = createApp(Shape, {
94+
shape: 'diamond',
95+
color: '#000000',
96+
plot: { x: 10, y: 10 },
97+
radius: 9
98+
});
99+
100+
app.mount(svg);
101+
});
102+
103+
cy.get('svg').should('exist');
104+
cy.get('path').should('exist');
105+
cy.get('path').should('have.attr', 'd', 'M20,10 10,20 0,10.000000000000002 9.999999999999998,0 Z');
106+
cy.get('path').should('have.attr', 'fill', '#000000')
107+
});
108+
109+
it('renders a pentagon', () => {
110+
cleanup();
111+
cy.viewport(200, 200)
112+
cy.document().then((doc) => {
113+
const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
114+
svg.setAttribute('width', '100%');
115+
svg.setAttribute('viewBox', '0 0 20 20');
116+
doc.body.appendChild(svg);
117+
118+
const app = createApp(Shape, {
119+
shape: 'pentagon',
120+
color: '#000000',
121+
plot: { x: 10, y: 10 },
122+
radius: 9
123+
});
124+
125+
app.mount(svg);
126+
});
127+
128+
cy.get('svg').should('exist');
129+
cy.get('path').should('exist');
130+
cy.get('path').should('have.attr', 'd', 'M15.816830894638835,18.134155047893735 4.061458436994172,18.04572707121316 0.5129485758196388,6.838377746321141 10.075221329844268,0.00028291642526312444 19.533540762703083,6.981457218146697 Z');
131+
cy.get('path').should('have.attr', 'fill', '#000000')
132+
});
133+
134+
it('renders a haxagon', () => {
135+
cleanup();
136+
cy.viewport(200, 200)
137+
cy.document().then((doc) => {
138+
const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
139+
svg.setAttribute('width', '100%');
140+
svg.setAttribute('viewBox', '0 0 20 20');
141+
doc.body.appendChild(svg);
142+
143+
const app = createApp(Shape, {
144+
shape: 'hexagon',
145+
color: '#000000',
146+
plot: { x: 10, y: 10 },
147+
radius: 9
148+
});
149+
150+
app.mount(svg);
151+
});
152+
153+
cy.get('svg').should('exist');
154+
cy.get('path').should('exist');
155+
cy.get('path').should('have.attr', 'd', 'M20,10 15,18.660254037844386 5.000000000000002,18.66025403784439 0,10.000000000000002 4.999999999999996,1.3397459621556163 14.999999999999993,1.3397459621556091 Z');
156+
cy.get('path').should('have.attr', 'fill', '#000000')
157+
});
158+
159+
it('renders a star', () => {
160+
cleanup();
161+
cy.viewport(200, 200)
162+
cy.document().then((doc) => {
163+
const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
164+
svg.setAttribute('width', '100%');
165+
svg.setAttribute('viewBox', '0 0 20 20');
166+
doc.body.appendChild(svg);
167+
168+
const app = createApp(Shape, {
169+
shape: 'star',
170+
color: '#000000',
171+
plot: { x: 10, y: 10 },
172+
radius: 6
173+
});
174+
175+
app.mount(svg);
176+
});
177+
178+
cy.get('svg').should('exist');
179+
cy.get('polygon').should('exist');
180+
cy.get('polygon').should('have.attr', 'points', '1.9997309645126862,7.43959078274138 7.516308584228725,6.613072638625965 9.962874778918735,1.6000820409982772 12.453656480996605,6.591250981186301 17.977324387019237,7.368974415884909 14.000134517743653,11.280204608629324 14.967382831542576,16.77385472274805 10.018562610540648,14.199958979500861 5.092687038006768,16.81749803762738 6.011337806490377,11.315512792057532 ');
181+
cy.get('polygon').should('have.attr', 'fill', '#000000')
182+
183+
});
184+
})

‎src/atoms/Title.cy.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import Title from './Title.vue'
2+
3+
describe('<Title />', () => {
4+
it('renders content with default styles', () => {
5+
cy.viewport(100, 60)
6+
cy.mount(Title, {
7+
props: {
8+
config: {
9+
title: {
10+
cy: 'title',
11+
text: 'Title',
12+
color: '#FF0000'
13+
},
14+
subtitle: {
15+
cy: 'subtitle',
16+
text: 'Subtitle',
17+
color: '#CCCCCC',
18+
}
19+
}
20+
}
21+
})
22+
cy.get('[data-cy="title"]').then(($title) => {
23+
cy.wrap($title).should('exist').and('be.visible')
24+
cy.wrap($title).should('have.css', 'font-weight', '700')
25+
cy.wrap($title).should('have.css', 'color', 'rgb(255, 0, 0)')
26+
cy.wrap($title).should('have.css', 'font-size', '20px')
27+
cy.contains('Title')
28+
})
29+
30+
cy.get('[data-cy="subtitle"]').then(($subtitle) => {
31+
cy.wrap($subtitle).should('exist').and('be.visible')
32+
cy.wrap($subtitle).should('have.css', 'font-weight', '400')
33+
cy.wrap($subtitle).should('have.css', 'color', 'rgb(204, 204, 204)')
34+
cy.wrap($subtitle).should('have.css', 'font-size', '14px')
35+
cy.contains('Subtitle')
36+
})
37+
})
38+
39+
it('renders content with custom styles', () => {
40+
cy.viewport(100, 70)
41+
cy.mount(Title, {
42+
props: {
43+
config: {
44+
title: {
45+
cy: 'title',
46+
text: 'Title',
47+
color: '#FF0000',
48+
bold: false,
49+
fontSize: 24
50+
},
51+
subtitle: {
52+
cy: 'subtitle',
53+
text: 'Subtitle',
54+
color: '#CCCCCC',
55+
bold: true,
56+
fontSize: 16
57+
}
58+
}
59+
}
60+
})
61+
cy.get('[data-cy="title"]').then(($title) => {
62+
cy.wrap($title).should('exist').and('be.visible')
63+
cy.wrap($title).should('have.css', 'font-weight', '400')
64+
cy.wrap($title).should('have.css', 'color', 'rgb(255, 0, 0)')
65+
cy.wrap($title).should('have.css', 'font-size', '24px')
66+
cy.contains('Title')
67+
})
68+
69+
cy.get('[data-cy="subtitle"]').then(($subtitle) => {
70+
cy.wrap($subtitle).should('exist').and('be.visible')
71+
cy.wrap($subtitle).should('have.css', 'font-weight', '700')
72+
cy.wrap($subtitle).should('have.css', 'color', 'rgb(204, 204, 204)')
73+
cy.wrap($subtitle).should('have.css', 'font-size', '16px')
74+
cy.contains('Subtitle')
75+
})
76+
})
77+
})

‎src/atoms/Tooltip.cy.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Tooltip from './Tooltip.vue'
2+
3+
describe('<Tooltip />', () => {
4+
5+
beforeEach(() => {
6+
cy.mount(Tooltip, {
7+
props: {
8+
content: `<div data-cy="tooltip-content">Content</div>`,
9+
show: true,
10+
},
11+
slots: {
12+
default: {
13+
render: () => 'Default slot'
14+
},
15+
['content-after']: {
16+
render: () => 'Slot after'
17+
}
18+
}
19+
})
20+
})
21+
22+
it('renders all contents', () => {
23+
cy.contains('Default slot')
24+
cy.contains('Content')
25+
cy.contains('Slot after')
26+
})
27+
28+
it('follows the mouse', () => {
29+
cy.get('body').trigger('mousemove', { clientX: 200, clientY: 200, force: true})
30+
cy.get('[data-cy="tooltip"]').should('have.css', 'top', '248px')
31+
cy.get('[data-cy="tooltip"]').should('have.css', 'left', '200px')
32+
})
33+
})

‎src/atoms/UserOptions.cy.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import UserOptions from './UserOptions.vue'
2+
3+
describe('<UserOptions />', () => {
4+
5+
beforeEach(function () {
6+
cy.viewport(40, 250);
7+
cy.mount(UserOptions, {
8+
props: {
9+
hasImg: true,
10+
hasTable: true,
11+
hasSort: true,
12+
hasLabel: true
13+
}
14+
});
15+
cy.get(`[data-cy="user-options-summary"]`).click()
16+
cy.get(`[data-cy="user-options-drawer"]`).should('exist').and('be.visible')
17+
})
18+
19+
it('opens and closes on menu click', () => {
20+
cy.get(`[data-cy="user-options-summary"]`).click()
21+
cy.wait(200 )
22+
cy.get(`[data-cy="user-options-drawer"]`).should('not.be.visible')
23+
})
24+
25+
it('closes the drawer on click outside', () => {
26+
cy.get('body').click(0,0, { force: true})
27+
cy.wait(200 )
28+
cy.get(`[data-cy="user-options-drawer"]`).should('not.be.visible')
29+
})
30+
31+
it('contains all necessary icons', () => {
32+
[
33+
'user-options-pdf',
34+
'user-options-xls',
35+
'user-options-img',
36+
'user-options-table',
37+
'user-options-label',
38+
'user-options-sort'
39+
].forEach(btn => {
40+
cy.get(`[data-cy="${btn}"]`).should('exist').and('be.visible')
41+
})
42+
})
43+
})

‎src/atoms/UserOptions.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ function toggleSort() {
113113
<div tabindex="0" data-cy="user-options-summary" :style="`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${backgroundColor};`" @click.stop="toggle" @keypress.enter="toggle">
114114
<BaseIcon :name="isOpen ? 'close' : 'menu'" stroke="#CCCCCC" :stroke-width="2" />
115115
</div>
116-
<div :data-open="isOpen" :class="{'vue-ui-user-options-drawer': true}" :style="`background:${backgroundColor}`">
116+
<div data-cy="user-options-drawer" :data-open="isOpen" :class="{'vue-ui-user-options-drawer': true}" :style="`background:${backgroundColor}`">
117117

118118
<button tabindex="0" v-if="hasPdf" data-cy="user-options-pdf" class="vue-ui-user-options-button" @click="generatePdf">
119119
<BaseIcon v-if="isPrinting" name="spin" isSpin />

‎src/setups.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export function setupTemplate(template, args = {}) {
2+
const { args: moreArgs = {}} = template;
3+
const templateClone = template.bind();
4+
templateClone.args = {
5+
...moreArgs,
6+
...args
7+
}
8+
return templateClone;
9+
}

0 commit comments

Comments
 (0)