diff --git a/__tests__/standup/standup.test.js b/__tests__/standup/standup.test.js index 24e2112b..bc2f2e98 100644 --- a/__tests__/standup/standup.test.js +++ b/__tests__/standup/standup.test.js @@ -3,7 +3,7 @@ const API_BASE_URL = 'https://staging-api.realdevsquad.com'; const { user } = require('../../mock-data/users'); const { standup } = require('../../mock-data/standup'); -describe('Input box', () => { +describe('Standup Page', () => { let browser; let page; jest.setTimeout(60000); @@ -79,4 +79,16 @@ describe('Input box', () => { const loader = await page.$('.loader'); expect(loader).toBeTruthy(); }); + + it('should update the URL with the query parameter when the user writes a name', async () => { + const userInput = await page.$('#user-search-input'); + const searchButton = await page.$('#search-button'); + await userInput.click({ clickCount: 3 }); + await userInput.press('Backspace'); + await userInput.type('sunny'); + await searchButton.click(); + await page.waitForTimeout(1000); + const updatedUrl = page.url(); + expect(updatedUrl).toContain('q=user:sunny'); + }); }); diff --git a/standup/script.js b/standup/script.js index 5ab99dfd..51674c96 100644 --- a/standup/script.js +++ b/standup/script.js @@ -140,15 +140,15 @@ function createTableRowElement({ userName, imageUrl, userStandupData }) { }); const completedTextElement = createElement({ type: 'p', - classList: ['today-standup'], + classList: ['today-standup', 'tooltip-text'], }); const yesterdayStandupElement = createElement({ type: 'p', - classList: ['yesterday-standup'], + classList: ['yesterday-standup', 'tooltip-text'], }); const blockersElement = createElement({ type: 'p', - classList: ['blockers'], + classList: ['blockers', 'tooltip-text'], }); const noStandupTextElement = createElement({ type: 'p', @@ -164,8 +164,8 @@ function createTableRowElement({ userName, imageUrl, userStandupData }) { ); if (standupStatus[i] === '✅') { - completedTextElement.textContent += `Today's: ${completedTextData[i]}`; - yesterdayStandupElement.textContent += `Yesterday's: ${plannedText[i]}`; + completedTextElement.textContent += `Yesterday's: ${completedTextData[i]}`; + yesterdayStandupElement.textContent += `Today's: ${plannedText[i]}`; blockersElement.textContent += `Blockers: ${blockersText[i]}`; tooltipElement.appendChild(completedTextElement); @@ -219,10 +219,15 @@ async function searchButtonHandler() { const usernames = searchInput.value .split(',') .map((username) => username.trim()); - const filteredUsernames = [...new Set(usernames)]; + const formattedUsernames = usernames.map((username) => `user:${username}`); + const queryString = formattedUsernames.join('+'); + + const newUrl = `${window.location.origin}${window.location.pathname}?q=${queryString}`; + window.history.pushState({ path: newUrl }, '', newUrl); + tableBodyElement.innerHTML = ''; - for (const username of filteredUsernames) { + for (const username of usernames) { tableContainerElement.appendChild(loaderElement); const userData = await fetchUserData(username); if (userData) { @@ -246,7 +251,23 @@ function handleEnterKeyPress(event) { } } +function getUsernames() { + const queryData = new URL( + decodeURIComponent(window.location.href), + ).searchParams.get('q'); + const initialUsernames = queryData + ?.split(' ') + .map((username) => username.split(':')[1]); + return initialUsernames || []; +} + +function setUsernames(usernames) { + searchInput.value = usernames.join(', '); +} + +setUsernames(getUsernames()); setupTable(); + searchButtonElement.addEventListener('click', searchButtonHandler); searchInput.addEventListener('keyup', handleEnterKeyPress); @@ -258,3 +279,7 @@ document.addEventListener('click', (event) => { document.body.style.marginRight = '0%'; } }); + +if (getUsernames().length > 0) { + searchButtonHandler(); +} diff --git a/standup/style.css b/standup/style.css index 90801cbb..1f2998de 100644 --- a/standup/style.css +++ b/standup/style.css @@ -179,13 +179,13 @@ tr:hover { visibility: hidden; text-align: center; border-radius: 0.5rem; - padding: 0.5rem; + padding: 1rem; position: absolute; z-index: 100; font-size: 0.7rem; - width: 15rem; - right: -125%; - bottom: 61%; + width: 30ch; + right: -106%; + bottom: 60%; display: flex; flex-direction: column; justify-content: center; @@ -202,6 +202,12 @@ tr:hover { border-color: var(--blue-color) transparent transparent transparent; } +.tooltip-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; +} ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; @@ -296,8 +302,7 @@ tr:hover { right: 0; color: var(--white-color); overflow-x: hidden; - padding-left: 1rem; - padding-top: 6rem; + padding: 1rem; border-radius: 1rem 0 0 1rem; background: var(--light-blur-color); box-shadow: 0 0 0.8rem var(--blue-color);