feat(client): add single locations page

client/app/router.ts

@@ -14,6 +14,7 @@ Router.map(function () {
   });
   this.route('locations', function () {
     this.route('list', { path: '/' });
+    this.route('get', { path: '/:id' });
   });
   this.route('about');
 

client/app/routes/locations/get.ts

@@ -0,0 +1,11 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+import type Store from '@ember-data/store';
+
+export default class LocationGetRoute extends Route {
+  @service declare store: Store;
+
+  model(params: { id: number }) {
+    return this.store.findRecord('location', params.id);
+  }
+}

client/app/templates/locations/get.hbs

@@ -0,0 +1,10 @@
+{{page-title @model.name " · Locations"}}
+
+<h2>{{ @model.name }}</h2>
+
+<dl>
+  <dt id="current-position">Current position</dt>
+  <dd aria-labelledby="current-position">
+    <Position @position={{@model.position}} />
+  </dd>
+</dl>

client/app/templates/locations/list.hbs

@@ -13,7 +13,9 @@
   {{#each @model as |location| }}
     <tr>
       <td>
-        {{location.name}}
+        <LinkTo @route="locations.get" @model={{location}}>
+          {{location.name}}
+        </LinkTo>
       </td>
       <td>
         <Position @position={{location.position}} />

client/tests/acceptance/locations-test.ts

@@ -1,6 +1,7 @@
 import { module, test } from 'qunit';
 import { visit } from '@1024pix/ember-testing-library';
 import { setupMirage } from 'ember-cli-mirage/test-support';
+import { click } from '@ember/test-helpers';
 import 'qunit-dom';
 
 import { setupApplicationTest } from 'sokown-client/tests/helpers';
@@ -9,20 +10,43 @@ module('Acceptance | locations', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
-  test('it displays locations list', async function (assert) {
-    // when
-    const screen = await visit('/locations');
+  module('visiting /locations/', function () {
+    test('it displays locations list', async function (assert) {
+      // when
+      const screen = await visit('/locations');
 
-    // then
-    assert
-      .dom(
-        screen.getByRole('heading', {
-          name: 'Locations',
-          level: 2,
-        }),
-      )
-      .exists();
-    assert.dom(screen.getByRole('cell', { name: 'Earth' })).exists();
-    assert.dom(screen.getByRole('cell', { name: 'Moon' })).exists();
+      // then
+      assert
+        .dom(
+          screen.getByRole('heading', {
+            name: 'Locations',
+            level: 2,
+          }),
+        )
+        .exists();
+      assert.dom(screen.getByRole('cell', { name: 'Earth' })).exists();
+      assert.dom(screen.getByRole('cell', { name: 'Moon' })).exists();
+    });
+  });
+
+  module('visiting /locations/:id', function () {
+    test('it displays a single location', async function (assert) {
+      // when
+      const screen = await visit('/locations');
+      await click(screen.getByRole('link', { name: 'Moon' }));
+
+      // then
+      assert
+        .dom(
+          screen.getByRole('heading', {
+            name: 'Moon',
+            level: 2,
+          }),
+        )
+        .exists();
+      assert
+        .dom(screen.getByRole('definition', { name: 'Current position' }))
+        .hasText('1.000 2.000');
+    });
   });
 });