2 tests change tab

src/__tests__/tests_components/LayoutPanelComp.test.ts

@@ -11,6 +11,17 @@ import HelpText from '@/components/TextComp/HelpTextComp.vue';
 import { userParamType } from '@/types/UserParamTypes';
 
 
+const getElements = ((wrapper:VueWrapper):{[key:string]:VueWrapper<any> | DOMWrapper<Element> | undefined} => {
+  const vWindowItems= wrapper.findAllComponents({ name: 'VWindowItem' });
+  return {
+    reset: wrapper.find("#reset"),
+    help: wrapper.find("#help"),
+    advancedWindowItem: vWindowItems.find(item => item.attributes('id') === 'advanced-window')
+                                    .find(".v-window-item"),
+    defaultWindowItem: vWindowItems.find(item => item.attributes('id') === 'default-window')
+                                    .find(".v-window-item"),
+  }
+});
 
 
 describe('LayoutPanel component', () => {
@@ -87,22 +98,7 @@ describe('LayoutPanel component', () => {
 
   });
 
-  it.skip('change tabs correctly', async() => {
-
-    const getElementsTabs = ((wrapper:VueWrapper):{[key:string]:VueWrapper<any> | DOMWrapper<Element> | undefined} => {
-      const vWindowItems= wrapper.findAllComponents({ name: 'VWindowItem' });
-      const vButtons= wrapper.findAllComponents({ name: 'VBtn' });
-      return {
-        reset: wrapper.find("#reset"),
-        help: wrapper.find("#help"),
-        advancedWindowItem: vWindowItems.find(item => item.attributes('id') === 'advanced-window')
-                                        .find(".v-window-item"),
-        defaultWindowItem: vWindowItems.find(item => item.attributes('id') === 'default-window')
-                                        .find(".v-window-item"),
-        defaultTabButton: vButtons.find(btn => btn.attributes('value') === 'default'),
-        advancedTabButton:vButtons.find(btn => btn.attributes('value') === 'advanced'),
-      }
-    });
+  it.skip('change tabs to default', async() => {
 
     // DATA
     const wrapper = mount(ParamLayoutManager, {
@@ -112,29 +108,41 @@ describe('LayoutPanel component', () => {
       component:[ParamDropDown,ParamRadioButton,ParamSlider,ParamSwitch,HelpText],
     });
     
-    let elements = getElementsTabs(wrapper);
+     // change tab to default
+     const vButtons= wrapper.findAllComponents({ name: 'VBtn' });
+     const defaultTabButton=vButtons.find(btn => btn.attributes('value') === 'default');
+     await defaultTabButton.trigger("click");
 
     // EXPECT
+    const elementsDefaultTab = getElements(wrapper);
+    expect(elementsDefaultTab.defaultWindowItem.isVisible()).toBe(true);
+    expect(elementsDefaultTab.advancedWindowItem.isVisible()).toBe(false);
+    expect(elementsDefaultTab.reset.isVisible()).toBe(false);
+    expect(elementsDefaultTab.help.isVisible()).toBe(false);
+
+  });
 
-    // default tabs
-    await elements.defaultTabButton.trigger("click");
-    elements = getElementsTabs(wrapper);
-    console.log(elements.defaultWindowItem.html());
-    expect(elements.defaultWindowItem.isVisible()).toBe(true);
-    expect(elements.advancedWindowItem.isVisible()).toBe(false);
-    expect(elements.reset.isVisible()).toBe(false);
-    expect(elements.help.isVisible()).toBe(false);
+  it.skip('change tabs to advanced', async() => {
 
-    console.log('------------------------------------------------\n\n');
+    // DATA
+    const wrapper = mount(ParamLayoutManager, {
+      global: {
+        plugins: [vuetify]
+      },
+      component:[ParamDropDown,ParamRadioButton,ParamSlider,ParamSwitch,HelpText],
+    });
     
-    // advanced tabs
-    await elements.advancedTabButton.trigger("click");
-    elements = getElementsTabs(wrapper);
-    console.log(elements.defaultWindowItem.html());
-    expect(elements.defaultWindowItem.isVisible()).toBe(false);
-    expect(elements.advancedWindowItem.isVisible()).toBe(true);
-    expect(elements.reset.isVisible()).toBe(true);
-    expect(elements.help.isVisible()).toBe(true);
+     // change tab to advanced
+     const vButtons= wrapper.findAllComponents({ name: 'VBtn' });
+     const advancedTabButton=vButtons.find(btn => btn.attributes('value') === 'advanced');
+     await advancedTabButton.trigger("click");
+
+    // EXPECT
+    const elementsAdvancedTab = getElements(wrapper);
+    expect(elementsAdvancedTab.defaultWindowItem.isVisible()).toBe(false);
+    expect(elementsAdvancedTab.advancedWindowItem.isVisible()).toBe(true);
+    expect(elementsAdvancedTab.reset.isVisible()).toBe(true);
+    expect(elementsAdvancedTab.help.isVisible()).toBe(true);
 
   });
 
@@ -142,7 +150,7 @@ describe('LayoutPanel component', () => {
   
   });
 
-  it.only('has all the parameter components (depending on certain parameters)', async()=>{
+  it.todo('has all the parameter components (depending on certain parameters)', async()=>{
         // DATA
         const wrapper = mount(ParamLayoutManager, {
           global: {
@@ -173,9 +181,19 @@ describe('LayoutPanel component', () => {
         // EXPECT
         expect(allParamComp.length).toEqual(6);  // there is 6 parameters 
         expect(numberParamVisible).toEqual(6); // all visible
-        const sideCompoundParam=paramDropDown.find(comp => comp.props('name') === 'Treatment of side compounds');
-        console.log(sideCompoundParam.exists());
-        console.log(wrapper.find("#testID").exists());
+
+        // change step side compound
+        const sideCompoundParam=wrapper.findAllComponents(ParamDropDown)
+                                        .find(comp=> comp.attributes('id')=="side_compound_step_param");
+        // const edgeSideCompoundParam=wrapper.findAllComponents(ParamSlider)
+        //                                 .find(comp=> comp.attributes('id')=="edge_length_side_compound_param");
+        // console.log(edgeSideCompoundParam.isVisible());
+        sideCompoundParam.setValue({ modelValue: "Duplication" });
+        console.log(wrapper.html());
+        // const edgeSideCompoundParamAfter=wrapper.findAllComponents(ParamSlider)
+        // .find(comp=> comp.attributes('id')=="edge_length_side_compound_param");
+        // console.log(edgeSideCompoundParamAfter.isVisible());
+
   
   });
 

src/components/LayoutPanelComp.vue

@@ -97,14 +97,14 @@
             <!--Side compounds-->
 
             <div class="my-3">
-              <ParamDropDown id="testID" v-model="parameters.sideCompoundUser" name="Treatment of side compounds" :items="itemStepSideCompounds"/>
+              <ParamDropDown id="side_compound_step_param" v-model="parameters.sideCompoundUser" name="Treatment of side compounds" :items="itemStepSideCompounds"/>
               <HelpText :show-help="showHelp">
                 Nodes defined as side compounds are treated according to the selected step : they can be duplicated, removed, or a specific layout can be applied (duplication and specific placement).
               </HelpText>
             </div>
             
-            <div v-if="applyMotif" class="my-3"> 
-            <ParamSlider v-model="parameters.factorLengthSideCompoundsUser" name="Side compound edges lenght" :choices="choicesEdgesSideCompounds"/>
+            <div v-show="applyMotif" class="my-3"> 
+            <ParamSlider id="edge_length_side_compound_param" v-model="parameters.factorLengthSideCompoundsUser" name="Side compound edges lenght" :choices="choicesEdgesSideCompounds"/>
             <HelpText :show-help="showHelp">
               The length of the side compound edge is at most the minimum length of edges that are not connected to side compounds, as it should always be shorter.
             </HelpText>