first test completed

src/App.js

@@ -131,7 +131,7 @@ function Results({ drugIdx, strengthIdx, prescribedDose, numStatDoses, statDoseS
  const waste = numVials * drugStrength.amount - totalDose
  const wasteMl = numVials * drugStrength.volume - totalDoseMl
  return (
- <div class="box">
+ <div className="box">
  <label>Results:</label>
  <p>
  <span>Total dose ({units}): {prescribedDose} + ({numStatDoses} x {statDoseStrength}) = {totalDose}{units}</span>
@@ -160,7 +160,7 @@ function MainView() {
  const prescribedDose = Number(prescribedDoseStr)
  const statDoseStrength = Number(statDoseStrengthStr)
  const units = medicines[drugIdx].units
- const showCalc = !showResults && !!(prescribedDose || (statDoseStrength && numStatDoses))
+ const showCalc = !showResults && !!((prescribedDose && !numStatDoses) || statDoseStrength)
 
  function selectDrug(i) {
  if (medicines[i].units !== "mg") {
@@ -205,19 +205,19 @@ function MainView() {
  <span> {units}</span>
  </div>
  <div>
- <label>+ Stat/PRN doses:</label>
- <select value={numStatDoses} disabled={showResults} onChange={e => selectNumStatDoses(parseInt(e.target.value))}>
+ <label htmlFor="num-stat-doses">+ Stat/PRN doses:</label>
+ <select id="num-stat-doses" value={numStatDoses} disabled={showResults} onChange={e => selectNumStatDoses(parseInt(e.target.value))}>
  {_.range(7).map(x => <option key={x} value={x}>{x}</option>)}
  </select>
  <span> x </span>
- <input type="number" min={0} disabled={showResults || (!numStatDoses)} value={statDoseStrengthStr} onChange={e => setStatDoseStrengthStr(e.target.value)} />
+ <input type="number" data-testid="stat-dose-strength" min={0} disabled={showResults || (!numStatDoses)} value={statDoseStrengthStr} onChange={e => setStatDoseStrengthStr(e.target.value)} />
  <span> {units}</span>
  </div>
  {showResults &&
  <Results drugIdx={drugIdx} strengthIdx={strengthIdx} prescribedDose={prescribedDose} numStatDoses={numStatDoses} statDoseStrength={statDoseStrength} />}
- <button onClick={() => { selectDrug(0) }}>Reset</button>
+ <button type="button" onClick={() => { selectDrug(0) }}>Reset</button>
  {showCalc && 
- <button onClick={() => { setShowResults(true) }}>Calculate</button>
+ <button type="button" onClick={() => { setShowResults(true) }}>Calculate</button>
  }
  </>}
  </form>
@@ -231,7 +231,7 @@ function Disclaimer({ callback }) {
  <p>This application is intended to be used only to cross-check manual drug calculations.</p>
  <p>It is not approved by NHS or any other healthcare body and you should not rely on it to perform drug calculations.</p>
  <p>The authors accept no liability for any errors in the application.</p>
- <button onClick={callback}>OK</button>
+ <button type="button" onClick={callback}>OK</button>
  </div>
  )
 }

src/App.test.js

@@ -1,29 +1,84 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import App from './App'
 
+const _drug = () => screen.queryByLabelText("Drug:")
+const _diamorphine = () => screen.queryByText("Diamorphine")
+const _strength = () => screen.queryByLabelText("Strength:")
+const _15mg_2ml = () => screen.queryByText("15mg/2ml")
+const _prescribedDose = () => screen.queryByLabelText("Prescribed dose:")
+const _statDose = () => screen.queryByLabelText("+ Stat/PRN doses:")
+const _reset = () => screen.queryByText("Reset")
+const _calculate = () => screen.queryByText("Calculate")
+const _statDoseStrength = () => screen.queryByTestId("stat-dose-strength")
+const _results = () => screen.queryByText("Results:")
+
 test('happy path', () => {
  render(<App />)
 
  // disclaimer
- expect(screen.queryByText("Disclaimer")).toBeTruthy()
- expect(screen.queryByText("Drug:")).toBeFalsy()
- expect(screen.queryByText("Diamorphine")).toBeFalsy()
- fireEvent.click(screen.getByText("OK"))
- expect(screen.queryByText("Drug:")).toBeTruthy()
- expect(screen.queryByText("Diamorphine")).toBeTruthy()
+ screen.getByText("Disclaimer")
+ expect(_drug()).toBeFalsy()
+ expect(_diamorphine()).toBeFalsy()
+ userEvent.click(screen.getByText("OK"))
+ expect(_drug()).toBeTruthy()
+ expect(_diamorphine()).toBeTruthy()
+ expect(_reset()).toBeFalsy()
+ expect(_calculate()).toBeFalsy()
 
  // select a drug
- expect(screen.queryByText("Strength:")).toBeFalsy()
- expect(screen.queryByText("30mg/2ml")).toBeFalsy()
- userEvent.selectOptions(screen.getByLabelText("Drug:"), screen.getByText("Diamorphine"))
- expect(screen.queryByText("Strength:")).toBeTruthy()
- expect(screen.queryByText("30mg/2ml")).toBeTruthy()
+ expect(_strength()).toBeFalsy()
+ expect(_15mg_2ml()).toBeFalsy()
+ userEvent.selectOptions(_drug(), _diamorphine())
+ expect(_strength()).toBeTruthy()
+ expect(_15mg_2ml()).toBeTruthy()
+ expect(_reset()).toBeFalsy()
+ expect(_calculate()).toBeFalsy()
 
  // select a strength
- expect(screen.queryByLabelText("Prescribed dose:")).toBeFalsy()
- expect(screen.queryByText("+ Stat/PRN doses:")).toBeFalsy()
- userEvent.selectOptions(screen.getByLabelText("Strength:"), screen.getByText("15mg/2ml"))
- expect(screen.queryByText("Prescribed dose:")).toBeTruthy()
- expect(screen.queryByText("+ Stat/PRN doses:")).toBeTruthy()
+ expect(_prescribedDose()).toBeFalsy()
+ expect(_statDose()).toBeFalsy()
+ expect(_statDoseStrength()).toBeFalsy()
+ expect(_reset()).toBeFalsy()
+ userEvent.selectOptions(_strength(), _15mg_2ml())
+ expect(_prescribedDose()).toBeTruthy()
+ expect(_statDose()).toBeTruthy()
+ expect(_statDoseStrength()).toBeTruthy()
+ expect(_statDoseStrength()).toBeDisabled()
+ expect(_reset()).toBeTruthy()
+
+ // enter a dose
+ expect(_calculate()).toBeFalsy()
+ userEvent.type(_prescribedDose(), "25")
+ expect(_calculate()).toBeTruthy()
+ userEvent.selectOptions(_statDose(), "3")
+ expect(_calculate()).toBeFalsy()
+ userEvent.type(_statDoseStrength(), "5")
+ expect(_calculate()).toBeTruthy()
+ expect(_reset()).toBeTruthy()
+
+ // click calculate
+ expect(_results()).toBeFalsy()
+ userEvent.click(_calculate())
+ expect(_results()).toBeTruthy()
+ screen.getByText("Total dose (mg): 25 + (3 x 5) = 40mg")
+ screen.getByText("Total dose (ml): 40 ÷ 15 x 2 = 5.33ml")
+ screen.getByText("Number of vials: 3")
+ screen.getByText("Waste: 5mg (= 0.67ml)")
+ expect(_reset()).toBeTruthy()
+
+ // click reset
+ userEvent.click(_reset())
+ expect(_drug()).toBeTruthy()
+ expect(_diamorphine()).toBeTruthy()
+ expect(_strength()).toBeFalsy()
+ expect(_15mg_2ml()).toBeFalsy()
+ expect(_prescribedDose()).toBeFalsy()
+ expect(_statDose()).toBeFalsy()
+ expect(_statDoseStrength()).toBeFalsy()
+ expect(_reset()).toBeFalsy()
+ expect(_calculate()).toBeFalsy()
+ expect(_results()).toBeFalsy()
 })
+
+