test: add prop

This commit is contained in:
r00gm 2024-09-18 11:59:08 +02:00
parent 0187df7225
commit 50cbfba5a1
No known key found for this signature in database
2 changed files with 20 additions and 8 deletions

View file

@ -18,4 +18,12 @@ describe('CanvasHandleRectangle', () => {
expect(wrapper.container.querySelector(`.${customClass}`)).toBeTruthy(); expect(wrapper.container.querySelector(`.${customClass}`)).toBeTruthy();
}); });
it('should apply sourceEdgeHovered prop correctly', () => {
const wrapper = renderComponent({
props: { sourceEdgeHovered: true },
});
expect(wrapper.container.querySelector('.rectangle--hovered')).toBeTruthy();
});
}); });

View file

@ -1,5 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
withDefaults( import { computed, useCssModule } from 'vue';
const props = withDefaults(
defineProps<{ defineProps<{
handleClasses?: string; handleClasses?: string;
sourceEdgeHovered: boolean; sourceEdgeHovered: boolean;
@ -8,16 +10,18 @@ withDefaults(
handleClasses: undefined, handleClasses: undefined,
}, },
); );
const $style = useCssModule();
const classes = computed(() => [
$style.rectangle,
props.handleClasses,
...(props.sourceEdgeHovered ? [$style['rectangle--hovered']] : []),
]);
</script> </script>
<template> <template>
<div <div :class="classes" />
:class="{
[$style.rectangle]: true,
handleClasses,
[$style['rectangle--hovered']]: sourceEdgeHovered,
}"
/>
</template> </template>
<style lang="scss" module> <style lang="scss" module>