Skip to content

Commit 62bdb8c

Browse files
1. Added compose ui testing.
2. Tag view container action
1 parent 5a68dcf commit 62bdb8c

File tree

8 files changed

+249
-24
lines changed

8 files changed

+249
-24
lines changed
Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
package co.yml.coreui.ui.ytag
2+
3+
import androidx.compose.foundation.layout.PaddingValues
4+
import androidx.compose.foundation.shape.CircleShape
5+
import androidx.compose.foundation.shape.RoundedCornerShape
6+
import androidx.compose.ui.graphics.Color
7+
import androidx.compose.ui.test.*
8+
import androidx.compose.ui.test.junit4.createComposeRule
9+
import androidx.compose.ui.unit.dp
10+
import co.yml.coreui.core.ui.ytag.TagViewContainer
11+
import co.yml.coreui.core.ui.ytag.model.TagViewContainerModifiers
12+
import co.yml.coreui.core.ui.ytag.model.TagViewData
13+
import co.yml.coreui.core.ui.ytag.model.TagViewModifiers
14+
import org.junit.Rule
15+
import org.junit.Test
16+
17+
class TagViewContainerTesting {
18+
@get:Rule
19+
val composeTestRule = createComposeRule()
20+
21+
private fun launchTagViewContainer(
22+
tagViewContainerModifiers: TagViewContainerModifiers = TagViewContainerModifiers.Builder()
23+
.shape(RoundedCornerShape(10.dp))
24+
.width(200.dp)
25+
.height(120.dp)
26+
.build()
27+
) {
28+
val tagViewModifiers = TagViewModifiers.Builder()
29+
.shape(CircleShape)
30+
.backgroundColor(Color.Black)
31+
.textColor(Color.White)
32+
.build()
33+
34+
val tagViewData = listOf(
35+
TagViewData(text = "Tag 1", tagViewModifiers = tagViewModifiers),
36+
TagViewData(text = "Tag 2", tagViewModifiers = tagViewModifiers),
37+
TagViewData(text = "Tag 3", tagViewModifiers = tagViewModifiers),
38+
TagViewData(text = "Tag 4", tagViewModifiers = tagViewModifiers)
39+
)
40+
41+
composeTestRule.setContent {
42+
TagViewContainer(
43+
tagViewData = tagViewData,
44+
tagViewContainerModifiers = tagViewContainerModifiers
45+
)
46+
}
47+
}
48+
49+
@Test
50+
fun tagViewContainer_shown() {
51+
launchTagViewContainer()
52+
53+
println(
54+
"tag_view_container ${composeTestRule.onNodeWithTag("tag_view_container", useUnmergedTree = true).printToString()}"
55+
)
56+
57+
composeTestRule.onNodeWithTag("tag_view_container").assertIsDisplayed()
58+
}
59+
60+
@Test
61+
fun tagViewContainer_with_modifiers_are_executed() {
62+
val tagViewContainerModifiers = TagViewContainerModifiers.Builder()
63+
.minWidth(150.dp)
64+
.minHeight(150.dp)
65+
.width(200.dp)
66+
.height(150.dp)
67+
.enableBorder(true)
68+
.borderWidth(1.dp)
69+
.borderColor(Color.Red)
70+
.backgroundColor(Color.Gray)
71+
.shape(CircleShape)
72+
.containerPaddingValues(PaddingValues(8.dp))
73+
.tagSpacingHorizontal(8.dp)
74+
.tagSpacingVertical(8.dp)
75+
.moreTagConfiguration(TagViewData(text = "more"))
76+
.build()
77+
78+
launchTagViewContainer(tagViewContainerModifiers)
79+
80+
composeTestRule.onNodeWithTag("tag_view_container")
81+
.assertIsDisplayed()
82+
}
83+
84+
@Test
85+
fun tagViewContainer_tags_shown(){
86+
launchTagViewContainer()
87+
88+
composeTestRule.onNodeWithContentDescription("Tag 1").assertIsDisplayed()
89+
}
90+
91+
@Test
92+
fun tagViewContainer_with_less_space_more_tag_shown(){
93+
val tagViewContainerModifiers = TagViewContainerModifiers.Builder()
94+
.width(150.dp)
95+
.height(50.dp)
96+
.build()
97+
98+
launchTagViewContainer(tagViewContainerModifiers)
99+
100+
composeTestRule.onNodeWithContentDescription("more").assertIsDisplayed()
101+
}
102+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
3+
<application>
4+
<activity android:name="androidx.activity.ComponentActivity" />
5+
</application>
36
</manifest>

core/ui/src/main/java/co/yml/coreui/core/ui/ytag/TagView.kt

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import androidx.compose.ui.tooling.preview.Preview
2121
import androidx.compose.ui.unit.Dp
2222
import androidx.compose.ui.unit.dp
2323
import androidx.compose.ui.unit.sp
24+
import co.yml.coreui.core.ui.ytag.model.TagViewData
2425
import co.yml.coreui.core.ui.ytag.model.TagViewModifiers
2526

2627
/**
@@ -38,7 +39,9 @@ fun TagView(
3839
leadingIcon: @Composable ((enable: Boolean) -> Unit)? = null,
3940
trailingIcon: @Composable ((enable: Boolean) -> Unit)? = null,
4041
enabled: Boolean = true,
41-
tagViewModifiers: TagViewModifiers = TagViewModifiers.Builder().build()
42+
tagViewModifiers: TagViewModifiers = TagViewModifiers.Builder().build(),
43+
overFlowText: String = "",
44+
onClick: () -> Unit = {}
4245
) {
4346
with(tagViewModifiers) {
4447
Surface(
@@ -66,6 +69,7 @@ fun TagView(
6669
.clickable {
6770
if (enabled) {
6871
onClick.invoke()
72+
tagViewModifiers.onClick.invoke()
6973
}
7074
}
7175
.defaultMinSize(minWidth = minWidth, minHeight = minHeight)
@@ -79,7 +83,7 @@ fun TagView(
7983
leadingIcon?.invoke(enabled)
8084

8185
Text(
82-
text = text,
86+
text = overFlowText.ifEmpty { text },
8387
color = textColor,
8488
fontSize = fontSize,
8589
fontWeight = fontWeight,

core/ui/src/main/java/co/yml/coreui/core/ui/ytag/TagViewContainer.kt

Lines changed: 92 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ import androidx.compose.runtime.Composable
1111
import androidx.compose.ui.Modifier
1212
import androidx.compose.ui.graphics.Color
1313
import androidx.compose.ui.layout.Layout
14+
import androidx.compose.ui.layout.Placeable
15+
import androidx.compose.ui.platform.LocalContext
1416
import androidx.compose.ui.platform.testTag
17+
import androidx.compose.ui.semantics.contentDescription
18+
import androidx.compose.ui.semantics.semantics
1519
import androidx.compose.ui.tooling.preview.Preview
1620
import androidx.compose.ui.unit.Dp
1721
import androidx.compose.ui.unit.IntOffset
@@ -31,22 +35,16 @@ fun TagViewContainer(
3135
tagViewData: List<TagViewData>,
3236
tagViewContainerModifiers: TagViewContainerModifiers
3337
) {
38+
//add more tag into the list
3439
val updatedTagViewData = tagViewData.toMutableList()
35-
val moreTagModifier = TagViewModifiers.Builder()
36-
.shape(CircleShape)
37-
.backgroundColor(Color.Black)
38-
.textColor(Color.White)
39-
.build()
40-
41-
updatedTagViewData.add(TagViewData("More", moreTagModifier))
40+
val moreTag = tagViewContainerModifiers.moreTagConfiguration
41+
updatedTagViewData.add(moreTag)
4242

4343
with(tagViewContainerModifiers) {
4444
val modifier = Modifier
45+
val context = LocalContext.current
4546
Box(
4647
modifier = modifier
47-
.width(width = width ?: Dp.Unspecified)
48-
.height(height = height)
49-
.defaultMinSize(minWidth = minWidth, minHeight = minHeight)
5048
.run {
5149
if (enableBorder) {
5250
border(
@@ -58,25 +56,39 @@ fun TagViewContainer(
5856
background(color = backgroundColor, shape = shape)
5957
}
6058
}
59+
.width(width = width ?: Dp.Unspecified)
60+
.height(height = height)
61+
.defaultMinSize(minWidth = minWidth, minHeight = minHeight)
6162
.clickable { }
63+
.semantics {
64+
this.contentDescription =
65+
context.getString(co.yml.coreui.ui.R.string.tag_view_container_accessibility_title)
66+
}
6267
.testTag("tag_view_container")
63-
.padding(containerPaddingValues)
6468
.background(
6569
color = backgroundColor,
6670
shape = shape
6771
)
72+
.padding(containerPaddingValues)
6873
) {
74+
75+
6976
TagViewContainerLayout(
7077
tagViewContainerModifiers = tagViewContainerModifiers,
7178
content = {
7279
updatedTagViewData.forEach {
7380
with(it) {
81+
val containerItemClick = {
82+
tagViewContainerModifiers.onClick.invoke(it)
83+
}
7484
TagView(
7585
text = text,
7686
leadingIcon = leadingIcon,
7787
trailingIcon = trailingIcon,
7888
enabled = enabled,
79-
tagViewModifiers = tagViewModifiers
89+
tagViewModifiers = tagViewModifiers,
90+
overFlowText = "",
91+
onClick = containerItemClick
8092
)
8193
}
8294
}
@@ -104,12 +116,9 @@ fun TagViewContainerLayout(
104116
var currentRow = 0
105117
var currentOffset = IntOffset.Zero
106118

107-
//todo sree_ check whether the padding is correct
108-
109119
val placeAbles = measurables.map { measurable ->
110-
val placeAble = measurable.measure(looseConstraints)
120+
val placeAble: Placeable = measurable.measure(looseConstraints)
111121

112-
//todo sree_ is horizontal and vertical space [surface] required
113122
if (currentOffset.x > 0f && currentOffset.x + placeAble.width + tagViewContainerModifiers.tagSpacingHorizontal.toPx()
114123
.toInt() > constraints.maxWidth
115124
) {
@@ -178,6 +187,10 @@ fun TagViewContainerLayout(
178187
//check space to accommodate more tag
179188
Log.i("check_placeable", "index: $index next item has no space")
180189
val moreTagPlaceAble = placeAbles.last()
190+
val remainingTags = placeAbles.lastIndex - 1 - index
191+
192+
193+
// tagViewContainerModifiers.moreTagConfiguration.overFlowText.invoke(remainingTags)
181194
val moreTagHorizontalSpace =
182195
moreTagPlaceAble.first.width + tagViewContainerModifiers.tagSpacingHorizontal.toPx()
183196
.toInt()
@@ -199,6 +212,7 @@ fun TagViewContainerLayout(
199212
//current item has no space
200213
//check space to accommodate more tag
201214
Log.i("check_placeable", "index: $index current item has no space")
215+
val remainingTags = placeAbles.lastIndex - 1 - index
202216
val moreTagPlaceAble = placeAbles.last()
203217
val moreTagHorizontalSpace =
204218
moreTagPlaceAble.first.width + tagViewContainerModifiers.tagSpacingHorizontal.toPx()
@@ -225,6 +239,66 @@ fun TagViewContainerLayout(
225239
@Composable
226240
fun DefaultTagContainer() {
227241
val tagViewModifiers = TagViewModifiers.Builder()
242+
.shape(CircleShape)
243+
.backgroundColor(Color.Black)
244+
.textColor(Color.White)
245+
.build()
246+
val tagViewData = listOf(
247+
TagViewData(text = "Tag 1", tagViewModifiers = tagViewModifiers),
248+
TagViewData(text = "Tag 2", tagViewModifiers = tagViewModifiers),
249+
TagViewData(text = "Tag 3", tagViewModifiers = tagViewModifiers),
250+
TagViewData(text = "Tag 4", tagViewModifiers = tagViewModifiers)
251+
)
252+
253+
val tagViewContainerModifiers = TagViewContainerModifiers.Builder()
254+
.shape(RoundedCornerShape(10.dp))
255+
.width(200.dp)
256+
.height(120.dp)
257+
.build()
258+
259+
TagViewContainer(
260+
tagViewData = tagViewData,
261+
tagViewContainerModifiers = tagViewContainerModifiers
262+
)
263+
}
264+
265+
@Preview(name = "Tag container with border")
266+
@Composable
267+
fun BorderTagContainer() {
268+
val tagViewModifiers = TagViewModifiers.Builder()
269+
.shape(CircleShape)
270+
.backgroundColor(Color.Black)
271+
.textColor(Color.White)
272+
.build()
273+
val tagViewData = listOf(
274+
TagViewData(text = "Tag 1", tagViewModifiers = tagViewModifiers),
275+
TagViewData(text = "Tag 2", tagViewModifiers = tagViewModifiers),
276+
TagViewData(text = "Tag 3", tagViewModifiers = tagViewModifiers),
277+
TagViewData(text = "Tag 4", tagViewModifiers = tagViewModifiers)
278+
)
279+
280+
val tagViewContainerModifiers = TagViewContainerModifiers.Builder()
281+
.shape(RoundedCornerShape(10.dp))
282+
.width(200.dp)
283+
.height(120.dp)
284+
.enableBorder(true)
285+
.borderColor(Color.Red)
286+
.borderWidth(1.dp)
287+
.build()
288+
289+
TagViewContainer(
290+
tagViewData = tagViewData,
291+
tagViewContainerModifiers = tagViewContainerModifiers
292+
)
293+
}
294+
295+
@Preview(name = "Tag container with background")
296+
@Composable
297+
fun BackgroundTagContainer() {
298+
val tagViewModifiers = TagViewModifiers.Builder()
299+
.shape(CircleShape)
300+
.backgroundColor(Color.Black)
301+
.textColor(Color.White)
228302
.build()
229303
val tagViewData = listOf(
230304
TagViewData(text = "Tag 1", tagViewModifiers = tagViewModifiers),
@@ -236,6 +310,8 @@ fun DefaultTagContainer() {
236310
val tagViewContainerModifiers = TagViewContainerModifiers.Builder()
237311
.shape(RoundedCornerShape(10.dp))
238312
.backgroundColor(Color.Gray)
313+
.width(200.dp)
314+
.height(120.dp)
239315
.build()
240316

241317
TagViewContainer(

core/ui/src/main/java/co/yml/coreui/core/ui/ytag/model/TagViewContainerModifiers.kt

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
package co.yml.coreui.core.ui.ytag.model
22

33
import androidx.compose.foundation.layout.PaddingValues
4+
import androidx.compose.foundation.shape.CircleShape
45
import androidx.compose.ui.graphics.Color
56
import androidx.compose.ui.graphics.RectangleShape
67
import androidx.compose.ui.graphics.Shape
@@ -36,7 +37,9 @@ data class TagViewContainerModifiers(
3637
val shape: Shape,
3738
val containerPaddingValues: PaddingValues,
3839
val tagSpacingHorizontal: Dp,
39-
val tagSpacingVertical: Dp
40+
val tagSpacingVertical: Dp,
41+
val moreTagConfiguration: TagViewData,
42+
val onClick: (TagViewData) -> Unit
4043
) {
4144
//todo sree_ check min and max default size
4245
class Builder {
@@ -49,10 +52,19 @@ data class TagViewContainerModifiers(
4952
private var borderColor: Color = Color.Black
5053
private var backgroundColor: Color = Color.White
5154
private var shape: Shape = RectangleShape
52-
private var containerPaddingValues: PaddingValues = PaddingValues(horizontal = 4.dp, vertical = 4.dp)
55+
private var containerPaddingValues: PaddingValues =
56+
PaddingValues(horizontal = 4.dp, vertical = 4.dp)
5357
private var tagSpacingHorizontal: Dp = 8.dp
5458
private var tagSpacingVertical: Dp = 8.dp
55-
59+
private var moreTagConfiguration: TagViewData = TagViewData(
60+
text = "more",
61+
tagViewModifiers = TagViewModifiers.Builder()
62+
.shape(CircleShape)
63+
.backgroundColor(Color.Black)
64+
.textColor(Color.White)
65+
.build()
66+
)
67+
private var onClick: (TagViewData) -> Unit = {}
5668

5769
fun minWidth(minWidth: Dp) = apply { this.minWidth = minWidth }
5870

@@ -80,6 +92,11 @@ data class TagViewContainerModifiers(
8092

8193
fun tagSpacingVertical(space: Dp) = apply { this.tagSpacingVertical = space }
8294

95+
fun moreTagConfiguration(configuration: TagViewData) =
96+
apply { this.moreTagConfiguration = configuration }
97+
98+
fun onCLick(onClick: (TagViewData) -> Unit) = apply { this.onClick = onClick }
99+
83100
fun build() = TagViewContainerModifiers(
84101
minWidth,
85102
minHeight,
@@ -92,7 +109,9 @@ data class TagViewContainerModifiers(
92109
shape,
93110
containerPaddingValues,
94111
tagSpacingHorizontal,
95-
tagSpacingVertical
112+
tagSpacingVertical,
113+
moreTagConfiguration,
114+
onClick
96115
)
97116
}
98117
}

0 commit comments

Comments
 (0)