Merge pull request #50 from nhsuk/feature/opening-times-layout

🔃 change table layout to find a pharmacy structure

app/middleware/getServices.js

@@ -1,6 +1,5 @@
 const VError = require('verror').VError;
 
-const addTablePadding = require('../lib/utils/addTablePadding');
 const esClient = require('../lib/elasticsearch/client');
 const esGetServiceHistogram = require('../lib/prometheus/histograms').esGetServices;
 const esQueryLabelName = require('../lib/constants').promEsQueryLabelName;
@@ -30,7 +29,7 @@ function mapResults(results, res) {
       }
       service.address.fullAddress = formatAddress(service.address);
       if (service.openingTimes) {
-        service.openingTimes.formatted = addTablePadding(formatOpeningTimes(service.openingTimes));
+        service.openingTimes.formatted = formatOpeningTimes(service.openingTimes);
       }
     }
     return service;

app/views/includes/opening-times.nunjucks

@@ -1,21 +1,22 @@
-<table class="results__openingTimesTable">
-  <tbody>
-    <tr>
-      <th>Day of the week</th>
-      <th>Opening hours</th>
-    </tr>
-     {% for openingTime in service.openingTimes.formatted %}
+<table class="openingTimes">
+  <tr><th>Day of the week</th><th>Opening hours</th></tr>
+  {% for openingTime in service.openingTimes.formatted %}
+    {% for sessions in openingTime.openingTimes %}
+      {% if loop.first %}
         <tr>
-          <th>{{ openingTime.day }}</th>
-          {% for session in openingTime.openingTimes %}
-              <td>{{ session.opens }} to {{ session.closes }}</td>
-          {% else %}
-              <td >Closed</td>
-          {% endfor %}
-          {% if (openingTime.padding) %}
-              <td colspan="{{ openingTime.padding }}" ></td>
-          {% endif %}
+          <th rowspan="{{loop.length}}">{{ openingTime.day }}</th>
+          <td>{{sessions.opens}} to {{ sessions.closes }}</td>
         </tr>
-      {% endfor %}
-  </tbody>
+      {% else %}
+        <tr class="hasSessions">
+          <td>{{sessions.opens}} to {{ sessions.closes }}</td>
+        </tr>
+      {% endif %}
+    {% else %}
+      <tr>
+        <th>{{ openingTime.day }}</th>
+        <td>Closed</td>
+      </tr>
+    {% endfor %}
+  {% endfor %}
 </table>

scss/app.scss

@@ -406,10 +406,13 @@ form {
           }
         }
       }
-      .results__openingTimesTable {
+      .openingTimes {
         margin: 32px 0 8px;
+        @include media(tablet) {
+          width: 50%;
+        }
         tr {
-          padding: 5px 0;
+          padding: 15px 0;
           &:first-child {
             display:none;
           }
@@ -421,15 +424,29 @@ form {
           td, th {
             font-size:20px;
             line-height: 20px;
-            padding:15px 0;
+            padding: 15px 0;
             font-weight: 400;
+            border: 0;
           }
           td {
+            text-align: right;
             &:last-child {
               text-align: left;
             }
           }
         }
+        .hasSessions{
+          td {
+            padding-top:0px;
+          }
+        }
+        + p {
+          font-size: 16px;
+          color:$grey-1;
+        }
+        &__openResults {
+          font-size:16px;
+        }
       }
     }
     + .callout--muted {

test/integration/pharmacyOpeningTimes.js

@@ -0,0 +1,72 @@
+const cheerio = require('cheerio');
+const chai = require('chai');
+const chaiHttp = require('chai-http');
+const app = require('../../server');
+const constants = require('../../app/lib/constants');
+const iExpect = require('../lib/expectations');
+const utils = require('../lib/testUtils');
+
+const expect = chai.expect;
+chai.use(chaiHttp);
+
+const resultsRoute = `${constants.siteRoot}/results/`;
+
+function assertSearchResponse(location, type, origin, done, assertions) {
+  chai.request(app)
+    .get(resultsRoute)
+    .query({ location, origin, type })
+    .end((err, res) => {
+      expect(err).to.equal(null);
+      iExpect.htmlWith200Status(res);
+      assertions(err, res);
+      done();
+    });
+}
+
+function assertTableTitles(firstTable) {
+  const firstRowCells = firstTable.children('tr').eq('0').children();
+  const header1 = firstRowCells.eq(0).text();
+  const header2 = firstRowCells.eq(1).text();
+  expect(header1).to.equal('Day of the week');
+  expect(header2).to.equal('Opening hours');
+}
+
+function assertTimes(firstTable, row, day, times) {
+  const firstRowCells = firstTable.children('tr').eq(row).children();
+  const cell1 = firstRowCells.eq(0).text();
+  const cell2 = firstRowCells.eq(1).text();
+  expect(cell1).to.equal(day);
+  expect(cell2).to.equal(times);
+}
+
+function assertFirstOpeningTimes(res) {
+  const $ = cheerio.load(res.text);
+  const firstTable = $('table.openingTimes tbody').eq(0);
+  assertTableTitles(firstTable);
+  assertTimes(firstTable, 1, 'Monday', '9am to 6pm');
+  assertTimes(firstTable, 2, 'Tuesday', '9am to 6pm');
+  assertTimes(firstTable, 3, 'Wednesday', '9am to 6pm');
+  assertTimes(firstTable, 4, 'Thursday', '9am to 6pm');
+  assertTimes(firstTable, 5, 'Friday', '9am to 6pm');
+  assertTimes(firstTable, 6, 'Saturday', '9am to 1pm');
+  assertTimes(firstTable, 7, 'Sunday', 'Closed');
+}
+
+describe('Pharmacy opening times', function test() {
+  // Setting this timeout as it is calling the real DB...
+  this.timeout(utils.maxWaitTimeMs);
+
+  before((done) => {
+    utils.waitForSiteReady(done);
+  });
+
+  const location = 'ls1';
+  const type = constants.serviceTypes.kit;
+  const origin = constants.serviceChoices.over25;
+
+  it('should display daily opening times for a pharmacy', (done) => {
+    assertSearchResponse(location, type, origin, done, (err, res) => {
+      assertFirstOpeningTimes(res);
+    });
+  });
+});