Add Jest snapshots for AppTile (#10946)

- on PiP widget (PersistentApp)
- on RightPanel

test/components/views/elements/AppTile-test.tsx

@@ -182,6 +182,10 @@ describe("AppTile", () => {
         expect(renderResult.getByText("Example 1")).toBeInTheDocument();
         expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(true);
 
+        const { container, asFragment } = renderResult;
+        expect(container.getElementsByClassName("mx_Spinner").length).toBeTruthy();
+        expect(asFragment()).toMatchSnapshot();
+
         // We want to verify that as we change to room 2, we should close the
         // right panel and destroy the widget.
 
@@ -421,6 +425,25 @@ describe("AppTile", () => {
         });
     });
 
+    describe("for a persistent app", () => {
+        let renderResult: RenderResult;
+
+        beforeEach(() => {
+            renderResult = render(
+                <MatrixClientContext.Provider value={cli}>
+                    <AppTile key={app1.id} app={app1} fullWidth={true} room={r1} miniMode={true} showMenubar={false} />
+                </MatrixClientContext.Provider>,
+            );
+        });
+
+        it("should render", () => {
+            const { container, asFragment } = renderResult;
+
+            expect(container.querySelector(".mx_Spinner")).toBeFalsy();
+            expect(asFragment()).toMatchSnapshot();
+        });
+    });
+
     it("for a pinned widget permission load", () => {
         jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts, widgetInfo) => {
             if (lifecycleEvent === WidgetLifecycle.PreLoadRequest && (widgetInfo as WidgetInfo).id === app1.id) {

test/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -1,5 +1,93 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`AppTile destroys non-persisted right panel widget on room change 1`] = `
+<DocumentFragment>
+  <aside
+    class="mx_RightPanel dark-panel"
+    id="mx_RightPanel"
+  >
+    <div
+      class="mx_BaseCard mx_WidgetCard"
+    >
+      <div
+        class="mx_BaseCard_header"
+      >
+        <div
+          class="mx_AccessibleButton mx_BaseCard_close"
+          data-testid="base-card-close-button"
+          role="button"
+          tabindex="0"
+          title="Close"
+        />
+        <div
+          class="mx_BaseCard_header_title"
+        >
+          <h4
+            class="mx_Heading_h4 mx_BaseCard_header_title_heading"
+          >
+            Example 1
+          </h4>
+          <div
+            aria-expanded="false"
+            aria-haspopup="true"
+            aria-label="Options"
+            class="mx_AccessibleButton mx_BaseCard_header_title_button--option"
+            role="button"
+            tabindex="0"
+            title="Options"
+          />
+        </div>
+      </div>
+      <div
+        class="mx_AppTileFullWidth"
+        id="1"
+      >
+        <div
+          class="mx_AppTileBody mx_AppTile_loading"
+        >
+          <div
+            class="mx_AppTile_loading_fadeInSpinner"
+          >
+            <div
+              class="mx_Spinner"
+            >
+              <div
+                class="mx_Spinner_Msg"
+              >
+                Loading…
+              </div>
+               
+              <div
+                aria-label="Loading…"
+                class="mx_Spinner_icon"
+                data-testid="spinner"
+                role="progressbar"
+                style="width: 32px; height: 32px;"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </aside>
+</DocumentFragment>
+`;
+
+exports[`AppTile for a persistent app should render 1`] = `
+<DocumentFragment>
+  <div
+    class="mx_AppTile_mini"
+    id="1"
+  >
+    <div
+      class="mx_AppTile_persistedWrapper"
+    >
+      <div />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`AppTile for a pinned widget should render 1`] = `
 <DocumentFragment>
   <div