Skip to content

Commit

Permalink
refactor: update test selector
Browse files Browse the repository at this point in the history
  • Loading branch information
@cleanerzkp @kelsos
cleanerzkp authored and kelsos committed Nov 29, 2024
1 parent 4c7f062 commit 37632c3
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 9 deletions.
3 changes: 2 additions & 1 deletion src/components/color-picker/RuiColorDisplay.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ const { copy, copied } = useClipboard({ source: color });
>
<template #activator>
<div
class="rui-color-display w-8 h-8 min-w-8 min-h-8 rounded-full cursor-pointer"
class="w-8 h-8 min-w-8 min-h-8 rounded-full cursor-pointer"
data-cy="color-display"
:style="{ background: color }"
@click="copy()"
/>
Expand Down
16 changes: 8 additions & 8 deletions src/components/color-picker/RuiColorPicker.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ describe('colorPicker', () => {
const wrapper = createWrapper();

expect(wrapper.find('.rui-color-board').exists()).toBeTruthy();
expect(wrapper.find('.rui-color-display').exists()).toBeTruthy();
expect(wrapper.find('[data-cy="color-display"]').exists()).toBeTruthy();
expect(wrapper.find('.rui-color-hue').exists()).toBeTruthy();
expect(wrapper.find('.rui-color-input').exists()).toBeTruthy();
});
Expand All @@ -41,7 +41,7 @@ describe('colorPicker', () => {
expect(wrapper.find('.rui-color-board').attributes('style')).toBe('background-color: rgb(255, 0, 0);');
expect(wrapper.find('.rui-color-board div[class*=_cursor_]').attributes('style')).toBe('top: 0%; left: 100%;');

expect(wrapper.find('.rui-color-display').attributes('style')).toBe('background: rgb(255, 0, 0);');
expect(wrapper.find('[data-cy="color-display"]').attributes('style')).toBe('background: rgb(255, 0, 0);');

expect(wrapper.find('.rui-color-hue div[class*=_cursor_]').attributes('style')).toBe('left: calc(0% + 8px);');

Expand All @@ -65,7 +65,7 @@ describe('colorPicker', () => {
expect(wrapper.find('.rui-color-board').attributes('style')).toBe('background-color: rgb(0, 255, 255);');
expect(wrapper.find('.rui-color-board div[class*=_cursor_]').attributes('style')).toBe('top: 0%; left: 50%;');

expect(wrapper.find('.rui-color-display').attributes('style')).toBe('background: rgb(128, 255, 255);');
expect(wrapper.find('[data-cy="color-display"]').attributes('style')).toBe('background: rgb(128, 255, 255);');

// middle position, then substract by (half thumb size / element width defined on the useElementBounding);
const percentagePosition = roundTwoDecimal(50 - ((16 / 2) / 300 * 100));
Expand All @@ -83,7 +83,7 @@ describe('colorPicker', () => {
expect((wrapper.find('input').element as HTMLInputElement).value).toBe('80ffff');
});

it ('type on the input', async () => {
it('type on the input', async () => {
const wrapper = createWrapper();
await nextTick();

Expand All @@ -96,7 +96,7 @@ describe('colorPicker', () => {
expect(wrapper.find('.rui-color-board').attributes('style')).toBe('background-color: rgb(255, 0, 0);');
expect(wrapper.find('.rui-color-board div[class*=_cursor_]').attributes('style')).toBe('top: 0%; left: 100%;');

expect(wrapper.find('.rui-color-display').attributes('style')).toBe('background: rgb(255, 0, 0);');
expect(wrapper.find('[data-cy="color-display"]').attributes('style')).toBe('background: rgb(255, 0, 0);');

expect(wrapper.find('.rui-color-hue div[class*=_cursor_]').attributes('style')).toBe('left: calc(0% + 8px);');

Expand Down Expand Up @@ -125,7 +125,7 @@ describe('colorPicker', () => {
expect(wrapper.find('.rui-color-board').attributes('style')).toBe('background-color: rgb(0, 255, 255);');
expect(wrapper.find('.rui-color-board div[class*=_cursor_]').attributes('style')).toBe('top: 0%; left: 50%;');

expect(wrapper.find('.rui-color-display').attributes('style')).toBe('background: rgb(128, 255, 255);');
expect(wrapper.find('[data-cy="color-display"]').attributes('style')).toBe('background: rgb(128, 255, 255);');

// middle position, then substract by (half thumb size / element width defined on the useElementBounding);
const percentagePosition = roundTwoDecimal(50 - ((16 / 2) / 300 * 100));
Expand All @@ -148,7 +148,7 @@ describe('colorPicker', () => {

// Selected color: hsv(360, 100, 100) => rgb(255, 0, 0);
expect(wrapper.find('.rui-color-board').attributes('style')).toBe('background-color: rgb(255, 0, 0);');
expect(wrapper.find('.rui-color-display').attributes('style')).toBe('background: rgb(255, 0, 0);');
expect(wrapper.find('[data-cy="color-display"]').attributes('style')).toBe('background: rgb(255, 0, 0);');
expect((wrapper.find('input').element as HTMLInputElement).value).toBe('ff0000');

// end position, then substract by (thumb size / element width defined on the useElementBounding);
Expand All @@ -162,7 +162,7 @@ describe('colorPicker', () => {
await nextTick();

// Selected color: hsv(360, 50, 50) => rgb(128, 64, 64);
expect(wrapper.find('.rui-color-display').attributes('style')).toBe('background: rgb(128, 64, 64);');
expect(wrapper.find('[data-cy="color-display"]').attributes('style')).toBe('background: rgb(128, 64, 64);');
expect((wrapper.find('input').element as HTMLInputElement).value).toBe('804040');
expect(wrapper.find('.rui-color-board div[class*=_cursor_]').attributes('style')).toBe('top: 50%; left: 50%;');

Expand Down

0 comments on commit 37632c3

Please sign in to comment.