fix(plugin-lighthouse): incorporate feedback and add unit tests

Signed-off-by: Gabrielle Langer <gabrielle.langer.ext@corp.ovh.com>

plugins/lighthouse/src/api.ts

@@ -86,32 +86,31 @@ export interface Website {
 export type WebsiteListResponse = LASListResponse<Website>;
 
 /** @public */
-export enum FormFactor {
-  Mobile = 'mobile',
-  Desktop = 'desktop',
-}
+export type FormFactor = 'mobile' | 'desktop';
 
 /** @public */
-export type ScreenEmulation = {
-  mobile: boolean;
-  width: number;
-  height: number;
-  deviceScaleFactor: number;
-  disabled: boolean;
-} | null;
+export type LighthouseConfigSettings = {
+  // For lighthouse 7+
+  formFactor: FormFactor;
+  screenEmulation:
+    | {
+        mobile: boolean;
+        width: number;
+        height: number;
+        deviceScaleFactor: number;
+        disabled: boolean;
+      }
+    | undefined;
+  // For lighthouse before 7
+  emulatedFormFactor: FormFactor;
+};
 
 /** @public */
 export interface TriggerAuditPayload {
   url: string;
   options: {
     lighthouseConfig: {
-      settings: {
-        // For lighthouse 7+
-        formFactor: FormFactor;
-        screenEmulation: ScreenEmulation;
-        // For lighthouse before 7
-        emulatedFormFactor: FormFactor;
-      };
+      settings: LighthouseConfigSettings;
     };
   };
 }

plugins/lighthouse/src/components/CreateAudit/index.test.tsx

@@ -110,6 +110,88 @@ describe('CreateAudit', () => {
     });
   });
 
+  describe('when creating the audit', () => {
+    it('sends the correct payload for mobile', async () => {
+      let triggerAuditPayload: {} | undefined = undefined;
+      server.use(
+        rest.post('http://lighthouse/v1/audits', async (req, res, ctx) => {
+          triggerAuditPayload = await req.json();
+          return res(ctx.json(createAuditResponse));
+        }),
+      );
+
+      const rendered = render(
+        wrapInTestApp(
+          <ApiProvider apis={apis}>
+            <CreateAudit />
+          </ApiProvider>,
+        ),
+      );
+
+      fireEvent.change(rendered.getByLabelText(/URL/), {
+        target: { value: 'https://spotify.com' },
+      });
+      fireEvent.click(rendered.getByText(/Create Audit/));
+
+      await waitFor(() =>
+        expect(triggerAuditPayload).toMatchObject({
+          options: {
+            lighthouseConfig: {
+              settings: { formFactor: 'mobile', emulatedFormFactor: 'mobile' },
+            },
+          },
+          url: 'https://spotify.com',
+        }),
+      );
+    });
+
+    it('sends the correct payload for desktop', async () => {
+      let triggerAuditPayload: {} | undefined = undefined;
+      server.use(
+        rest.post('http://lighthouse/v1/audits', async (req, res, ctx) => {
+          triggerAuditPayload = await req.json();
+          return res(ctx.json(createAuditResponse));
+        }),
+      );
+
+      const rendered = render(
+        wrapInTestApp(
+          <ApiProvider apis={apis}>
+            <CreateAudit />
+          </ApiProvider>,
+        ),
+      );
+
+      fireEvent.change(rendered.getByLabelText(/URL/), {
+        target: { value: 'https://spotify.com' },
+      });
+      fireEvent.mouseDown(rendered.getByText(/Mobile/));
+      fireEvent.click(rendered.getByText(/Desktop/));
+      fireEvent.click(rendered.getByText(/Create Audit/));
+
+      await waitFor(() =>
+        expect(triggerAuditPayload).toMatchObject({
+          options: {
+            lighthouseConfig: {
+              settings: {
+                formFactor: 'desktop',
+                screenEmulation: {
+                  mobile: false,
+                  width: 1350,
+                  height: 940,
+                  deviceScaleFactor: 1,
+                  disabled: false,
+                },
+                emulatedFormFactor: 'desktop',
+              },
+            },
+          },
+          url: 'https://spotify.com',
+        }),
+      );
+    });
+  });
+
   describe('when the audit is successfully created', () => {
     it('triggers a location change to the table', async () => {
       useNavigate.mockClear();

plugins/lighthouse/src/components/CreateAudit/index.tsx

@@ -25,7 +25,11 @@ import {
 } from '@material-ui/core';
 import React, { useCallback, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { FormFactor, lighthouseApiRef, ScreenEmulation } from '../../api';
+import {
+  FormFactor,
+  lighthouseApiRef,
+  LighthouseConfigSettings,
+} from '../../api';
 import { useQuery } from '../../utils';
 import LighthouseSupportButton from '../SupportButton';
 
@@ -65,9 +69,12 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const formFactorToScreenEmulationMap: Record<FormFactor, ScreenEmulation> = {
+const formFactorToScreenEmulationMap: Record<
+  FormFactor,
+  LighthouseConfigSettings['screenEmulation']
+> = {
   // the default is mobile, so no need to override
-  mobile: null,
+  mobile: undefined,
   // Values from lighthouse's cli "desktop" preset
   // https://github.com/GoogleChrome/lighthouse/blob/a6738e0033e7e5ca308b97c1c36f298b7d399402/lighthouse-core/config/constants.js#L71-L77
   desktop: {
@@ -87,7 +94,7 @@ export const CreateAuditContent = () => {
   const navigate = useNavigate();
   const [submitting, setSubmitting] = useState(false);
   const [url, setUrl] = useState<string>(query.get('url') || '');
-  const [formFactor, setFormFactor] = useState<FormFactor>(FormFactor.Mobile);
+  const [formFactor, setFormFactor] = useState<FormFactor>('mobile');
 
   const triggerAudit = useCallback(async (): Promise<void> => {
     setSubmitting(true);