Move the references setting back to the DocTopic component (#693)

resolves rdar://109856608

* refactor: move the references setting
* fix: update references in store, if they update and add tests
* refactor: add watchers to the references on top Component type pages

Author: Dobromir Hristov

src/components/Article.vue

@@ -169,6 +169,12 @@ export default {
     this.store.reset();
     this.store.setReferences(this.references);
   },
+  watch: {
+    // update the references in the store, in case they update, but the component is not re-created
+    references(references) {
+      this.store.setReferences(references);
+    },
+  },
   SectionKind,
 };
 </script>

src/components/DocumentationTopic.vue

@@ -622,6 +622,13 @@ export default {
     }
 
     this.store.reset();
+    this.store.setReferences(this.references);
+  },
+  watch: {
+    // update the references in the store, in case they update, but the component is not re-created
+    references(references) {
+      this.store.setReferences(references);
+    },
   },
 };
 </script>

src/components/Navigator/QuickNavigationPreview.vue

@@ -108,16 +108,6 @@ export default {
       };
     },
   },
-  watch: {
-    json: {
-      immediate: true,
-      async handler(json) {
-        const { references = {} } = json || {};
-        await this.$nextTick();
-        PreviewStore.setReferences(references);
-      },
-    },
-  },
 };
 </script>
 

src/components/Tutorial.vue

@@ -138,6 +138,12 @@ export default {
     this.store.reset();
     this.store.setReferences(this.references);
   },
+  watch: {
+    // update the references in the store, in case they update, but the component is not re-created
+    references(references) {
+      this.store.setReferences(references);
+    },
+  },
   mounted() {
     this.$bridge.on('codeColors', this.handleCodeColorsChange);
     this.$bridge.send({ type: 'requestCodeColors' });

src/components/TutorialsOverview.vue

@@ -103,6 +103,12 @@ export default {
     this.store.reset();
     this.store.setReferences(this.references);
   },
+  watch: {
+    // update the references in the store, in case they update, but the component is not re-created
+    references(references) {
+      this.store.setReferences(references);
+    },
+  },
 };
 </script>
 

src/views/DocumentationTopic.vue

@@ -382,7 +382,6 @@ export default {
       this.$nextTick(() => {
         // Send a 'rendered' message to the host when new data has been patched onto the DOM.
         this.newContentMounted();
-        this.store.setReferences(this.topicProps.references);
       });
     },
   },

tests/unit/components/DocumentationTopic.spec.js

@@ -160,16 +160,18 @@ const propsData = {
 describe('DocumentationTopic', () => {
   /** @type {import('@vue/test-utils').Wrapper} */
   let wrapper;
-
+  const mockStore = {
+    state: { onThisPageSections: [], references: {} },
+    reset: jest.fn(),
+    setReferences: jest.fn(),
+  };
   beforeEach(() => {
+    jest.clearAllMocks();
     wrapper = shallowMount(DocumentationTopic, {
       propsData,
       provide: {
         isTargetIDE: false,
-        store: {
-          state: { onThisPageSections: [], references: {} },
-          reset: jest.fn(),
-        },
+        store: mockStore,
       },
     });
   });
@@ -232,10 +234,7 @@ describe('DocumentationTopic', () => {
       propsData,
       provide: {
         isTargetIDE: true,
-        store: {
-          state: { onThisPageSections: [], references: {} },
-          reset: jest.fn(),
-        },
+        store: mockStore,
       },
     });
 
@@ -316,6 +315,9 @@ describe('DocumentationTopic', () => {
         role: 'symbol',
         symbolKind: 'protocol',
       },
+      provide: {
+        store: mockStore,
+      },
     });
     const hero = wrapper.find(DocumentationHero);
     expect(hero.props()).toEqual({
@@ -641,12 +643,7 @@ describe('DocumentationTopic', () => {
   it('renders a `LanguageSwitcher` if TargetIDE', () => {
     const provide = {
       isTargetIDE: true,
-      store: {
-        state: {
-          references: {},
-        },
-        reset: jest.fn(),
-      },
+      store: mockStore,
     };
     wrapper = shallowMount(DocumentationTopic, { propsData, provide });
     const switcher = wrapper.find(LanguageSwitcher);
@@ -781,10 +778,7 @@ describe('DocumentationTopic', () => {
         SeeAlso: stubSection('see-also'),
       },
       provide: {
-        store: {
-          state: { onThisPageSections: [], references: {} },
-          reset: jest.fn(),
-        },
+        store: mockStore,
       },
     });
     const sections = wrapper.findAll('.section-stub');
@@ -866,10 +860,7 @@ describe('DocumentationTopic', () => {
         'above-title': '<div class="above-title">Above Title Content</div>',
       },
       provide: {
-        store: {
-          state: { onThisPageSections: [], references: {} },
-          reset: jest.fn(),
-        },
+        store: mockStore,
       },
     });
     expect(wrapper.find(DocumentationHero).contains('.above-title')).toBe(true);
@@ -885,10 +876,7 @@ describe('DocumentationTopic', () => {
         DocumentationHero,
       },
       provide: {
-        store: {
-          state: { onThisPageSections: [], references: {} },
-          reset: jest.fn(),
-        },
+        store: mockStore,
       },
     });
     expect(wrapper.contains('.above-hero-content')).toBe(true);
@@ -937,29 +925,38 @@ describe('DocumentationTopic', () => {
     expect(wrapper.vm.disableMetadata).toBe(true);
   });
 
+  it('sets the references, when they update in the store', () => {
+    expect(mockStore.setReferences).toHaveBeenCalledTimes(1);
+    const newReferences = {
+      foo: {},
+    };
+    wrapper.setProps({
+      references: newReferences,
+    });
+    expect(mockStore.setReferences).toHaveBeenCalledTimes(2);
+    expect(mockStore.setReferences).toHaveBeenCalledWith(newReferences);
+  });
+
   describe('lifecycle hooks', () => {
     it('calls `store.reset()`', () => {
-      const store = {
-        reset: jest.fn(),
-        state: { onThisPageSections: [], apiChanges: null, references: {} },
-      };
+      jest.clearAllMocks();
       wrapper = shallowMount(DocumentationTopic, {
         propsData,
-        provide: { store },
+        provide: { store: mockStore },
       });
-      expect(store.reset).toBeCalled();
+      expect(mockStore.reset).toBeCalled();
+      expect(mockStore.setReferences).toHaveBeenCalledTimes(1);
+      expect(mockStore.setReferences).toHaveBeenCalledWith(propsData.references);
     });
 
     it('routes to the objc variant of a page if that is the preferred language', async () => {
       const $route = { query: {} };
       const $router = { replace: jest.fn() };
       const store = {
-        reset: () => {},
+        ...mockStore,
         state: {
-          apiChanges: null,
-          onThisPageSections: [],
+          ...mockStore.state,
           preferredLanguage: Language.objectiveC.key.url,
-          references: {},
         },
       };
       wrapper = shallowMount(DocumentationTopic, {

tests/unit/components/Navigator/QuickNavigationPreview.spec.js

@@ -11,7 +11,6 @@
 import { shallowMount } from '@vue/test-utils';
 import DocumentationTopic from 'docc-render/components/DocumentationTopic.vue';
 import QuickNavigationPreview from 'docc-render/components/Navigator/QuickNavigationPreview.vue';
-import { flushPromises } from '../../../../test-utils';
 
 const { PreviewState, PreviewStore } = QuickNavigationPreview.constants;
 
@@ -53,7 +52,7 @@ describe('QuickNavigationPreview', () => {
     expect(topic.props('abstract')).toEqual(json.abstract);
   });
 
-  it('provides a new store, setting the references when the JSON changes', async () => {
+  it('provides a PreviewStore', async () => {
     const json = {
       abstract: [{ type: 'text', text: 'a' }],
       identifier: {
@@ -76,18 +75,6 @@ describe('QuickNavigationPreview', () => {
     });
     // eslint-disable-next-line no-underscore-dangle
     expect(wrapper.vm._provided).toHaveProperty('store', PreviewStore);
-    await flushPromises();
-    expect(PreviewStore.state.references).toEqual(json.references);
-    wrapper.setProps({
-      json: {
-        ...json,
-        references: {
-          c: 'c',
-        },
-      },
-    });
-    await flushPromises();
-    expect(PreviewStore.state.references).toEqual({ c: 'c' });
   });
 
   it('renders a "Preview unavailable" message for errors', () => {