@vue/test-utils#mount JavaScript Examples

describe('AlertModal', () => {
  Object.values(Modal.Alerts).forEach((variant) => {
    test(`renders ${variant} variant correctly`, () => {
      const wrapper = mount(AlertModal, {
        slots: {
          default: 'Content goes here',
          header: 'Heading goes here',
        },
        propsData: { id: 'test', variant },
      });
      expect(wrapper.element).toMatchSnapshot();
    });
  });

  test('emits a confirm and cancel event', () => {
    const wrapper = mount(AlertModal);
    wrapper.find('.modal-actions__action--primary').trigger('click');
    expect(wrapper.emitted().confirm.length).toBe(1);
    wrapper.find('.modal-actions__action--secondary').trigger('click');
    expect(wrapper.emitted().cancel.length).toBe(1);
  });
});

describe('About', () => {
  var i18n = I18nBuilder.build()
  it('should render about page', async (done) => {
    await new AppLoader().fetchApiInitialData()
    const wrapper = mount(About, {i18n: i18n, store: store })   
    
    expect(wrapper.contains('.about-container')).toBe(true)
    expect(wrapper.findComponent(About).exists()).toBe(true)
    done()
  })
})

describe('Exercise1-07.vue', () => {
  
  it('data returns correctly in list element', () => {
    const name = 'John Doe'
    const language = 'Javascript'
    
    const wrapper = mount(Exercise, {
      propsData: {
        name,
        language,
      }
    })

    expect(wrapper.html()).toContain(name)
    expect(wrapper.html()).toContain(language)
  })
})

describe('Question of type confirm', () => {
  test('Confirm', async () => {
    const wrapper = mount(Form, { });
    wrapper.setProps({ questions: questionConfirm });
    await Vue.nextTick();

    const confirm = wrapper.find('label');
    confirm.trigger('click');

    await Vue.nextTick();
    expect(wrapper.emitted().answered).toBeTruthy();
    const emittedLength = wrapper.emitted().answered.length;
    const answered = wrapper.emitted().answered[emittedLength-1];
    // test answers
    expect(answered[0].confirm).toEqual(true);
  });
});

describe("when using a fragment component as tag", () => {
  beforeEach(() => {
    resetMocks();

    wrapper = mount(DraggableWithFragment, {
      global: {
        components: {
          FragmentRoot
        }
      }
    });
    vm = wrapper.vm;
    element = wrapper.element;
  });

  it("renders correctly", () => {
    const expectedDOM = `<div id="root"><div data-draggable="true">a-0</div><div data-draggable="true">b-1</div><div data-draggable="true">c-2</div></div>`;
    expectHTML(wrapper, expectedDOM);
  });

  it("creates sortable instance with parent node", () => {
    expect(Sortable.mock.calls.length).toBe(1);
    const parameters = Sortable.mock.calls[0];
    expect(parameters[0]).toBe(element);
  });
});

describe('InfiniteSteps.vue', () => {
  const wrapper = mount(InfiniteSteps)

  it('stepsData to match step attrs', async () => {
    await wrapper.setProps({
      stepsData,
      active,
      finishStatus: 'success'
    })

    const ElStepWrappers = wrapper.findAllComponents(ElStep)
    ElStepWrappers.wrappers.forEach((stepWrapper, index) => {
      Object.keys(stepsData[index]).forEach((key, kIndex) => {
        expect(stepWrapper.props(key)).toBe(Object.values(stepsData[index])[kIndex])
      })
    })
  })

  it('is next step test', async () => {
    const ElStepWrappers = wrapper.findAllComponents(ElStep)
    // 此时点击任何步骤不可以跳跃步骤
    await ElStepWrappers.at(2).trigger('click')

    // 设置是否跳跃步骤函数
    await wrapper.setProps({
      isSkipMethod: (active) => active % 2
    })

    // 基数数步骤不可以跳跃步骤
    await ElStepWrappers.at(2).trigger('click')
    // 只有偶数步骤可以跳跃步骤
    await ElStepWrappers.at(1).trigger('click')
    // 最后input方式只触发一次
    expect(wrapper.emitted('input').length).toBe(1)
    // 触发参数当前步骤index
    expect(wrapper.emitted('input')[0]).toEqual([1])
  })
})

describe('LightBox', () => {
  describe('given one image with type specified in the media array', () => {
    let wrapper

    beforeEach(() => {
      wrapper = mount(LightBox, {
        propsData: {
          media: mediaWithOneImageWithType
        }
      })
    })

    test('the thumbnail does not have the video icon', () => {
      expect(wrapper.find('div.vib-thumbnail-active svg').exists()).toBe(false)
    })
  })
})

beforeEach(function () {
  wrapper = mount(Dataset, {
    slots: {
      default: `
        <dataset-show />
        <dataset-search />
        <dataset-item class="items">
          <template #default="{ row, rowIndex }">
            <div>{{ rowIndex }} - {{ row.name }}</div>
          </template>
          <template #noDataFound>
            <div>
              No results found
            </div>
          </template>          
        </dataset-item>
        <dataset-info />
        <dataset-pager />
      `
    },
    propsData: {
      dsData: users
    },
    localVue
  })
})

describe('Pager.vue', () => {
  afterEach(() => {
    sinon.restore()
  })

  it('emits input event with a page', async () => {
    const wrapper = mount(Pager, {
      propsData: {
        pageCount: 5
      }
    })

    // click on 'next page' link
    await wrapper.find('.paginator-next').trigger('click')
    expect(wrapper.emitted('input')[0]).to.eql([2])

    // click on the link to page 3 (it has index 2)
    await wrapper.findAll('.paginator-page-link').at(2).trigger('click')
    expect(wrapper.emitted('input')[1]).to.eql([3])
  })

  it('changes the page when value is changed', async () => {
    const wrapper = mount(Pager, {
      propsData: {
        pageCount: 5
      }
    })

    await wrapper.setProps({ value: 5 })
    expect(wrapper.emitted('input')[0]).to.eql([5])
  })
})

describe('Calendar Dialog : inline Implementation', () => {
  const datePickerButtonSubmit = '.vdpr-datepicker__button-submit';
  const inlineClass = '.vdpr-datepicker__calendar-dialog--inline';

  let wrapper;

  beforeEach(() => {
    wrapper = mount(CalendarDialog, {
      props: {
        inline: true,
      },
    });
  });

  it('should render correct contents', () => {
    expect(wrapper.find(inlineClass).exists()).toBe(true);
    expect(wrapper.find(datePickerButtonSubmit).element).not.toBeVisible();
  });

  it('emit on-apply if inline', () => {
    wrapper.vm.emitOnApplyIfInline();

    expect(wrapper.emitted('on-apply')).toBeTruthy();
  });
});

describe("board badge", () => {
  const wrapper = mount(BoardSuggestion, {
    propsData: {
      board: {
        name: "Feature requests",
        color: "abcabc",
        url: "feature-requests"
      }
    }
  });

  it("color is 'rgb(171, 202, 188)'", () => {
    expect(
      wrapper.find("[data-test=board-suggestion-color]").attributes("style")
    ).toBe("background-color: rgb(171, 202, 188);");
  });

  it("name is 'Feature requests'", () => {
    expect(wrapper.find("[data-test=board-suggestion-name]").text()).toBe(
      "Feature requests"
    );
  });

  it("name is 'feature-requests'", () => {
    expect(wrapper.find("[data-test=board-suggestion-url]").text()).toBe(
      "feature-requests"
    );
  });
});

describe('Install', () => {
  let mountApp;
  const EmptyComponent = Vue.component('app', {
    template: '<div></div>',
  });

  beforeEach(() => {
    mountApp = () => mount(EmptyComponent, { localVue });
  });

  describe('Should throw', () => {
    it('when appId isn\'t defined', () => {
      const wrapper = mountApp({ appId: null });
      expect(wrapper.vm.$intercom).toEqual(undefined);
      expect(console.warn).toHaveBeenCalled();
    });
  });
});

describe('List resources', () => {
  it('Resets resources selection on navigation', async () => {
    const wrapper = mount(ListResources, {
      propsData: {
        resources: _resources
      },
      stubs
    })

    await wrapper.setData({ selectedResources: _resources })

    wrapper.findAll('.file-picker-resource').at(0).vm.$emit('navigate')

    // Wait twice to give the list of resources enough time to render
    await wrapper.vm.$nextTick()

    // Need to access nested array
    expect(wrapper.emitted().selectResources[0][0].length).toEqual(0)
  })
})

describe('Header', () => {
  it('should add new element to store', () => {
    const store = createStore();

    const wrapper = mount(Header, { global: { provide: { store } } });

    const input = wrapper.find('input');
    input.element.value = 'Demo';
    input.trigger('input');
    input.trigger('keyup', { key: 'Enter' });

    expect(store.state.todos).to.have.length(1);
    expect(store.state.todos[0].id).to.be.a('string');
    expect(store.state.todos[0].name).to.eql('Demo');
    expect(store.state.todos[0].completed).to.eql(false);
  });
});

describe('BaseDivider', () => {
  test('renders correctly', () => {
    const gallery = Gallery();
    const wrapper = mount(gallery);
    expect(wrapper.element).toMatchSnapshot();
  });
});