Skip to content

This app's aim is allow users to vote for their favorite Nintendo 64 app.

License

Notifications You must be signed in to change notification settings

tarikfp/react-native-n64-voter-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

N64 Voter App 🎮

Introduction

This app's aim is allow users to vote for their favorite Nintendo 64 app.

This project is initialized using the https://github.com/tarikpnr/react-native-typescript-starter repo. 🚀

Objective

We have a Nintendo 64. As a team, we need to decide which game to buy next. Create a small single-page application that allows us to vote on our favorite Nintendo 64 game.

Requirements

  • Please make an app to vote.
    • You can hardcode game data.
    • No need to persist data.
    • Show the box arts or game illustrations in a grid, all at once on the page (so no pagination).
    • It should allow voting on the 5-10 most popular N64 games.
    • The definition of 'popular' is up to you. Can be rating, sales or your personal opinion.
    • Clicking/tapping on a game casts a vote. The vote count should be visible somehow.

Demo


Running e2e tests

 

Code
// For more info on how to write Detox tests, see the official docs:
// https://github.com/wix/Detox/blob/master/docs/README.md

const { reloadApp } = require("./reload");

describe("Example", () => {
  beforeEach(async () => {
    await reloadApp();
  });

  it("First game card has the like text and button are available on the screen", async () => {
    // tests if the elements are on the screen
    await expect(element(by.id("game-card-like-text-1"))).toExist();
    await expect(element(by.id("game-card-like-button-1"))).toExist();

    // test game card has the like text available on the screen
    const likeTextAttrs = await element(
      by.id("game-card-like-text-1"),
    ).getAttributes();

    await expect(element(by.text(likeTextAttrs.text))).toExist();
  });

  it("pressing the like button of the first game card should increase the like count by one", async () => {
    // get like text(like count) before the like button is "tapped"
    const beforeLikeTextAttrs = await element(
      by.id("game-card-like-text-1"),
    ).getAttributes();

    // Tap to the like button to increase like count
    await element(by.id("game-card-like-button-1")).tap();

    // calculate final like text(count)
    const increasedLike = Number(beforeLikeTextAttrs.text) + 1;

    // get updated like text
    const afterLikeText = await element(
      by.id("game-card-like-text-1"),
    ).getAttributes();

    // test whether the like text(count) has been increased
    await expect(element(by.text(afterLikeText.text.toString()))).toHaveText(
      increasedLike.toString(),
    );
  });
});

Covered concepts

  • Detox e2e testing
  • React Native Storybook
  • React Native Animations
  • React Compound Components
  • React Context
  • Json server
  • Optimistic updates with react query

Running locally

Install dependencies

  yarn install

Run json-server

  yarn start-server

Start the emulator for ios.

 cd ios && pod install && yarn run ios
  • For pod install, if you don't have cocoapods installed here's a reliable way to install cocoapods in Nov 2022 that worked on MacOS Monterey/M2
  • This assumes you have a simulator available for "iPhone 13". If you don't, simply include the name of one of the simulators installed e.g. yarn run ios --simulator="iPhone 14"

or for android

  yarn run android

About

This app's aim is allow users to vote for their favorite Nintendo 64 app.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published