e2e tests

.github/workflows/nowcasting-app-test.yml

@@ -0,0 +1,43 @@
+name: Nowcasting App Tests
+on:
+  push:
+    paths:
+      - 'apps/nowcasting-app/**'
+jobs:
+  test:
+    name: cypress test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+
+      - name: End-to-end tests (Cypress)
+        id: cypress
+        uses: cypress-io/github-action@v4
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          DB_LOG: false
+          NEXT_PUBLIC_ENV_NAME: test
+          NODE_OPTIONS: "--max-old-space-size=3072"
+        with:
+          working-directory: apps/nowcasting-app
+          build: yarn build --no-lint
+          start: yarn start:test
+          wait-on: http://localhost:3002
+          browser: electron
+          install-command: yarn install --frozen-lockfile --silent 
+          config-file: ./cypress/cypress.config.js
+
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: apps/nowcasting-app/cypress/screenshots/*
+
+
+

apps/nowcasting-app/.gitignore

@@ -35,3 +35,9 @@ yarn-error.log*
 
 # Sentry
 .sentryclirc
+
+**/screenshots/*
+**/__image_snapshots__/*.actual.*
+**/__image_snapshots__/*.diff.*
+cypress/videos
+cypress/screenshots

apps/nowcasting-app/components/auth0/index.tsx

@@ -0,0 +1,27 @@
+import { useUser as oguseUser } from "@auth0/nextjs-auth0";
+import { UserProvider as ogUserProvider } from "@auth0/nextjs-auth0";
+import { withPageAuthRequired as ogwithPageAuthRequired } from "@auth0/nextjs-auth0";
+
+const fakeuseUser: typeof oguseUser = () => {
+  return {
+    user: {
+      name: "John Doe",
+      email: "[email protected]",
+      picture: "https://s.gravatar.com/avatar/...",
+    },
+    isLoading: false,
+    checkSession: async () => {},
+  };
+};
+const fakeUserProvider: typeof ogUserProvider = ({ children }) => {
+  return <>{children}</>;
+};
+const fakeWithPageAuthRequired: typeof ogwithPageAuthRequired = (() => {
+  return () => ({ props: {} });
+}) as any;
+
+export const useUser = process.env.NEXT_PUBLIC_ENV_NAME === "test" ? fakeuseUser : oguseUser;
+export const UserProvider =
+  process.env.NEXT_PUBLIC_ENV_NAME === "test" ? fakeUserProvider : ogUserProvider;
+export const withPageAuthRequired =
+  process.env.NEXT_PUBLIC_ENV_NAME === "test" ? fakeWithPageAuthRequired : ogwithPageAuthRequired;

apps/nowcasting-app/components/button-group.tsx

@@ -25,7 +25,10 @@ const ButtonGroup = ({ rightString }: IButtonGroup) => {
       >
         DELTA
       </button>
-      <div className="absolute right-5 top-0 items-center px-3 py-1 ml-px text-md font-medium text-white bg-ocf-black ">
+      <div
+        data-e2e="header-map-time"
+        className="absolute right-5 top-0 items-center px-3 py-1 ml-px text-md font-medium text-white bg-ocf-black "
+      >
         {rightString}
       </div>
     </span>

apps/nowcasting-app/components/charts/forecast-header/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { get30MinNow } from "../../globalState";
+import { get30MinNow } from "../../utils";
 import useTimeNow from "../../hooks/use-time-now";
 import PlayButton from "../../play-button";
 import { PvRealData, ForecastData } from "../../types";

apps/nowcasting-app/components/charts/forecast-header/ui.tsx

@@ -2,13 +2,14 @@ import React from "react";
 import { theme } from "../../../tailwind.config";
 const yellow = theme.extend.colors["ocf-yellow"].DEFAULT;
 
-const PVNumber: React.FC<{ pv: string; subTitle: string; color?: string }> = ({
+const PVNumber: React.FC<{ pv: string; subTitle: string; color?: string; dataE2e?: string }> = ({
   pv,
   subTitle,
+  dataE2e,
   color = yellow,
 }) => {
   return (
-    <div className="flex-[1] m-auto">
+    <div className="flex-[1] m-auto" data-e2e={dataE2e}>
       <div className="">
         <p
           className={`lg:text-xl md:text-lg text-sm font-bold text-center text-${color}`}
@@ -41,15 +42,23 @@ const ForecastHeaderUI: React.FC<ForecastHeaderProps> = ({
   forecastNextTimeOnly,
 }) => {
   return (
-    <div className={"flex content-between flex-wrap mt-6 h-auto"}>
+    <div className={"flex content-between flex-wrap mt-6 h-auto"} data-e2e="NF-header">
       <div
         className={` bg-white text-black lg:text-2xl md:text-lg text-sm font-black  p-4 py-2  flex-[2] `}
       >
         National
       </div>
-      <PVNumber pv={actualPV} subTitle={`${pvTimeOnly} PVLive`} color="black" />
-      <PVNumber pv={forcastPV} subTitle={`${selectedTimeOnly} Forecast`} />
-      <PVNumber pv={forcastNextPV} subTitle={`${forecastNextTimeOnly} Forecast`} />
+      <PVNumber dataE2e="actual-pv" pv={actualPV} subTitle={`${pvTimeOnly} PVLive`} color="black" />
+      <PVNumber
+        dataE2e="selected-forecast-pv"
+        pv={forcastPV}
+        subTitle={`${selectedTimeOnly} Forecast`}
+      />
+      <PVNumber
+        dataE2e="next-forecast-pv"
+        pv={forcastNextPV}
+        subTitle={`${forecastNextTimeOnly} Forecast`}
+      />
       <div className=" inline-flex items-center h-full m-auto">{children}</div>
     </div>
   );

apps/nowcasting-app/components/charts/gsp-pv-remix-chart/forecast-header-gsp.tsx

@@ -7,12 +7,23 @@ type ForecastHeaderGSPProps = {
 
 const ForecastHeaderGSP: React.FC<ForecastHeaderGSPProps> = ({ title, children, onClose }) => {
   return (
-    <div id="x" className={"flex content-between flex-wrap mt-6 bg-ocf-yellow bg-opacity-60 h-12"}>
-      <div className={`bg-white text-black text-2xl font-black  p-4 py-2  flex-[1]`}>{title}</div>
+    <div
+      data-e2e="GSPF-header"
+      className={"flex content-between flex-wrap mt-6 bg-ocf-yellow bg-opacity-60 h-12"}
+    >
+      <div
+        data-e2e="title"
+        className={`bg-white text-black text-2xl font-black  p-4 py-2  flex-[1]`}
+      >
+        {title}
+      </div>
       <div className="flex-[1] m-auto">
-        <p className="text-lg text-center align-middle m-auto mx-2">{children}</p>
+        <p className="text-lg text-center align-middle m-auto mx-2" data-e2e="pv-values">
+          {children}
+        </p>
       </div>
       <button
+        data-e2e="close-button"
         type="button"
         onClick={onClose}
         className="font-bold inline-flex items-center  px-3 ml-2 text-lg m text-black bg-ocf-yellow  hover:bg-ocf-yellow focus:z-10 focus:bg-ocf-yellow focus:text-black h-full"

apps/nowcasting-app/components/charts/gsp-pv-remix-chart/index.tsx

@@ -54,7 +54,7 @@ const GspPvRemixChart: FC<{
   }
 
   return (
-    <>
+    <div data-e2e="GSPF-chart">
       <div className="bg-black">
         <ForecastHeaderGSP onClose={close} title={gspInfo?.regionName || ""}>
           {Math.round(pvPercentage)}% |{" "}
@@ -64,8 +64,9 @@ const GspPvRemixChart: FC<{
         </ForecastHeaderGSP>
       </div>
 
-      <div className=" h-60 mt-8 ">
+      <div className=" h-60 mt-8 " data-e2e="gsp-chart">
         <RemixLine
+          id="gsp"
           setTimeOfInterest={setTimeOfInterest}
           timeOfInterest={selectedTime}
           data={chartData}
@@ -74,7 +75,7 @@ const GspPvRemixChart: FC<{
           resetTime={resetTime}
         />
       </div>
-    </>
+    </div>
   );
 };
 

apps/nowcasting-app/components/charts/pv-remix-chart.tsx

@@ -84,8 +84,9 @@ const PvRemixChart: FC<{ date?: string }> = (props) => {
           selectedTime={selectedTime}
         ></ForecastHeader>
 
-        <div className="h-60 mt-4 mb-10">
+        <div className="h-60 mt-4 mb-10" data-e2e="NF-chart">
           <RemixLine
+            id="national"
             resetTime={resetTime}
             timeNow={formatISODateString(timeNow)}
             timeOfInterest={selectedTime}

apps/nowcasting-app/components/charts/remix-line.tsx

@@ -39,6 +39,7 @@ type RemixLineProps = {
   yMax: number | string;
   timeNow: string;
   resetTime?: () => void;
+  id?: string;
 };
 const CustomizedLabel: FC<any> = ({
   value,
@@ -47,6 +48,7 @@ const CustomizedLabel: FC<any> = ({
   className,
   solidLine,
   onClick,
+  dataE2e,
 }) => {
   const yy = 230;
   return (
@@ -64,7 +66,14 @@ const CustomizedLabel: FC<any> = ({
       ></line>
       <g className={`fill-white ${className || ""}`} onClick={onClick}>
         <rect x={x - 28} y={yy} width="58" height="30" offset={offset} fill={"inherit"}></rect>
-        <text x={x + 1} y={yy + 21} fill="black" id="time-now" textAnchor="middle">
+        <text
+          x={x + 1}
+          y={yy + 21}
+          fill="black"
+          id="time-now"
+          textAnchor="middle"
+          data-e2e={dataE2e}
+        >
           {value}
         </text>
       </g>
@@ -76,6 +85,7 @@ const RemixLine: React.FC<RemixLineProps> = ({
   data,
   setTimeOfInterest,
   yMax,
+  id,
   timeNow,
   resetTime,
 }) => {
@@ -148,11 +158,12 @@ const RemixLine: React.FC<RemixLineProps> = ({
               stroke="white"
               strokeWidth={1}
               strokeDasharray="3 3"
-              className={timeNow !== timeOfInterest ? "" : "hidden"}
+              className={timeNow !== timeOfInterest ? "" : " invisible"}
               label={
                 <CustomizedLabel
                   className="fill-amber-400    cursor-pointer"
                   value={"NOW"}
+                  dataE2e={id + "-now-refrence"}
                   onClick={resetTime}
                 ></CustomizedLabel>
               }

apps/nowcasting-app/components/charts/use-format-chart-data.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from "react";
-import { get30MinNow } from "../globalState";
 import { ForecastData, PvRealData } from "../types";
-import { formatISODateString } from "../utils";
+import { formatISODateString, get30MinNow } from "../utils";
 import { ChartData } from "./remix-line";
 
 //sperate paste forcaste from furute forcast (ie: after selectedTime)

apps/nowcasting-app/components/globalState.tsx

@@ -1,18 +1,5 @@
 import { createGlobalState } from "react-hooks-global-state";
-
-export function get30MinNow() {
-  // this is a function to get the date of now, but rounded up to the closest 30 minutes
-  const date = new Date();
-  const minites = date.getMinutes();
-  if (minites <= 30) {
-    date.setHours(date.getHours());
-    date.setMinutes(30, 0, 0); // Resets also seconds and milliseconds
-  } else {
-    date.setHours(date.getHours() + 1);
-    date.setMinutes(0, 0, 0); // Resets also seconds and milliseconds
-  }
-  return date.toISOString();
-}
+import { get30MinNow } from "./utils";
 
 type GlobalStateType = {
   selectedISOTime?: string;

apps/nowcasting-app/components/hooks/use-and-update-selected-time.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
-import useGlobalState, { get30MinNow } from "../globalState";
+import useGlobalState from "../globalState";
+import { get30MinNow } from "../utils";
 
 let intervals: any[] = [];
 const clearIntervals = () => {

apps/nowcasting-app/components/hooks/use-time-now.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
-import useGlobalState, { get30MinNow } from "../globalState";
-import { addMinutesToISODate } from "../utils";
+import useGlobalState from "../globalState";
+import { addMinutesToISODate, get30MinNow } from "../utils";
 
 const useTimeNow = () => {
   // This get the Time now, but rounded up to the nearest 30 minutes.

apps/nowcasting-app/components/map/map.tsx

@@ -1,12 +1,18 @@
 import mapboxgl from "mapbox-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
 import { FC, useEffect, useRef, useState } from "react";
-import { IMap } from "./types";
 import useUpdateMapStateOnClick from "./use-update-map-state-on-click";
 
 mapboxgl.accessToken =
   "pk.eyJ1IjoiZmxvd2lydHoiLCJhIjoiY2tlcGhtMnFnMWRzajJ2bzhmdGs5ZXVveSJ9.Dq5iSpi54SaajfdMyM_8fQ";
 
+interface IMap {
+  loadDataOverlay: any;
+  controlOverlay: any;
+  bearing?: number;
+  updateData: { newData: boolean; updateMapData: (map: mapboxgl.Map) => void };
+}
+
 /**
  * Mapbox wrapper.
  * @param loadDataOverlay Function that gets called to load the data.
@@ -17,6 +23,7 @@ const Map: FC<IMap> = ({ loadDataOverlay, controlOverlay, bearing = 0, updateDat
   const mapContainer = useRef<HTMLDivElement | null>(null);
   const map = useRef<mapboxgl.Map>();
   const [isMapReady, setIsMapReady] = useState(false);
+  const [isSourceLoaded, setIsSourceLoaded] = useState(false);
   const [lng, setLng] = useState(-2.3175601);
   const [lat, setLat] = useState(54.70534432);
   const [zoom, setZoom] = useState(5);
@@ -38,6 +45,7 @@ const Map: FC<IMap> = ({ loadDataOverlay, controlOverlay, bearing = 0, updateDat
         zoom,
         bearing,
         keyboard: false,
+        testMode: process.env.NEXT_PUBLIC_ENV_NAME === "test",
       });
 
       const nav = new mapboxgl.NavigationControl({ showCompass: false });
@@ -58,10 +66,17 @@ const Map: FC<IMap> = ({ loadDataOverlay, controlOverlay, bearing = 0, updateDat
     map.current.on("load", (event) => {
       loadDataOverlay(map);
     });
+    map.current.on("sourcedata", (e) => {
+      const isPvDataLoaded = (e.source as any)?.data?.status === "loaded";
+      if (e.sourceId === "latestPV" && e.sourceCacheId === "other:latestPV" && isPvDataLoaded) {
+        setIsSourceLoaded(e.isSourceLoaded && (e.source as any).data);
+      }
+    });
   }, [map]);
 
   return (
     <div className="relative h-full bg-ocf-gray-900">
+      {isSourceLoaded && <span data-e2e="map-loaded"></span>}
       <div className="absolute top-0 left-0 z-10 p-6 min-w-[20rem] w-full">
         {controlOverlay(map)}
       </div>

apps/nowcasting-app/components/map/measuringUnit.tsx

@@ -21,6 +21,7 @@ const MeasuringUnit = ({
     <div className="mt-1">
       <div className="inline-block">
         <button
+          data-e2e="MW-button"
           onClick={(event) => onToggle(event, ActiveUnit.MW)}
           disabled={isLoading}
           type="button"
@@ -31,6 +32,7 @@ const MeasuringUnit = ({
           MW
         </button>
         <button
+          data-e2e="percentage-button"
           onClick={(event) => onToggle(event, ActiveUnit.percentage)}
           disabled={isLoading}
           type="button"