Skip to content

Commit f30b893

Browse files
g-saraccag-saracca
committed
tests: add test cases and fix things
1 parent 55a2082 commit f30b893

14 files changed

Lines changed: 286 additions & 95 deletions

File tree

‎src/sections/collection/Collection.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,9 @@ export function Collection({
9393
)}
9494

9595
{previousPathIsHomepage &&
96-
CollectionHelper.isRootCollection(collection.hierarchy) ? null : (
96+
/* istanbul ignore next */ CollectionHelper.isRootCollection(
97+
collection.hierarchy
98+
) ? /* istanbul ignore next */ null : (
9799
<FeaturedItems
98100
collectionRepository={collectionRepository}
99101
collectionId={collection.id}

‎src/sections/collection/featured-items/FeaturedItems.tsx‎

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,16 @@ export const FeaturedItems = ({
3636
const hasFeaturedItems = collectionFeaturedItems.length > 0
3737

3838
useEffect(() => {
39-
if (!sliderRef.current) return
40-
41-
// checkSliderPositionToDisableButtons()
42-
43-
setIsOverflowing(sliderRef.current.scrollWidth > sliderRef.current.clientWidth)
39+
if (sliderRef.current) {
40+
setIsOverflowing(sliderRef.current.scrollWidth > sliderRef.current.clientWidth)
41+
}
4442

4543
const handleResize = () => {
46-
if (!sliderRef.current) return
47-
setIsOverflowing(sliderRef.current.scrollWidth > sliderRef.current?.clientWidth)
44+
if (sliderRef.current) {
45+
/* istanbul ignore next */ setIsOverflowing(
46+
sliderRef.current.scrollWidth > sliderRef.current?.clientWidth
47+
)
48+
}
4849
}
4950

5051
window.addEventListener('resize', handleResize)
@@ -58,6 +59,7 @@ export const FeaturedItems = ({
5859
return (
5960
<SkeletonTheme>
6061
<div
62+
data-testid="featured-items-skeleton"
6163
style={{
6264
display: 'flex',
6365
justifyContent: 'center',
@@ -86,48 +88,48 @@ export const FeaturedItems = ({
8688
const oneItemOnly = collectionFeaturedItems.length === 1
8789

8890
const handleNext = () => {
89-
if (!sliderRef.current) return
91+
if (sliderRef.current) {
92+
const { width } = sliderRef.current.getBoundingClientRect()
9093

91-
const { width } = sliderRef.current.getBoundingClientRect()
92-
93-
sliderRef.current.scrollBy({
94-
left: width,
95-
behavior: 'smooth'
96-
})
94+
sliderRef.current.scrollBy({
95+
left: width,
96+
behavior: 'smooth'
97+
})
98+
}
9799
}
98100

99101
const handlePrev = () => {
100-
if (!sliderRef.current) return
101-
102-
const { width } = sliderRef.current.getBoundingClientRect()
102+
if (sliderRef.current) {
103+
const { width } = sliderRef.current.getBoundingClientRect()
103104

104-
sliderRef.current.scrollBy({
105-
left: -width,
106-
behavior: 'smooth'
107-
})
105+
sliderRef.current.scrollBy({
106+
left: -width,
107+
behavior: 'smooth'
108+
})
109+
}
108110
}
109111

110112
const checkSliderPositionToDisableButtons = () => {
111-
if (!sliderRef.current) return
112-
113-
const { scrollLeft, scrollWidth, clientWidth } = sliderRef.current
114-
115-
if (scrollLeft < 50) {
116-
setBackBtnDisabled(true)
117-
} else {
118-
setBackBtnDisabled(false)
119-
}
120-
121-
// 50 is the threshold to know when the scroll is at the end
122-
if (scrollLeft + clientWidth > scrollWidth - 50) {
123-
setNextBtnDisabled(true)
124-
} else {
125-
setNextBtnDisabled(false)
113+
if (sliderRef.current) {
114+
const { scrollLeft, scrollWidth, clientWidth } = sliderRef.current
115+
116+
if (scrollLeft < 50) {
117+
setBackBtnDisabled(true)
118+
} else {
119+
setBackBtnDisabled(false)
120+
}
121+
122+
// 50 is the threshold to know when the scroll is at the end
123+
if (scrollLeft + clientWidth > scrollWidth - 50) {
124+
setNextBtnDisabled(true)
125+
} else {
126+
setNextBtnDisabled(false)
127+
}
126128
}
127129
}
128130

129131
return (
130-
<div className={`${styles.featured_items} ${className || ''}`}>
132+
<div className={`${styles.featured_items} ${className || ''}`} data-testid="featured-items">
131133
<h4>{t('featuredItems.title')}</h4>
132134

133135
<div className={styles['slider-container']} data-testid="featured-items-slider">
@@ -138,6 +140,7 @@ export const FeaturedItems = ({
138140
variant="secondary"
139141
aria-label={t('featuredItems.slider.prevLabel')}
140142
onClick={handlePrev}
143+
data-testid="featured-items-slider-prev-btn"
141144
disabled={backBtnDisabled}>
142145
<ChevronLeft size={30} color={theme.color.primary} />
143146
</Button>
@@ -172,6 +175,7 @@ export const FeaturedItems = ({
172175
variant="secondary"
173176
aria-label={t('featuredItems.slider.nextLabel')}
174177
onClick={handleNext}
178+
data-testid="featured-items-slider-next-btn"
175179
disabled={nextBtnDisabled}>
176180
<ChevronRight size={30} color={theme.color.primary} />
177181
</Button>

‎src/sections/collection/featured-items/custom-featured-item-card/CustomFeaturedItemCard.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,10 @@
6161
font-size: 14px;
6262
}
6363

64+
a {
65+
word-break: break-all;
66+
}
67+
6468
// Both of these are only beacuse block codes make card overflow
6569
:global .rte-code-block {
6670
white-space: pre-wrap;

‎src/sections/collection/featured-items/custom-featured-item-card/CustomFeaturedItemCard.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useMemo } from 'react'
21
import DOMPurify from 'dompurify'
32
import { Link } from 'react-router-dom'
43
import cn from 'classnames'
@@ -16,14 +15,6 @@ export const CustomFeaturedItemCard = ({
1615
featuredItem,
1716
collectionId
1817
}: CustomFeaturedItemCardProps) => {
19-
const imageUrl = useMemo(() => {
20-
if (!featuredItem.imageFileUrl) return null
21-
22-
return featuredItem.imageFileUrl.startsWith('blob:')
23-
? featuredItem.imageFileUrl
24-
: appendTimestampToImageUrl(featuredItem.imageFileUrl)
25-
}, [featuredItem.imageFileUrl])
26-
2718
const sanitizedContent = DOMPurify.sanitize(featuredItem.content, {
2819
USE_PROFILES: { html: true }
2920
})
@@ -33,12 +24,19 @@ export const CustomFeaturedItemCard = ({
3324
to={RouteWithParams.FEATURED_ITEM(collectionId, featuredItem.id.toString())}
3425
aria-label="View featured item"
3526
className={styles.link_wrapper}>
36-
<Card className={styles.custom_featured_item_card}>
37-
{imageUrl && <Card.Image src={imageUrl} alt="" variant="top" className={styles.image} />}
27+
<Card className={styles.custom_featured_item_card} data-testid="custom-featured-item-card">
28+
{featuredItem.imageFileUrl && (
29+
<Card.Image
30+
src={appendTimestampToImageUrl(featuredItem.imageFileUrl)}
31+
alt=""
32+
variant="top"
33+
className={styles.image}
34+
/>
35+
)}
3836
<Card.Body>
3937
<div
4038
className={cn(styles.content, {
41-
[styles.with_image]: imageUrl
39+
[styles.with_image]: featuredItem.imageFileUrl
4240
})}
4341
dangerouslySetInnerHTML={{ __html: sanitizedContent }}
4442
inert=""

‎src/sections/collection/featured-items/dv-object-featured-item-card/DvObjectFeaturedItemCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const DvObjectFeaturedItemCard = ({ featuredItem }: DvObjectFeaturedItemC
1313
href={featuredItem.linkUrl}
1414
target="_blank"
1515
rel="noopener noreferrer"
16-
aria-label={`View ${featuredItem.type ?? ''}`}
16+
aria-label={`View ${featuredItem.type as string}`}
1717
className={styles.link_wrapper}>
1818
<Card className={styles.custom_featured_item_card}>
1919
<Card.Body className={styles.body}>

‎tests/component/collection/domain/models/CollectionFeaturedItemMother.ts‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,6 @@ export class CollectionFeaturedItemMother {
3737
]
3838
}
3939

40-
static createFeaturedItem(props?: Partial<CollectionFeaturedItem>): CollectionFeaturedItem {
41-
return {
42-
id: 1,
43-
imageFileUrl: 'https://loremflickr.com/640/480',
44-
displayOrder: 1,
45-
content:
46-
'<h2 class="rte-heading">Some Title</h2><p class="rte-paragraph">Hello <strong class="rte-bold">Dataverse</strong></p>',
47-
...props
48-
}
49-
}
50-
5140
static createCustomFeaturedItem(
5241
img: 'css' | 'books',
5342
props?: Partial<CustomFeaturedItem>

‎tests/component/sections/collection/Collection.spec.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ describe('Collection page', () => {
238238
/>
239239
)
240240

241-
cy.findByTestId('featured-items-slider').should('exist')
241+
cy.findByTestId('featured-items').should('exist')
242242
})
243243

244244
it('does not show the collection featured items carousel when there are no featured items', () => {
@@ -254,6 +254,6 @@ describe('Collection page', () => {
254254
/>
255255
)
256256

257-
cy.findByTestId('featured-items-slider').should('not.exist')
257+
cy.findByTestId('featured-items').should('not.exist')
258258
})
259259
})

‎tests/component/sections/collection/featured-items/CustomFeaturedItemCard.spec.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { CustomFeaturedItemCard } from '@/sections/collection/featured-items/custom-featured-item-card/CustomFeaturedItemCard'
2+
import { CollectionFeaturedItemMother } from '@tests/component/collection/domain/models/CollectionFeaturedItemMother'
3+
4+
const featuredItemWithImage = CollectionFeaturedItemMother.createCustomFeaturedItem('css', {
5+
id: 1,
6+
content: 'hey'
7+
})
8+
9+
const featuredItemWithoutImage = CollectionFeaturedItemMother.createCustomFeaturedItem('books', {
10+
id: 2,
11+
content: 'hey I am without image',
12+
imageFileUrl: undefined
13+
})
14+
15+
describe('CustomFeaturedItemCard', () => {
16+
it('should render correctly', () => {
17+
cy.customMount(<CustomFeaturedItemCard collectionId="1" featuredItem={featuredItemWithImage} />)
18+
19+
cy.findByTestId('custom-featured-item-card').should('exist')
20+
cy.get('a').should('have.attr', 'href', '/featured-item/1/1')
21+
cy.findByRole('img').should('exist')
22+
cy.findByText('hey').should('exist')
23+
})
24+
25+
it('should render correctly without image', () => {
26+
cy.customMount(
27+
<CustomFeaturedItemCard collectionId="1" featuredItem={featuredItemWithoutImage} />
28+
)
29+
30+
cy.findByTestId('custom-featured-item-card').should('exist')
31+
cy.get('a').should('have.attr', 'href', '/featured-item/1/2')
32+
cy.findByRole('img').should('not.exist')
33+
cy.findByText('hey I am without image').should('exist')
34+
})
35+
})

0 commit comments

Comments
 (0)
⚡