🚀 3단계 - GitHub(UI 상태) (#56)

* refactor: ColorScheme 파일 추가 및 topAppBarContainer 확장 속성 추가

* refactor: CenterAlignedTopAppBar containerColor White에서 topAppBarContainer 속성으로 대체 및 Color White 제거

* refactor: HorizontalDivider thickness 1.dp 속성 제거

* test(refactor): GithubScreenTest 화면 검증 로직 코드 간결화

* feat: UiState sealed class 추가

* feat: RepositoryUiState 추가

* feat: GithubViewModel에서 repositoryUiState 추가 및 상태 관리 개선

* feat: CenteredContent 컴포넌트 추가 및 GithubScreen에서 상태에 따른 UI 처리 개선

* feat: GithubScreen에 스낵바 오류 처리 및 재시도 로직 추가

* feat: 하드코팅 text string resource로 대체

* feat: SnackbarHost, CircularProgressIndicator sementic 태그 추가

* refactor: 빈 화면 문구 수정

* test: GithubScreen(Stateless) 테스트 코드 작성

* feat: FakeGithubRepository 추가

* test: GithubScreen(Stateful) 테스트 코드 작성

* docs: 2단계 개선 사항 정의

* docs: 3단계 기능 요구 사항 정의

* test(fix): repository.clearData() 제거

* refactor: FakeGithubRepository clearData 함수 제거

* test: StatelessGithubScreenTest 스낵바 테스트 코드 추가

* refactor: LaunchedEffect viewModel key 지정

* refactor: _errorFlow emit > tryEmit 으로 수정

Author: mogunjoa

README.md

@@ -20,3 +20,19 @@
 - 힌트 코드를 참고하여 ViewModel Factory를 구현한다. (Hilt와 같은 별도의 DI 라이브러리를 활용하지 않는다)
 - 저장소 목록을 노출하는 UI와 관련된 기능은 ui 패키지에 구현되어야 한다.
 - UI 레이어는 데이터 레이어를 의존하지만, 데이터 레이어는 UI 레이어를 의존해선 안 된다.
+
+#### 🚀 2단계 - GitHub(UI 레이어) 개선 사항
+- GithubScreen(stateless) private 접근 제어자 제거 (테스트 용이성)
+- Text style 코드 간소화 (style 지정하면 일괄 적용)
+- Color 지정을 MaterialTheme.colors 사용하도록 변경 (확장 프로퍼티 활용)
+- LazyColumn key 추가 (성능 최적화)
+- viewModelScope Dispatchers.IO 제거(Retrofit 내부적으로 적절히 세팅해줌)
+- GithubScreen 내부 컴포넌트 분리
+- GithubViewModel getRepositories > fetchRepositories로 함수명 변경(의도 명확화)
+- HorizontalDivider thickness 1dp 제거 (내부 기본값이 1dp)
+
+### 🚀 3단계 - GitHub(UI 상태) 요구 사항
+- 목록이 로딩되기 전에는 로딩 UI를 노출한다.
+- 목록이 빈 경우에는 빈 화면 UI를 노출한다.
+- 오류가 발생한 경우 재시도 가능한 스낵바를 노출한다.
+

app/src/androidTest/java/GithubScreenTest.kt

@@ -0,0 +1,141 @@
+import androidx.compose.ui.test.assertIsDisplayed
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onAllNodesWithText
+import androidx.compose.ui.test.onFirst
+import androidx.compose.ui.test.onNodeWithContentDescription
+import androidx.compose.ui.test.onNodeWithText
+import androidx.compose.ui.test.performClick
+import kotlinx.coroutines.runBlocking
+import nextstep.github.data.model.RepositoryModel
+import nextstep.github.data.repository.FakeGithubRepository
+import nextstep.github.ui.screen.github.GithubScreen
+import nextstep.github.ui.screen.github.GithubViewModel
+import org.junit.Before
+import org.junit.Rule
+import org.junit.Test
+
+class StatefulGithubScreenTest {
+
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    private lateinit var fakeViewModel: GithubViewModel
+    private lateinit var repository: FakeGithubRepository
+    private val data = listOf(
+        RepositoryModel(
+            id = 1,
+            fullName = "next-step/nextstep-docs",
+            description = "nextstep 매뉴얼 및 문서를 관리하는 저장소",
+        ),
+        RepositoryModel(
+            id = 2,
+            fullName = "next-step/holy-moly",
+            description = "nextstep 홀리몰리한 저장소",
+        ),
+        RepositoryModel(
+            id = 3,
+            fullName = "next-step/haly-galy",
+            description = "nextstep 할리갈리한 저장소",
+        ),
+    )
+
+    @Before
+    fun setUp() {
+        // FakeGithubRepository 생성
+        repository = FakeGithubRepository()
+
+        // GithubViewModel FakeGithubRepository 주입 및 생성
+        fakeViewModel = GithubViewModel(repository)
+    }
+
+    @Test
+    fun Github_데이터를_정상적으로_불러왔을떄_데이터가_화면에_표시된다() {
+        // 데이터 세팅
+        repository.setFakeData(data)
+
+        composeTestRule.setContent {
+            GithubScreen(viewModel = fakeViewModel)
+        }
+
+        // 데이터 로드
+        runBlocking {
+            fakeViewModel.fetchRepositories("next-step")
+        }
+
+        // 데이터 출력 검증
+        data.forEach {
+            composeTestRule.onNodeWithText(it.fullName)
+                .assertExists()
+        }
+    }
+
+    @Test
+    fun Github_데이터가_비어있을때_화면에_메시지가_출력된다() {
+        composeTestRule.setContent {
+            GithubScreen(viewModel = fakeViewModel)
+        }
+
+        // 데이터 로드
+        runBlocking {
+            fakeViewModel.fetchRepositories("next-step")
+        }
+
+        // 빈 데이터 메시지 출력 검증
+        composeTestRule.onAllNodesWithText("목록이 비었습니다.")
+            .onFirst()
+            .assertExists()
+    }
+
+    @Test
+    fun Github_데이터를_로드중_에러_발생시_에러_스낵바를_호출한다() {
+        // 데이터 로드 실패 세팅
+        repository.setFailureMode(true)
+
+        composeTestRule.setContent {
+            GithubScreen(viewModel = fakeViewModel)
+        }
+
+        // 데이터 로드
+        runBlocking {
+            fakeViewModel.fetchRepositories("next-step")
+        }
+
+        // 에러 발생 스낵바 호출 검증
+        composeTestRule.onNodeWithContentDescription("Snackbar")
+            .assertIsDisplayed()
+
+        composeTestRule.onNodeWithText("예상치 못한 오류가 발생했습니다.")
+            .assertIsDisplayed()
+
+        composeTestRule.onNodeWithText("재시도")
+            .assertIsDisplayed()
+    }
+
+    @Test
+    fun Github_에러_스낵바_재시도_클릭시_데이터를_로드를_다시_시도한다() {
+        // 데이터 로드 실패 세팅
+        repository.setFailureMode(true)
+
+        composeTestRule.setContent {
+            GithubScreen(viewModel = fakeViewModel)
+        }
+
+        runBlocking {
+            fakeViewModel.fetchRepositories("next-step")
+        }
+
+        // 데이터 로드 성공 세팅
+        repository.setFailureMode(false)
+        repository.setFakeData(data)
+
+        // 에러 발생 후 재시도 클릭
+        composeTestRule.onNodeWithText("재시도")
+            .performClick()
+
+        // 데이터 로드 성공 검증
+        data.forEach {
+            composeTestRule.onNodeWithText(it.fullName)
+                .assertExists()
+        }
+    }
+}

app/src/androidTest/java/StatefulGithubScreenTest.kt

@@ -0,0 +1,152 @@
+import androidx.compose.material3.SnackbarHostState
+import androidx.compose.material3.SnackbarResult
+import androidx.compose.ui.test.assertIsDisplayed
+import androidx.compose.ui.test.assertIsNotDisplayed
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onAllNodesWithText
+import androidx.compose.ui.test.onFirst
+import androidx.compose.ui.test.onNodeWithContentDescription
+import androidx.compose.ui.test.onNodeWithText
+import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.test.advanceUntilIdle
+import kotlinx.coroutines.test.runTest
+import nextstep.github.ui.screen.github.GithubScreen
+import nextstep.github.ui.screen.github.RepositoryUiState
+import nextstep.github.ui.uistate.UiState
+import org.junit.Rule
+import org.junit.Test
+
+class StatelessGithubScreenTest {
+
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    val uiState = UiState.Success(
+        data = listOf(
+            RepositoryUiState(
+                id = 1,
+                fullName = "next-step/nextstep-docs",
+                description = "nextstep 매뉴얼 및 문서를 관리하는 저장소",
+            ),
+            RepositoryUiState(
+                id = 2,
+                fullName = "next-step/holy-moly",
+                description = "nextstep 홀리몰리한 저장소",
+            ),
+            RepositoryUiState(
+                id = 3,
+                fullName = "next-step/haly-galy",
+                description = "nextstep 할리갈리한 저장소",
+            ),
+        )
+    )
+
+    @Test
+    fun Github_레포지토리_데이터가_정상적으로_화면에_출력된다() {
+        composeTestRule.setContent {
+            GithubScreen(
+                repositoryUiState = uiState,
+                snackbarHostState = SnackbarHostState()
+            )
+        }
+
+        uiState.data.forEach {
+            composeTestRule.onNodeWithText(it.fullName)
+                .assertExists()
+        }
+    }
+
+    @Test
+    fun Github_레포지토리_데이터가_빈값일시_화면에_메시지가_출력된다() {
+        composeTestRule.setContent {
+            GithubScreen(
+                repositoryUiState = UiState.Empty,
+                snackbarHostState = SnackbarHostState()
+            )
+        }
+
+        composeTestRule.onAllNodesWithText("목록이 비었습니다.")
+            .onFirst()
+            .assertExists()
+    }
+
+    @Test
+    fun Github_레포지토리_데이터가_로딩일시_로딩바가_화면에_출력된다() {
+        composeTestRule.setContent {
+            GithubScreen(
+                repositoryUiState = UiState.Loading,
+                snackbarHostState = SnackbarHostState()
+            )
+        }
+
+        composeTestRule.onNodeWithContentDescription("LoadingProgressBar")
+            .assertIsDisplayed()
+    }
+
+    @OptIn(ExperimentalCoroutinesApi::class)
+    @Test
+    fun 오류_발생시_화면에_스낵바가_호출된다() = runTest {
+
+        val snackbarHostState = SnackbarHostState()
+
+        composeTestRule.setContent {
+            GithubScreen(
+                repositoryUiState = UiState.Empty,
+                snackbarHostState = snackbarHostState
+            )
+        }
+
+        launch {
+            snackbarHostState.showSnackbar(
+                message = "예상치 못한 오류가 발생했습니다.",
+                actionLabel = "재시도",
+            )
+        }
+
+        advanceUntilIdle()
+
+        composeTestRule.onNodeWithContentDescription("Snackbar")
+            .assertIsDisplayed()
+
+        composeTestRule.onNodeWithText("예상치 못한 오류가 발생했습니다.")
+            .assertIsDisplayed()
+
+        snackbarHostState.currentSnackbarData?.dismiss()
+    }
+
+    @OptIn(ExperimentalCoroutinesApi::class)
+    @Test
+    fun 스낵바_재시도_버튼을_클릭하면_스낵바가_사라진다() = runTest {
+        val snackbarHostState = SnackbarHostState()
+
+        composeTestRule.setContent {
+            GithubScreen(
+                repositoryUiState = UiState.Empty,
+                snackbarHostState = snackbarHostState
+            )
+        }
+
+        launch {
+            when (snackbarHostState.showSnackbar(
+                message = "예기치 못한 오류",
+                actionLabel = "재시도"
+            )) {
+                SnackbarResult.ActionPerformed -> {
+                    snackbarHostState.currentSnackbarData?.dismiss()
+                }
+
+                else -> {}
+            }
+        }
+
+        advanceUntilIdle()
+
+        snackbarHostState.currentSnackbarData?.performAction()
+
+        advanceUntilIdle()
+
+        composeTestRule.onNodeWithContentDescription("Snackbar")
+            .assertIsNotDisplayed()
+    }
+}

app/src/androidTest/java/StatelessGithubScreenTest.kt

@@ -0,0 +1,26 @@
+package nextstep.github.data.repository
+
+import nextstep.github.data.model.RepositoryModel
+
+class FakeGithubRepository : GithubRepository {
+
+    private var shouldFail = false
+    private var fakeData: List<RepositoryModel> = emptyList()
+
+    fun setFakeData(data: List<RepositoryModel>) {
+        shouldFail = false
+        fakeData = data
+    }
+
+    fun setFailureMode(isFail: Boolean) {
+        shouldFail = isFail
+    }
+
+    override suspend fun getRepositories(organization: String): Result<List<RepositoryModel>> {
+        return if (shouldFail) {
+            Result.failure(Exception("Fake network error"))
+        } else {
+            Result.success(fakeData)
+        }
+    }
+}