Merge remote-tracking branch 'origin/main' into event-builder-updates

Author: lindsey-volta

src/components/Layout/GA4Toggle.tsx

@@ -41,7 +41,6 @@ import { useGAVersion } from "../../hooks"
 import { GAVersion, Url } from "../../constants"
 import Spinner from "../Spinner"
 import { linkData } from "./links"
-import GA4Toggle from "./GA4Toggle"
 import BugReport from "./BugReport"
 import Loadable from "../Loadable"
 import useLogin2, { UserStatus } from "./useLogin"
@@ -130,7 +129,12 @@ const Template: React.FC<PropsWithChildren<LayoutProps & TemplateProps>> = ({
       const newLocation =  window.location.href.replace( window.location.hostname, newHostname );
       window.location.replace(newLocation);
     }
-    //}, 1000);
+
+    if( !window.location.search && window.location.pathname === '/' ) {
+      const newLocation = window.location.pathname = '/ga4/';
+      window.location.replace(newLocation);
+    }
+      //}, 1000);
 
     return;
   }, []);

src/components/Layout/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { styled } from '@mui/material/styles';
 import { useTheme } from "@mui/material"
-import {Circles} from "react-loader-spinner"
+import { Circles } from 'react-loader-spinner'
 import {PropsWithChildren} from 'react';
 
 const PREFIX = 'Spinner';

src/components/Spinner.tsx

@@ -78,7 +78,7 @@ const Root = styled('div')((
   },
 
   [`& .${classes.notchedChild}`]: {
-    padding: theme.spacing(1),
+    padding: theme.spacing(1, 1.75),
   },
   [`& .${classes.verticalHr}`]: {
     display: "flex",

src/components/WithHelpText.tsx

@@ -0,0 +1,95 @@
+import React from "react"
+import { render, screen, fireEvent, within } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import ValidateEvent, { ValidateEventProps } from "."
+import { EventCtx, EventPayload } from ".."
+import useValidateEvent from "./useValidateEvent"
+import { EventType } from "../types"
+
+// Mock the useValidateEvent hook. This allows us to control its output and check if it's called correctly.
+jest.mock("./useValidateEvent", () => ({
+  __esModule: true,
+  default: jest.fn(),
+}))
+
+const mockedUseValidateEvent = useValidateEvent as jest.Mock
+
+// Mock child components that are not relevant to this test.
+jest.mock("@/components/PrettyJson", () => () => <div>PrettyJson</div>)
+jest.mock("@/components/Spinner", () => () => <div>Spinner</div>)
+
+const mockValidateEventFn = jest.fn()
+
+// A minimal set of props to render the component.
+const defaultProps: ValidateEventProps = {
+  measurement_id: "",
+  app_instance_id: "",
+  firebase_app_id: "",
+  api_secret: "",
+  client_id: "",
+  user_id: "",
+  formatPayload: jest.fn(),
+  payloadErrors: undefined,
+  useTextBox: false,
+}
+
+// A helper to render the component with context.
+const renderComponent = (props: Partial<ValidateEventProps> = {}) => {
+  // The component relies on EventCtx for some data. This should be a valid
+  // EventPayload.
+  const contextValue: EventPayload = {
+    instanceId: {
+      measurement_id: "G-12345",
+      firebase_app_id: "app:12345",
+    },
+    eventName: "test_event",
+    type: EventType.CustomEvent,
+    parameters: [],
+    items: [],
+    userProperties: [],
+    timestamp_micros: "",
+    non_personalized_ads: false,
+    useTextBox: false,
+    payloadObj: [],
+    api_secret: "secret123",
+    clientIds: {},
+  }
+
+  return render(
+    <EventCtx.Provider value={contextValue}>
+      <ValidateEvent {...defaultProps} {...props} />
+    </EventCtx.Provider>
+  )
+}
+
+describe("ValidateEvent EU endpoint functionality", () => {
+  beforeEach(() => {
+    // Reset mocks before each test
+    jest.clearAllMocks()
+    // Setup the default mock implementation for useValidateEvent to render the initial state.
+    mockedUseValidateEvent.mockReturnValue({
+      status: "not-started",
+      validateEvent: mockValidateEventFn,
+    })
+  })
+
+  it("should render with the default endpoint and allow switching to the EU endpoint", () => {
+    renderComponent()
+
+    // 1. Check initial state (default endpoint)
+    expect(screen.getByText("HOST: www.google-analytics.com", { exact: false })).toBeInTheDocument()
+    expect(screen.queryByText("HOST: region1.google-analytics.com", { exact: false })).not.toBeInTheDocument()
+    expect(mockedUseValidateEvent).toHaveBeenCalledWith(false)
+
+    // 2. Find and interact with the switch
+    const euSwitch = within(screen.getByTestId("use-eu-endpoint")).getByRole('checkbox')
+    expect(euSwitch).toHaveProperty('checked', false)
+    fireEvent.click(euSwitch)
+
+    // 3. Check the new state (EU endpoint)
+    expect(euSwitch).toHaveProperty('checked', true)
+    expect(screen.getByText("HOST: region1.google-analytics.com", { exact: false })).toBeInTheDocument()
+    expect(mockedUseValidateEvent).toHaveBeenCalledTimes(2)
+    expect(mockedUseValidateEvent).toHaveBeenLastCalledWith(true)
+  })
+})