Skip to content

Commit e750d02

Browse files
nasdannasdan
committed
fix unit tests
1 parent 436fa44 commit e750d02

File tree

4 files changed

+98
-64
lines changed

4 files changed

+98
-64
lines changed

‎.github/workflows/ci.yml

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: Publish Packages
2+
3+
on:
4+
pull_request:
5+
6+
jobs:
7+
publish-package:
8+
runs-on: ubuntu-latest
9+
steps:
10+
- name: Checkout Repository
11+
uses: actions/checkout@v3
12+
13+
- name: Add NPM registry
14+
uses: actions/setup-node@v3
15+
with:
16+
node-version: 18.x
17+
18+
- name: Install
19+
run: npm ci
20+
21+
- name: Tests
22+
run: npm test

‎packages/react-image-focal-point/src/image-focal-point.component.spec.tsx

Lines changed: 36 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { render, screen } from '@testing-library/react';
22
import userEvent from '@testing-library/user-event';
3-
import { ImageFocalPoint } from './image-focal-point.component';
3+
import { ImageFocalPoint, ImageFocalPointProps } from './image-focal-point.component';
44

55
describe('focal-point/focal-point.component specs', () => {
66
it('should render a focal point button and an image when it feeds required props', () => {
77
// Arrange
8-
const props = {
8+
const props: ImageFocalPointProps = {
99
src: 'test-image-url',
1010
onChange: jest.fn(),
1111
};
@@ -14,33 +14,49 @@ describe('focal-point/focal-point.component specs', () => {
1414
render(<ImageFocalPoint {...props} />);
1515

1616
// Assert
17-
expect(screen.getByRole('button', { name: 'Punto focal' })).toBeInTheDocument();
17+
expect(screen.getByRole('button', { name: 'Focal point' })).toBeInTheDocument();
1818
expect(screen.getByRole('img')).toBeInTheDocument();
1919
});
2020

21-
it('should render the focal point button in the middle of the image when it uses the default props', () => {
21+
it('should render the button name when it feeds some label value', () => {
2222
// Arrange
23-
const props = {
23+
const props: ImageFocalPointProps = {
2424
src: 'test-image-url',
2525
onChange: jest.fn(),
26+
labels: {
27+
focalPoint: 'test-button-name',
28+
},
2629
};
2730

2831
// Act
2932
render(<ImageFocalPoint {...props} />);
33+
const button = screen.getByRole('button', { name: props.labels?.focalPoint });
3034

3135
// Assert
32-
const focalPoint = screen.getByRole('button');
36+
expect(button).toBeInTheDocument();
37+
});
3338

34-
expect(focalPoint).toHaveStyle({ top: '50%', left: '50%' });
39+
it('should render the image alt attribute when it feeds some alt value', () => {
40+
// Arrange
41+
const props: ImageFocalPointProps = {
42+
src: 'test-image-url',
43+
onChange: jest.fn(),
44+
alt: 'test-image-alt',
45+
};
46+
47+
// Act
48+
render(<ImageFocalPoint {...props} />);
49+
const image = screen.getByRole('img') as HTMLImageElement;
50+
51+
// Assert
52+
expect(image.alt).toEqual(props.alt);
3553
});
3654

37-
it('should render the focal point button in top 20% and left 80% when it feeds x 80 and y 20', () => {
55+
it('should render the focal point button in the middle of the image when it uses the default props', () => {
3856
// Arrange
39-
const props = {
57+
const props: ImageFocalPointProps = {
4058
src: 'test-image-url',
4159
onChange: jest.fn(),
42-
x: 80,
43-
y: 20,
4460
};
4561

4662
// Act
@@ -49,30 +65,26 @@ describe('focal-point/focal-point.component specs', () => {
4965
// Assert
5066
const focalPoint = screen.getByRole('button');
5167

52-
expect(focalPoint).toHaveStyle({ top: '20%', left: '80%' });
68+
expect(focalPoint).toHaveStyle({ top: '50%', left: '50%' });
5369
});
5470

55-
// TODO: Check this issue with E2E tests
56-
xit('should call to onChange with new position when it moves the focal point', async () => {
71+
it('should render the focal point button in top 20% and left 80% when it feeds x 80 and y 20', () => {
5772
// Arrange
58-
const props = {
73+
const props: ImageFocalPointProps = {
5974
src: 'test-image-url',
6075
onChange: jest.fn(),
76+
focalPoint: {
77+
x: 80,
78+
y: 20,
79+
},
6180
};
6281

6382
// Act
6483
render(<ImageFocalPoint {...props} />);
6584

85+
// Assert
6686
const focalPoint = screen.getByRole('button');
67-
await userEvent.pointer([
68-
{ keys: '[MouseLeft>]', target: focalPoint },
69-
{
70-
coords: { x: 140, y: 140 },
71-
},
72-
{ keys: '[/MouseLeft]' },
73-
]);
7487

75-
// Assert
76-
expect(screen.getByRole('button')).toHaveStyle({ top: '50%', left: '50%' });
88+
expect(focalPoint).toHaveStyle({ top: '20%', left: '80%' });
7789
});
7890
});

‎packages/react-image-focal-point/src/image-focal-point.component.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,17 @@ const defaultLabels: LabelProps = {
1818
focalPoint: 'Focal point',
1919
};
2020

21-
interface Props {
21+
export interface ImageFocalPointProps {
2222
src: string;
2323
onChange: (focalPoint: FocalPoint) => void;
24-
alt?: string;
2524
focalPoint?: FocalPoint;
25+
alt?: string;
26+
labels?: LabelProps;
2627
classes?: ClassesProps;
2728
className?: string;
28-
labels?: LabelProps;
2929
}
3030

31-
export const ImageFocalPoint: React.FC<Props> = props => {
31+
export const ImageFocalPoint: React.FC<ImageFocalPointProps> = props => {
3232
const { src, onChange, alt, focalPoint } = props;
3333
const labels = { ...defaultLabels, ...(props.labels || {}) };
3434
const { ref, x, y, onMove, canMove, setCanMove } = useFocalPoint({ focalPoint, onChange });

‎packages/react-image-focal-point/src/image-focal-point.helpers.spec.ts

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ describe('focal-point/onMove specs', () => {
3939
onChange: jest.fn(),
4040
};
4141
const event = {
42-
clientX: 101,
43-
clientY: 100,
42+
pageX: 101,
43+
pageY: 100,
4444
currentTarget: imageContainer,
4545
} as unknown as MouseEvent;
4646

@@ -63,8 +63,8 @@ describe('focal-point/onMove specs', () => {
6363
onChange: jest.fn(),
6464
};
6565
const event = {
66-
clientX: 99,
67-
clientY: 100,
66+
pageX: 99,
67+
pageY: 100,
6868
currentTarget: imageContainer,
6969
} as unknown as MouseEvent;
7070

@@ -87,8 +87,8 @@ describe('focal-point/onMove specs', () => {
8787
onChange: jest.fn(),
8888
};
8989
const event = {
90-
clientX: 100,
91-
clientY: 101,
90+
pageX: 100,
91+
pageY: 101,
9292
currentTarget: imageContainer,
9393
} as unknown as MouseEvent;
9494

@@ -111,8 +111,8 @@ describe('focal-point/onMove specs', () => {
111111
onChange: jest.fn(),
112112
};
113113
const event = {
114-
clientX: 100,
115-
clientY: 99,
114+
pageX: 100,
115+
pageY: 99,
116116
currentTarget: imageContainer,
117117
} as unknown as MouseEvent;
118118

@@ -135,8 +135,8 @@ describe('focal-point/onMove specs', () => {
135135
onChange: jest.fn(),
136136
};
137137
const event = {
138-
clientX: 98,
139-
clientY: 102,
138+
pageX: 98,
139+
pageY: 102,
140140
currentTarget: imageContainer,
141141
} as unknown as MouseEvent;
142142

@@ -159,8 +159,8 @@ describe('focal-point/onMove specs', () => {
159159
onChange: jest.fn(),
160160
};
161161
const event = {
162-
clientX: -20,
163-
clientY: 100,
162+
pageX: -20,
163+
pageY: 100,
164164
currentTarget: imageContainer,
165165
} as unknown as MouseEvent;
166166

@@ -183,8 +183,8 @@ describe('focal-point/onMove specs', () => {
183183
onChange: jest.fn(),
184184
};
185185
const event = {
186-
clientX: 100,
187-
clientY: -20,
186+
pageX: 100,
187+
pageY: -20,
188188
currentTarget: imageContainer,
189189
} as unknown as MouseEvent;
190190

@@ -207,8 +207,8 @@ describe('focal-point/onMove specs', () => {
207207
onChange: jest.fn(),
208208
};
209209
const event = {
210-
clientX: 210,
211-
clientY: 100,
210+
pageX: 210,
211+
pageY: 100,
212212
currentTarget: imageContainer,
213213
} as unknown as MouseEvent;
214214

@@ -231,8 +231,8 @@ describe('focal-point/onMove specs', () => {
231231
onChange: jest.fn(),
232232
};
233233
const event = {
234-
clientX: 100,
235-
clientY: 220,
234+
pageX: 100,
235+
pageY: 220,
236236
currentTarget: imageContainer,
237237
} as unknown as MouseEvent;
238238

@@ -279,8 +279,8 @@ describe('focal-point/onMove specs', () => {
279279
onChange: jest.fn(),
280280
};
281281
const event = {
282-
clientX: 501,
283-
clientY: 500,
282+
pageX: 501,
283+
pageY: 500,
284284
currentTarget: imageContainer,
285285
} as unknown as MouseEvent;
286286

@@ -303,8 +303,8 @@ describe('focal-point/onMove specs', () => {
303303
onChange: jest.fn(),
304304
};
305305
const event = {
306-
clientX: 499,
307-
clientY: 500,
306+
pageX: 499,
307+
pageY: 500,
308308
currentTarget: imageContainer,
309309
} as unknown as MouseEvent;
310310

@@ -327,8 +327,8 @@ describe('focal-point/onMove specs', () => {
327327
onChange: jest.fn(),
328328
};
329329
const event = {
330-
clientX: 500,
331-
clientY: 501,
330+
pageX: 500,
331+
pageY: 501,
332332
currentTarget: imageContainer,
333333
} as unknown as MouseEvent;
334334

@@ -351,8 +351,8 @@ describe('focal-point/onMove specs', () => {
351351
onChange: jest.fn(),
352352
};
353353
const event = {
354-
clientX: 500,
355-
clientY: 499,
354+
pageX: 500,
355+
pageY: 499,
356356
currentTarget: imageContainer,
357357
} as unknown as MouseEvent;
358358

@@ -375,8 +375,8 @@ describe('focal-point/onMove specs', () => {
375375
onChange: jest.fn(),
376376
};
377377
const event = {
378-
clientX: 498,
379-
clientY: 502,
378+
pageX: 498,
379+
pageY: 502,
380380
currentTarget: imageContainer,
381381
} as unknown as MouseEvent;
382382

@@ -399,8 +399,8 @@ describe('focal-point/onMove specs', () => {
399399
onChange: jest.fn(),
400400
};
401401
const event = {
402-
clientX: 320,
403-
clientY: 500,
402+
pageX: 320,
403+
pageY: 500,
404404
currentTarget: imageContainer,
405405
} as unknown as MouseEvent;
406406

@@ -423,8 +423,8 @@ describe('focal-point/onMove specs', () => {
423423
onChange: jest.fn(),
424424
};
425425
const event = {
426-
clientX: 500,
427-
clientY: 320,
426+
pageX: 500,
427+
pageY: 320,
428428
currentTarget: imageContainer,
429429
} as unknown as MouseEvent;
430430

@@ -447,8 +447,8 @@ describe('focal-point/onMove specs', () => {
447447
onChange: jest.fn(),
448448
};
449449
const event = {
450-
clientX: 610,
451-
clientY: 500,
450+
pageX: 610,
451+
pageY: 500,
452452
currentTarget: imageContainer,
453453
} as unknown as MouseEvent;
454454

@@ -471,8 +471,8 @@ describe('focal-point/onMove specs', () => {
471471
onChange: jest.fn(),
472472
};
473473
const event = {
474-
clientX: 500,
475-
clientY: 620,
474+
pageX: 500,
475+
pageY: 620,
476476
currentTarget: imageContainer,
477477
} as unknown as MouseEvent;
478478

0 commit comments

Comments
 (0)