Skip to content

Commit 89de305

Browse files
graphierosgraphieros
committedFeb 15, 2025
Tests - Add BaseDirectionPad component test
1 parent 11047a3 commit 89de305

File tree

3 files changed

+94
-7
lines changed

3 files changed

+94
-7
lines changed
 

‎src/atoms/BaseDirectionPad.cy.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { defineComponent, ref } from "vue";
2+
import BaseDirectionPad from "./BaseDirectionPad.vue";
3+
4+
describe('<BaseDirectionPad />', () => {
5+
it('renders correctly with default props', () => {
6+
cy.mount(defineComponent({
7+
components: { BaseDirectionPad },
8+
template: '<BaseDirectionPad />',
9+
}));
10+
cy.get('button').should('have.length', 5);
11+
cy.get('button').first().should('have.css', 'position', 'absolute');
12+
cy.get('button').first().should('have.css', 'left', '0px');
13+
cy.get('[data-cy="base-icon"]').each(icon => {
14+
cy.wrap(icon).as('icon')
15+
cy.get('@icon').find('path').eq(0).should($path => {
16+
const stroke = $path.attr('stroke');
17+
const fill = $path.attr('fill');
18+
if (stroke !== 'none') {
19+
expect(stroke).to.eq('#1A1A1A');
20+
} else if (fill) {
21+
expect(fill).to.eq('#1A1A1A');
22+
}
23+
});
24+
});
25+
26+
});
27+
28+
it('emits', () => {
29+
const moveLeft = cy.stub();
30+
const moveTop = cy.stub();
31+
const moveRight = cy.stub();
32+
const moveBottom = cy.stub();
33+
const reset = cy.stub();
34+
35+
cy.mount(defineComponent({
36+
components: { BaseDirectionPad },
37+
setup() {
38+
return { moveLeft, moveTop, moveRight, moveBottom, reset };
39+
},
40+
template: `
41+
<BaseDirectionPad
42+
@moveLeft="moveLeft"
43+
@moveTop="moveTop"
44+
@moveRight="moveRight"
45+
@moveBottom="moveBottom"
46+
@reset="reset"
47+
/>
48+
`
49+
}));
50+
cy.get('[data-cy="direction-pad-left"]').click();
51+
cy.wrap(moveLeft).should('have.been.calledOnce');
52+
cy.get('[data-cy="direction-pad-top"]').click();
53+
cy.wrap(moveTop).should('have.been.calledOnce');
54+
cy.get('[data-cy="direction-pad-right"]').click();
55+
cy.wrap(moveRight).should('have.been.calledOnce');
56+
cy.get('[data-cy="direction-pad-bottom"]').click();
57+
cy.wrap(moveBottom).should('have.been.calledOnce');
58+
cy.get('[data-cy="direction-pad-reset"]').click();
59+
cy.wrap(reset).should('have.been.calledOnce');
60+
});
61+
62+
it('handles color prop', () => {
63+
cy.mount(defineComponent({
64+
components: { BaseDirectionPad },
65+
setup() {
66+
const color = ref('#FF0000');
67+
return { color };
68+
},
69+
template: `
70+
<BaseDirectionPad :color="color" />
71+
`
72+
}));
73+
74+
cy.get('[data-cy="base-icon"]').each(icon => {
75+
cy.wrap(icon).as('icon')
76+
cy.get('@icon').find('path').eq(0).should($path => {
77+
const stroke = $path.attr('stroke');
78+
const fill = $path.attr('fill');
79+
if (stroke !== 'none') {
80+
expect(stroke).to.eq('#FF0000');
81+
} else if (fill) {
82+
expect(fill).to.eq('#FF0000');
83+
}
84+
});
85+
});
86+
});
87+
});

‎src/atoms/BaseDirectionPad.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import BaseIcon from './BaseIcon.vue';
33
const props = defineProps({
44
color: {
55
type: String,
6-
default: '#FF0000'
6+
default: '#1A1A1A'
77
},
88
isFullscreen: {
99
type: Boolean,
@@ -16,19 +16,19 @@ const emit = defineEmits(['moveLeft', 'moveTop', 'moveRight', 'moveBottom', 'res
1616
<template>
1717
<div :style="`position: ${isFullscreen ? 'fixed' : 'absolute'};bottom:0;right:${isFullscreen ? '12px' : '0'};width:80px;height:80px`" data-html2canvas-ignore>
1818
<div style="position: relative;height:100%;width:100%">
19-
<button @click.stop="emit('moveLeft')" style="position: absolute;left:0;top:50%;transform:translateY(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
19+
<button data-cy="direction-pad-left" @click.stop="emit('moveLeft')" style="position: absolute;left:0;top:50%;transform:translateY(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
2020
<BaseIcon :stroke="color" name="arrowLeft" style="cursor: pointer"/>
2121
</button>
22-
<button @click.stop="emit('moveTop')" style="position: absolute;top:0;left:50%;transform:translateX(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
22+
<button data-cy="direction-pad-top" @click.stop="emit('moveTop')" style="position: absolute;top:0;left:50%;transform:translateX(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
2323
<BaseIcon :stroke="color" name="arrowTop" style="cursor: pointer"/>
2424
</button>
25-
<button @click.stop="emit('moveRight')" style="position: absolute;right:0;top:50%;transform:translateY(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
25+
<button data-cy="direction-pad-right" @click.stop="emit('moveRight')" style="position: absolute;right:0;top:50%;transform:translateY(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
2626
<BaseIcon :stroke="color" name="arrowRight" style="cursor: pointer"/>
2727
</button>
28-
<button @click.stop="emit('moveBottom')" style="position: absolute;bottom:0;left:50%;transform:translateX(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
28+
<button data-cy="direction-pad-bottom" @click.stop="emit('moveBottom')" style="position: absolute;bottom:0;left:50%;transform:translateX(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
2929
<BaseIcon :stroke="color" name="arrowBottom" style="cursor: pointer"/>
3030
</button>
31-
<button @click.stop="emit('reset')" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
31+
<button data-cy="direction-pad-reset" @click.stop="emit('reset')" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
3232
<BaseIcon :stroke="color" name="close" style="cursor: pointer" :strokeWidth="2"/>
3333
</button>
3434
</div>

‎src/atoms/BaseIcon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ const icons = computed(() => {
185185
</script>
186186

187187
<template>
188-
<svg :xmlns="XMLNS" :class="{ 'spin ': isSpin }" :viewBox="viewBox" :height="size" :width="size" v-html="icons[name]" style="background:transparent" />
188+
<svg data-cy="base-icon" :xmlns="XMLNS" :class="{ 'spin ': isSpin }" :viewBox="viewBox" :height="size" :width="size" v-html="icons[name]" style="background:transparent" />
189189
</template>
190190

191191
<style scoped>

0 commit comments

Comments
 (0)