Merge pull request #1493 from rubynguyen1510/develop

Added data-tag attribute to passageCard
klembot · Feb 11, 2024 · 5e2abc9 · 5e2abc9
2 parents aac7690 d290b36
commit 5e2abc9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/components/passage/__tests__/passage-card.test.tsx b/src/components/passage/__tests__/passage-card.test.tsx
@@ -5,6  5,7 @@ import * as React from 'react';
 import {fakePassage} from '../../../test-util';
 import {passageIsEmpty} from '../../../util/passage-is-empty';
 import {PassageCard, PassageCardProps} from '../passage-card';
 import {lorem} from 'faker';
 
 jest.mock('../../tag/tag-stripe');
 jest.mock('../../../util/passage-is-empty');
@@ -32,6  33,25 @@ describe('<PassageCard>', () => {
 		);
 	}
 
 	it('should include data-passage-tag attribute with space-separated tags', () => {
 		const tags = [lorem.slug(), lorem.slug()];
 		const passage = fakePassage({tags});
 		renderComponent({passage});
 
 		// eslint-disable-next-line testing-library/no-node-access
 		const passageElement=document.querySelector('.passage-card')
 		expect(passageElement).toHaveAttribute('data-passage-tags', tags.join(' '));
 	});
 
 	it('should include data-passage-tag with an empty string when passage has no tags', () => {
 		const passage = fakePassage({tags:[]});
 		renderComponent({passage});
 
 		// eslint-disable-next-line testing-library/no-node-access
 		const passageElement=document.querySelector('.passage-card')
 		expect(passageElement).toHaveAttribute('data-passage-tags', '');
 	});
 
 	it('displays the passage name', () => {
 		const passage = fakePassage();
 

diff --git a/src/components/passage/passage-card.tsx b/src/components/passage/passage-card.tsx
@@ -107,7  107,7 @@ export const PassageCard: React.FC<PassageCardProps> = React.memo(props => {
 			onDrag={onDrag}
 			onStop={onDragStop}
 		>
-			<div className={className} ref={container} style={style}>
 			<div className={className} ref={container} style={style} data-passage-tags={passage.tags.join(' ')}>
 				<SelectableCard
 					highlighted={passage.highlighted}
 					label={passage.name}
@@ -124,4  124,4 @@ export const PassageCard: React.FC<PassageCardProps> = React.memo(props => {
 	);
 });
 
-PassageCard.displayName = 'PassageCard';
 PassageCard.displayName = 'PassageCard';