ahayes91

import { addDecorator } from '@storybook/react';
import { initializeWorker, mswDecorator } from 'msw-storybook-addon';
import getConfigForCurrentEnv from 'get-env-config';
import { getEnvironment } from 'get-environment';
import { userContextDecorator } from '../__mocks__/auth';

const { storyBook } = getConfigForCurrentEnv();
const env = getEnvironment();

// Only use Mock Service Worker when we are running locally for now

ahayes91

import React from 'react';
import { getEnvironment } from 'get-environment';

const localOnlyDecorator = story => {
  const env = getEnvironment();
  // Only show app stories on local for now
  if (env === 'local' || env === 'development') {
    return story();
  }
  return <p>This story can only be viewed when running Storybook locally.</p>;

ahayes91

export const NO_CACHE = 0; // expires immediately, set as the default for any requests using axiosHelper methods with a cache
export const SHORT_SESSION = 5 * 60 * 1000; // 5 minutes
export const MEDIUM_SESSION = 15 * 60 * 1000; // 15 minutes
export const LONG_SESSION = 60 * 60 * 1000; // 1 hour
export const IMMUTABLE = 60 * 24 * 60 * 1000; // 24 hours

ahayes91

import { setupCache } from 'axios-cache-adapter';
import localforage from 'localforage';
import memoryDriver from 'localforage-memoryStorageDriver';
import { NO_CACHE } from 'cache-expiration/src/cacheExpirationValues';
import { getUserCtx } from 'authentication-helper';

// Plenty of other fun stuff in here, but not needed for the purposes of this demonstration...

const FORAGE_STORE_PREFIX = 'HMH';

ahayes91

rest.get(
  `*/assignments`,
  async (req, res, ctx) => {
    const status = req.url.searchParams.get('status');
    if (status === 'COMPLETED,READY_FOR_SCORING,SCORING_IN_PROGRESS') {
      // Note that these responses are contrived for the purpose of brevity
      return res(
        ctx.json({ assignments: [{ refId: 'COMPLETED_ASSIGNMENT' }] }),
      );
    } else {

ahayes91

rest.post(`/assignment`, async (req, res, ctx) => {
  // The newly created assignment in this test should have only 1 class and 3 students assigned
  const numberOfClassesAssigned = req.body.assignments.length;
  const numberOfStudentsAssigned = req.body.assignments[0].students.length;
  if (numberOfClassesAssigned === 1 && numberOfStudentsAssigned === 3) {
    return res(
      ctx.status(200),
      ctx.json({ assignments: [{ refId: 'mockRefId' }] }),
    );
  }

ahayes91

import React from 'react';
import { render, screen, cleanup, waitFor } from '@testing-library/react/pure';
import getAndSetupServer from './getAndSetupServer';
import {
  handlersForStudentWithNoScores,
} from './mockServiceWorkerHandlers.data.js';
import App from './App';

getAndSetupServer(handlersForStudentWithNoScores);

ahayes91

import React from 'react';
// ... all the other stuff our app uses, Redux Saga / custom providers / MUI components & themes / i18n


const App = ({ basename }) => {
  const { userContext } = getUserCtx();
  
  return (
    <BrowserRouter basename={basename}>
      <LocaleProvider>

ahayes91

/**
 * Function creating a spy on requests handled by MSW
 * @param server - MSW server instance
 * @returns {jest.Mock} - spy on requests handled by MSW
 */
export const createRequestSpy = server => {
  const requestSpy = jest.fn(); // eslint-disable-line no-undef
  server.on('request:end', requestSpy);
  return requestSpy;
};

ahayes91

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import getAndSetupServer from './getAndSetupServer';
import App from './App';

getAndSetupServer();

describe('Posts app: ', () => {
  test('renders button and mocked post in a table on button click', async () => {
    render(<App />);