Create a mixin for the index data getting logic (#895) rdar://136089361

hqhhuang · web-flow · commit 97c6c6999099 · 2024-09-23T11:12:57.000-07:00
diff --git a/src/components/DocumentationLayout.vue b/src/components/DocumentationLayout.vue
@@ -40,7 +40,7 @@
             <div class="documentation-layout-aside">
               <QuickNavigationModal
                 v-if="enableQuickNavigation"
-                :children="quickNavNodes"
+                :children="indexNodes"
                 :showQuickNavigationModal.sync="showQuickNavigationModal"
                 :technology="technology ? technology.title : ''"
               />
@@ -83,12 +83,11 @@ import QuickNavigationModal from 'docc-render/components/Navigator/QuickNavigati
 import AdjustableSidebarWidth from 'docc-render/components/AdjustableSidebarWidth.vue';
 import Navigator from 'docc-render/components/Navigator.vue';
 import onPageLoadScrollToFragment from 'docc-render/mixins/onPageLoadScrollToFragment';
-import Language from 'docc-render/constants/Language';
 import { BreakpointName } from 'docc-render/utils/breakpoints';
 import { storage } from 'docc-render/utils/storage';
 import { getSetting } from 'docc-render/utils/theme-settings';
 
-import IndexStore from 'docc-render/stores/IndexStore';
+import indexDataGetter from 'docc-render/mixins/indexDataGetter';
 import NavigatorDataProvider from 'theme/components/Navigator/NavigatorDataProvider.vue';
 import DocumentationNav from 'theme/components/DocumentationTopic/DocumentationNav.vue';
 
@@ -106,7 +105,7 @@ export default {
     QuickNavigationModal,
     PortalTarget,
   },
-  mixins: [onPageLoadScrollToFragment],
+  mixins: [onPageLoadScrollToFragment, indexDataGetter],
   props: {
     enableNavigator: Boolean,
     diffAvailability: {
@@ -152,16 +151,12 @@ export default {
       sidenavHiddenOnLarge: storage.get(NAVIGATOR_HIDDEN_ON_LARGE_KEY, false),
       showQuickNavigationModal: false,
       BreakpointName,
-      indexState: IndexStore.state,
     };
   },
   computed: {
     enableQuickNavigation: ({ isTargetIDE }) => (
       !isTargetIDE && getSetting(['features', 'docs', 'quickNavigation', 'enable'], true)
     ),
-    quickNavNodes({ indexState: { flatChildren = {} }, interfaceLanguage }) {
-      return flatChildren[interfaceLanguage] ?? (flatChildren[Language.swift.key.url] || []);
-    },
     sidebarProps: ({
       sidenavVisibleOnMobile, enableNavigator, sidenavHiddenOnLarge, navigatorFixedWidth,
     }) => (
diff --git a/src/mixins/indexDataFetcher.js b/src/mixins/indexDataFetcher.js
diff --git a/src/mixins/indexDataGetter.js b/src/mixins/indexDataGetter.js
@@ -0,0 +1,52 @@
+/**
+ * This source file is part of the Swift.org open source project
+ *
+ * Copyright (c) 2024 Apple Inc. and the Swift project authors
+ * Licensed under Apache License v2.0 with Runtime Library Exception
+ *
+ * See https://swift.org/LICENSE.txt for license information
+ * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+*/
+import IndexStore from 'docc-render/stores/IndexStore';
+import Language from 'docc-render/constants/Language';
+
+export default {
+  computed: {
+    indexNodes({ indexState: { flatChildren }, interfaceLanguage }) {
+      if (!flatChildren) return [];
+      return flatChildren[interfaceLanguage] ?? (flatChildren[Language.swift.key.url] || []);
+    },
+    technologyProps({ indexState: { technologyProps }, interfaceLanguage, technology }) {
+      // Select technology props from fetched index data for the current language, fallback to swift
+      // If none available, fallback to technology data of the curr page or null
+      return technologyProps[interfaceLanguage] ?? technologyProps[Language.swift.key.url]
+        ?? (technology ? {
+          technology: technology.title,
+          technologyPath: technology.path || technology.url,
+          isTechnologyBeta: technology.beta,
+        } : null);
+    },
+    navigatorProps: ({
+      indexNodes,
+      indexState: {
+        flatChildren,
+        references,
+        apiChanges,
+        errorFetching,
+      },
+      technologyProps,
+    }) => ({
+      flatChildren: indexNodes,
+      navigatorReferences: references,
+      apiChanges,
+      isFetching: !flatChildren && !errorFetching,
+      errorFetching,
+      technologyProps,
+    }),
+  },
+  data() {
+    return {
+      indexState: IndexStore.state,
+    };
+  },
+};
diff --git a/src/stores/IndexStore.js b/src/stores/IndexStore.js
@@ -10,15 +10,15 @@
 
 export default {
   state: {
-    flatChildren: {},
+    flatChildren: null,
     references: {},
     apiChanges: null,
     includedArchiveIdentifiers: [],
     errorFetching: false,
     technologyProps: {},
   },
   reset() {
-    this.state.flatChildren = {};
+    this.state.flatChildren = null;
     this.state.references = {};
     this.state.apiChanges = null;
     this.state.includedArchiveIdentifiers = [];
diff --git a/src/views/DocumentationTopic.vue b/src/views/DocumentationTopic.vue
@@ -54,7 +54,7 @@ import {
 import DocumentationTopic from 'theme/components/DocumentationTopic.vue';
 import DocumentationLayout from 'docc-render/components/DocumentationLayout.vue';
 import DocumentationTopicStore from 'docc-render/stores/DocumentationTopicStore';
-import indexProvider from 'theme/mixins/indexProvider';
+import indexDataFetcher from 'theme/mixins/indexDataFetcher';
 import Language from 'docc-render/constants/Language';
 import OnThisPageRegistrator from 'docc-render/mixins/onThisPageRegistrator';
 import { updateLocale } from 'theme/utils/i18n-utils';
@@ -75,7 +75,7 @@ export default {
     Topic: DocumentationTopic,
     DocumentationLayout,
   },
-  mixins: [OnThisPageRegistrator, communicationBridgeUtils, indexProvider],
+  mixins: [OnThisPageRegistrator, communicationBridgeUtils, indexDataFetcher],
   props: {
     enableMinimized: {
       type: Boolean,
diff --git a/tests/unit/mixins/__snapshots__/indexDataFetcher.spec.js.snap b/tests/unit/mixins/__snapshots__/indexDataFetcher.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`indexProvider counts the amount of deprecated items a groupMarker has 1`] = `
+exports[`indexDataFetcher counts the amount of deprecated items a groupMarker has 1`] = `
 Object {
   "swift": Array [
     Object {
@@ -139,7 +139,7 @@ Object {
 }
 `;
 
-exports[`indexProvider removes the \`beta\` flag from children, if the parent is a \`beta\` 1`] = `
+exports[`indexDataFetcher removes the \`beta\` flag from children, if the parent is a \`beta\` 1`] = `
 Object {
   "swift": Array [
     Object {
@@ -277,7 +277,7 @@ Object {
 }
 `;
 
-exports[`indexProvider removes the \`beta\` flag from children, if the parent is a \`beta\` 2`] = `
+exports[`indexDataFetcher removes the \`beta\` flag from children, if the parent is a \`beta\` 2`] = `
 Object {
   "swift": Array [
     Object {
diff --git a/tests/unit/mixins/indexDataFetcher.spec.js b/tests/unit/mixins/indexDataFetcher.spec.js
@@ -7,7 +7,7 @@
  * See https://swift.org/LICENSE.txt for license information
  * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
 */
-import indexProvider from 'docc-render/mixins/indexProvider';
+import indexDataFetcher from 'docc-render/mixins/indexDataFetcher';
 import IndexStore from 'docc-render/stores/IndexStore';
 import { shallowMount } from '@vue/test-utils';
 import { fetchData } from 'docc-render/utils/data';
@@ -173,12 +173,12 @@ fetchData.mockReturnValue(response);
 const Component = {
   name: 'MyComponent',
   template: '<div/>',
-  mixins: [indexProvider],
+  mixins: [indexDataFetcher],
 };
 
 const createWrapper = ({ mocks } = {}) => shallowMount(Component, { mocks });
 
-describe('indexProvider', () => {
+describe('indexDataFetcher', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -187,7 +187,7 @@ describe('indexProvider', () => {
     IndexStore.reset();
   });
 
-  it('fetches data when parent component imports `indexProvider`', async () => {
+  it('fetches data when parent component imports `indexDataFetcher`', async () => {
     expect(fetchData).toHaveBeenCalledTimes(0);
     const wrapper = createWrapper({
       mocks: {
@@ -230,7 +230,7 @@ describe('indexProvider', () => {
     expect(fetchData).toHaveBeenCalledTimes(1);
     await flushPromises();
     expect(IndexStore.state).toEqual({
-      flatChildren: {},
+      flatChildren: null,
       references: {},
       apiChanges: null,
       includedArchiveIdentifiers: [],
diff --git a/tests/unit/mixins/indexDataGetter.spec.js b/tests/unit/mixins/indexDataGetter.spec.js
@@ -0,0 +1,177 @@
+/**
+ * This source file is part of the Swift.org open source project
+ *
+ * Copyright (c) 2024 Apple Inc. and the Swift project authors
+ * Licensed under Apache License v2.0 with Runtime Library Exception
+ *
+ * See https://swift.org/LICENSE.txt for license information
+ * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+*/
+import { shallowMount } from '@vue/test-utils';
+import Language from 'docc-render/constants/Language';
+import indexDataGetter from 'docc-render/mixins/indexDataGetter';
+import IndexStore from 'docc-render/stores/IndexStore';
+
+const swiftIndex = [{
+  id: 'foo',
+  path: '/documentation/swift',
+  children: [1, 2, 3],
+}];
+
+const objectiveCIndex = [{
+  id: 'foo-objc',
+  path: '/documentation/objc',
+  children: [1],
+}];
+
+const references = {
+  foo: { identifier: 'foo' },
+  bar: { identifier: 'bar' },
+};
+
+const apiChanges = {
+  interfaceLanguages: {
+    [Language.swift.key.url]: [],
+  },
+};
+
+const includedArchiveIdentifiers = ['foo', 'bar'];
+
+const swiftProps = {
+  technology: 'swift',
+  technologyPath: '/documentation/swift',
+  isTechnologyBeta: false,
+};
+
+const objectiveCProps = {
+  technology: 'objective-c',
+  technologyPath: '/documentation/objc',
+  isTechnologyBeta: false,
+};
+
+const mockState = () => ({
+  flatChildren: {
+    [Language.swift.key.url]: swiftIndex,
+  },
+  references,
+  apiChanges,
+  includedArchiveIdentifiers,
+  errorFetching: false,
+  technologyProps: {
+    [Language.swift.key.url]: swiftProps,
+  },
+});
+
+const Component = {
+  name: 'MyComponent',
+  template: '<div/>',
+  mixins: [indexDataGetter],
+  props: {
+    interfaceLanguage: {
+      type: String,
+      required: false,
+    },
+    technology: {
+      type: Object,
+      required: false,
+    },
+  },
+};
+
+const technology = {
+  title: 'title',
+  path: '/documentation/boo',
+};
+
+const createWrapper = () => shallowMount(Component, {
+  propsData: {
+    interfaceLanguage: Language.swift.key.url,
+    technology,
+  },
+});
+
+describe('indexDataGetter', () => {
+  it('selects correct language variant when it exists`', async () => {
+    IndexStore.state = mockState();
+    const wrapper = createWrapper();
+    expect(wrapper.vm.indexNodes).toEqual(swiftIndex);
+    expect(wrapper.vm.technologyProps).toEqual(swiftProps);
+
+    wrapper.setData({
+      indexState: {
+        flatChildren: {
+          [Language.objectiveC.key.url]: objectiveCIndex,
+        },
+        technologyProps: {
+          [Language.objectiveC.key.url]: objectiveCProps,
+        },
+      },
+    });
+    wrapper.setProps({
+      interfaceLanguage: Language.objectiveC.key.url,
+    });
+    expect(wrapper.vm.indexNodes).toEqual(objectiveCIndex);
+    expect(wrapper.vm.technologyProps).toEqual(objectiveCProps);
+  });
+
+  it('selects swift variant when language is objc but its data does not exist`', async () => {
+    IndexStore.state = mockState();
+    const wrapper = createWrapper();
+    wrapper.setProps({
+      interfaceLanguage: Language.objectiveC.key.url,
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.indexNodes).toEqual(swiftIndex);
+    expect(wrapper.vm.technologyProps).toEqual(swiftProps);
+  });
+
+  it('when no index data is unavailable through IndexStore, fallback to technology provided in prop`', () => {
+    IndexStore.state = {
+      ...mockState(),
+      flatChildren: {},
+      technologyProps: {},
+    };
+    const wrapper = createWrapper();
+    expect(wrapper.vm.indexNodes).toEqual([]);
+    // fallback to technology if provided thru prop
+    expect(wrapper.vm.technologyProps).toEqual({
+      technology: technology.title,
+      technologyPath: technology.path,
+      isTechnologyBeta: technology.beta,
+    });
+
+    wrapper.setProps({
+      technology: null,
+    });
+    expect(wrapper.vm.indexNodes).toEqual([]);
+    // if not provided, set to null
+    expect(wrapper.vm.technologyProps).toEqual(null);
+  });
+
+  it('computes the correct fetching status`', () => {
+    IndexStore.state = {
+      ...mockState(),
+      flatChildren: null,
+      errorFetching: true,
+    };
+    const wrapper = createWrapper();
+    // not `isFetching` if no fetched data and there was an error
+    expect(wrapper.vm.navigatorProps.isFetching).toBe(false);
+
+    // fetching if no fetched data and no error
+    wrapper.setData({
+      indexState: {
+        errorFetching: false,
+      },
+    });
+    expect(wrapper.vm.navigatorProps.isFetching).toBe(true);
+
+    // not fetching if fetched data is not null
+    wrapper.setData({
+      indexState: {
+        flatChildren: {},
+      },
+    });
+    expect(wrapper.vm.navigatorProps.isFetching).toBe(false);
+  });
+});
diff --git a/tests/unit/stores/IndexStore.spec.js b/tests/unit/stores/IndexStore.spec.js
