@kiva/kv-components 3.64.0 → 3.65.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.65.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.64.0...@kiva/kv-components@3.65.0) (2024-03-19)
+
+
+### Features
+
+* logged in feats for commenting components ([#370](https://github.com/kiva/kv-ui-elements/issues/370)) ([bee56c9](https://github.com/kiva/kv-ui-elements/commit/bee56c9fa3451ef91e89b3b64a5f7846840fedcf))
+
+
+
+
+
 # [3.64.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.63.1...@kiva/kv-components@3.64.0) (2024-03-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.64.0",
+  "version": "3.65.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "45a8ab6c3566690a670f9a836cc8b71b9f7fddc5"
+  "gitHead": "fc9dab72dc150db1190d3d1ca6603eab7c24842a"
 }

package/tests/unit/specs/components/KvCommentsContainer.spec.js

@@ -3,18 +3,25 @@ import userEvent from '@testing-library/user-event';
 import Container, { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
 import { ADD_COMMENT_ID, ADD_COMMENT_EVENT } from '../../../../vue/KvCommentsAdd.vue';
 
+const LOGGED_IN_USER = 'TEST_USER';
+
 const renderContainer = (props = {}) => {
 	return render(Container, { props });
 };
 
 describe('KvCommentsContainer', () => {
-	it('should render comments add component', async () => {
+	it('should not render comments add component for guest user', async () => {
 		const { container } = renderContainer();
+		expect(container.querySelectorAll(`#${ADD_COMMENT_ID}`).length).toBe(0);
+	});
+
+	it('should render comments add component for logged in user', async () => {
+		const { container } = renderContainer({ userPublicId: LOGGED_IN_USER });
 		expect(container.querySelectorAll(`#${ADD_COMMENT_ID}`).length).toBe(1);
 	});
 
-	it('should emit comment', async () => {
-		const { getByPlaceholderText, getByRole, emitted } = renderContainer();
+	it('should emit comment for logged in user', async () => {
+		const { getByPlaceholderText, getByRole, emitted } = renderContainer({ userPublicId: LOGGED_IN_USER });
 		const textInput = getByPlaceholderText('Add a comment...');
 		const commentButton = getByRole('button', { name: 'Comment' });
 		const TEST_INPUT = 'test test';

package/tests/unit/specs/components/KvCommentsList.spec.js

@@ -5,6 +5,8 @@ import activityFeed from '../../../fixtures/mockFeedActivityData';
 import { LIKE_COMMENT_EVENT, REPLY_COMMENT_EVENT } from '../../../../vue/KvCommentsListItem.vue';
 import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
 
+const LOGGED_IN_USER = 'TEST_USER';
+
 const renderList = (props = {}) => {
 	return render(ListComponent,
 		{
@@ -32,9 +34,17 @@ describe('KvCommentsList', () => {
 		expect(container.querySelectorAll(`#${id}`).length).toBe(1);
 	});
 
-	it('should emit like reaction events', async () => {
+	it('should not emit like reaction events for guest user', async () => {
 		const { getAllByRole, emitted } = renderList({ comments });
 		const likeButton = getAllByRole('button', { name: 'Like' })[0];
+
+		await userEvent.click(likeButton);
+		expect(emitted()[ADD_REACTION_EVENT]).toEqual(undefined);
+	});
+
+	it('should emit like reaction events for logged in user', async () => {
+		const { getAllByRole, emitted } = renderList({ comments, userPublicId: LOGGED_IN_USER });
+		const likeButton = getAllByRole('button', { name: 'Like' })[0];
 		const firstComment = comments.comment[0];
 
 		const TEST_OBJ = {
@@ -46,13 +56,13 @@ describe('KvCommentsList', () => {
 		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: LIKE_COMMENT_EVENT, value: true }]]);
 	});
 
-	it('should emit reply reaction events', async () => {
+	it('should emit reply reaction events for logged in user', async () => {
 		const {
 			getAllByRole,
 			getByRole,
 			getByPlaceholderText,
 			emitted,
-		} = renderList({ comments });
+		} = renderList({ comments, userPublicId: LOGGED_IN_USER });
 		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
 		const firstComment = comments.comment[0];
 

package/tests/unit/specs/components/KvCommentsListItem.spec.js

@@ -5,6 +5,7 @@ import activityFeed from '../../../fixtures/mockFeedActivityData';
 import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
 
 const comment = activityFeed.results[0].latest_reactions.comment[0];
+const LOGGED_IN_USER = 'TEST_USER';
 
 const renderComment = (props = {}) => {
 	return render(KvCommentsListItem,
@@ -24,8 +25,15 @@ const renderComment = (props = {}) => {
 };
 
 describe('KvCommentsListItem', () => {
-	it('should render defaults', () => {
+	it('should render defaults for guest user', () => {
 		const { getAllByRole } = renderComment({ comment });
+		const likeButton = getAllByRole('button', { name: 'Like' })[0];
+
+		expect(likeButton).toBeDefined();
+	});
+
+	it('should render defaults for logged in user', () => {
+		const { getAllByRole } = renderComment({ comment, userPublicId: LOGGED_IN_USER });
 		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
 		const likeButton = getAllByRole('button', { name: 'Like' })[0];
 
@@ -38,13 +46,24 @@ describe('KvCommentsListItem', () => {
 		getByText(comment.data.text);
 	});
 
-	it('should handle like button click', async () => {
+	it('should not handle like button click for guest user', async () => {
 		const { getAllByRole, emitted, getByTestId } = renderComment({ comment });
 		const likeButton = getAllByRole('button', { name: 'Like' })[0];
 		const likeCount = getByTestId('like-count');
 
 		await userEvent.click(likeButton);
 
+		expect(likeCount).toHaveTextContent(1);
+		expect(emitted()[ADD_REACTION_EVENT]).toEqual(undefined);
+	});
+
+	it('should handle like button click for logged in user', async () => {
+		const { getAllByRole, emitted, getByTestId } = renderComment({ comment, userPublicId: LOGGED_IN_USER });
+		const likeButton = getAllByRole('button', { name: 'Like' })[0];
+		const likeCount = getByTestId('like-count');
+
+		await userEvent.click(likeButton);
+
 		expect(likeCount).toHaveTextContent(1);
 		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{
 			id: comment.id,
@@ -54,21 +73,21 @@ describe('KvCommentsListItem', () => {
 		}]]);
 	});
 
-	it('should handle reply button click', async () => {
-		const { getAllByRole, getByRole } = renderComment({ comment });
+	it('should handle reply button click for logged in user', async () => {
+		const { getAllByRole, getByRole } = renderComment({ comment, userPublicId: LOGGED_IN_USER });
 		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
 
 		await userEvent.click(replyButton);
 		getByRole('button', { name: 'Comment' });
 	});
 
-	it('should emit reply reaction events', async () => {
+	it('should emit reply reaction events for logged in user', async () => {
 		const {
 			getAllByRole,
 			getByRole,
 			getByPlaceholderText,
 			emitted,
-		} = renderComment({ comment });
+		} = renderComment({ comment, userPublicId: LOGGED_IN_USER });
 		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
 
 		const TEST_OBJ = {

package/vue/KvCommentsContainer.vue

@@ -1,6 +1,7 @@
 <template>
 	<div>
 		<kv-comments-add
+			v-if="userPublicId"
 			:user-image-url="userImageUrl"
 			:user-display-name="userDisplayName"
 			@add-comment="handleReaction"

package/vue/KvCommentsListItem.vue

@@ -26,6 +26,7 @@
 				<kv-comments-heart-button
 					:is-small="true"
 					:is-liked="isLiked"
+					:disabled="!userPublicId"
 					@click="addReaction(LIKE_COMMENT_EVENT, $event)"
 				/>
 				<p
@@ -37,6 +38,7 @@
 				</p>
 			</div>
 			<kv-comments-reply-button
+				v-if="userPublicId"
 				:number-of-replies="numberOfReplies"
 				@click="replyClick"
 			/>