test: migrate to IMA Testing Library

Author: Filipoliko

.gitignore

@@ -9,4 +9,5 @@
 .eslintcache
 *.tgz
 **/.turbo
+.swc/
 !itl.tgz

jest.config.itl.js

@@ -0,0 +1,20 @@
+const {
+  setImaTestingLibraryServerConfig,
+  FALLBACK_APP_MAIN_PATH,
+  FALLBACK_APPLICATION_FOLDER,
+} = require('@ima/testing-library/server');
+
+const base = require('./jest.config.base.js');
+
+setImaTestingLibraryServerConfig({
+  applicationFolder: FALLBACK_APPLICATION_FOLDER,
+});
+
+module.exports = {
+  ...base,
+  preset: '@ima/testing-library',
+  moduleNameMapper: {
+    'app/main': FALLBACK_APP_MAIN_PATH,
+  },
+  setupFiles: ['<rootDir>/../../jestSetup.itl.js'],
+};

packages/plugin-atoms/jestSetup.js renamed to jestSetup.itl.js

@@ -32,7 +32,6 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.21.8",
     "@babel/preset-react": "^7.22.3",
-    "@cfaester/enzyme-adapter-react-18": "^0.7.0",
     "@changesets/cli": "^2.26.1",
     "@ima/plugin-cli": "^19.1.2",
     "@ima/testing-library": "itl.tgz",
@@ -46,8 +45,6 @@
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "@typescript-eslint/parser": "^5.59.8",
-    "enzyme": "3.11.0",
-    "enzyme-to-json": "^3.6.2",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",

package.json

@@ -1,20 +1,5 @@
-const {
-  setImaTestingLibraryServerConfig,
-  FALLBACK_APP_MAIN_PATH,
-  FALLBACK_APPLICATION_FOLDER,
-} = require('@ima/testing-library/server');
-
-const base = require('../../jest.config.base.js');
-
-setImaTestingLibraryServerConfig({
-  applicationFolder: FALLBACK_APPLICATION_FOLDER,
-});
+const itl = require('../../jest.config.itl.js');
 
 module.exports = {
-  ...base,
-  preset: '@ima/testing-library',
-  moduleNameMapper: {
-    'app/main': FALLBACK_APP_MAIN_PATH,
-  },
-  setupFiles: ['./jestSetup.js'],
+  ...itl,
 };

packages/plugin-atoms/jest.config.js

@@ -0,0 +1,38 @@
+import { renderWithContext, waitFor } from '@ima/testing-library';
+
+import { Iframe, Visibility } from '../../main';
+
+describe('Iframe', () => {
+  it('should render with noscript tag by default', async () => {
+    const { container } = await renderWithContext(
+      <Iframe src='example.html' />
+    );
+
+    expect(container.querySelector('noscript')).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('should render without noscript tag if visible', async () => {
+    const { app, container } = await renderWithContext(
+      <Iframe src='example.html' />
+    );
+
+    // Mock getBoundingClientRect to simulate visibility
+    container.firstChild.getBoundingClientRect = jest.fn(() => ({
+      width: 100,
+      height: 100,
+      top: 0,
+      left: 0,
+      bottom: 100,
+      right: 100,
+    }));
+    app.oc.get(Visibility).notify(); // Trigger visibility observer
+
+    // The component needs to re-render to remove noscript tag, there is no generic way to wait for it,
+    // so we need to wait for the noscript tag to disappear
+    await waitFor(() =>
+      expect(container.querySelector('noscript')).not.toBeInTheDocument()
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

packages/plugin-atoms/src/__tests__/__snapshots__/mountSpec.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Iframe should render with noscript tag by default 1`] = `
+<div
+  class="atm-iframe atm-overflow atm-placeholder"
+  style="width: auto; height: auto;"
+>
+  <noscript>
+    &lt;iframe src="example.html" name="example.html" width="auto" height="auto" class="atm-fill" &gt;&lt;/iframe&gt;
+  </noscript>
+</div>
+`;
+
+exports[`Iframe should render without noscript tag if visible 1`] = `
+<div
+  class="atm-iframe atm-overflow"
+  style="width: auto; height: auto;"
+>
+  <iframe
+    class="atm-fill"
+    name="example.html"
+    src="example.html"
+  />
+</div>
+`;

packages/plugin-atoms/src/__tests__/mountSpec.js

@@ -1,10 +1,5 @@
-const base = require('../../jest.config.base.js');
+const itl = require('../../jest.config.itl.js');
 
 module.exports = {
-  ...base,
-  testEnvironment: 'jsdom',
-  setupFiles: ['<rootDir>/jestSetupFile.js'],
-  snapshotSerializers: [
-    '<rootDir>/../../node_modules/enzyme-to-json/serializer',
-  ],
+  ...itl,
 };