From cfd1ac81fbe7abbfbfd3e0d5bdc445f80ffd957f Mon Sep 17 00:00:00 2001 From: Susmitha Girumala Date: Wed, 16 Sep 2020 15:25:35 -0400 Subject: [PATCH] refactor: Update comments and tests for error message --- ui/core/app/components/error/message.hbs | 4 +- ui/core/app/components/error/message.js | 51 ++++++++++--------- ui/core/app/routes/scopes/scope.js | 1 - ui/core/mirage/config.js | 3 +- .../components/error/message-test.js | 45 ++++++++++------ 5 files changed, 62 insertions(+), 42 deletions(-) diff --git a/ui/core/app/components/error/message.hbs b/ui/core/app/components/error/message.hbs index 7cc59f8c9..200395481 100644 --- a/ui/core/app/components/error/message.hbs +++ b/ui/core/app/components/error/message.hbs @@ -1,4 +1,6 @@ {{t this.description}} - {{t "actions.help"}} + {{#if this.helpRoute}} + {{t "actions.help"}} + {{/if}} \ No newline at end of file diff --git a/ui/core/app/components/error/message.js b/ui/core/app/components/error/message.js index c949ba822..1c476e71f 100644 --- a/ui/core/app/components/error/message.js +++ b/ui/core/app/components/error/message.js @@ -1,50 +1,50 @@ import Message from 'rose/components/rose/message'; /* - * Helpful error booleans are attached based on the error status code: - * - * - 401 - `error.isUnauthenticated`: the session isn't authenticated - * - 403 - `error.isForbidden`: the session is authenticated but does not have - * permission to perform the requested action - * - 404 - `error.isNotFound`: the requested resource could not be found - * - 500 - `error.isServer`: an internal server error occurred - * - * For an unknown error state, i.e error state not matching to the above defined list: - * - unknown - `error.isUnknown`: an error occurred, but we don't know which or - * we don't distinguish it yet -*/ + * Helpful error booleans are attached based on the error status code: + * + * - 401 - `error.isUnauthenticated`: the session isn't authenticated + * - 403 - `error.isForbidden`: the session is authenticated but does not have + * permission to perform the requested action + * - 404 - `error.isNotFound`: the requested resource could not be found + * - 500 - `error.isServer`: an internal server error occurred + * + * For an unknown error state, i.e error state not matching to the above defined list: + * - unknown - `error.isUnknown`: an error occurred, but we don't know which or + * we don't distinguish it yet + */ const status_messages = { - '401' : { + '401': { icon: 'disabled', title: 'errors.titles.unauthenticated-error', subtitle: 'errors.subtitles.unauthenticated-error', description: 'errors.descriptions.unauthenticated-error', }, - '403' : { + '403': { icon: 'disabled', title: 'errors.titles.forbidden-error', subtitle: 'errors.subtitles.forbidden-error', description: 'errors.descriptions.forbidden-error', }, - '404' : { + '404': { icon: 'help-circle-outline', title: 'errors.titles.notfound-error', subtitle: 'errors.subtitles.notfound-error', description: 'errors.descriptions.notfound-error', }, - '500' : { + '500': { icon: 'alert-circle-outline', title: 'errors.titles.server-error', subtitle: 'errors.subtitles.server-error', description: 'errors.descriptions.server-error', }, - 'unknown' : { + unknown: { icon: 'alert-circle-outline', title: 'errors.titles.unknown-error', subtitle: 'errors.subtitles.unknown-error', description: 'errors.descriptions.unknown-error', - } + }, }; export default class ErrorMessageComponent extends Message { @@ -82,23 +82,26 @@ export default class ErrorMessageComponent extends Message { return this.statusMessage.description; } + // Disable until help documentation can be linked in. /** * Returns an route string for help text in message. * @return {string} */ - get helpRoute() { - return 'index' - } + // get helpRoute() { + // return 'index' + // } /** * Returns an object with message details based on error status. - * Return message for `unkown` error when error status isn't part of + * Return message for `unknown` error when error status isn't part of * predefined message set. * @return {object} */ get statusMessage() { let status = this.status; - if(!status_messages[status]) { status = 'unknown'; } + if (!status_messages[status]) { + status = 'unknown'; + } return status_messages[status]; } -} \ No newline at end of file +} diff --git a/ui/core/app/routes/scopes/scope.js b/ui/core/app/routes/scopes/scope.js index def116b51..820f7caf2 100644 --- a/ui/core/app/routes/scopes/scope.js +++ b/ui/core/app/routes/scopes/scope.js @@ -33,5 +33,4 @@ export default class ScopesScopeRoute extends Route { ); }); } - } diff --git a/ui/core/mirage/config.js b/ui/core/mirage/config.js index 846da6b99..e0f1cfce3 100644 --- a/ui/core/mirage/config.js +++ b/ui/core/mirage/config.js @@ -1,6 +1,7 @@ import config from '../config/environment'; import { authHandler, deauthHandler } from './route-handlers/auth'; -import { Response } from 'miragejs'; +// Uncomment to use in simulating error responses +// import { Response } from 'miragejs'; export default function() { diff --git a/ui/core/tests/integration/components/error/message-test.js b/ui/core/tests/integration/components/error/message-test.js index 811a0a138..e4e6b1428 100644 --- a/ui/core/tests/integration/components/error/message-test.js +++ b/ui/core/tests/integration/components/error/message-test.js @@ -1,26 +1,41 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; +import { render, find } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; -module('Integration | Component | error/message', function(hooks) { +module('Integration | Component | error/message', function (hooks) { setupRenderingTest(hooks); - test('it renders', async function(assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.set('myAction', function(val) { ... }); + test('it renders predefined message for known error status', async function (assert) { + this.set('status', '401'); - await render(hbs``); + await render(hbs``); + assert.equal( + find('.rose-message-title').textContent.trim(), + 'You are not signed in' + ); + assert.equal( + find('.rose-message-subtitle').textContent.trim(), + 'Error 401' + ); + assert.equal( + find('.rose-message-description').textContent.trim(), + 'You are not authenticated. Please authenticate and try again later.' + ); + }); - assert.equal(this.element.textContent.trim(), ''); + test('it renders default error for undefined error status', async function (assert) { + this.set('status', '510'); - // Template block usage: - await render(hbs` - - template block text - - `); - - assert.equal(this.element.textContent.trim(), 'template block text'); + await render(hbs``); + assert.equal( + find('.rose-message-title').textContent.trim(), + 'Something went wrong' + ); + assert.equal(find('.rose-message-subtitle').textContent.trim(), 'Error'); + assert.equal( + find('.rose-message-description').textContent.trim(), + 'Please contact your administrator or try again later.' + ); }); });