Pokemon Challenge

controllers.application\.js

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

const API_ENDPOINT = 'https://pokeapi.co/api/v2/pokemon/';

export default class ApplicationController extends Controller {
  appName = "Pokemon Pokedex"
  
  name = '';
  @tracked lastFound = false;
  @tracked pending = false;
  @tracked pokemonImage = '';

  @action
  async fetchPokemon() {
    this.pending = true;
    
    const response = await fetch(`${API_ENDPOINT}eevee`);
    const data = await response.json();
    
    this.pending = false;
    this.lastFound = true;
    
    const { sprites: { front_default: pokemonImage } } = data;
    
		this.pokemonImage = pokemonImage;
  }
};

exercise1\.txt

Given the following bug report, can you fix the issue?

```
Tier 1 Bug

Users are seeing the same pokemon appear no matter what they type in the search field.

Steps to Reproduce:

1. Type `pikachu` into search field (a yellow mouse)
2. Press `Get Pokemon`
3. Get back `eevee` (a brown fox)

Expected behavior:

Users should see the correct pokemon when they type the correct name into the search field.
```

exercise2\.txt

Given the following bug report, can you determine the best course of action?

```
Tier 1 Bug

Users report that the search freezes / hangs when they do certain searches.

Steps to Reproduce:

1. Type `misspelledcharmander` into search field (obviously misspelled)
2. Press `Get Pokemon`
3. Searching indefinitely

Expected Behavior:

The experience shouldn't freeze and the interface should return an appropriate response back to the user in a reasonable amount of time.
```

exercise3\.txt

Given the following user story, can you complete the feature?

```
## Opportunity / Problem

Trainers (users) would like to see more details of a specific pokemon. Trainers need to go into encounters feeling prepared, so they would like to know ahead of time the height and weight of a pokemon.

## Acceptance Criteria

Given a user who is using the pokedex, When the user searches for a specific pokemon and a result is returned, Then the pokedex should return the height / weight of the pokemon underneath the portrait.

Expected: Pikachu height: 1ft 4inches, weight: 13.2lbs
```

exercise4\.txt

Given the following user story, can you complete the feature?

```
## Opportunity / Problem

Trainers (users) would like to compare Pokemon. Many users would like to see more than a single pokemon at a time to understand their differences. That way they can quickly make decisions about which Pokemon to prioritize in their team.

## Acceptance Criteria

Given a user who is looking to compare pokemon in the pokedex, When the user searches for a specific pokemon and a result is returned, Then the pokedex should allow the user to select another pokemon for comparison.
```

overview\.txt

# Welcome

Hello!

This is Ember Twiddle. We can use this coding sandbox as a way to quickly iterate on some coding exercises. Ember Twiddle comes with the latest version of EmberJS preloaded and you will have access to most if not all modern ES6 functionality too. This environment comes equipped with Live Reload, so any changes you make to the code will be automatically reflected in the application render on the right.

## Quick Glossary

Pokemon - The name of the species in this fantasy genre
Pokedex - The equivalent of an almanac or a encyclopedia for the species

## Quick Links

Ember API Docs - https://api.emberjs.com/ember/3.18
Pokemon API Docs - https://pokeapi.co/docs/v2

## Explanations / Expectations:

1. You do not need to know anything about Pokemon, nor any knowledge about the open source Pokemon API that is used in the challenge.
2. You do not need to know anything about EmberJS and its APIs, but, you should have enough front end experience to know how to solve these exercises with some assistance.
3. You have full access to the internet and can feel free to Google questions and answers. Stackoverflow, MDN docs, are all welcome. Feel free to copy paste whatever you find.
4. Please stay communicative and let the interviewers know what you're doing.
5. You are encouraged to get through all the problems, but, it is not a requirement to finish all four in the alotted time.
6. There are tests that you're encouraged to update. You are not required to perform TDD. Please consider updating any tests before moving onto the next exercise.
7. You do not need to know how to use QUnit, but, you are encouraged to ask how to do things and ultimately contribute to tests.
8. You do not need to save your changes, but, you can do so with `CMD+S` (or CTRL if you're on Windows) if you want. (You may need to authenticate into Github to do so)
9. You can interact with the application on the right side whenever and however you want.
10. If you have any questions about how to do something in Twiddle or EmberJS, don't hesitate to ask!
11. You may notice bugs outside of the 4 exercises. That's okay, don't focus too much on them. Only focus on the issues described in the exercises. We can cover those other bugs through conversations or if we have time left over.

## NOTE

In the latest version of Ember Twiddle, there is a known bug that toggling `Run Tests` at the top of the preview panel does nothing. You wil need to go into twiddle.json and manually toggle `enable-testing` true / false.

router\.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
});

export default Router;

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.portrait-container {
  border: 1px solid gray;
  height: 200px;
  width: 200px;
  
  text-align: center;
  line-height: 200px;
}

#portrait {
  width: 200px;
  height: 200px;
}

templates.application\.hbs

<h1>{{this.appName}}</h1>
<br>
{{outlet}}

<div class="container">
  <div class="search-bar">
    <label>
      Search by Name
      <Input id="search" @type="text" @value={{this.name}} />
    </label>
    <button id="fetch" {{on "click" this.fetchPokemon}}>Get Pokemon</button>
  </div>
  
  
  {{#if this.pending}}
    Searching for {{this.name}}...
  {{else}}
    {{#if this.lastFound}}
      Found {{this.name}}!
    {{/if}}
  {{/if}}
  
  <div class="portrait-container">
    {{#if this.pokemonImage}}
      <img id="portrait" src={{this.pokemonImage}} />
    {{else}}
      <span class="placeholder">Placeholder</span>
    {{/if}}
  </div>
</div>

tests.acceptance.pokedex-test\.js

import { module, test } from 'qunit';
import { click, visit, currentURL, fillIn, waitUntil } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';

module('Pokedex', function(hooks) {
  setupApplicationTest(hooks);

  test('visiting /', async function(assert) {
    await visit('/');

    assert.equal(currentURL(), '/');
  });
  
  test('searching for a pokemon', async function(assert) {
    await visit('/');

    await fillIn('#search', 'pikachu');
    await click('#fetch');
    
    await waitUntil(() => {
      return document.getElementById('portrait');
    });
    
    const imgSrc = document.getElementById('portrait');
    
    // expected pikachu ID is 25
    assert.equal(imgSrc.src, 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png');
  });
});

tests.test-helper\.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { assign } from '@ember/polyfills';
import { start } from 'ember-qunit';

let attributes = {
  rootElement: '#test-root',
  autoboot: false
};
attributes = assign(attributes, config.APP);

let application = Application.create(attributes);
setApplication(application);

start();

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": true
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}