Merge pull request #9900 from Turbo87/404-pages

Show error page if team or user is missing or fails to load

Author: Turbo87

app/routes/team.js

@@ -12,7 +12,7 @@ export default class TeamRoute extends Route {
     sort: { refreshModel: true },
   };
 
-  async model(params) {
+  async model(params, transition) {
     const { team_id } = params;
 
     try {
@@ -25,11 +25,12 @@ export default class TeamRoute extends Route {
       return { crates, team };
     } catch (error) {
       if (error instanceof NotFoundError) {
-        this.notifications.error(`Team '${params.team_id}' does not exist`);
-        return this.router.replaceWith('index');
+        let title = `${team_id}: Team not found`;
+        this.router.replaceWith('catch-all', { transition, error, title });
+      } else {
+        let title = `${team_id}: Failed to load team data`;
+        this.router.replaceWith('catch-all', { transition, error, title, tryAgain: true });
       }
-
-      throw error;
     }
   }
 }

app/routes/user.js

@@ -12,7 +12,7 @@ export default class UserRoute extends Route {
     sort: { refreshModel: true },
   };
 
-  async model(params) {
+  async model(params, transition) {
     const { user_id } = params;
     try {
       let user = await this.store.queryRecord('user', { user_id });
@@ -24,11 +24,12 @@ export default class UserRoute extends Route {
       return { crates, user };
     } catch (error) {
       if (error instanceof NotFoundError) {
-        this.notifications.error(`User '${params.user_id}' does not exist`);
-        return this.router.replaceWith('index');
+        let title = `${user_id}: User not found`;
+        this.router.replaceWith('catch-all', { transition, error, title });
+      } else {
+        let title = `${user_id}: Failed to load user data`;
+        this.router.replaceWith('catch-all', { transition, error, title, tryAgain: true });
       }
-
-      throw error;
     }
   }
 }

e2e/routes/team.spec.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@/e2e/helper';
+
+test.describe('Route | team', { tag: '@routes' }, () => {
+  test("shows an error message if the category can't be found", async ({ page }) => {
+    await page.goto('/teams/foo');
+    await expect(page).toHaveURL('/teams/foo');
+    await expect(page.locator('[data-test-404-page]')).toBeVisible();
+    await expect(page.locator('[data-test-title]')).toHaveText('foo: Team not found');
+    await expect(page.locator('[data-test-go-back]')).toBeVisible();
+    await expect(page.locator('[data-test-try-again]')).toHaveCount(0);
+  });
+
+  test('server error causes the error page to be shown', async ({ page, mirage }) => {
+    await mirage.addHook(server => {
+      server.get('/api/v1/teams/:id', {}, 500);
+    });
+
+    await page.goto('/teams/foo');
+    await expect(page).toHaveURL('/teams/foo');
+    await expect(page.locator('[data-test-404-page]')).toBeVisible();
+    await expect(page.locator('[data-test-title]')).toHaveText('foo: Failed to load team data');
+    await expect(page.locator('[data-test-go-back]')).toHaveCount(0);
+    await expect(page.locator('[data-test-try-again]')).toBeVisible();
+  });
+});

e2e/routes/user.spec.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@/e2e/helper';
+
+test.describe('Route | user', { tag: '@routes' }, () => {
+  test("shows an error message if the category can't be found", async ({ page }) => {
+    await page.goto('/users/foo');
+    await expect(page).toHaveURL('/users/foo');
+    await expect(page.locator('[data-test-404-page]')).toBeVisible();
+    await expect(page.locator('[data-test-title]')).toHaveText('foo: User not found');
+    await expect(page.locator('[data-test-go-back]')).toBeVisible();
+    await expect(page.locator('[data-test-try-again]')).toHaveCount(0);
+  });
+
+  test('server error causes the error page to be shown', async ({ page, mirage }) => {
+    await mirage.addHook(server => {
+      server.get('/api/v1/users/:id', {}, 500);
+    });
+
+    await page.goto('/users/foo');
+    await expect(page).toHaveURL('/users/foo');
+    await expect(page.locator('[data-test-404-page]')).toBeVisible();
+    await expect(page.locator('[data-test-title]')).toHaveText('foo: Failed to load user data');
+    await expect(page.locator('[data-test-go-back]')).toHaveCount(0);
+    await expect(page.locator('[data-test-try-again]')).toBeVisible();
+  });
+});

tests/routes/team-test.js

@@ -0,0 +1,30 @@
+import { currentURL } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+
+import { setupApplicationTest } from 'crates-io/tests/helpers';
+
+import { visit } from '../helpers/visit-ignoring-abort';
+
+module('Route | team', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test("shows an error message if the user can't be found", async function (assert) {
+    await visit('/teams/foo');
+    assert.strictEqual(currentURL(), '/teams/foo');
+    assert.dom('[data-test-404-page]').exists();
+    assert.dom('[data-test-title]').hasText('foo: Team not found');
+    assert.dom('[data-test-go-back]').exists();
+    assert.dom('[data-test-try-again]').doesNotExist();
+  });
+
+  test('server error causes the error page to be shown', async function (assert) {
+    this.server.get('/api/v1/teams/:id', {}, 500);
+
+    await visit('/teams/foo');
+    assert.strictEqual(currentURL(), '/teams/foo');
+    assert.dom('[data-test-404-page]').exists();
+    assert.dom('[data-test-title]').hasText('foo: Failed to load team data');
+    assert.dom('[data-test-go-back]').doesNotExist();
+    assert.dom('[data-test-try-again]').exists();
+  });
+});

tests/routes/user-test.js

@@ -0,0 +1,30 @@
+import { currentURL } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+
+import { setupApplicationTest } from 'crates-io/tests/helpers';
+
+import { visit } from '../helpers/visit-ignoring-abort';
+
+module('Route | user', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test("shows an error message if the user can't be found", async function (assert) {
+    await visit('/users/foo');
+    assert.strictEqual(currentURL(), '/users/foo');
+    assert.dom('[data-test-404-page]').exists();
+    assert.dom('[data-test-title]').hasText('foo: User not found');
+    assert.dom('[data-test-go-back]').exists();
+    assert.dom('[data-test-try-again]').doesNotExist();
+  });
+
+  test('server error causes the error page to be shown', async function (assert) {
+    this.server.get('/api/v1/users/:id', {}, 500);
+
+    await visit('/users/foo');
+    assert.strictEqual(currentURL(), '/users/foo');
+    assert.dom('[data-test-404-page]').exists();
+    assert.dom('[data-test-title]').hasText('foo: Failed to load user data');
+    assert.dom('[data-test-go-back]').doesNotExist();
+    assert.dom('[data-test-try-again]').exists();
+  });
+});