fix: active transcript preference not loading (openedx#682)

eduNEXT · Nov 14, 2023 · 7c7ea1f · 7c7ea1f
1 parent 3378c8e
commit 7c7ea1f
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 11 deletions.
diff --git a/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx b/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx
@@ -37,7 +37,7 @@ const OrderTranscriptForm = ({
   }, [data]);
 
   const handleDiscard = () => {
-    setTranscriptType(activeTranscriptPreferences);
+    setTranscriptType(activeTranscriptPreferences?.provider);
     closeTranscriptSettings();
   };
 
@@ -147,7 +147,14 @@ const OrderTranscriptForm = ({
 
 OrderTranscriptForm.propTypes = {
   setTranscriptType: PropTypes.func.isRequired,
-  activeTranscriptPreferences: PropTypes.shape({}),
+  activeTranscriptPreferences: PropTypes.shape({
+    provider: PropTypes.string.isRequired,
+    cielo24Turnaround: PropTypes.string,
+    cielo24Fidelity: PropTypes.string,
+    preferredLanguages: PropTypes.arrayOf(PropTypes.string),
+    turnaround: PropTypes.string,
+    videoSourceLanguage: PropTypes.string,
+  }),
   transcriptType: PropTypes.string.isRequired,
   transcriptCredentials: PropTypes.shape({
     cielo24: PropTypes.bool.isRequired,

diff --git a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx
@@ -33,7 +33,7 @@ const TranscriptSettings = ({
     videoTranscriptSettings,
   } = pageSettings;
   const { transcriptionPlans } = videoTranscriptSettings || {};
-  const [transcriptType, setTranscriptType] = useState(activeTranscriptPreferences);
+  const [transcriptType, setTranscriptType] = useState(activeTranscriptPreferences?.provider);
 
   const handleOrderTranscripts = (data, provider) => {
     const noCredentials = isEmpty(transcriptCredentials) || data.apiKey;

diff --git a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.test.jsx b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.test.jsx
@@ -3,6 +3,7 @@ import {
   act,
   screen,
   waitFor,
+  within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {
@@ -110,7 +111,7 @@ describe('TranscriptSettings', () => {
     });
   });
 
-  describe('delete transcript preferences', () => {
+  describe('loading saved preference', () => {
     beforeEach(async () => {
       initializeMockApp({
         authenticatedUser: {
@@ -120,19 +121,67 @@ describe('TranscriptSettings', () => {
           roles: [],
         },
       });
-      store = initializeStore(initialState);
+      store = initializeStore({
+        ...initialState,
+        videos: {
+          ...initialState.videos,
+          pageSettings: {
+            ...initialState.videos.pageSettings,
+            activeTranscriptPreferences: {
+              provider: 'Cielo24',
+              cielo24Fidelity: '',
+              cielo24Turnaround: '',
+              preferredLanguages: [],
+              threePlayTurnaround: '',
+              videoSourceLanguage: '',
+            },
+          },
+        },
+      });
       axiosMock = new MockAdapter(getAuthenticatedHttpClient());
 
       renderComponent(defaultProps);
-      const orderButton = screen.getByText(messages.orderTranscriptsTitle.defaultMessage);
-      await act(async () => {
-        userEvent.click(orderButton);
+    });
+
+    it('should load page with Cielo24 selected', async () => {
+      const cielo24Button = screen.getByText(messages.cieloLabel.defaultMessage);
+
+      expect(within(cielo24Button).getByLabelText('Cielo24 radio')).toHaveProperty('checked', true);
+    });
+  });
+
+  describe('delete transcript preferences', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
       });
-      const cielo24Button = screen.getAllByLabelText('Cielo24 radio')[0];
-      await act(async () => {
-        userEvent.click(cielo24Button);
+      store = initializeStore({
+        ...initialState,
+        videos: {
+          ...initialState.videos,
+          pageSettings: {
+            ...initialState.videos.pageSettings,
+            activeTranscriptPreferences: {
+              provider: 'Cielo24',
+              cielo24Fidelity: '',
+              cielo24Turnaround: '',
+              preferredLanguages: [],
+              threePlayTurnaround: '',
+              videoSourceLanguage: '',
+            },
+          },
+        },
       });
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+      renderComponent(defaultProps);
       const noneButton = screen.getAllByLabelText('none radio')[0];
+
       await act(async () => {
         userEvent.click(noneButton);
       });