chore: remove vulnerable dependencies from Image Focal Point app

apps/image-focal-point/package.json

@@ -5,7 +5,8 @@
   "devDependencies": {
     "@contentful/app-scripts": "1.2.0",
     "@testing-library/react": "11.2.5",
-    "cross-env": "7.0.3"
+    "cross-env": "7.0.3",
+    "jsdom": "^25.0.1"
   },
   "scripts": {
     "start": "vite",
@@ -20,6 +21,7 @@
     "@contentful/forma-36-fcss": "0.3.5",
     "@contentful/forma-36-react-components": "3.100.7",
     "@contentful/forma-36-tokens": "0.11.2",
+    "@emotion/css": "^11.13.0",
     "hex-rgb": "4.3.0",
     "lodash.camelcase": "4.3.0",
     "prop-types": "15.8.1",

apps/image-focal-point/src/__snapshots__/index.spec.jsx.snap

@@ -0,0 +1,50 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`App > #render > should render the extension field view 1`] = `
+<div>
+  <div
+    class="css-70qvj9"
+  >
+    <div
+      class="TextInput__TextInput___36-K- css-93644d TextInput__TextInput--large___KwY4O TextInput__TextInput--disabled___2t7VS"
+    >
+      <input
+        class="TextInput__TextInput__input___27vDB a11y__focus-border--default___60AXp"
+        data-test-id="focal-point"
+        disabled=""
+        id="focal-point"
+        type="text"
+        value="Focal point not set"
+      />
+    </div>
+    <button
+      class="Button__Button___1ZfFj css-dp0f2t Button__Button--muted___2Wair"
+      data-test-id="cf-ui-button"
+      type="button"
+    >
+      <span
+        class="TabFocusTrap__TabFocusTrap___39Vty Button__Button__inner-wrapper___3qrNC"
+        tabindex="-1"
+      >
+        <span
+          class="Button__Button__label___3tcOj"
+        >
+          Set focal point
+        </span>
+      </span>
+    </button>
+    <button
+      class="TextLink__TextLink___1biUr a11y__focus-outline--default___2hwb1 TextLink__TextLink--primary___2Vc9F"
+      data-test-id="cf-ui-text-link"
+      type="button"
+    >
+      <span
+        class="TabFocusTrap__TabFocusTrap___39Vty"
+        tabindex="-1"
+      >
+        Reset focal point
+      </span>
+    </button>
+  </div>
+</div>
+`;

apps/image-focal-point/src/components/AppView/AppView.spec.js → apps/image-focal-point/src/components/AppView/AppView.spec.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { vi } from 'vitest';
 import { cleanup, render, wait, configure, fireEvent } from '@testing-library/react';
 
 import mockProps from '../../test/mockProps';
@@ -13,15 +14,15 @@ describe('AppView', () => {
       sdk: {
         ...mockProps.sdk,
         space: {
-          getContentTypes: jest.fn(() => ({
+          getContentTypes: vi.fn(() => ({
             items: [],
           })),
         },
         app: {
-          setReady: jest.fn(),
-          isInstalled: jest.fn(),
-          onConfigure: jest.fn(),
-          onConfigurationCompleted: jest.fn(),
+          setReady: vi.fn(),
+          isInstalled: vi.fn(),
+          onConfigure: vi.fn(),
+          onConfigurationCompleted: vi.fn(),
         },
       },
     };