Add ability to load test app in its own iframe for testappception (#2512)

* Button to create iframe

* use types

* initialization parameter

Author: AE-MS

apps/teams-test-app/src/App.tsx

@@ -6,7 +6,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import { isTestBackCompat } from './components/utils/isTestBackCompat';
 import { SecondRoute } from './pages/SecondRoute';
-import { TestApp } from './pages/TestApp';
+import { appInitializationTestQueryParameter, TestApp } from './pages/TestApp';
 
 const urlParams = new URLSearchParams(window.location.search);
 
@@ -29,7 +29,7 @@ if (!urlParams.has('customInit') || !urlParams.get('customInit')) {
 // we do it by adding appInitializationTest=true to query string
 if (
   (urlParams.has('customInit') && urlParams.get('customInit')) ||
-  (urlParams.has('appInitializationTest') && urlParams.get('appInitializationTest'))
+  (urlParams.has(appInitializationTestQueryParameter) && urlParams.get(appInitializationTestQueryParameter))
 ) {
   console.info('Not calling appInitialization because part of App Initialization Test run');
 } else {

apps/teams-test-app/src/pages/TestApp.tsx

@@ -66,15 +66,32 @@ import VideoAPIs from '../components/VideoEffectsApis';
 import VisualMediaAPIs from '../components/VisualMediaAPIs';
 import WebStorageAPIs from '../components/WebStorageAPIs';
 
+export const appInitializationTestQueryParameter = 'appInitializationTest';
+
 export const TestApp: React.FC = () => {
   const dialogWindowRef = React.useRef<IAppWindow | null>(null);
+  const [iframeUrl, setIframeUrl] = React.useState<URL | null>(null);
+
+  const loadCurrentUrl = (): void => {
+    setIframeUrl(new URL(window.location.href + `?${appInitializationTestQueryParameter}=true`));
+  };
 
   return (
     <>
       <button id="button_reload" onClick={() => window.location.reload()}>
         Reload This App
       </button>
+      <button id="button_iframe" onClick={loadCurrentUrl}>
+        Load Current URL in child Iframe for initialization testing
+      </button>
       <div className="App-container">
+        {iframeUrl !== null && (
+          <div>
+            IFRAME: <br></br>
+            {/*eslint-disable-next-line @microsoft/sdl/react-iframe-missing-sandbox -- always use the sandbox attribute, but this is a test app and we fully control the content going into it, so it's okay not to here. */}
+            <iframe src={iframeUrl.toString()} width="100%" height="500px" />
+          </div>
+        )}
         <AppAPIs />
         <AppInitializationAPIs />
         <AppInstallDialogAPIs />