test: Update existing tests

edx · Oct 31, 2024 · 7991eaa · 7991eaa
1 parent 024a9ed
commit 7991eaa
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 22 deletions.
diff --git a/src/feedback/AlertList.test.jsx b/src/feedback/AlertList.test.jsx
@@ -13,6 +13,27 @@ jest.mock('@edx/frontend-platform/logging', () => ({
   logError: jest.fn(),
 }));
 
+// Mock IntersectionObserver
+global.IntersectionObserver = class {
+  constructor(callback) {
+    this.callback = callback;
+    this.observedElements = new Set();
+  }
+
+  observe(element) {
+    this.callback([{ isIntersecting: true }]);
+    this.observedElements.add(element);
+  }
+
+  unobserve(element) {
+    this.observedElements.delete(element);
+  }
+
+  disconnect() {
+    this.observedElements.clear();
+  }
+};
+
 describe('AlertList', () => {
   let store;
 

diff --git a/src/feedback/AlertMessage.test.jsx b/src/feedback/AlertMessage.test.jsx
@@ -1,24 +1,61 @@
 import React from 'react';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
 import { fireEvent, render } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import AlertMessage from './AlertMessage';
 import { MESSAGE_TYPES } from './data/constants';
 
+const mockStore = configureMockStore();
+
+// Mock IntersectionObserver
+global.IntersectionObserver = class {
+  constructor(callback) {
+    this.callback = callback;
+    this.observedElements = new Set();
+  }
+
+  observe(element) {
+    this.callback([{ isIntersecting: true }]);
+    this.observedElements.add(element);
+  }
+
+  unobserve(element) {
+    this.observedElements.delete(element);
+  }
+
+  disconnect() {
+    this.observedElements.clear();
+  }
+};
+
 describe('AlertMessage', () => {
   // The AlertList test covers most of AlertMessage testing.
+  let store;
+  let state;
+
+  beforeEach(() => {
+    state = {
+      hasBeenShown: {},
+    };
+
+    store = mockStore(state);
+  });
 
   it('should handle closing', () => {
     const closeHandlerMock = jest.fn();
 
     const component = (
       <IntlProvider locale="en">
-        <AlertMessage
-          id={123}
-          messageType={MESSAGE_TYPES.ERROR}
-          userMessage="Wondrous message!"
-          closeHandler={closeHandlerMock}
-        />
+        <Provider store={store}>
+          <AlertMessage
+            id={123}
+            messageType={MESSAGE_TYPES.ERROR}
+            userMessage="Wondrous message!"
+            closeHandler={closeHandlerMock}
+          />
+        </Provider>
       </IntlProvider>
     );
 
@@ -34,12 +71,14 @@ describe('AlertMessage', () => {
 
     const component = (
       <IntlProvider locale="en">
-        <AlertMessage
-          id={123}
-          messageType="unknown"
-          userMessage="Wondrous message!"
-          closeHandler={closeHandlerMock}
-        />
+        <Provider store={store}>
+          <AlertMessage
+            id={123}
+            messageType="unknown"
+            userMessage="Wondrous message!"
+            closeHandler={closeHandlerMock}
+          />
+        </Provider>
       </IntlProvider>
     );
 
@@ -51,11 +90,13 @@ describe('AlertMessage', () => {
   it('should render a userMessage function', () => {
     const component = (
       <IntlProvider locale="en">
-        <AlertMessage
-          id={123}
-          userMessage={() => 'Wondrous message!'}
-          closeHandler={jest.fn()}
-        />
+        <Provider store={store}>
+          <AlertMessage
+            id={123}
+            userMessage={() => 'Wondrous message!'}
+            closeHandler={jest.fn()}
+          />
+        </Provider>
       </IntlProvider>
     );
 
@@ -66,11 +107,13 @@ describe('AlertMessage', () => {
   it('should render a userMessage element', () => {
     const component = (
       <IntlProvider locale="en">
-        <AlertMessage
-          id={123}
-          userMessage={<span>Wondrous message!</span>}
-          closeHandler={jest.fn()}
-        />
+        <Provider store={store}>
+          <AlertMessage
+            id={123}
+            userMessage={<span>Wondrous message!</span>}
+            closeHandler={jest.fn()}
+          />
+        </Provider>
       </IntlProvider>
     );
 

diff --git a/src/payment/PaymentPage.test.jsx b/src/payment/PaymentPage.test.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-classes-per-file */
 /* eslint-disable react/jsx-no-constructed-context-values */
 /* eslint-disable global-require */
 import React from 'react';
@@ -80,6 +81,27 @@ configureI18n({
 
 const authenticatedUser = Factory.build('userAccount');
 
+// Mock IntersectionObserver
+global.IntersectionObserver = class {
+  constructor(callback) {
+    this.callback = callback;
+    this.observedElements = new Set();
+  }
+
+  observe(element) {
+    this.callback([{ isIntersecting: true }]);
+    this.observedElements.add(element);
+  }
+
+  unobserve(element) {
+    this.observedElements.delete(element);
+  }
+
+  disconnect() {
+    this.observedElements.clear();
+  }
+};
+
 describe('<PaymentPage />', () => {
   let store;
 

diff --git a/src/payment/checkout/Checkout.test.jsx b/src/payment/checkout/Checkout.test.jsx
@@ -55,6 +55,27 @@ const applePaySession = { begin: jest.fn() };
 global.ApplePaySession = jest.fn().mockImplementation(() => applePaySession);
 global.ApplePaySession.canMakePayments = () => true;
 
+// Mock IntersectionObserver
+global.IntersectionObserver = class {
+  constructor(callback) {
+    this.callback = callback;
+    this.observedElements = new Set();
+  }
+
+  observe(element) {
+    this.callback([{ isIntersecting: true }]);
+    this.observedElements.add(element);
+  }
+
+  unobserve(element) {
+    this.observedElements.delete(element);
+  }
+
+  disconnect() {
+    this.observedElements.clear();
+  }
+};
+
 describe('<Checkout />', () => {
   let wrapper;
   let store;