-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: add paginated story and add tests for utils
- Loading branch information
Showing
5 changed files
with
109 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
packages/libs/react-ui/src/components/Tabs/utils/calculateScroll.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { RefObject } from 'react'; | ||
import { describe, expect, it } from 'vitest'; | ||
import { calculateScroll } from './calculateScroll'; | ||
import { mockChildElementsRef } from './getMinimalChildWidth.test'; | ||
|
||
const wrapperContainerRef = { | ||
current: { | ||
...mockChildElementsRef.current, | ||
scrollWidth: 1000, | ||
offsetWidth: 100, | ||
}, | ||
} as RefObject<HTMLDivElement>; | ||
|
||
const currentValue = (scrollLeft: number) => | ||
({ | ||
current: { | ||
scrollLeft, | ||
}, | ||
}) as RefObject<HTMLDivElement>; | ||
|
||
describe('calculateScroll', () => { | ||
it('should return 0 if direction is back and currentValue is less than offset', () => { | ||
expect(calculateScroll('back', wrapperContainerRef, currentValue(0))).toBe( | ||
0, | ||
); | ||
}); | ||
|
||
it('should return 700 if direction is back and currentValue is 750', () => { | ||
expect( | ||
calculateScroll('back', wrapperContainerRef, currentValue(750)), | ||
).toBe(700); | ||
}); | ||
|
||
it('should return 50 if direction is forward and currentValue is 0', () => { | ||
expect( | ||
calculateScroll('forward', wrapperContainerRef, currentValue(0)), | ||
).toBe(50); | ||
}); | ||
|
||
it('Should scroll to the end when the next value is more than the max width', () => { | ||
expect( | ||
calculateScroll('forward', wrapperContainerRef, currentValue(951)), | ||
).toBe(900); | ||
}); | ||
|
||
it("Should return 0 if elements aren't present", () => { | ||
expect( | ||
calculateScroll( | ||
'forward', | ||
{} as unknown as RefObject<HTMLDivElement>, | ||
{} as unknown as RefObject<HTMLDivElement>, | ||
), | ||
).toBe(0); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
packages/libs/react-ui/src/components/Tabs/utils/getMinimalChildWidth.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import type { RefObject } from 'react'; | ||
import { describe, expect, it } from 'vitest'; | ||
import { getMinimalChildWidth } from './getMinimalChildWidth'; | ||
|
||
export const mockChildElementsRef = { | ||
current: { | ||
children: [ | ||
{ | ||
offsetWidth: 59, | ||
}, | ||
{ | ||
offsetWidth: 50, | ||
}, | ||
{ | ||
offsetWidth: 55, | ||
}, | ||
{ | ||
offsetWidth: 60, | ||
}, | ||
], | ||
length: 3, | ||
}, | ||
} as unknown as RefObject<HTMLDivElement>; | ||
|
||
describe('getMinimalChildWidth', () => { | ||
it('should return the lowest value', async () => { | ||
expect(getMinimalChildWidth(mockChildElementsRef)).toBe(50); | ||
}); | ||
|
||
it('should return 0 if no children are present', async () => { | ||
expect( | ||
getMinimalChildWidth({ | ||
current: { length: 0 }, | ||
} as unknown as RefObject<HTMLDivElement>), | ||
).toBe(0); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters