Bug: the timer keeps going when you minimise a page (#192)

# What's Changed?

- Timer returns `null` for the code run `duration` if the host page tab
loses focus
- Cypress tests for the above

closes #184

Co-authored-by: loiswells97 <loiswells97@users.noreply.github.com>
Co-authored-by: Lois Wells <lois.wells@raspberrypi.org>

Author: create-issue-branch[bot]

CHANGELOG.md

@@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+- The web component `runCompleted` event now returns `duration: null` if the host page's tab loses focus during the code run (#192)
+
 ## [0.4.0]
 
 ### Added

cypress/e2e/missionZero-wc.cy.js

@@ -95,3 +95,34 @@ it("picks up errors from the editor", () => {
   cy.get("editor-wc").shadow().find(".btn--run").click()
   cy.get("#results").should("contain", '"isErrorFree":false')
 })
+
+it("does not return null duration if no change in focus", () => {
+  cy.get("editor-wc").shadow().find("div[class=cm-content]").invoke('text', 'from sense_hat import SenseHat\nsense = SenseHat()\nsense.send_message("a")')
+  cy.get("editor-wc").shadow().find(".btn--run").click()
+  cy.get('#results').should("not.contain", '"duration":null')
+})
+
+it("does not return null duration if focus changed before code run", () => {
+  cy.get("editor-wc").shadow().find("div[class=cm-content]").invoke('text', 'from sense_hat import SenseHat\nsense = SenseHat()\nsense.send_message("a")')
+  cy.window().blur()
+  cy.window().focus()
+  cy.get("editor-wc").shadow().find(".btn--run").click()
+  cy.get('#results').should("not.contain", '"duration":null')
+})
+
+it("returns duration of null if focus is lost", () => {
+  cy.get("editor-wc").shadow().find("div[class=cm-content]").invoke('text', 'from sense_hat import SenseHat\nsense = SenseHat()\nsense.send_message("a")')
+  cy.get("editor-wc").shadow().find(".btn--run").click()
+  cy.window().blur()
+  cy.window().focus()
+  cy.get('#results').should("contain", '"duration":null')
+})
+
+it("does not return duration of null if code rerun after focus lost", () => {
+  cy.get("editor-wc").shadow().find("div[class=cm-content]").invoke('text', 'from sense_hat import SenseHat\nsense = SenseHat()\nsense.send_message("a")')
+  cy.get("editor-wc").shadow().find(".btn--run").click()
+  cy.window().blur()
+  cy.window().focus()
+  cy.get("editor-wc").shadow().find(".btn--run").click()
+  cy.get('#results').should("not.contain", '"duration":null')
+})

src/components/AstroPiModel/AstroPiControls/Stopwatch.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux';
 import { useStopwatch } from 'react-timer-hook';
 import Sk from 'skulpt'
@@ -12,16 +12,24 @@ const Stopwatch = () => {
     pause,
     reset
   } = useStopwatch({ autoStart: false })
+  const [hasLostFocus, setHasLostFocus] = useState(false)
+
+  useEffect(() => {
+    window.addEventListener('blur', () => {
+      setHasLostFocus(true)
+    })
+  }, [])
 
   useEffect(() => {
     if (codeRunTriggered && !isRunning) {
+      setHasLostFocus(false)
       reset()
     }
     if (!codeRunTriggered && isRunning){
       pause()
-      Sk.sense_hat.mz_criteria.duration = minutes * 60 + seconds
+      Sk.sense_hat.mz_criteria.duration = hasLostFocus ? null : minutes * 60 + seconds
     }
-  }, [codeRunTriggered, minutes, seconds, isRunning, pause, reset])
+  }, [codeRunTriggered, hasLostFocus, minutes, seconds, isRunning, pause, reset])
 
 
   return (