diff --git a/__tests__/task-requests/task-requestDetails.test.js b/__tests__/task-requests/task-requestDetails.test.js index 7bc4a75a..9dfd511b 100644 --- a/__tests__/task-requests/task-requestDetails.test.js +++ b/__tests__/task-requests/task-requestDetails.test.js @@ -160,9 +160,9 @@ describe('Task request details page', () => { ); expect(descriptionTextValue).toBe(longDescription); }); - it('should show "Task Requests not found" When the task ID is invalid and dev mode is enabled', async function () { + it('should show "Task Requests not found" When the task ID is invalid', async function () { await page.goto( - `${LOCAL_TEST_PAGE_URL}/task-requests/details/?id=dM5wwDdsfd9QsiTzi7eG7Oq5&dev=true`, + `${LOCAL_TEST_PAGE_URL}/task-requests/details/?id=dM5wwDdsfd9QsiTzi7eG7Oq5`, ); await page.waitForNetworkIdle(); @@ -174,18 +174,6 @@ describe('Task request details page', () => { expect(errorText).toBe('Task Requests not found'); }); - it('should not show "Task Requests not found" message when dev mode is disabled', async function () { - await page.goto( - `${LOCAL_TEST_PAGE_URL}/task-requests/details/?id=dM5wwDdsfd9QsiTzi7eG7Oq5`, - ); - - await page.waitForNetworkIdle(); - - const errorElement = await page.$('[data-testid="error-message"]'); - - expect(errorElement).toBeNull(); - }); - it('Should render Approve and Reject buttons for super users', async function () { await page.goto( `${LOCAL_TEST_PAGE_URL}/task-requests/details/?id=dM5wwD9QsiTzi7eG7Oq5&dev=true`, @@ -446,3 +434,38 @@ describe('Task request details page with status creation', () => { ); }); }); + +describe('Task Request details page without login', () => { + let browser; + let page; + jest.setTimeout(60000); + + beforeAll(async () => { + browser = await puppeteer.launch({ + headless: 'new', + ignoreHTTPSErrors: true, + args: ['--incognito', '--disable-web-security'], + devtools: false, + }); + page = await browser.newPage(); + }); + + afterAll(async () => { + await browser.close(); + }); + + it('should show an unauthenticated error message if the user is not logged in', async () => { + await page.goto( + `${LOCAL_TEST_PAGE_URL}/task-requests/details/?id=dM5wwD9QsiTzi7eG7Oq5`, + ); + await page.waitForNetworkIdle(); + + const errorMessage = await page.$eval( + '[data-testid="error-message"]', + (el) => el.textContent, + ); + expect(errorMessage).toBe( + 'You are unauthenticated to view this section, please login!', + ); + }); +}); diff --git a/task-requests/details/index.html b/task-requests/details/index.html index f165dfac..3ae89d16 100644 --- a/task-requests/details/index.html +++ b/task-requests/details/index.html @@ -13,13 +13,17 @@ /> + Task Requests | Real Dev Squad + + + -
-
- RDS logo - Home -
-
+
diff --git a/task-requests/details/script.js b/task-requests/details/script.js index 0f92eb05..d02475c0 100644 --- a/task-requests/details/script.js +++ b/task-requests/details/script.js @@ -362,9 +362,7 @@ async function fetchTaskRequest() { data.approvedTo = approvedTo; return data; } else { - if (isDev) { - showErrorMessage(res.status); - } + showErrorMessage(res.status); } } catch (e) { console.log(e); @@ -573,16 +571,26 @@ const renderTaskRequest = async () => { const showErrorMessage = (error) => { let errorMessageDiv; - const message = - error === 404 ? ErrorMessages.NOT_FOUND : ErrorMessages.SERVER_ERROR; - if (error === 404 || error === 500) { - errorMessageDiv = document.createElement('p'); - errorMessageDiv.classList.add('error-message'); - errorMessageDiv.setAttribute('data-testid', 'error-message'); - errorMessageDiv.textContent = message; - const container = document.querySelector('.container') || document.body; - container.appendChild(errorMessageDiv); + let message = ''; + errorMessageDiv = document.createElement('div'); + errorMessageDiv.classList.add('error-message'); + errorMessageDiv.setAttribute('data-testid', 'error-message'); + switch (error) { + case 404: + message = ErrorMessages.NOT_FOUND; + break; + case 401: + message = ErrorMessages.UNAUTHENTICATED; + break; + default: + message = ErrorMessages.SERVER_ERROR; + break; } + errorMessageDiv.textContent = message; + const container = + document.querySelector('#task-request-details') || document.body; + container.appendChild(errorMessageDiv); + taskRequestSkeleton?.classList.add('hidden'); taskContainer?.classList.add('hidden'); const requestors = document.querySelector('.requestors'); diff --git a/task-requests/details/style.css b/task-requests/details/style.css index dbbf9c71..5487581b 100644 --- a/task-requests/details/style.css +++ b/task-requests/details/style.css @@ -36,27 +36,6 @@ body { margin: 0.5rem 0; } -.header { - background: #1d1283; - padding: 1rem; -} -.header__contents { - max-width: 1440px; - padding: 0.5rem 1rem; - margin: 0 auto; - color: var(--color-white); - display: flex; - align-items: center; - gap: 0.5rem; -} -.header__contents__navlink { - color: var(--color-white); - text-decoration: none; -} -.header__contents__navlink:hover { - text-decoration: underline; -} - .container { max-width: 1440px; margin: 0 auto; @@ -574,9 +553,8 @@ p:hover { .error-message { display: grid; place-items: center; - height: 100vh; - width: 100vw; - position: fixed; + height: 100%; + width: 100%; top: 0; left: 0; text-align: center;