only show decl diff when list is collapsed (#829) rdar://127126248

only show decl diff when list is collapsed (#829) rdar://127126248

Author: hqhhuang

src/components/DocumentationTopic/PrimaryContent/Declaration.vue

@@ -10,15 +10,15 @@
 
 <template>
   <section class="declaration">
-    <template v-if="hasModifiedChanges">
+    <template v-if="hasModifiedChanges && !isExpanded">
       <DeclarationDiff
         :class="[changeClasses, multipleLinesClass]"
         :changes="declarationChanges"
         :changeType="changeType"
       />
     </template>
     <template v-else>
-      <DeclarationGroup
+      <DeclarationList
         v-for="(declaration, i) in declarations"
         :class="changeClasses"
         :key="i"
@@ -45,8 +45,8 @@
 import ConditionalConstraints
   from 'docc-render/components/DocumentationTopic/ConditionalConstraints.vue';
 
-import DeclarationGroup
-  from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationGroup.vue';
+import DeclarationList
+  from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationList.vue';
 import DeclarationDiff
   from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationDiff.vue';
 import DeclarationSourceLink
@@ -59,7 +59,7 @@ export default {
   name: 'Declaration',
   components: {
     DeclarationDiff,
-    DeclarationGroup,
+    DeclarationList,
     DeclarationSourceLink,
     ConditionalConstraints,
   },

src/components/DocumentationTopic/PrimaryContent/DeclarationDiff.vue

@@ -12,7 +12,7 @@
   <div class="declaration-diff">
     <div class="declaration-diff-current">
       <div class="declaration-diff-version">Current</div>
-      <DeclarationGroup
+      <DeclarationList
         v-for="(declaration, i) in currentDeclarations"
         :key="i"
         :declaration="declaration"
@@ -22,7 +22,7 @@
     </div>
     <div class="declaration-diff-previous">
       <div class="declaration-diff-version">Previous</div>
-      <DeclarationGroup
+      <DeclarationList
         v-for="(declaration, i) in previousDeclarations"
         :key="i"
         :declaration="declaration"
@@ -34,14 +34,14 @@
 </template>
 
 <script>
-import DeclarationGroup from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationGroup.vue';
+import DeclarationList from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationList.vue';
 
 /**
  * Renders a diff container around two DeclarationGroup components.
  */
 export default {
   name: 'DeclarationDiff',
-  components: { DeclarationGroup },
+  components: { DeclarationList },
   props: {
     /**
      * The apiChanges object from the store.

src/components/DocumentationTopic/PrimaryContent/DeclarationGroup.vue renamed to src/components/DocumentationTopic/PrimaryContent/DeclarationList.vue

@@ -19,7 +19,7 @@ import DeclarationSourceLink
 
 const {
   ConditionalConstraints,
-  DeclarationGroup,
+  DeclarationList,
 } = Declaration.components;
 
 const { ChangeTypes } = Declaration.constants;
@@ -72,14 +72,14 @@ describe('Declaration', () => {
     expect(wrapper.is('section.declaration')).toBe(true);
   });
 
-  it('renders 1 `DeclarationGroup` and 0 labels without multiple declarations', () => {
-    const declarationGroups = wrapper.findAll(DeclarationGroup);
-    expect(declarationGroups).toHaveLength(1);
-    expect(declarationGroups.at(0).props('shouldCaption')).toEqual(false);
+  it('renders 1 `DeclarationList` and 0 labels without multiple declarations', () => {
+    const declarationLists = wrapper.findAll(DeclarationList);
+    expect(declarationLists).toHaveLength(1);
+    expect(declarationLists.at(0).props('shouldCaption')).toEqual(false);
   });
 
-  it('renders a `DeclarationGroup`', () => {
-    const group = wrapper.find(DeclarationGroup);
+  it('renders a `DeclarationList`', () => {
+    const group = wrapper.find(DeclarationList);
     expect(group.exists()).toBe(true);
     expect(group.props('declaration')).toEqual(propsData.declarations[0]);
     expect(group.props()).toHaveProperty('declListExpanded', false);
@@ -155,13 +155,13 @@ describe('Declaration', () => {
 
     wrapper.setProps({ declarations });
 
-    const labels = wrapper.findAll(DeclarationGroup);
+    const labels = wrapper.findAll(DeclarationList);
     expect(labels.length).toBe(declarations.length);
     expect(labels.at(0).props('shouldCaption')).toBe(true);
     expect(labels.at(1).props('shouldCaption')).toBe(true);
   });
 
-  it('renders a `DeclarationDiff` when there are API changes for current and previous', () => {
+  it('renders a `DeclarationDiff` when there are API changes for current and previous and collapsed other declaration list', () => {
     // no DeclarationDiff if no changes
     expect(wrapper.find(DeclarationDiff).exists()).toBe(false);
     // there is no `.changed` class applied by default
@@ -191,9 +191,14 @@ describe('Declaration', () => {
     });
     expect(declarationDiff.classes()).toContain('changed');
     expect(declarationDiff.classes()).toContain('changed-modified');
+
+    wrapper.setProps({
+      declListExpanded: true,
+    });
+    expect(wrapper.find(DeclarationDiff).exists()).toBe(false);
   });
 
-  it('renders a `DeclarationGroup` for `added` change type', () => {
+  it('renders a `DeclarationList` for `added` change type', () => {
     const provide = provideFactory({
       [identifier]: {
         change: ChangeTypes.added,
@@ -210,14 +215,14 @@ describe('Declaration', () => {
 
     expect(wrapper.find(DeclarationDiff).exists()).toBe(false);
 
-    const declarationGroup = wrapper.find(DeclarationGroup);
-    expect(declarationGroup.props('changeType')).toBe(ChangeTypes.added);
-    expect(declarationGroup.props('declaration')).toBe(propsData.declarations[0]);
-    expect(declarationGroup.classes()).toContain('changed');
-    expect(declarationGroup.classes()).toContain('changed-added');
+    const declarationList = wrapper.find(DeclarationList);
+    expect(declarationList.props('changeType')).toBe(ChangeTypes.added);
+    expect(declarationList.props('declaration')).toBe(propsData.declarations[0]);
+    expect(declarationList.classes()).toContain('changed');
+    expect(declarationList.classes()).toContain('changed-added');
   });
 
-  it('renders a `DeclarationGroup` for `deprecated` change type', () => {
+  it('renders a `DeclarationList` for `deprecated` change type', () => {
     const provide = provideFactory({
       [identifier]: {
         change: ChangeTypes.deprecated,
@@ -234,11 +239,11 @@ describe('Declaration', () => {
 
     expect(wrapper.find(DeclarationDiff).exists()).toBe(false);
 
-    const declarationGroup = wrapper.find(DeclarationGroup);
-    expect(declarationGroup.props('changeType')).toBe(ChangeTypes.deprecated);
-    expect(declarationGroup.props('declaration')).toBe(propsData.declarations[0]);
-    expect(declarationGroup.classes()).toContain('changed');
-    expect(declarationGroup.classes()).toContain('changed-deprecated');
+    const declarationList = wrapper.find(DeclarationList);
+    expect(declarationList.props('changeType')).toBe(ChangeTypes.deprecated);
+    expect(declarationList.props('declaration')).toBe(propsData.declarations[0]);
+    expect(declarationList.classes()).toContain('changed');
+    expect(declarationList.classes()).toContain('changed-deprecated');
   });
 
   it('applies only `added` type change class if no declarations are present in the diff ', () => {
@@ -255,10 +260,10 @@ describe('Declaration', () => {
 
     expect(wrapper.find(DeclarationDiff).exists()).toBe(false);
 
-    const declarationGroup = wrapper.find(DeclarationGroup);
-    expect(declarationGroup.props('changeType')).toBe(ChangeTypes.added);
-    expect(declarationGroup.props('declaration')).toBe(propsData.declarations[0]);
-    expect(declarationGroup.classes()).toContain('changed');
-    expect(declarationGroup.classes()).toContain('changed-added');
+    const declarationList = wrapper.find(DeclarationList);
+    expect(declarationList.props('changeType')).toBe(ChangeTypes.added);
+    expect(declarationList.props('declaration')).toBe(propsData.declarations[0]);
+    expect(declarationList.classes()).toContain('changed');
+    expect(declarationList.classes()).toContain('changed-added');
   });
 });

tests/unit/components/DocumentationTopic/PrimaryContent/Declaration.spec.js

@@ -10,7 +10,7 @@
 
 import DeclarationDiff from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationDiff.vue';
 import { shallowMount } from '@vue/test-utils';
-import DeclarationGroup from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationGroup.vue';
+import DeclarationList from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationList.vue';
 
 const propsData = {
   changeType: 'modified',
@@ -24,7 +24,7 @@ const propsData = {
 };
 
 describe('DeclarationDiff', () => {
-  it('renders a current and previous DeclarationGroup components', () => {
+  it('renders a current and previous DeclarationList components', () => {
     const wrapper = shallowMount(DeclarationDiff, {
       propsData,
     });
@@ -33,26 +33,26 @@ describe('DeclarationDiff', () => {
     expect(labels.at(0).text()).toEqual('Current');
     expect(labels.at(1).text()).toEqual('Previous');
 
-    const currentGroups = wrapper.find('.declaration-diff-current').findAll(DeclarationGroup);
+    const currentLists = wrapper.find('.declaration-diff-current').findAll(DeclarationList);
 
-    expect(currentGroups).toHaveLength(2);
-    expect(currentGroups.at(0).props()).toEqual({
+    expect(currentLists).toHaveLength(2);
+    expect(currentLists.at(0).props()).toEqual({
       declaration: propsData.changes.declaration.new[0],
       shouldCaption: true,
       changeType: 'modified',
       declListExpanded: false,
     });
-    expect(currentGroups.at(1).props()).toEqual({
+    expect(currentLists.at(1).props()).toEqual({
       declaration: propsData.changes.declaration.new[1],
       shouldCaption: true,
       changeType: 'modified',
       declListExpanded: false,
     });
 
-    const previousGroups = wrapper.find('.declaration-diff-previous').findAll(DeclarationGroup);
+    const previousLists = wrapper.find('.declaration-diff-previous').findAll(DeclarationList);
 
-    expect(previousGroups).toHaveLength(1);
-    expect(previousGroups.at(0).props()).toEqual({
+    expect(previousLists).toHaveLength(1);
+    expect(previousLists.at(0).props()).toEqual({
       declaration: propsData.changes.declaration.previous[0],
       shouldCaption: false, // false because we only have one declaration in the group
       changeType: 'modified',

tests/unit/components/DocumentationTopic/PrimaryContent/DeclarationDiff.spec.js

@@ -8,7 +8,7 @@
  * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
 */
 
-import DeclarationGroup from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationGroup.vue';
+import DeclarationList from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationList.vue';
 import { shallowMount } from '@vue/test-utils';
 import DeclarationSource
   from 'docc-render/components/DocumentationTopic/PrimaryContent/DeclarationSource.vue';
@@ -79,13 +79,13 @@ const provide = {
   store,
 };
 
-const createWrapper = options => shallowMount(DeclarationGroup, {
+const createWrapper = options => shallowMount(DeclarationList, {
   propsData,
   provide,
   ...options,
 });
 
-describe('DeclarationGroup', () => {
+describe('DeclarationList', () => {
   it('renders a platforms label for each variant', () => {
     const wrapper = createWrapper();
 
@@ -131,9 +131,9 @@ describe('DeclarationGroup', () => {
 
   it('applies the `multipleLinesClass` class if `displaysMultipleLinesAfterAPIChanges` is true', () => {
     const wrapper = shallowMount({
-      ...DeclarationGroup,
+      ...DeclarationList,
       computed: {
-        ...DeclarationGroup.computed,
+        ...DeclarationList.computed,
         displaysMultipleLinesAfterAPIChanges: () => true,
       },
     },
@@ -146,7 +146,7 @@ describe('DeclarationGroup', () => {
   });
 });
 
-describe('DeclarationGroup with otherDeclarations', () => {
+describe('DeclarationList with otherDeclarations', () => {
   let wrapper;
 
   beforeEach(() => {