Use xAPI Forwarding (#131)

* drop in new xapi code and tests alongside old

* feed course url to share btn

* instrument share button with shared learning resource

* remove xapi instrumentation from view button

* remove xapi instrumentation from course spotlight card

* remove xapi instrumentation from searchresult card

* instrument create saved search modal with saved search statement

* added new instrumentation to save list modal

* added new instrumentation to saved modal course page

* added explored instrumentation to course page

* expanded test for course page

* fix index test

* added search instrumentation to index page

* remove instrumentation from list page

* fix one test in search

* migrated search to new instrumentation

* rip out old instrumentation

* fix header test

* fixed default layout test

* fix final failing test why not

* refactor xAPi mock

* mock specific xapi events and migrate tests

* further refactor

* test expectation of saved

* add negative case too

* update test for index search

Author: milt

package.json

@@ -6,7 +6,6 @@
     "@headlessui/react": "^1.4.2",
     "@heroicons/react": "^1.0.5",
     "@tailwindcss/line-clamp": "^0.3.0",
-    "@xapi/xapi": "^2.0.1",
     "autoprefixer": "^10.4.0",
     "axios": "^0.23.0",
     "next": "12.1.0",

src/__mocks__/mockXapi.js

@@ -0,0 +1,19 @@
+import * as Xapi from '@/utils/xapi';
+import * as XapiEvents from '@/utils/xapi/events';
+
+function keepFreshAndMock(nsObj, mockedFnName, mockImpl) {
+  if (nsObj[mockedFnName].mockRestore) {
+    nsObj[mockedFnName].mockRestore();
+  }
+  jest.spyOn(nsObj, mockedFnName).mockImplementation(mockImpl);
+}
+
+export function mockSendStatement() {
+  keepFreshAndMock(Xapi, 'sendStatement', () => Promise.resolve({}));
+}
+
+export function mockXapiEvents() {
+  ['searched', 'saved', 'curated', 'shared', 'explored', 'viewed'].forEach(
+    (fnName) => keepFreshAndMock(XapiEvents, fnName, jest.fn())
+  );
+}

src/__mocks__/predefinedMocks.js

@@ -1097,3 +1097,13 @@ export function useMockUserListWithDifferentUserId() {
     isError: false,
   }));
 }
+
+export function useMockClipboard() {
+  Object.defineProperty(navigator, 'clipboard', {
+    value: {
+      writeText: jest.fn().mockResolvedValue(undefined),
+      writeText: jest.fn().mockResolvedValue('foo'),
+    },
+    writable: true,
+  });
+}

src/__tests__/components/Header.test.js

@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
 import { useAuth } from '@/contexts/AuthContext';
+import { useMockConfig } from '@/__mocks__/predefinedMocks';
 import Header from '@/components/Header';
 import mockRouter from 'next-router-mock';
 
@@ -10,6 +11,7 @@ jest.mock('../../contexts/AuthContext', () => ({
 }));
 beforeEach(() => {
   mockRouter.setCurrentUrl('/');
+  useMockConfig();
 });
 
 // This is all you need:

src/__tests__/components/buttons/ShareButton.test.js

@@ -1,25 +1,29 @@
 import { act, fireEvent, render } from '@testing-library/react';
-import { useUnauthenticatedUser } from '@/__mocks__/predefinedMocks';
+import { mockXapiEvents } from '@/__mocks__/mockXapi';
+import { shared } from '@/utils/xapi/events';
+import {
+  useMockClipboard,
+  useUnauthenticatedUser,
+} from '@/__mocks__/predefinedMocks';
 import ShareButton from '@/components/buttons/ShareBtn';
-import mock, { xAPISendStatement } from '@/utils/xapi/xAPISendStatement';
 
-const mockXAPISendStatement = jest.fn();
 describe('ShareButton', () => {
-  jest.mock('@/utils/xapi/xAPISendStatement');
-
-  it('should render correctly', () => {
+  beforeEach(() => {
+    mockXapiEvents();
     useUnauthenticatedUser();
+    useMockClipboard();
+  });
+  it('should render correctly', () => {
     const screen = render(<ShareButton />);
 
     expect(screen.getByText('Share')).toBeEnabled();
   });
-  it.skip('should call xAPISendStatement', async () => {
-    mock.xAPISendStatement.mockImplementation(mockXAPISendStatement);
-    useUnauthenticatedUser();
+  it('should call sendStatement', async () => {
     const screen = render(<ShareButton />);
     await act(async () => {
       fireEvent.click(screen.getByText('Share'));
     });
-    expect(mockXAPISendStatement).toHaveBeenCalled();
+    expect(shared).toHaveBeenCalled();
+    expect(navigator.clipboard.writeText).toHaveBeenCalled();
   });
 });

src/__tests__/components/buttons/ViewBtn.test.js

@@ -1,9 +1,8 @@
 import { MemoryRouterProvider } from 'next-router-mock/MemoryRouterProvider';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { useAuth } from '@/contexts/AuthContext';
-import ViewBtn from "@/components/buttons/ViewBtn";
+import ViewBtn from '@/components/buttons/ViewBtn';
 import courseData from '@/__mocks__/data/course.data';
-import xAPIMapper from "@/utils/xapi/xAPIMapper";
 
 // mock auth
 jest.mock('@/contexts/AuthContext', () => ({
@@ -19,7 +18,11 @@ const renderer = (data = courseData) => {
 
   return render(
     <MemoryRouterProvider url='/'>
-      <ViewBtn id={data.meta.id} courseTitle={data.courseTitle} courseDescription={data.courseDescription} />
+      <ViewBtn
+        id={data.meta.id}
+        courseTitle={data.courseTitle}
+        courseDescription={data.courseDescription}
+      />
     </MemoryRouterProvider>
   );
 };
@@ -30,16 +33,4 @@ describe('ShareBtn', () => {
 
     expect(getByRole('button').id).not.toBeNull();
   });
-
-  it('send xAPI statement when course is clicked', () => {
-    const { getByRole } = renderer();
-
-    const spy = jest.spyOn(xAPIMapper, 'sendStatement')
-      .mockImplementation(() => Promise.resolve({})
-      );
-
-    fireEvent.click(getByRole('button'));
-
-    expect(spy).toHaveBeenCalled();
-  })
 });

src/__tests__/components/cards/CourseSpotlight.test.js

@@ -6,7 +6,6 @@ import CourseSpotlight from '@/components/cards/CourseSpotlight';
 import courseData from '@/__mocks__/data/course.data';
 import mockRouter from 'next-router-mock';
 import uiConfigData from '@/__mocks__/data/uiConfig.data';
-import xAPIMapper from "@/utils/xapi/xAPIMapper";
 
 // jest mocks
 jest.mock('next/dist/client/router', () => require('next-router-mock'));
@@ -58,7 +57,7 @@ describe('Course Spotlight', () => {
           Course_Instance: { Thumbnail: 'fake.img' },
         };
         const { getByAltText, queryByRole } = renderer(modified);
-        expect(getByAltText ('')).toBeInTheDocument();
+        expect(getByAltText('')).toBeInTheDocument();
 
         // expect(queryByRole('img')).toBeInTheDocument();
       });
@@ -71,20 +70,6 @@ describe('Course Spotlight', () => {
       });
     });
   });
-
-  it('send xAPI statement when course is clicked', () => {
-    const { getByText } = renderer();
-
-    const spy = jest.spyOn(xAPIMapper, 'sendStatement')
-      .mockImplementation(() => Promise.resolve({})
-      );
-
-      act(() => {
-      fireEvent.click(getByText(/Test Course Title/i).parentElement);
-    });
-
-    expect(spy).toHaveBeenCalled();
-  })
 });
 
 it('renders', () => {

src/__tests__/components/modals/CreateSavedSearch.test.js

@@ -1,5 +1,7 @@
 import { QueryClientWrapper } from '@/__mocks__/queryClientMock';
 import { act } from 'react-dom/test-utils';
+import { mockXapiEvents } from '@/__mocks__/mockXapi';
+import { saved } from '@/utils/xapi/events';
 import {
   createSaveSearchMockFn,
   useAuthenticatedUser,
@@ -18,6 +20,10 @@ const renderer = () => {
   );
 };
 
+beforeEach(() => {
+  mockXapiEvents();
+});
+
 afterEach(() => {
   jest.resetAllMocks();
 });
@@ -57,6 +63,7 @@ describe('CreateSavedSearchModal', () => {
       fireEvent.click(getByText('Save'));
     });
     expect(createSaveSearchMockFn).toHaveBeenCalled();
+    expect(saved).toHaveBeenCalled();
   });
 
   it('should not call the api when there is no query to save', () => {
@@ -70,6 +77,7 @@ describe('CreateSavedSearchModal', () => {
       fireEvent.click(getByText('Save'));
     });
     expect(createSaveSearchMockFn).not.toHaveBeenCalled();
+    expect(saved).not.toHaveBeenCalled();
   });
 });
 

src/__tests__/components/modals/SaveModal.test.js

@@ -1,14 +1,14 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
+import { curated } from '@/utils/xapi/events';
+import { mockXapiEvents } from '@/__mocks__/mockXapi';
 import SaveModal from '@/components/modals/SaveModal';
 
 import { QueryClientWrapper } from '@/__mocks__/queryClientMock';
 import { useAuth } from '@/contexts/AuthContext';
 import { useCreateUserList } from '@/hooks/useCreateUserList';
 import { useUpdateUserList } from '@/hooks/useUpdateUserList';
 import { useUserOwnedLists } from '@/hooks/useUserOwnedLists.js';
-import { xAPISendStatement } from '@/utils/xapi/xAPISendStatement';
 import userListData from '@/__mocks__/data/userLists.data';
-import xAPIMapper from '@/utils/xapi/xAPIMapper';
 
 jest.mock('@/hooks/useUpdateUserList', () => ({
   useUpdateUserList: jest.fn(),
@@ -60,7 +60,7 @@ const renderer = (isAuth = false) => {
   return render(
     <QueryClientWrapper>
       <div>
-        <SaveModal courseId={'12345'} title={"test"} modalState={true} />
+        <SaveModal courseId={'12345'} title={'test'} modalState={true} />
       </div>
     </QueryClientWrapper>
   );
@@ -80,6 +80,7 @@ beforeEach(() => {
     data: userListData,
     isSuccess: true,
   }));
+  mockXapiEvents();
 });
 
 describe('Save Modal', () => {
@@ -147,11 +148,8 @@ describe('Save Modal', () => {
     it.todo('should');
 
     it.skip('should send xAPI statement when create is clicked', () => {
-      const { getByText, getByPlaceholderText } = renderer(true);
+      const { getByText, getAllByText, getByPlaceholderText } = renderer(true);
 
-      const spy = jest
-        .spyOn(xAPISendStatement, 'xAPISendStatement')
-        .mockImplementation(() => Promise.resolve({}));
       act(() => {
         fireEvent.click(getByText(/save/i));
       });
@@ -161,14 +159,12 @@ describe('Save Modal', () => {
       });
 
       fireEvent.change(getByPlaceholderText(/List Description.../i), {
-        target: { value: 'Descprition' },
+        target: { value: 'Description' },
       });
 
-      act(() => {
-        fireEvent.click(getByText(/create/i));
-      });
+      fireEvent.click(getByText(/create/i, { selector: 'input' }));
 
-      expect(spy).toHaveBeenCalled();
+      expect(curated).toHaveBeenCalled();
     });
   });
 });

src/__tests__/layouts/DefaultLayout.test.js

@@ -35,7 +35,7 @@ describe('Default Layout', () => {
     renderer();
     expect(screen.getByText('Sign in')).toBeInTheDocument();
     expect(screen.getByText('Sign up')).toBeInTheDocument();
-    expect(screen.getByAltText('home')).toBeInTheDocument();
+    expect(screen.getByText('Home')).toBeInTheDocument();
 
     expect(screen.getByText('DOD Home Page')).toBeInTheDocument();
     expect(screen.getByText('About ADL')).toBeInTheDocument();