Edit in JSFiddle

function get(response, delay) {
	return new Promise(resolve => {
  	setTimeout(() => resolve(response), delay * 1000)
  })
}

const stopwatch = (() => {
	let start, end
	return {
  	start() {
    	start = Date.now()
    },
    stop() {
    	end = Date.now()
      return (end - start) / 1000
    }
  }
})()

const testCases = {

	one() {
    return new Promise(resolve => {
      const responses = []
      get('three', 3)
        .then(res => responses.push(res))
        .then(() => get('two', 2))
        .then(res => responses.push(res))
        .then(() => get('one', 1))
        .then(res => responses.push(res))
        .then(() => {
          const output =responses.join(' ')
          resolve(output)
        })
    })
  },

	two() {
    return new Promise(async resolve => {
      const first = await get('three', 3)
      const second = await get('two', 2)
      const third = await get('one', 1)
      const output = `${first} ${second} ${third}`
      resolve(output)
    })
  },

	three() {
    return new Promise(resolve => {
    	const responses = []
      
      function check() {
      	if(responses.length > 2) {
      		resolve(responses.join(' '))
      	}
      }
      
      get('three', 3).then(res => {
      	responses.push(res)
      	check()
      })
      get('two', 2).then(res => {
      	responses.push(res)
      	check()
      })
      get('one', 1).then(res => {
      	responses.push(res)
      	check()
      })
  	})
  },

	four() {
    return new Promise(resolve => {
      const responses = []
      responses.push(get('three', 3))
      responses.push(get('two', 2))
      responses.push(get('one', 1))
      Promise.all(responses)
        .then(values => {
          const output = values.join(' ')
          resolve(output)
        })
    })
  }
}

//Maps to the Results column in the HTML table
const resultCells = {
	one: document.querySelector('#resOne'),
 	two: document.querySelector('#resTwo'),
	three: document.querySelector('#resThree'),
	four: document.querySelector('#resFour')
}

//Maps to the Time column in the HTML table
const timeCells = {
	one: document.querySelector('#timeOne'),
 	two: document.querySelector('#timeTwo'),
	three: document.querySelector('#timeThree'),
	four: document.querySelector('#timeFour')
}
  
async function runTest(testCase) {
	let result, time;
   resultCells[testCase].innerHTML = 'Test running...'
  stopwatch.start()
  result = await testCases[testCase]()
  time = stopwatch.stop()
  resultCells[testCase].innerHTML = result 
  timeCells[testCase].innerHTML = time
}

//Run the tests!
['one', 'two', 'three', 'four'].forEach(test => runTest(test))
<table>
  <thead>
    <th>Test Case</th>
    <th>Result</th>
    <th>Time(s)</th>
  </thead>
  <tbody>
    <tr>
      <td>One</td>
      <td  id="resOne"></td>
      <td  id="timeOne"></td>
    </tr>
    <tr>
      <td>Two</td>
      <td  id="resTwo"></td>
      <td  id="timeTwo"></td>
    </tr>
    <tr>
      <td>Three</td>
      <td  id="resThree"></td>
      <td  id="timeThree"></td>
    </tr>
    <tr>
      <td>Four</td>
      <td  id="resFour"></td>
      <td  id="timeFour"></td>
    </tr>
  </tbody>
</table>

table {
  text-align: center;
}
td, th {
  min-width: 100px;
}