use mocked AnswersCore and actual ReduxStateManager in Headless instance

[yen-tt]

Update generateMockedHeadless only mock AnswersCore, and use actual ReduxStateManager instance internally.

In jest, this can be done with jest.spyOn. However, storybook doesn't support jest functions globally by default. I attempted to use jest-mock and tried setting ModuleMocker/fn()/spyOn() to window.jest in preview.js to mock provideCore/AnswersCore, as some have suggested this approach (1)(2). However this results in an error in storybook and I couldn't figure a way around it (worked fine in jest tests):

I decided to use the recommended approach from Storybook's doc by making an import alias in storybook's webpack config. I attempted to make an alias of @yext/answers-core to mock provideCore() but this caused a lot of export issues in node_modules from answers-headless-react and answers-headless and I was unable to re-export things from answers-core to resolve these issues. Instead of making an alias import for the whole core library, I end up making an import alias for the AnswersCore class instead.

Since jest functions can't be inside generateMockedHeadless or Storybook would crash, moduleNameMapper is added to jest config in package.json to make the same import alias for AnswersCore.

added Storybook decorator for AnswersCore. With that, user are able to specify different AnswersCore's mocked services on a per-story basis. Example:

export const Primary = () =>  <SomeComponent/> };
export const Secondary = () =>  <SomeComponent/> };

Primary.parameters = {
  answersCoreServices: {
    searchService: generateMockedSearchService()
  }
};

Secondary.parameters = {
  answersCoreServices: {
    searchService: generateADifferentMockedSearchService()
  }
}

updated displayName of DisplayableHierarchicalFacets due to duplicate key error that came up in storybook.

J=SLAP-2036
TEST=manual

ran npm run storybook and see that the component stories loaded successfully. When click on SpellCheck link in SpellCheck primary story, see that a console log from the mocked AnswersCore appear and no API network request was made.
modified SpellCheck jest tests to use generateMockedHeadless. See that the test worked as expected with console log from the mocked AnswersCore.
construct two SpellCheck stories each with different mocked searchService for its AnswersCore instance. Added log in the different mocked searchService. See that the log from the expected mocked searchService appears when click on the spellcheck link in each story.

[oshi97]

I was wondering if we would want some way to specify these on a per story basis?

[yen-tt]

Sure! I added a storybook decorator for AnswersCore so you are able to specify specific mock for each story. I updated the description on how you would do that

[oshi97]

the decorator seems cool! thanks for looking into it