Skip to content
Super Heroes Kata for React Native Developers in Typescript.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add an empty react native project we are going to start configuring r… Oct 18, 2018
android Get the app running again on ios and android May 5, 2019
art Add the missing screencasts Oct 19, 2018
ios Get the app running again on ios and android May 5, 2019
src Update how the resources are being loaded May 5, 2019
.babelrc
.buckconfig Get the app working with just react native and without expo Oct 22, 2018
.flowconfig Get the app working with just react native and without expo Oct 22, 2018
.gitattributes Get the app working with just react native and without expo Oct 22, 2018
.gitignore Improve gitignore Oct 23, 2018
.travis.yml Add an empty react native project we are going to start configuring r… Oct 18, 2018
.watchmanconfig Get the app working with just react native and without expo Oct 22, 2018
LICENSE.txt Add an empty react native project we are going to start configuring r… Oct 18, 2018
README.md Add the missing screencasts Oct 19, 2018
app.json Get a simple version of the app running Oct 22, 2018
index.android.js Get the app running again on ios and android May 5, 2019
index.ios.js Get the app running again on ios and android May 5, 2019
jsconfig.json Create the main project structure Oct 18, 2018
package.json Get the app running again on ios and android May 5, 2019
rn-cli.config.js Get the app working with just react native and without expo Oct 22, 2018
tsconfig.json Get the app working with just react native and without expo Oct 22, 2018
tslint.json Finish detail screen Oct 19, 2018
yarn.lock Get the app running again on ios and android May 5, 2019

README.md

Karumi logo KataSuperHeroes in React Native & Typescript Build Status

  • We are here to practice testing in React Native.
  • We are going to use React Native to create our App.
  • We are going to use Typescript.
  • We are going to use Jest to test our code and replace production code with Test Doubles.
  • We are going to practice pair programming.

Getting started

This repository contains a ReactNative application to show Super Heroes information:

This Application is based on two screens:

screencasst

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

mainscreen

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

detailscreen

The application architecture, dependencies and configuration is ready to just start writing tests. In this project you'll find Jest configured to be able to replace production code with test doubles easily and to be able to interact with the application user interface from the component viewpoint.

Tasks

Your task as Software Engineer is to write all the tests needed to check if the app is working as expected.

This repository is ready to build the application, pass the checkstyle and your tests in Travis-CI environments.

Our recommendation for this exercise is:

  • Before starting

    1. Fork this repository.
    2. Checkout kata-super-heroes branch.
    3. Execute the application, explore it manually and make yourself familiar with the code.
    4. Execute yarn test and watch the only test it contains pass.
  • To help you get started, these are some test cases already written. Take a look at the __tests__ folders.

Considerations

  • If you get stuck, master branch contains already solved tests for the whole app.

  • You will find some utilities around the code to help you test the app properly.

Extra Tasks

If you've covered all the application functionality using automated tests try to continue with the following tasks:

  • Add a pull to refresh mechanism to the main screen and test it.
  • Modify SuperHeroDetailScreen 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 to the user to indicate something went wrong.

Documentation

There are some links which can be useful to finish these tasks:

Data provided by Marvel. © 2017 MARVEL

License

Copyright 2018 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 can’t perform that action at this time.