diff --git a/app/routes/team.js b/app/routes/team.js index ef783c2050d..11c8f070322 100644 --- a/app/routes/team.js +++ b/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; } } } diff --git a/app/routes/user.js b/app/routes/user.js index 919790703fb..6d2d5282125 100644 --- a/app/routes/user.js +++ b/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; } } } diff --git a/e2e/routes/team.spec.ts b/e2e/routes/team.spec.ts new file mode 100644 index 00000000000..5065a82807d --- /dev/null +++ b/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(); + }); +}); diff --git a/e2e/routes/user.spec.ts b/e2e/routes/user.spec.ts new file mode 100644 index 00000000000..c71207a8770 --- /dev/null +++ b/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(); + }); +}); diff --git a/tests/routes/team-test.js b/tests/routes/team-test.js new file mode 100644 index 00000000000..fe90e7d5331 --- /dev/null +++ b/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(); + }); +}); diff --git a/tests/routes/user-test.js b/tests/routes/user-test.js new file mode 100644 index 00000000000..9379dd66887 --- /dev/null +++ b/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(); + }); +});