Initial commit

lib/assets/test/spec/new-dashboard/unit/specs/components/Dropdowns/CopyDropdown.spec.js

@@ -0,0 +1,143 @@
+import { shallowMount } from '@vue/test-utils';
+import CopyDropdown from 'new-dashboard/components/Dropdowns/CopyDropdown';
+
+const $t = key => key;
+
+describe('CopyDropdown.vue', () => {
+  describe('properties', () => {
+    it('should render correct contents', () => {
+      const copyDropdown = shallowMount(CopyDropdown, {
+        propsData: {
+          textToCopy: 'This is a test',
+          isVisible: true
+        },
+        mocks: {
+          $t
+        }
+      });
+      expect(copyDropdown).toMatchSnapshot();
+    });
+
+    it('should show confirmation message when data is copied', () => {
+      document.execCommand = key => true;
+      const copyDropdown = shallowMount(CopyDropdown, {
+        propsData: {
+          textToCopy: 'This is a test',
+          isVisible: true
+        },
+        mocks: {
+          $t
+        }
+      });
+
+      copyDropdown.vm.copyName();
+
+      expect(copyDropdown.vm.copySuccessful).toBe(true);
+      expect(copyDropdown).toMatchSnapshot();
+    });
+
+    it('should not show confirmation message if data is not copied', () => {
+      document.execCommand = key => false;
+      const copyDropdown = shallowMount(CopyDropdown, {
+        propsData: {
+          textToCopy: 'This is a test',
+          isVisible: true
+        },
+        mocks: {
+          $t
+        }
+      });
+
+      copyDropdown.vm.copyName();
+
+      expect(copyDropdown.vm.copySuccessful).toBe(false);
+      expect(copyDropdown).toMatchSnapshot();
+    });
+
+    it('should handle an error in execCommand', () => {
+      document.execCommand = false;
+      const copyDropdown = shallowMount(CopyDropdown, {
+        propsData: {
+          textToCopy: 'This is a test',
+          isVisible: true
+        },
+        mocks: {
+          $t
+        }
+      });
+
+      copyDropdown.vm.copyName();
+
+      expect(copyDropdown.vm.copySuccessful).toBe(false);
+      expect(copyDropdown).toMatchSnapshot();
+    });
+
+    it('should hide the dropdown if isVisible is set to false', () => {
+      const copyDropdown = shallowMount(CopyDropdown, {
+        propsData: {
+          textToCopy: 'This is a test',
+          isVisible: true
+        },
+        mocks: {
+          $t
+        }
+      });
+
+      copyDropdown.vm.isVisible = false;
+
+      expect(copyDropdown).toMatchSnapshot();
+    });
+
+    it('should show copy message again after the method resetDropdown is called', () => {
+      document.execCommand = key => true;
+      const copyDropdown = shallowMount(CopyDropdown, {
+        propsData: {
+          textToCopy: 'This is a test',
+          isVisible: true
+        },
+        mocks: {
+          $t
+        }
+      });
+
+      copyDropdown.vm.copyName();
+      copyDropdown.vm.resetDropdown();
+      expect(copyDropdown.vm.copySuccessful).toBe(false);
+      expect(copyDropdown).toMatchSnapshot();
+    });
+  });
+
+  describe('watchers', () => {
+    it('should run the reset method when isVisible prop is changed to false', () => {
+      const copyDropdown = shallowMount(CopyDropdown, {
+        propsData: {
+          textToCopy: 'This is a test',
+          isVisible: true
+        },
+        mocks: {
+          $t
+        }
+      });
+      jest.spyOn(copyDropdown.vm, 'resetDropdown');
+      copyDropdown.vm.isVisible = false;
+
+      expect(copyDropdown.vm.resetDropdown).toBeCalled();
+    });
+
+    it('should not run the reset method when isVisible prop is changed to true', () => {
+      const copyDropdown = shallowMount(CopyDropdown, {
+        propsData: {
+          textToCopy: 'This is a test',
+          isVisible: false
+        },
+        mocks: {
+          $t
+        }
+      });
+      jest.spyOn(copyDropdown.vm, 'resetDropdown');
+      copyDropdown.vm.isVisible = true;
+
+      expect(copyDropdown.vm.resetDropdown).not.toBeCalled();
+    });
+  });
+});

lib/assets/test/spec/new-dashboard/unit/specs/components/Dropdowns/Dropdown.spec.js

@@ -0,0 +1,46 @@
+import { mount } from '@vue/test-utils';
+import Dropdown from 'new-dashboard/components/Dropdowns/Dropdown';
+
+describe('Dropdown.vue', () => {
+  it('should render correct contents', () => {
+    const dropdown = mount(Dropdown, {
+      slots: {
+        default: 'Default text'
+      }
+    });
+    expect(dropdown).toMatchSnapshot();
+  });
+
+  it('should open dropdown when clicking toggle', () => {
+    const dropdown = mount(Dropdown, {
+      slots: {
+        default: 'Dropdown Content'
+      }
+    });
+
+    dropdown.find('.dropdown__toggle').trigger('click');
+
+    expect(dropdown).toMatchSnapshot();
+  });
+
+  describe('Methods', () => {
+    describe('closeDropdown', () => {
+      it('should close the dropdown', () => {
+        const dropdown = mount(Dropdown, {
+          data () { return { isOpen: true }; },
+          slots: { default: 'Dropdown Content' }
+        });
+
+        let dropdownToggle = dropdown.find('.dropdown__toggle');
+        let dropdownContent = dropdown.find('.dropdown');
+        expect(dropdownToggle.classes()).toEqual(['dropdown__toggle', 'dropdown__toggle--active']);
+        expect(dropdownContent.classes()).toEqual(['dropdown', 'is-open']);
+
+        dropdown.vm.closeDropdown();
+
+        expect(dropdownToggle.classes()).toEqual(['dropdown__toggle']);
+        expect(dropdownContent.classes()).toEqual(['dropdown']);
+      });
+    });
+  });
+});

lib/assets/test/spec/new-dashboard/unit/specs/components/Dropdowns/FeaturesDropdown.spec.js

@@ -0,0 +1,60 @@
+import { shallowMount } from '@vue/test-utils';
+import FeaturesDropdown from 'new-dashboard/components/Dropdowns/FeaturesDropdown';
+
+describe('FeaturesDropdown.vue', () => {
+  it('should render correct contents', () => {
+    const featuresDropdown = shallowMount(FeaturesDropdown, {
+      propsData: {
+        list: ['one tag test'],
+        feature: 'tag'
+      },
+      slots: {
+        default: 'Default text'
+      }
+    });
+    expect(featuresDropdown).toMatchSnapshot();
+  });
+
+  it('should render correct multiple elements', () => {
+    const featuresDropdown = shallowMount(FeaturesDropdown, {
+      propsData: {
+        list: ['my first map', 'another map', 'Madrid visualization', 'NoSpacesMap'],
+        feature: 'maps'
+      },
+      slots: {
+        default: 'Default text'
+      }
+    });
+    expect(featuresDropdown).toMatchSnapshot();
+  });
+
+  it('should render elements with url if present', () => {
+    const featuresDropdown = shallowMount(FeaturesDropdown, {
+      propsData: {
+        list: [
+          { name: 'Name 1', url: 'https://carto.com' },
+          { name: 'Name 2', url: 'https://carto.com' }
+        ]
+      },
+      slots: {
+        default: 'Default text'
+      }
+    });
+
+    expect(featuresDropdown).toMatchSnapshot();
+  });
+
+  it('should render footer if slot is present', () => {
+    const featuresDropdown = shallowMount(FeaturesDropdown, {
+      propsData: {
+        list: ['my first map', 'another map', 'Madrid visualization', 'NoSpacesMap'],
+        feature: 'maps'
+      },
+      slots: {
+        default: 'Default text',
+        footer: '+ 10 more'
+      }
+    });
+    expect(featuresDropdown).toMatchSnapshot();
+  });
+});

lib/assets/test/spec/new-dashboard/unit/specs/components/Dropdowns/__snapshots__/CopyDropdown.spec.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CopyDropdown.vue properties should handle an error in execCommand 1`] = `
+<div class="dropdown"><span class="text is-small copy-text"><img svg-inline="" src="../../assets/icons/common/copy.svg" class="copy-icon">DatasetCard.copy</span>
+  <!---->
+</div>
+`;
+
+exports[`CopyDropdown.vue properties should hide the dropdown if isVisible is set to false 1`] = ``;
+
+exports[`CopyDropdown.vue properties should not show confirmation message if data is not copied 1`] = `
+<div class="dropdown"><span class="text is-small copy-text"><img svg-inline="" src="../../assets/icons/common/copy.svg" class="copy-icon">DatasetCard.copy</span>
+  <!---->
+</div>
+`;
+
+exports[`CopyDropdown.vue properties should render correct contents 1`] = `
+<div class="dropdown"><span class="text is-small copy-text"><img svg-inline="" src="../../assets/icons/common/copy.svg" class="copy-icon">DatasetCard.copy</span>
+  <!---->
+</div>
+`;
+
+exports[`CopyDropdown.vue properties should show confirmation message when data is copied 1`] = `
+<div class="dropdown">
+  <!----> <span class="text is-small is-txtGrey"><img svg-inline="" src="../../assets/icons/common/copy-success.svg" class="copy-icon">DatasetCard.copySuccess</span></div>
+`;
+
+exports[`CopyDropdown.vue properties should show copy message again after the method resetDropdown is called 1`] = `
+<div class="dropdown"><span class="text is-small copy-text"><img svg-inline="" src="../../assets/icons/common/copy.svg" class="copy-icon">DatasetCard.copy</span>
+  <!---->
+</div>
+`;

lib/assets/test/spec/new-dashboard/unit/specs/components/Dropdowns/__snapshots__/Dropdown.spec.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdown.vue should open dropdown when clicking toggle 1`] = `
+<section><button class="dropdown__toggle dropdown__toggle--active"></button>
+  <div class="dropdown is-open">Dropdown Content</div>
+</section>
+`;
+
+exports[`Dropdown.vue should render correct contents 1`] = `
+<section><button class="dropdown__toggle"></button>
+  <div class="dropdown">Default text</div>
+</section>
+`;

lib/assets/test/spec/new-dashboard/unit/specs/components/Dropdowns/__snapshots__/FeaturesDropdown.spec.js.snap

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FeaturesDropdown.vue should render correct contents 1`] = `
+<div class="features-dropdown">Default text <div class="dropdown-container">
+    <ul class="list">
+      <li class="element">
+        <!---->
+        <router-link to="[object Object]" class="list-text text is-small">
+          one tag test
+        </router-link>
+      </li>
+      <!---->
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`FeaturesDropdown.vue should render correct multiple elements 1`] = `
+<div class="features-dropdown">Default text <div class="dropdown-container">
+    <ul class="list">
+      <li class="element">
+        <!---->
+        <router-link to="[object Object]" class="list-text text is-small">
+          my first map
+        </router-link>
+      </li>
+      <li class="element">
+        <!---->
+        <router-link to="[object Object]" class="list-text text is-small">
+          another map
+        </router-link>
+      </li>
+      <li class="element">
+        <!---->
+        <router-link to="[object Object]" class="list-text text is-small">
+          Madrid visualization
+        </router-link>
+      </li>
+      <li class="element">
+        <!---->
+        <router-link to="[object Object]" class="list-text text is-small">
+          NoSpacesMap
+        </router-link>
+      </li>
+      <!---->
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`FeaturesDropdown.vue should render elements with url if present 1`] = `
+<div class="features-dropdown">Default text <div class="dropdown-container">
+    <ul class="list">
+      <li class="element"><a href="https://carto.com" class="list-text text is-small">Name 1</a>
+        <!---->
+      </li>
+      <li class="element"><a href="https://carto.com" class="list-text text is-small">Name 2</a>
+        <!---->
+      </li>
+      <!---->
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`FeaturesDropdown.vue should render footer if slot is present 1`] = `
+<div class="features-dropdown">Default text <div class="dropdown-container">
+    <ul class="list">
+      <li class="element">
+        <!---->
+        <router-link to="[object Object]" class="list-text text is-small">
+          my first map
+        </router-link>
+      </li>
+      <li class="element">
+        <!---->
+        <router-link to="[object Object]" class="list-text text is-small">
+          another map
+        </router-link>
+      </li>
+      <li class="element">
+        <!---->
+        <router-link to="[object Object]" class="list-text text is-small">
+          Madrid visualization
+        </router-link>
+      </li>
+      <li class="element">
+        <!---->
+        <router-link to="[object Object]" class="list-text text is-small">
+          NoSpacesMap
+        </router-link>
+      </li>
+      <li class="element"><span class="list-text text is-small footer">+ 10 more</span></li>
+    </ul>
+  </div>
+</div>
+`;