Super Heroes Kata implemented using Jetpack Compose and Screenshot Testing.

Overview

Karumi logo KataSuperHeroes with Jetpack Compose Build, lint, and test

  • We are here to learn about Jetpack Compose.
  • We are going to use Jetpack Compose Testing Tools to interact with the Application UI from our tests.
  • We are going to use Shot test our UI using Screenshot Testing.
  • We are going to use Hilt to replace production code with Test Doubles.
  • We are going to practice pair programming.

Getting started

This repository contains an Android application to show super heroes information:

ApplicationScreencast

This Application is based on Jetpack Compose components and Jetpack View Models:

  • SuperHeroListScreen showing a list of super heroes with name, photo and a special badge if is part of the Avengers Team.

MainActivityScreenshot

  • SuperHeroDetailScreen showing detailed information about a super hero like his or her name, photo and description.

SuperHeroDetailActivityScreenshot

The application architecture, dependencies and configuration is ready to just start working with view models, Hilt as dependency injector and Jetpack Compose for the UI.

Tasks

  1. UI Development:

Your task as an Android Developer is to write all the missing components needed to implement this Application UI. Navigation and the main skeleton is in place, but you'll have to implement some Jetpack Compose components using the assets provided. main branch will be used as the solution and write-ui branch will be used as your starting point.

  1. Writing tests:

Your task as Android Developer is to write all the UI tests needed to check if the Application UI is working as expected. main branch will be used as the solution and write-tests branch will be used as your starting point.

Extra Tasks

If you are done and you want to keep practicing, try to continue with the following tasks:

  • Modify the detail screen to handle an error case where the name of the super hero used to start this activity does not exist and show a message if this happens.
  • Modify the project to handle connection errors and show a message explaining that something went wrong in both screens.
  • Add coverage to all the new scenarios.

Data provided by Marvel. ยฉ 2021 MARVEL

License

Copyright 2021 Karumi

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

You might also like...
Jetpack Compose performance testing

Jetpack Compose performance testing

Sample repo that demonstrates various options for testing Jetpack Compose applications.

Composing With Confidence This is the sample repository for the Composing With Confidence presentation from Droidcon NYC in 2022. If you run the sampl

Jetpack Compose Boids | Flocking Insect ๐Ÿœ. bird or Fish simulation using Jetpack Compose Desktop ๐Ÿš€, using Canvas API ๐ŸŽจ
Jetpack Compose Boids | Flocking Insect ๐Ÿœ. bird or Fish simulation using Jetpack Compose Desktop ๐Ÿš€, using Canvas API ๐ŸŽจ

๐Ÿœ ๐Ÿœ ๐Ÿœ Compose flocking Ants(boids) ๐Ÿœ ๐Ÿœ ๐Ÿœ Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ๐Ÿš€ , usi

Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

Compose-navigation - Set of utils to help with integrating Jetpack Compose and Jetpack's Navigation

Jetpack Compose Navigation Set of utils to help with integrating Jetpack Compose

List-programminglanguage-compose - Simple implementation of a list of programming languages using LazyColumn and Coil in Jetpack Compose
List-programminglanguage-compose - Simple implementation of a list of programming languages using LazyColumn and Coil in Jetpack Compose

Lista - Lenguajes de programaciรณn - Jetpack Compose Screenshots ๐Ÿ“ฑ Referencias ?

Comments
  • Update Gradle, coroutines, Android sdk

    Update Gradle, coroutines, Android sdk

    Trying to update versions of the tools.

    • Bumped targetSdk version to 31
    • Updated compose to 1.1.1
    • Updated hilt to 2.38.1
    • Updated Shot to 5.14.1
    • Updated Gradle and AGP

    Let's see if CI passes, then decide if we go on with the Pull Request or we close it

    opened by voghDev 0
Owner
Karumi
Karumi, the Rock Solid Code studio
Karumi
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Canopas Software 180 Jan 2, 2023
A pet adoption app UI built with super powerful Jetpack Compose for #AndroidDevChallenge

PetyKT ?? Awesome pet adoption app built to demonstrate the use of super powerful and modern UI development toolkit i.e. Jetpack Compose UI for #Andro

Shreyas Patil 22 Sep 28, 2022
๐ŸŽฎ An attempt to create Super Mario Bros using Compose for Desktop

?? compose-mario An attempt to create Super Mario Bros using Compose for Desktop ??๏ธ Under Active Development THIS PROJECT IS UNDER ACTIVE DEVELOPMENT

theapache64 22 Nov 11, 2022
Snake-compose-for-desktop - Snake Game - implemented using Compose for Desktop

A Snake game, built with Compose for Desktop snake-compose-for-desktop is my imp

gnu 5 Feb 17, 2022
Jetpack Compose based project, used to stress-testing compose features / integrations and explore non-trivial functionality

Project containing Jetpack Compose samples For pagination & network images it uses CATAAS. Known issues Navigation-Compose Issue with fast tapping on

Denis Rudenko 59 Dec 14, 2022
Andromeda is a open-source design language system implemented in Jetpack Compose.

Andromeda Andromeda is a open-source design language system implemented in Jetpack Compose. Catalog app Table of Contents About the Project Getting St

Adit Lal 140 Dec 25, 2022
Microsoft Fluent UI implemented in Jetpack Compose.

fluentui (WIP) Microsoft Fluent UI implemented in Jetpack Compose. Controls Some of the controls available include: ActionBarLayout AppBarLayout Avata

Nthily 15 Aug 28, 2022
A simple Snake game implemented using Compose for Desktop

CompoSnake A simple Snake game implemented using Compose for Desktop. Run: ./gradlew run Author Twitter: @arkann1985 If you like this project you can

Arkadii Ivanov 58 Dec 27, 2022
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose

Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree

Felix Kariuki 5 Dec 29, 2022
Jetpack Compose performance testing

Jetpack Compose performance testing ( ?? WIP) ?? Disclaimer This project is not official, and the information is provided as-is. All test cases descri

Sergey Yaremych 16 Jun 17, 2022