Fix bug preventing navigation to page after toggling language

src/views/DocumentationTopic.vue

@@ -13,7 +13,7 @@
     <Topic
       v-if="topicData"
       v-bind="topicProps"
-      :key="topicProps.identifier + topicProps.interfaceLanguage"
+      :key="topicKey"
     />
   </CodeTheme>
 </template>
@@ -66,6 +66,10 @@ export default {
         this.topicDataDefault = data;
       },
     },
+    topicKey: ({ $route, topicProps }) => [
+      $route.path,
+      topicProps.interfaceLanguage,
+    ].join(),
     topicProps() {
       const {
         abstract,
@@ -126,6 +130,9 @@ export default {
     },
   },
   methods: {
+    applyObjcOverrides() {
+      this.topicDataObjc = apply(clone(this.topicData), this.objcOverrides);
+    },
     handleCodeColorsChange(codeColors) {
       CodeThemeStore.updateCodeColors(codeColors);
     },
@@ -148,19 +155,22 @@ export default {
     fetchDataForRouteEnter(to, from, next).then(data => next((vm) => {
       vm.topicData = data; // eslint-disable-line no-param-reassign
       if (to.query.language === Language.objectiveC.key.url && vm.objcOverrides) {
-        // eslint-disable-next-line no-param-reassign
-        vm.topicDataObjc = apply(clone(vm.topicData), vm.objcOverrides);
+        vm.applyObjcOverrides();
       }
     })).catch(next);
   },
   beforeRouteUpdate(to, from, next) {
-    if (to.query.language === Language.objectiveC.key.url && this.objcOverrides) {
-      this.topicDataObjc = apply(clone(this.topicData), this.objcOverrides);
+    if (to.path === from.path && to.query.language === Language.objectiveC.key.url
+      && this.objcOverrides) {
+      this.applyObjcOverrides();
       next();
     } else if (shouldFetchDataForRouteUpdate(to, from)) {
       fetchDataForRouteEnter(to, from, next).then((data) => {
         this.topicDataObjc = null;
         this.topicData = data;
+        if (to.query.language === Language.objectiveC.key.url && this.objcOverrides) {
+          this.applyObjcOverrides();
+        }
         next();
       }).catch(next);
     } else {

src/views/Topic.vue

@@ -14,7 +14,7 @@
       v-if="topicData"
       v-bind="propsFor(topicData)"
       :is="componentFor(topicData)"
-      :key="topicData.identifier.url"
+      :key="topicKey"
       :hierarchy="hierarchy"
     />
   </div>
@@ -69,6 +69,10 @@ export default {
         technologyNavigation,
       };
     },
+    topicKey: ({ $route, topicData }) => [
+      $route.path,
+      topicData.identifier.interfaceLanguage,
+    ].join(),
   },
   beforeRouteEnter(to, from, next) {
     fetchDataForRouteEnter(to, from, next).then(data => next((vm) => {

src/views/TutorialsOverview.vue

@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <Overview v-if="topicData" v-bind="overviewProps" />
+  <Overview v-if="topicData" v-bind="overviewProps" :key="topicKey" />
 </template>
 
 <script>
@@ -40,6 +40,10 @@ export default {
       references,
       sections,
     }),
+    topicKey: ({ $route, topicData }) => [
+      $route.path,
+      topicData.identifier.interfaceLanguage,
+    ].join(),
   },
   beforeRouteEnter(to, from, next) {
     fetchDataForRouteEnter(to, from, next).then(data => next((vm) => {

tests/unit/views/DocumentationTopic.spec.js

@@ -13,6 +13,7 @@ import { shallowMount } from '@vue/test-utils';
 import DocumentationTopic from 'docc-render/views/DocumentationTopic.vue';
 import DocumentationTopicStore from 'docc-render/stores/DocumentationTopicStore';
 import onPageLoadScrollToFragment from 'docc-render/mixins/onPageLoadScrollToFragment';
+import { flushPromises } from '../../../test-utils';
 
 jest.mock('docc-render/mixins/onPageLoadScrollToFragment');
 
@@ -183,4 +184,40 @@ describe('DocumentationTopic', () => {
     expect(dataUtils.fetchDataForRouteEnter).not.toBeCalled();
     expect(next).toBeCalled();
   });
+
+  it('loads new data and applies ObjC data when provided as overrides', async () => {
+    const newInterfaceLang = 'occ';
+    const variantOverrides = [
+      {
+        traits: [{ interfaceLanguage: newInterfaceLang }],
+        patch: [
+          { op: 'replace', path: '/identifier/interfaceLanguage', value: newInterfaceLang },
+        ],
+      },
+    ];
+    const newTopicData = {
+      ...topicData,
+      variantOverrides,
+    };
+
+    dataUtils.fetchDataForRouteEnter = jest.fn().mockResolvedValue(newTopicData);
+    wrapper.setData({ topicData });
+
+    const to = {
+      path: '/documentation/bar',
+      query: { language: 'objc' },
+    };
+    const from = mocks.$route;
+    const next = jest.fn();
+    // there is probably a more realistic way to simulate this
+    DocumentationTopic.beforeRouteUpdate.call(wrapper.vm, to, from, next);
+    await flushPromises();
+
+    // check that the provided override data has been applied after updating the
+    // route with the "language=objc" query param and ensure that new data has
+    // been fetched
+    expect(dataUtils.fetchDataForRouteEnter).toBeCalled();
+    expect(wrapper.vm.topicData.identifier.interfaceLanguage).toBe(newInterfaceLang);
+    expect(next).toBeCalled();
+  });
 });

tests/unit/views/Topic.spec.js

@@ -73,6 +73,7 @@ describe('Topic', () => {
     wrapper.setData({
       topicData: {
         identifier: {
+          interfaceLanguage: 'swift',
           url: 'foo',
         },
       },
@@ -103,6 +104,7 @@ describe('Topic', () => {
     wrapper.setData({
       topicData: {
         identifier: {
+          interfaceLanguage: 'swift',
           url: 'foo',
         },
       },
@@ -146,6 +148,7 @@ describe('Topic', () => {
           ...props,
           kind: 'article',
           identifier: {
+            interfaceLanguage: 'swift',
             url: 'foo',
           },
         },
@@ -209,6 +212,7 @@ describe('Topic', () => {
           ...props,
           kind: 'project',
           identifier: {
+            interfaceLanguage: 'swift',
             url: 'foo',
           },
         },

tests/unit/views/TutorialsOverview.spec.js

@@ -29,6 +29,10 @@ describe('TutorialsOverview', () => {
 
   it('renders an `Overview` with data', () => {
     const topicData = {
+      identifier: {
+        interfaceLanguage: 'swift',
+        url: '/tutorials/swiftui',
+      },
       metadata: {},
       references: {},
       sections: [],