From 4a2e8abb6ba2c481dbbe44d9253503d234e05794 Mon Sep 17 00:00:00 2001 From: Yun Cheng <129205442+ycheng-kickstarter@users.noreply.github.com> Date: Tue, 11 Jun 2024 13:48:54 -0400 Subject: [PATCH] Compose UI tests for MBL-1468 MBL-1471 MBL-1470 MBL-1469 (#2055) * Compose UI tests for MBL-1468 MBL-1471 MBL-1470 MBL-1469 * Lint --------- Co-authored-by: Isabel Martin Co-authored-by: mtgriego --- app/src/main/AndroidManifest.xml | 1 + .../pledgedprojectsoverview/ui/PPOCardView.kt | 115 ++++---- .../activities/compose/PPOCardViewKtTest.kt | 251 ++++++++++++++++++ 3 files changed, 301 insertions(+), 66 deletions(-) create mode 100644 app/src/test/java/com/kickstarter/ui/activities/compose/PPOCardViewKtTest.kt diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml index f5018c2332..985e6dd4b3 100644 --- a/app/src/main/AndroidManifest.xml +++ b/app/src/main/AndroidManifest.xml @@ -28,6 +28,7 @@ android:theme="@style/KSTheme" tools:replace="android:supportsRtl"> + diff --git a/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt b/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt index 987f98682f..c0f72a6571 100644 --- a/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt +++ b/app/src/main/java/com/kickstarter/features/pledgedprojectsoverview/ui/PPOCardView.kt @@ -27,6 +27,7 @@ import androidx.compose.ui.graphics.painter.ColorPainter import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.vectorResource import androidx.compose.ui.text.style.TextOverflow @@ -57,7 +58,7 @@ fun PPOCardPreview() { ) { item { PPOCardView( - viewType = PPOCardViewType.ADDRESS_CONFIRMED, + viewType = PPOCardViewType.CONFIRM_ADDRESS, onCardClick = {}, projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", pledgeAmount = "$50.00", @@ -188,6 +189,11 @@ enum class PPOCardViewType { SURVEY_SUBMITTED } +enum class PPOCardViewTestTag { + SHIPPING_ADDRESS_VIEW, + CONFIRM_ADDRESS_BUTTONS_VIEW +} + @Composable fun PPOCardView( viewType: PPOCardViewType, @@ -259,7 +265,7 @@ fun PPOCardView( PPOCardViewType.FIX_PAYMENT -> FixPaymentButtonView(onActionButtonClicked) PPOCardViewType.PAYMENT_FIXED -> PaymentFixedButtonView() PPOCardViewType.AUTHENTICATE_CARD -> AuthenticateCardButtonView(onActionButtonClicked) - PPOCardViewType.CARD_AUTHENTICATED -> CardAuthenticatedButtonView { } + PPOCardViewType.CARD_AUTHENTICATED -> CardAuthenticatedButtonView() PPOCardViewType.TAKE_SURVEY -> TakeSurveyButtonView(onActionButtonClicked) PPOCardViewType.SURVEY_SUBMITTED -> SurveySubmittedButtonView() } @@ -396,6 +402,7 @@ fun ShippingAddressView( modifier = Modifier .fillMaxWidth() .padding(dimensions.paddingSmall) + .testTag(PPOCardViewTestTag.SHIPPING_ADDRESS_VIEW.name), ) { Text( text = "Shipping address", @@ -440,8 +447,9 @@ fun ConfirmAddressButtonsView(onEditAddressClicked: () -> Unit, onConfirmAddress modifier = Modifier .fillMaxWidth() .padding(dimensions.paddingSmall) + .testTag(PPOCardViewTestTag.CONFIRM_ADDRESS_BUTTONS_VIEW.name) ) { - // TODO: Replace with translated string + // TODO: Replace with translated strings KSPrimaryBlackButton( modifier = Modifier .weight(0.5f), @@ -508,23 +516,7 @@ fun FixPaymentAlertsView(daysRemaining: Int = -1) { if (daysRemaining > 0) { Spacer(modifier = Modifier.height(dimensions.paddingSmall)) - - KSCoralBadge( - leadingIcon = { - // TODO: Replace with translated string - Image( - modifier = Modifier - .padding(end = dimensions.paddingXSmall) - .size(dimensions.alertIconSize), - imageVector = ImageVector.vectorResource(id = R.drawable.ic_clock), - contentDescription = "Pledge will be dropped in $daysRemaining days", - colorFilter = ColorFilter.tint(colors.textAccentRedBold) - ) - }, - // TODO: Replace with translated string - text = "Pledge will be dropped in $daysRemaining days", - textColor = colors.textAccentRedBold - ) + PledgeWillBeDroppedAlert(daysRemaining) } } } @@ -565,23 +557,7 @@ fun AuthenticateCardAlertsView(daysRemaining: Int = -1) { if (daysRemaining > 0) { Spacer(modifier = Modifier.height(dimensions.paddingSmall)) - - KSCoralBadge( - leadingIcon = { - // TODO: Replace with translated string - Image( - modifier = Modifier - .padding(end = dimensions.paddingXSmall) - .size(dimensions.alertIconSize), - imageVector = ImageVector.vectorResource(id = R.drawable.ic_clock), - contentDescription = "Pledge will be dropped in $daysRemaining days", - colorFilter = ColorFilter.tint(colors.textAccentRedBold) - ) - }, - // TODO: Replace with translated string - text = "Pledge will be dropped in $daysRemaining days", - textColor = colors.textAccentRedBold - ) + PledgeWillBeDroppedAlert(daysRemaining) } } } @@ -621,7 +597,7 @@ fun AuthenticateCardButtonView(onAuthenticateCardClicked: () -> Unit) { } @Composable -fun CardAuthenticatedButtonView(onFixPaymentClicked: () -> Unit) { +fun CardAuthenticatedButtonView() { // TODO: Replace with translated string KSSecondaryRedButton( modifier = Modifier.padding(dimensions.paddingMediumSmall), @@ -665,22 +641,7 @@ fun TakeSurveyAlertsView(hoursRemaining: Int = -1) { if (hoursRemaining > 0) { Spacer(modifier = Modifier.height(dimensions.paddingSmall)) - - KSCoralBadge( - leadingIcon = { - // TODO: Replace with translated string - Image( - modifier = Modifier - .padding(end = dimensions.paddingXSmall) - .size(dimensions.alertIconSize), - imageVector = ImageVector.vectorResource(id = R.drawable.ic_clock), - contentDescription = "Address locks in $hoursRemaining hours", - colorFilter = ColorFilter.tint(colors.textSecondary) - ) - }, - // TODO: Replace with translated string - text = "Address locks in $hoursRemaining hours", - ) + AddressLocksAlertView(hoursRemaining) } } } @@ -711,6 +672,30 @@ fun SurveySubmittedAlertsView(hoursRemaining: Int = -1) { } } } + +@Composable +fun SurveySubmittedButtonView() { + // TODO: Replace with translated string + KSPrimaryGreenButton( + modifier = Modifier + .padding(dimensions.paddingMediumSmall), + leadingIcon = { + Image( + modifier = Modifier + .padding(end = dimensions.paddingXSmall) + .size(dimensions.paddingMedium), + imageVector = ImageVector.vectorResource(id = R.drawable.icon__check), + contentDescription = "x", + colorFilter = ColorFilter.tint(color = colors.textSecondary) + ) + }, + onClickAction = { }, + text = "Survey Submitted", + isEnabled = false, + textStyle = typography.buttonText + ) +} + @Composable fun AddressLocksAlertView(hoursRemaining: Int = -1) { KSCoralBadge( @@ -730,23 +715,21 @@ fun AddressLocksAlertView(hoursRemaining: Int = -1) { ) } @Composable -fun SurveySubmittedButtonView() { - // TODO: Replace with translated string - KSPrimaryGreenButton( - modifier = Modifier.padding(dimensions.paddingMediumSmall), +fun PledgeWillBeDroppedAlert(daysRemaining: Int = -1) { + KSCoralBadge( leadingIcon = { + // TODO: Replace with translated string Image( modifier = Modifier .padding(end = dimensions.paddingXSmall) - .size(dimensions.paddingMedium), - imageVector = ImageVector.vectorResource(id = R.drawable.icon__check), - contentDescription = "Survey Submitted", - colorFilter = ColorFilter.tint(color = colors.textSecondary) + .size(dimensions.alertIconSize), + imageVector = ImageVector.vectorResource(id = R.drawable.ic_clock), + contentDescription = "Pledge will be dropped in $daysRemaining days", + colorFilter = ColorFilter.tint(colors.textAccentRedBold) ) }, - onClickAction = { }, - text = "Survey Submitted", - isEnabled = false, - textStyle = typography.buttonText + // TODO: Replace with translated string + text = "Pledge will be dropped in $daysRemaining days", + textColor = colors.textAccentRedBold ) } diff --git a/app/src/test/java/com/kickstarter/ui/activities/compose/PPOCardViewKtTest.kt b/app/src/test/java/com/kickstarter/ui/activities/compose/PPOCardViewKtTest.kt new file mode 100644 index 0000000000..32679aa3da --- /dev/null +++ b/app/src/test/java/com/kickstarter/ui/activities/compose/PPOCardViewKtTest.kt @@ -0,0 +1,251 @@ +package com.kickstarter.ui.activities.compose + +import androidx.compose.ui.test.assertIsDisplayed +import androidx.compose.ui.test.assertIsNotDisplayed +import androidx.compose.ui.test.onAllNodesWithText +import androidx.compose.ui.test.onNodeWithTag +import com.kickstarter.KSRobolectricTestCase +import com.kickstarter.features.pledgedprojectsoverview.ui.PPOCardView +import com.kickstarter.features.pledgedprojectsoverview.ui.PPOCardViewTestTag +import com.kickstarter.features.pledgedprojectsoverview.ui.PPOCardViewType +import com.kickstarter.ui.compose.designsystem.KSTheme +import org.junit.Test + +class PPOCardViewKtTest : KSRobolectricTestCase() { + private val confirmAddressButtonsView = + composeTestRule.onNodeWithTag(PPOCardViewTestTag.CONFIRM_ADDRESS_BUTTONS_VIEW.name, true) + private val shippingAddressView = + composeTestRule.onNodeWithTag(PPOCardViewTestTag.SHIPPING_ADDRESS_VIEW.name, true) + @Test + fun testConfirmAddressView() { + val timeNumberForAction = 5 + composeTestRule.setContent { + KSTheme { + PPOCardView( + viewType = PPOCardViewType.CONFIRM_ADDRESS, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$50.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + shippingAddress = "Firsty Lasty\n123 First Street, Apt #5678\nLos Angeles, CA 90025-1234\nUnited States", + showBadge = true, + onActionButtonClicked = {}, + onSecondaryActionButtonClicked = {}, + timeNumberForAction = timeNumberForAction + ) + } + } + // Alerts + // TODO: Replace with translated string + composeTestRule.onAllNodesWithText("Address locks in $timeNumberForAction hours")[0].assertIsDisplayed() + // Shipping address displayed + shippingAddressView.assertIsDisplayed() + // CTA + confirmAddressButtonsView.assertIsDisplayed() + } + + @Test + fun testAddressConfirmedView() { + val timeNumberForAction = 5 + composeTestRule.setContent { + KSTheme { + PPOCardView( + viewType = PPOCardViewType.ADDRESS_CONFIRMED, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$50.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + shippingAddress = "Firsty Lasty\n123 First Street, Apt #5678\nLos Angeles, CA 90025-1234\nUnited States", + showBadge = true, + onActionButtonClicked = {}, + onSecondaryActionButtonClicked = {}, + timeNumberForAction = timeNumberForAction + ) + } + } + + // Alerts + // TODO: Replace with translated string + composeTestRule.onAllNodesWithText("Address locks in $timeNumberForAction hours")[0].assertIsDisplayed() + // Shipping address displayed + shippingAddressView.assertIsDisplayed() + // CTA + composeTestRule.onAllNodesWithText("Address Confirmed")[0].assertIsDisplayed() + } + + @Test + fun testFixPaymentView() { + val timeNumberForAction = 6 + composeTestRule.setContent { + KSTheme { + PPOCardView( + viewType = PPOCardViewType.FIX_PAYMENT, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$50.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + showBadge = true, + onActionButtonClicked = {}, + onSecondaryActionButtonClicked = {}, + timeNumberForAction = timeNumberForAction + ) + } + } + + // Alerts + // TODO: Replace with translated strings + composeTestRule.onAllNodesWithText("Payment failed")[0].assertIsDisplayed() + composeTestRule.onAllNodesWithText("Pledge will be dropped in $timeNumberForAction days")[0].assertIsDisplayed() + // Shipping address hidden + shippingAddressView.assertIsNotDisplayed() + // CTA + composeTestRule.onAllNodesWithText("Fix Payment")[0].assertIsDisplayed() + } + + @Test + fun testPaymentFixedView() { + val timeNumberForAction = 6 + composeTestRule.setContent { + KSTheme { + PPOCardView( + viewType = PPOCardViewType.PAYMENT_FIXED, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$50.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + showBadge = false, + onActionButtonClicked = {}, + onSecondaryActionButtonClicked = {}, + timeNumberForAction = timeNumberForAction + ) + } + } + + // No alerts + // Shipping address hidden + shippingAddressView.assertIsNotDisplayed() + // CTA + // TODO: Replace with translated strings + composeTestRule.onAllNodesWithText("Payment Fixed")[0].assertIsDisplayed() + } + + @Test + fun testAuthenticateCardView() { + val timeNumberForAction = 7 + composeTestRule.setContent { + KSTheme { + PPOCardView( + viewType = PPOCardViewType.AUTHENTICATE_CARD, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$60.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + showBadge = true, + onActionButtonClicked = {}, + onSecondaryActionButtonClicked = {}, + timeNumberForAction = timeNumberForAction + ) + } + } + + // Alerts + // TODO: Replace with translated strings + composeTestRule.onAllNodesWithText("Card needs authentication")[0].assertIsDisplayed() + composeTestRule.onAllNodesWithText("Pledge will be dropped in $timeNumberForAction days")[0].assertIsDisplayed() + // Shipping address hidden + shippingAddressView.assertIsNotDisplayed() + // CTA + composeTestRule.onAllNodesWithText("Authenticate Card")[0].assertIsDisplayed() + } + + @Test + fun testCardAuthenticatedView() { + val timeNumberForAction = 7 + composeTestRule.setContent { + KSTheme { + PPOCardView( + viewType = PPOCardViewType.CARD_AUTHENTICATED, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$60.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + showBadge = false, + onActionButtonClicked = {}, + onSecondaryActionButtonClicked = {}, + timeNumberForAction = timeNumberForAction + ) + } + } + + // No alerts + // Shipping address hidden + shippingAddressView.assertIsNotDisplayed() + // CTA + // TODO: Replace with translated strings + composeTestRule.onAllNodesWithText("Card Authenticated")[0].assertIsDisplayed() + } + + @Test + fun testTakeSurveyView() { + val timeNumberForAction = 8 + composeTestRule.setContent { + KSTheme { + PPOCardView( + viewType = PPOCardViewType.TAKE_SURVEY, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$70.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + showBadge = true, + onActionButtonClicked = {}, + onSecondaryActionButtonClicked = {}, + timeNumberForAction = timeNumberForAction + ) + } + } + + // Alerts + // TODO: Replace with translated strings + composeTestRule.onAllNodesWithText("Address locks in $timeNumberForAction hours")[0].assertIsDisplayed() + // Shipping address hidden + shippingAddressView.assertIsNotDisplayed() + // CTA + composeTestRule.onAllNodesWithText("Take Survey")[0].assertIsDisplayed() + } + + @Test + fun testSurveySubmittedView() { + val timeNumberForAction = 8 + composeTestRule.setContent { + KSTheme { + PPOCardView( + viewType = PPOCardViewType.SURVEY_SUBMITTED, + onCardClick = {}, + projectName = "Sugardew Island - Your cozy farm shop let’s pretend this is a longer title let’s pretend this is a longer title", + pledgeAmount = "$70.00", + creatorName = "Some really really really really really really really long name", + sendAMessageClickAction = {}, + showBadge = true, + onActionButtonClicked = {}, + onSecondaryActionButtonClicked = {}, + timeNumberForAction = timeNumberForAction + ) + } + } + + // Alerts + // TODO: Replace with translated strings + composeTestRule.onAllNodesWithText("Address locks in $timeNumberForAction hours")[0].assertIsDisplayed() + // Shipping address displayed + shippingAddressView.assertIsDisplayed() + // CTA + composeTestRule.onAllNodesWithText("Survey Submitted")[0].assertIsDisplayed() + } +}