@kiva/kv-components 3.65.2 → 3.66.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/package.json +2 -2
- package/tests/fixtures/mockFeedActivityData.js +146 -201
- package/tests/unit/specs/components/KvCommentsList.spec.js +4 -6
- package/tests/unit/specs/components/KvCommentsListItem.spec.js +14 -3
- package/tests/unit/specs/components/KvCommentsReplyButton.spec.js +0 -8
- package/vue/KvCommentsContainer.vue +2 -2
- package/vue/KvCommentsList.vue +3 -3
- package/vue/KvCommentsListItem.vue +38 -16
- package/vue/KvCommentsReplyButton.vue +0 -15
- package/vue/stories/KvCommentsContainer.stories.js +1 -3
- package/vue/stories/KvCommentsList.stories.js +1 -3
- package/vue/stories/KvCommentsListItem.stories.js +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,30 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.66.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.66.0...@kiva/kv-components@3.66.1) (2024-03-21)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* adjust commenting components initially for chat data ([f821dcf](https://github.com/kiva/kv-ui-elements/commit/f821dcf7762f5a0e584a788a5e551fd5762032e6))
|
|
12
|
+
* adjust for new data type ([99a33fb](https://github.com/kiva/kv-ui-elements/commit/99a33fbf4de6e4cab2d5759a7b0b4f94f8a707eb))
|
|
13
|
+
* another data tweak ([770be92](https://github.com/kiva/kv-ui-elements/commit/770be9278f1017a553e5d3480dc530824567a4f1))
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
# [3.66.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.65.2...@kiva/kv-components@3.66.0) (2024-03-20)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Features
|
|
23
|
+
|
|
24
|
+
* collapsable replies list added to commenting component ([#373](https://github.com/kiva/kv-ui-elements/issues/373)) ([612a880](https://github.com/kiva/kv-ui-elements/commit/612a8806ffd74411a774f6bdf5efb30e877abaa1))
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
6
30
|
## [3.65.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.65.1...@kiva/kv-components@3.65.2) (2024-03-19)
|
|
7
31
|
|
|
8
32
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.66.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"optional": true
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "ee224b843c6a3a25266034ae2215759ff0462016"
|
|
79
79
|
}
|
|
@@ -1,210 +1,155 @@
|
|
|
1
|
-
const comments =
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
|
|
45
|
-
},
|
|
46
|
-
},
|
|
47
|
-
kind: 'like',
|
|
48
|
-
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
49
|
-
data: {},
|
|
50
|
-
parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
|
|
51
|
-
latest_children: {},
|
|
52
|
-
children_counts: {},
|
|
53
|
-
},
|
|
54
|
-
],
|
|
55
|
-
comment: [
|
|
56
|
-
{
|
|
57
|
-
created_at: '2024-02-28T20:04:21.445272Z',
|
|
58
|
-
updated_at: '2024-02-28T20:04:21.445272Z',
|
|
59
|
-
id: '290a6c07-143a-416e-b016-ac0d9ac8ad92',
|
|
60
|
-
user: {
|
|
61
|
-
data: {
|
|
62
|
-
publicLenderId: 'Casey1234',
|
|
63
|
-
name: 'Casey',
|
|
64
|
-
image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
|
|
65
|
-
},
|
|
66
|
-
},
|
|
67
|
-
kind: 'comment',
|
|
68
|
-
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
69
|
-
data: {
|
|
70
|
-
text: 'child comment',
|
|
71
|
-
},
|
|
72
|
-
parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
|
|
73
|
-
latest_children: {
|
|
74
|
-
comment: [
|
|
75
|
-
{
|
|
76
|
-
created_at: '2024-02-28T20:04:21.445272Z',
|
|
77
|
-
updated_at: '2024-02-28T20:04:21.445272Z',
|
|
78
|
-
id: '290a6c07-143a-416e-b016-ac0d9ac8ad93',
|
|
79
|
-
user: {
|
|
80
|
-
data: {
|
|
81
|
-
publicLenderId: 'Sarah1234',
|
|
82
|
-
name: 'Sarah',
|
|
83
|
-
image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
|
|
84
|
-
},
|
|
85
|
-
},
|
|
86
|
-
kind: 'comment',
|
|
87
|
-
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
88
|
-
data: {
|
|
89
|
-
text: 'child comment reply',
|
|
90
|
-
},
|
|
91
|
-
parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
|
|
92
|
-
latest_children: {},
|
|
93
|
-
children_counts: {},
|
|
94
|
-
},
|
|
95
|
-
],
|
|
96
|
-
},
|
|
97
|
-
children_counts: {},
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
created_at: '2024-02-28T20:04:21.445272Z',
|
|
101
|
-
updated_at: '2024-02-28T20:04:21.445272Z',
|
|
102
|
-
id: '290a6c07-143a-416e-b016-ac0d9ac8ad90',
|
|
103
|
-
user: {
|
|
104
|
-
data: {
|
|
105
|
-
publicLenderId: 'Sophie1234',
|
|
106
|
-
name: 'Sophie',
|
|
107
|
-
image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
|
|
108
|
-
},
|
|
109
|
-
},
|
|
110
|
-
kind: 'comment',
|
|
111
|
-
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
112
|
-
data: {
|
|
113
|
-
text: 'second child comment',
|
|
114
|
-
},
|
|
115
|
-
parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
|
|
116
|
-
latest_children: {
|
|
117
|
-
like: [
|
|
118
|
-
{
|
|
119
|
-
created_at: '2024-02-28T20:04:21.445272Z',
|
|
120
|
-
updated_at: '2024-02-28T20:04:21.445272Z',
|
|
121
|
-
id: '290a6c07-143a-416e-b016-ac0d9ac8ad99',
|
|
122
|
-
user: {
|
|
123
|
-
created_at: '2024-02-28T19:09:54.093757Z',
|
|
124
|
-
updated_at: '2024-02-28T19:09:54.093757Z',
|
|
125
|
-
data: {
|
|
126
|
-
publicLenderId: 'Jess1234',
|
|
127
|
-
name: 'Jess',
|
|
128
|
-
image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
|
|
129
|
-
},
|
|
130
|
-
},
|
|
131
|
-
kind: 'like',
|
|
132
|
-
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
133
|
-
data: {},
|
|
134
|
-
parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
|
|
135
|
-
latest_children: {},
|
|
136
|
-
children_counts: {},
|
|
137
|
-
},
|
|
138
|
-
],
|
|
139
|
-
},
|
|
140
|
-
children_counts: {},
|
|
141
|
-
},
|
|
142
|
-
],
|
|
143
|
-
},
|
|
144
|
-
children_counts: {
|
|
145
|
-
comment: 1,
|
|
146
|
-
like: 1,
|
|
147
|
-
},
|
|
1
|
+
const comments = [
|
|
2
|
+
{
|
|
3
|
+
created_at: '2024-02-01T20:12:31.398932Z',
|
|
4
|
+
updated_at: '2024-02-01T20:12:31.398932Z',
|
|
5
|
+
id: 'dade3812-6aa0-4c32-90ea-2366dab178a1',
|
|
6
|
+
kind: 'comment',
|
|
7
|
+
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
8
|
+
text: 'another guest comment',
|
|
9
|
+
user: {
|
|
10
|
+
publicLenderId: 'Nathan2352',
|
|
11
|
+
name: 'Nathan',
|
|
12
|
+
image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
|
|
13
|
+
},
|
|
14
|
+
parent: '',
|
|
15
|
+
latest_children: {
|
|
16
|
+
like: [
|
|
17
|
+
{
|
|
18
|
+
created_at: '2024-02-28T20:04:21.445272Z',
|
|
19
|
+
updated_at: '2024-02-28T20:04:21.445272Z',
|
|
20
|
+
id: '290a6c07-143a-416e-b016-ac0d9ac8ad91',
|
|
21
|
+
user: {
|
|
22
|
+
created_at: '2024-02-28T19:09:54.093757Z',
|
|
23
|
+
updated_at: '2024-02-28T19:09:54.093757Z',
|
|
24
|
+
publicLenderId: 'Jess1234',
|
|
25
|
+
name: 'Jess',
|
|
26
|
+
image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
|
|
27
|
+
},
|
|
28
|
+
kind: 'like',
|
|
29
|
+
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
30
|
+
parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
|
|
31
|
+
latest_children: {},
|
|
32
|
+
children_counts: {},
|
|
33
|
+
},
|
|
34
|
+
],
|
|
35
|
+
comment: [
|
|
36
|
+
{
|
|
37
|
+
created_at: '2024-02-28T20:04:21.445272Z',
|
|
38
|
+
updated_at: '2024-02-28T20:04:21.445272Z',
|
|
39
|
+
id: '290a6c07-143a-416e-b016-ac0d9ac8ad92',
|
|
40
|
+
user: {
|
|
41
|
+
publicLenderId: 'Casey1234',
|
|
42
|
+
name: 'Casey',
|
|
43
|
+
image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
|
|
148
44
|
},
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
45
|
+
kind: 'comment',
|
|
46
|
+
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
47
|
+
text: 'child comment',
|
|
48
|
+
parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
|
|
49
|
+
latest_children: {
|
|
50
|
+
comment: [
|
|
51
|
+
{
|
|
52
|
+
created_at: '2024-02-28T20:04:21.445272Z',
|
|
53
|
+
updated_at: '2024-02-28T20:04:21.445272Z',
|
|
54
|
+
id: '290a6c07-143a-416e-b016-ac0d9ac8ad93',
|
|
55
|
+
user: {
|
|
56
|
+
publicLenderId: 'Sarah1234',
|
|
57
|
+
name: 'Sarah',
|
|
58
|
+
image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
|
|
59
|
+
},
|
|
60
|
+
kind: 'comment',
|
|
61
|
+
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
62
|
+
text: 'child comment reply',
|
|
63
|
+
parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
|
|
64
|
+
latest_children: {},
|
|
65
|
+
children_counts: {},
|
|
165
66
|
},
|
|
166
|
-
|
|
167
|
-
parent: '',
|
|
168
|
-
latest_children: {},
|
|
169
|
-
children_counts: {},
|
|
170
|
-
is_liked: true,
|
|
67
|
+
],
|
|
171
68
|
},
|
|
172
|
-
{
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
69
|
+
children_counts: {
|
|
70
|
+
comment: 1,
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
created_at: '2024-02-28T20:04:21.445272Z',
|
|
75
|
+
updated_at: '2024-02-28T20:04:21.445272Z',
|
|
76
|
+
id: '290a6c07-143a-416e-b016-ac0d9ac8ad90',
|
|
77
|
+
user: {
|
|
78
|
+
publicLenderId: 'Sophie1234',
|
|
79
|
+
name: 'Sophie',
|
|
80
|
+
image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
|
|
81
|
+
},
|
|
82
|
+
kind: 'comment',
|
|
83
|
+
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
84
|
+
text: 'second child comment',
|
|
85
|
+
parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
|
|
86
|
+
latest_children: {
|
|
87
|
+
like: [
|
|
88
|
+
{
|
|
89
|
+
created_at: '2024-02-28T20:04:21.445272Z',
|
|
90
|
+
updated_at: '2024-02-28T20:04:21.445272Z',
|
|
91
|
+
id: '290a6c07-143a-416e-b016-ac0d9ac8ad99',
|
|
92
|
+
user: {
|
|
93
|
+
created_at: '2024-02-28T19:09:54.093757Z',
|
|
94
|
+
updated_at: '2024-02-28T19:09:54.093757Z',
|
|
95
|
+
publicLenderId: 'Jess1234',
|
|
96
|
+
name: 'Jess',
|
|
97
|
+
image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
|
|
98
|
+
},
|
|
99
|
+
kind: 'like',
|
|
100
|
+
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
101
|
+
parent: '6384df77-d7c4-4ea9-b1b9-ef1c76a054a2',
|
|
102
|
+
latest_children: {},
|
|
103
|
+
children_counts: {},
|
|
183
104
|
},
|
|
184
|
-
|
|
185
|
-
kind: 'comment',
|
|
186
|
-
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
187
|
-
data: {
|
|
188
|
-
text: 'comment test forever!',
|
|
189
|
-
},
|
|
190
|
-
parent: '',
|
|
191
|
-
latest_children: {},
|
|
192
|
-
children_counts: {},
|
|
105
|
+
],
|
|
193
106
|
},
|
|
194
|
-
|
|
195
|
-
},
|
|
196
|
-
latest_reactions_extra: {
|
|
197
|
-
comment: {
|
|
198
|
-
next: '',
|
|
107
|
+
children_counts: {},
|
|
199
108
|
},
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
109
|
+
],
|
|
110
|
+
},
|
|
111
|
+
children_counts: {
|
|
112
|
+
comment: 1,
|
|
113
|
+
like: 1,
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
created_at: '2024-02-01T20:11:23.931133Z',
|
|
118
|
+
updated_at: '2024-02-01T20:11:23.931133Z',
|
|
119
|
+
id: '3de615bb-0d48-4a69-9004-141ee26985eb',
|
|
120
|
+
kind: 'comment',
|
|
121
|
+
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
122
|
+
text: 'test as visitor',
|
|
123
|
+
user: {
|
|
124
|
+
created_at: '2024-02-28T19:09:54.093757Z',
|
|
125
|
+
updated_at: '2024-02-28T19:09:54.093757Z',
|
|
126
|
+
publicLenderId: 'Lauren1234',
|
|
127
|
+
name: '',
|
|
128
|
+
image: '',
|
|
129
|
+
},
|
|
130
|
+
parent: '',
|
|
131
|
+
latest_children: {},
|
|
132
|
+
children_counts: {},
|
|
133
|
+
is_liked: true,
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
created_at: '2024-02-01T20:06:46.651764Z',
|
|
137
|
+
updated_at: '2024-02-01T20:06:46.651764Z',
|
|
138
|
+
id: 'e1db4420-159e-4ba2-aab9-704d1cc56dae',
|
|
139
|
+
user: {
|
|
140
|
+
created_at: '2024-02-28T19:09:54.093757Z',
|
|
141
|
+
updated_at: '2024-02-28T19:09:54.093757Z',
|
|
142
|
+
publicLenderId: 'Todd1234',
|
|
143
|
+
name: 'Todd',
|
|
144
|
+
image: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg', // eslint-disable-line max-len
|
|
206
145
|
},
|
|
207
|
-
|
|
208
|
-
|
|
146
|
+
kind: 'comment',
|
|
147
|
+
activity_id: 'efb2dbfe-c12a-11ee-9fbc-065afce7d41d',
|
|
148
|
+
text: 'comment test forever!',
|
|
149
|
+
parent: '',
|
|
150
|
+
latest_children: {},
|
|
151
|
+
children_counts: {},
|
|
152
|
+
},
|
|
153
|
+
];
|
|
209
154
|
|
|
210
155
|
export default comments;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { render } from '@testing-library/vue';
|
|
2
2
|
import userEvent from '@testing-library/user-event';
|
|
3
3
|
import ListComponent from '../../../../vue/KvCommentsList.vue';
|
|
4
|
-
import
|
|
4
|
+
import comments from '../../../fixtures/mockFeedActivityData';
|
|
5
5
|
import { LIKE_COMMENT_EVENT, REPLY_COMMENT_EVENT } from '../../../../vue/KvCommentsListItem.vue';
|
|
6
6
|
import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
|
|
7
7
|
|
|
@@ -24,13 +24,11 @@ const renderList = (props = {}) => {
|
|
|
24
24
|
});
|
|
25
25
|
};
|
|
26
26
|
|
|
27
|
-
const comments = activityFeed.results[0].latest_reactions;
|
|
28
|
-
|
|
29
27
|
describe('KvCommentsList', () => {
|
|
30
28
|
it('should render comments component', async () => {
|
|
31
29
|
const { container } = renderList({ comments });
|
|
32
30
|
|
|
33
|
-
const { id } = comments
|
|
31
|
+
const { id } = comments[0];
|
|
34
32
|
expect(container.querySelectorAll(`#${id}`).length).toBe(1);
|
|
35
33
|
});
|
|
36
34
|
|
|
@@ -45,7 +43,7 @@ describe('KvCommentsList', () => {
|
|
|
45
43
|
it('should emit like reaction events for logged in user', async () => {
|
|
46
44
|
const { getAllByRole, emitted } = renderList({ comments, userPublicId: LOGGED_IN_USER });
|
|
47
45
|
const likeButton = getAllByRole('button', { name: 'Like' })[0];
|
|
48
|
-
const firstComment = comments
|
|
46
|
+
const firstComment = comments[0];
|
|
49
47
|
|
|
50
48
|
const TEST_OBJ = {
|
|
51
49
|
id: firstComment.id,
|
|
@@ -64,7 +62,7 @@ describe('KvCommentsList', () => {
|
|
|
64
62
|
emitted,
|
|
65
63
|
} = renderList({ comments, userPublicId: LOGGED_IN_USER });
|
|
66
64
|
const replyButton = getAllByRole('button', { name: 'Reply' })[0];
|
|
67
|
-
const firstComment = comments
|
|
65
|
+
const firstComment = comments[0];
|
|
68
66
|
|
|
69
67
|
const TEST_OBJ = {
|
|
70
68
|
id: firstComment.id,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { render } from '@testing-library/vue';
|
|
2
2
|
import userEvent from '@testing-library/user-event';
|
|
3
3
|
import KvCommentsListItem, { LIKE_COMMENT_EVENT, REPLY_COMMENT_EVENT } from '../../../../vue/KvCommentsListItem.vue';
|
|
4
|
-
import
|
|
4
|
+
import comments from '../../../fixtures/mockFeedActivityData';
|
|
5
5
|
import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
|
|
6
6
|
|
|
7
|
-
const comment =
|
|
7
|
+
const comment = comments[0];
|
|
8
8
|
const LOGGED_IN_USER = 'TEST_USER';
|
|
9
9
|
|
|
10
10
|
const renderComment = (props = {}) => {
|
|
@@ -43,7 +43,18 @@ describe('KvCommentsListItem', () => {
|
|
|
43
43
|
|
|
44
44
|
it('should render comment text', () => {
|
|
45
45
|
const { getByText } = renderComment({ comment });
|
|
46
|
-
getByText(comment.
|
|
46
|
+
getByText(comment.text);
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
it('should render child comment text if replies list opened', async () => {
|
|
50
|
+
const { getAllByText, getAllByRole } = renderComment({ comment });
|
|
51
|
+
const openRepliesButton = getAllByRole('button', { name: '1 reply' })[0];
|
|
52
|
+
|
|
53
|
+
await userEvent.click(openRepliesButton);
|
|
54
|
+
|
|
55
|
+
const childComment = getAllByText(comment.latest_children.comment[0].text)[0];
|
|
56
|
+
|
|
57
|
+
expect(childComment).toBeDefined();
|
|
47
58
|
});
|
|
48
59
|
|
|
49
60
|
it('should not handle like button click for guest user', async () => {
|
|
@@ -12,14 +12,6 @@ describe('KvCommentsReplyButton', () => {
|
|
|
12
12
|
expect(replyButton).toBeDefined();
|
|
13
13
|
});
|
|
14
14
|
|
|
15
|
-
it('should render number of replies', () => {
|
|
16
|
-
const { getByTestId } = render(KvCommentsReplyButton, { props: { numberOfReplies: 6 } });
|
|
17
|
-
const replyCount = getByTestId('reply-count');
|
|
18
|
-
|
|
19
|
-
expect(replyCount).toBeDefined();
|
|
20
|
-
expect(replyCount).toHaveTextContent(6);
|
|
21
|
-
});
|
|
22
|
-
|
|
23
15
|
it('should emit click event when clicked', async () => {
|
|
24
16
|
const { getByRole, emitted } = render(KvCommentsReplyButton);
|
|
25
17
|
const replyButton = getByRole('button', { name: 'Reply' });
|
package/vue/KvCommentsList.vue
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
3
|
<KvCommentsListItem
|
|
4
|
-
v-for="comment in comments
|
|
4
|
+
v-for="comment in comments"
|
|
5
5
|
:id="comment.id"
|
|
6
6
|
:key="comment.id"
|
|
7
7
|
:nest-level="1"
|
|
@@ -51,8 +51,8 @@ export default {
|
|
|
51
51
|
* Activity comments
|
|
52
52
|
*/
|
|
53
53
|
comments: {
|
|
54
|
-
type:
|
|
55
|
-
default: () => (
|
|
54
|
+
type: Array,
|
|
55
|
+
default: () => ([]),
|
|
56
56
|
},
|
|
57
57
|
},
|
|
58
58
|
emits: [ADD_REACTION_EVENT],
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
</div>
|
|
21
21
|
<div
|
|
22
22
|
v-if="nestLevel < 3"
|
|
23
|
-
class="tw-flex tw-items-center tw-gap-x-
|
|
23
|
+
class="tw-flex tw-items-center tw-gap-x-1"
|
|
24
24
|
>
|
|
25
25
|
<div class="tw-flex tw-items-center tw-gap-0.5">
|
|
26
26
|
<kv-comments-heart-button
|
|
@@ -39,7 +39,6 @@
|
|
|
39
39
|
</div>
|
|
40
40
|
<kv-comments-reply-button
|
|
41
41
|
v-if="userPublicId"
|
|
42
|
-
:number-of-replies="numberOfReplies"
|
|
43
42
|
@click="replyClick"
|
|
44
43
|
/>
|
|
45
44
|
</div>
|
|
@@ -61,25 +60,40 @@
|
|
|
61
60
|
v-if="childComments"
|
|
62
61
|
class="tw-my-1"
|
|
63
62
|
>
|
|
64
|
-
<
|
|
65
|
-
v-
|
|
66
|
-
|
|
67
|
-
|
|
63
|
+
<button
|
|
64
|
+
v-if="numberOfReplies"
|
|
65
|
+
class="tw-ml-3 tw-text-action tw-font-medium tw-mb-1 tw-flex tw-items-center"
|
|
66
|
+
@click="toggleReplies"
|
|
68
67
|
>
|
|
69
|
-
<kv-
|
|
70
|
-
|
|
71
|
-
:
|
|
72
|
-
:
|
|
73
|
-
:comment="nested_comment"
|
|
74
|
-
:nest-level="nestLevel + 1"
|
|
75
|
-
@add-reaction="$emit(ADD_REACTION_EVENT, $event);"
|
|
68
|
+
<kv-material-icon
|
|
69
|
+
class="tw-h-2.5 tw-w-2.5 tw-transition tw-transform tw-duration-500 tw-ease"
|
|
70
|
+
:class="{ 'tw-rotate-180' : repliesOpened }"
|
|
71
|
+
:icon="mdiChevronDown"
|
|
76
72
|
/>
|
|
77
|
-
|
|
73
|
+
{{ numberOfReplies }} {{ numberOfReplies > 1 ? 'replies' : 'reply' }}
|
|
74
|
+
</button>
|
|
75
|
+
<div v-if="repliesOpened">
|
|
76
|
+
<div
|
|
77
|
+
v-for="nested_comment in childComments"
|
|
78
|
+
:key="nested_comment.id"
|
|
79
|
+
class="tw-ml-3"
|
|
80
|
+
>
|
|
81
|
+
<kv-comments-list-item
|
|
82
|
+
:user-image-url="userImageUrl"
|
|
83
|
+
:user-display-name="userDisplayName"
|
|
84
|
+
:user-public-id="userPublicId"
|
|
85
|
+
:comment="nested_comment"
|
|
86
|
+
:nest-level="nestLevel + 1"
|
|
87
|
+
@add-reaction="$emit(ADD_REACTION_EVENT, $event);"
|
|
88
|
+
/>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
78
91
|
</div>
|
|
79
92
|
</div>
|
|
80
93
|
</template>
|
|
81
94
|
|
|
82
95
|
<script>
|
|
96
|
+
import { mdiChevronDown } from '@mdi/js';
|
|
83
97
|
import {
|
|
84
98
|
ref,
|
|
85
99
|
nextTick,
|
|
@@ -88,6 +102,7 @@ import {
|
|
|
88
102
|
onMounted,
|
|
89
103
|
inject,
|
|
90
104
|
} from 'vue-demi';
|
|
105
|
+
import KvMaterialIcon from './KvMaterialIcon.vue';
|
|
91
106
|
import KvCommentsReplyButton from './KvCommentsReplyButton.vue';
|
|
92
107
|
import KvCommentsHeartButton from './KvCommentsHeartButton.vue';
|
|
93
108
|
import KvCommentsAdd from './KvCommentsAdd.vue';
|
|
@@ -104,6 +119,7 @@ export default {
|
|
|
104
119
|
KvCommentsHeartButton,
|
|
105
120
|
KvCommentsAdd,
|
|
106
121
|
KvUserAvatar,
|
|
122
|
+
KvMaterialIcon,
|
|
107
123
|
},
|
|
108
124
|
props: {
|
|
109
125
|
/**
|
|
@@ -154,10 +170,11 @@ export default {
|
|
|
154
170
|
const showInput = ref(false);
|
|
155
171
|
const commentsAddRef = ref(null);
|
|
156
172
|
const authorInfo = ref();
|
|
173
|
+
const repliesOpened = ref(false);
|
|
157
174
|
|
|
158
|
-
const commentText = computed(() => comment?.value?.
|
|
175
|
+
const commentText = computed(() => comment?.value?.text ?? '');
|
|
159
176
|
|
|
160
|
-
const authorId = computed(() => comment?.value?.
|
|
177
|
+
const authorId = computed(() => comment?.value?.publicLenderId ?? '');
|
|
161
178
|
const authorImage = computed(() => authorInfo?.value?.image?.url ?? '');
|
|
162
179
|
const authorName = computed(() => authorInfo?.value?.name ?? '');
|
|
163
180
|
|
|
@@ -193,6 +210,8 @@ export default {
|
|
|
193
210
|
|
|
194
211
|
const numberOfReplies = computed(() => comment?.value?.children_counts?.comment ?? 0);
|
|
195
212
|
|
|
213
|
+
const toggleReplies = () => { repliesOpened.value = !repliesOpened.value; };
|
|
214
|
+
|
|
196
215
|
// The fetchLenderInfo method must be provided in the parent component
|
|
197
216
|
const fetchLenderInfo = inject('fetchLenderInfo');
|
|
198
217
|
|
|
@@ -219,6 +238,9 @@ export default {
|
|
|
219
238
|
isLiked,
|
|
220
239
|
numberOfLikes,
|
|
221
240
|
numberOfReplies,
|
|
241
|
+
repliesOpened,
|
|
242
|
+
toggleReplies,
|
|
243
|
+
mdiChevronDown,
|
|
222
244
|
};
|
|
223
245
|
},
|
|
224
246
|
};
|
|
@@ -17,12 +17,6 @@
|
|
|
17
17
|
fill="#1C1B1F"
|
|
18
18
|
/>
|
|
19
19
|
</svg>
|
|
20
|
-
<span
|
|
21
|
-
v-if="numberOfReplies"
|
|
22
|
-
data-testid="reply-count"
|
|
23
|
-
>
|
|
24
|
-
{{ numberOfReplies }}
|
|
25
|
-
</span>
|
|
26
20
|
<span>
|
|
27
21
|
reply
|
|
28
22
|
</span>
|
|
@@ -37,15 +31,6 @@ export default {
|
|
|
37
31
|
components: {
|
|
38
32
|
KvButton,
|
|
39
33
|
},
|
|
40
|
-
props: {
|
|
41
|
-
/**
|
|
42
|
-
* The number of replies to the comment.
|
|
43
|
-
*/
|
|
44
|
-
numberOfReplies: {
|
|
45
|
-
type: Number,
|
|
46
|
-
default: 0,
|
|
47
|
-
},
|
|
48
|
-
},
|
|
49
34
|
emits: [
|
|
50
35
|
'click',
|
|
51
36
|
],
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import KvCommentsContainer from '../KvCommentsContainer.vue';
|
|
2
|
-
import
|
|
2
|
+
import comments from '../../tests/fixtures/mockFeedActivityData';
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
5
|
title: 'KvCommentsContainer',
|
|
@@ -30,8 +30,6 @@ const story = (args) => {
|
|
|
30
30
|
return template;
|
|
31
31
|
};
|
|
32
32
|
|
|
33
|
-
const comments = activityFeed.results[0].latest_reactions;
|
|
34
|
-
|
|
35
33
|
export const Default = story({ comments });
|
|
36
34
|
|
|
37
35
|
export const UserData = story(
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import KvCommentsList from '../KvCommentsList.vue';
|
|
2
|
-
import
|
|
2
|
+
import comments from '../../tests/fixtures/mockFeedActivityData';
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
5
|
title: 'KvCommentsList',
|
|
@@ -27,8 +27,6 @@ const story = (args) => {
|
|
|
27
27
|
return template;
|
|
28
28
|
};
|
|
29
29
|
|
|
30
|
-
const comments = activityFeed.results[0].latest_reactions;
|
|
31
|
-
|
|
32
30
|
export const Default = story({ comments });
|
|
33
31
|
|
|
34
32
|
export const UserData = story(
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import KvCommentsListItem from '../KvCommentsListItem.vue';
|
|
2
|
-
import
|
|
2
|
+
import comments from '../../tests/fixtures/mockFeedActivityData';
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
5
|
title: 'KvCommentsListItem',
|
|
@@ -28,8 +28,8 @@ const story = (args) => {
|
|
|
28
28
|
return template;
|
|
29
29
|
};
|
|
30
30
|
|
|
31
|
-
const comment =
|
|
32
|
-
const childComments =
|
|
31
|
+
const comment = comments[0];
|
|
32
|
+
const childComments = comments[0];
|
|
33
33
|
|
|
34
34
|
export const Default = story({ comment });
|
|
35
35
|
|