fix(ui): Response Panel > Timeline viewer displays wrong info (#157)

flawiddsouza · May 17, 2024 · 4cbfab6 · 4cbfab6
1 parent 889c9d7
commit 4cbfab6
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 11 deletions.
diff --git a/packages/ui/src/components/RequestPanel.vue b/packages/ui/src/components/RequestPanel.vue
@@ -25,7 +25,7 @@
  data-testid="request-panel-address-bar"
  />
  </div>
- <button @click="sendRequest">Send</button>
+ <button @click="sendRequest" data-testid="request-panel-address-bar__send-button">Send</button>
  </div>
  <div class="request-panel-tabs" v-show="tabView === 'full'">
  <div class="request-panel-tab" :class="{ 'request-panel-tab-active': activeRequestPanelTab === requestPanelTab.name }" @click="activeRequestPanelTab = requestPanelTab.name" v-for="requestPanelTab in requestPanelTabs" :data-testid="`request-panel-tab-${requestPanelTab.name}`">

diff --git a/packages/ui/src/components/ResponsePanelTimeline.vue b/packages/ui/src/components/ResponsePanelTimeline.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
  <div>
- <CodeMirrorResponsePanelPreview :model-value="timelineViewer(response)"></CodeMirrorResponsePanelPreview>
+ <CodeMirrorResponsePanelPreview :model-value="timelineViewer(response)" data-testid="response-panel-tab-Timeline__preview"></CodeMirrorResponsePanelPreview>
  </div>
  </div>
 </template>
@@ -13,7 +13,7 @@ import { bufferToString, dateFormat, getStatusText, humanFriendlySize, uriParse
 export default {
  components: { CodeMirrorResponsePanelPreview },
  props: {
- response: Response,
+ response: Object,
  },
  data() {
  return {
@@ -23,20 +23,22 @@ export default {
  },
  methods: {
  timelineViewer(response) {
- const preparationInfo = `* Preparing request to ${response.url}\n* Current time is ${new Date(dateFormat(response.createdAt, true)).toISOString()}\n`
- const uriInfo = uriParse(response.url)
+ const preparationInfo = `* Preparing request to ${response.request.original.url}\n* Current time is ${new Date(dateFormat(response.createdAt, true)).toISOString()}\n`
+ const uriInfo = uriParse(response.request.original.url)
 
- let requestInfo = `> ${response.request.method} ${uriInfo.pathname}\n> Host: ${uriInfo.host}\n`
+ let requestInfo = `> ${response.request.method} ${uriInfo.search !== '' ? uriInfo.pathname + uriInfo.search : uriInfo.pathname}\n> Host: ${uriInfo.host}\n`
 
  for (const [key, value] of Object.entries(response.request.headers)) {
  if (key && value) {
  requestInfo += `> ${key}: ${value}\n`
  }
  }
 
- let responseInfo = `${this.addPipeToEachLine(bufferToString(response.buffer))}\n\n`
+ if(response.request.body) {
+ requestInfo += `\n${this.addPipeToEachLine(response.request.body)}\n`
+ }
 
- responseInfo += `< ${response.status} ${response.statusText === '' ? getStatusText(response.status) : response.statusText}\n`
+ let responseInfo = `< ${response.status} ${response.statusText === '' ? getStatusText(response.status) : response.statusText}\n`
  responseInfo += `< Date: ${new Date(dateFormat(response.createdAt, true)).toISOString()}\n`
 
  for (const [key, value] of Object.entries(response.headers)) {
@@ -45,8 +47,10 @@ export default {
  }
  }
 
+ responseInfo += `\n${this.addPipeToEachLine(bufferToString(response.buffer))}\n`
+
  try {
- return `${preparationInfo}\n${requestInfo}\n${responseInfo}\n\n* Received ${humanFriendlySize(response.buffer.byteLength)}`
+ return `${preparationInfo}\n${requestInfo}\n${responseInfo}\n* Received ${humanFriendlySize(response.buffer.byteLength)}`
  } catch (error) {
  console.error('Error fetching timeline data:', error)
  }

diff --git a/packages/ui/src/helpers.ts b/packages/ui/src/helpers.ts
@@ -1620,9 +1620,10 @@ export function uriParse(urlString: string): {
  port: string | null;
  pathname: string | null;
  hash: string | null;
+ search: string | null;
 } {
- const { protocol, host, port, pathname, hash} = new URL(urlString)
- return { protocol, host, port, pathname, hash }
+ const { protocol, host, port, pathname, hash, search} = new URL(urlString)
+ return { protocol, host, port, pathname, hash, search }
 }
 
 export function getStatusText(statusCode: number): string {

diff --git a/packages/ui/tests/App_test.ts b/packages/ui/tests/App_test.ts
@@ -53,3 +53,17 @@ Scenario('type url with query params', async() => {
  text = await I.grabTextFrom(queryTab)
  I.expectEqual(text.trim(), 'Query')
 })
+
+Scenario('Send GET request', async() => {
+ const host = 'https://httpbin.org'
+ const path = '/get'
+ const queryString = '?hello=there'
+
+ I.createRequest('Request 1')
+ I.typeInRequestPanelAddressBar(`${host}${path}${queryString}`)
+ I.click('[data-testid="request-panel-address-bar__send-button"]')
+ I.click('//*[@class="response-panel-tab"][text() = "Timeline"]')
+ const text = await I.grabTextFrom('[data-testid="response-panel-tab-Timeline__preview"]')
+ I.expectContain(text, `* Preparing request to ${host}${path}${queryString}`)
+ I.expectContain(text, `GET ${path}${queryString}`)
+})