test: Transform snapshots into rtl tests (#674)

Author: diana-villalvazo-wgu

package.json

@@ -19,8 +19,7 @@
     "dev": "PUBLIC_PATH=/learner-dashboard/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
     "quality": "npm run lint-fix && npm run test",
-    "watch-tests": "jest --watch",
-    "snapshot": "fedx-scripts jest --updateSnapshot"
+    "watch-tests": "jest --watch"
   },
   "author": "edX",
   "license": "AGPL-3.0",

src/__snapshots__/index.test.jsx.snap

@@ -1,5 +1,4 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import CourseCardDetails from '.';
 
@@ -48,23 +47,36 @@ describe('CourseCard Details component', () => {
     return separatorsCount;
   };
 
-  test('has change session button on entitlement course', () => {
+  it('has change session button on entitlement course', () => {
     const wrapper = createWrapper();
-    expect(wrapper.container).toMatchSnapshot();
+    const sessionButton = screen.getByRole('button', { name: defaultHooks.changeOrLeaveSessionMessage });
+    expect(sessionButton).toBeInTheDocument();
+
+    const accessMessage = screen.getByText((text) => text.includes(defaultHooks.accessMessage));
+    expect(accessMessage).toBeInTheDocument();
     // it has 3 separator, 4 column
     expect(fetchSeparators(wrapper)).toBe(3);
   });
 
-  test('has change session button on entitlement course but no access message', () => {
+  it('has change session button on entitlement course but no access message', () => {
     const wrapper = createWrapper({ accessMessage: null });
-    expect(wrapper.container).toMatchSnapshot();
+    const sessionButton = screen.getByRole('button', { name: defaultHooks.changeOrLeaveSessionMessage });
+    expect(sessionButton).toBeInTheDocument();
+
+    const accessMessage = screen.queryByText((text) => text.includes(defaultHooks.accessMessage));
+    expect(accessMessage).toBeNull();
+
     // it has 2 separator, 3 column
     expect(fetchSeparators(wrapper)).toBe(2);
   });
 
-  test('does not have change session button on regular course', () => {
+  it('does not have change session button on regular course', () => {
     const wrapper = createWrapper({ isEntitlement: false });
-    expect(wrapper.container).toMatchSnapshot();
+    const sessionButton = screen.queryByRole('button', { name: defaultHooks.changeOrLeaveSessionMessage });
+    expect(sessionButton).toBeNull();
+
+    const accessMessage = screen.getByText((text) => text.includes(defaultHooks.accessMessage));
+    expect(accessMessage).toBeInTheDocument();
     // it has 2 separator, 3 column
     expect(fetchSeparators(wrapper)).toBe(2);
   });

src/containers/CourseCard/components/CourseCardDetails/__snapshots__/index.test.jsx.snap

@@ -55,16 +55,12 @@ describe('app registry', () => {
     const callArgs = subscribe.mock.calls[0];
     expect(callArgs[0]).toEqual(APP_READY);
     callArgs[1]();
-    const [rendered] = mockRender.mock.calls[0];
-    expect(rendered).toMatchSnapshot();
   });
-  test('subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element', () => {
+  test('subscribe: APP_INIT_ERROR.', () => {
     const callArgs = subscribe.mock.calls[1];
     expect(callArgs[0]).toEqual(APP_INIT_ERROR);
     const error = { message: 'test-error-message' };
     callArgs[1](error);
-    const [rendered] = mockRender.mock.calls[0];
-    expect(rendered).toMatchSnapshot();
   });
   test('initialize is called with requireAuthenticatedUser', () => {
     expect(initialize).toHaveBeenCalledTimes(1);