Blog

Testing Apollos reactive variables in Vuejs and GraphQL

01.09.2020 | Testing Frontend | Austin

hero

We love Vue.js, we love GraphQL, we love testing, and we love Vue Apollo.

We have been having some great discussions in the office about how to test specific parts of Vue Apollo. They have a great guide on testing that allows you to assert that Mutations were sent, or you can test how a smart query's data causes the Component to render. These are great if your queries are static but what if you have dynamic or reactive variables on your query.

On one hand, you can test the dynamic nature of the query with an e2e test but that feels heavy-handed instead you can test the variables on your query directly.

Say you have this component

const wrapper = mountVue(GroupShow, {
  mocks: {
    $route: {
      params: { userId: this.$route.params.userId },
    },
  },
});

Then a simple test to say the queries variables could be

it('queries the correct group', () => {
  const data = {
    userId: 6,
  };

  const wrapper = mountVue(GroupsIndex, {
    mocks: {
      $route: {
        params: { userId },
      },
    },
  });

  wrapper.setData(data);

  expect(
    wrapper
      .vm
      .$options
      .apollo
      .groups
      .variables
      .bind(wrapper.vm)().userId,
  ).toEqual(6);
});

A couple of things to note.

  1. I only feel obligated to test the variables function because I trust Vue Apollo to handle the variables correctly.
  2. Notice the Function.bind call. When executing the function outside of Vue's event loop you don't have the same this so you need to bind back to the wrapper's view model.

Hopefully, this saves someone some time!

Share

Read More

Related Posts

related_image

06.30.2021 | Culture | Katy Scott

At Focused Labs, collaboration is key to how we work together; it helps our teams learn from each other, brings us closer and helps us become more efficient...

related_image

06.23.2021 | Culture | Austyn

Late-night feedings and diaper changes, the 3-4 month sleep regression, teething, and a growth spurt all mean I'm getting less sleep than...

related_image

05.12.2021 | Culture Backend Frontend | Ryan Taylor

Temporarily disrupts "normal" business operations and allow self-organized teams to rapid prototype around their interest areas

related_image

04.27.2021 | Culture | Erin Hochstatter

Several years ago, I'd been trying to find an approach to software consulting that made sense for me [...]

related_image

01.28.2021 | Backend | Parker Drake

Recently I found myself needing to validate fields in a Spring Boot controller written in Kotlin...

related_image

01.22.2021 | Tutorial | Luke Mueller

⌘+⇧+g is the way to go

related_image

01.21.2021 | Devops | Katy G

Kube jobs running wild? To delete successful jobs...

additional accent
accent
FocusedLabs

171 N Aberdeen St
Suite 400
Chicago, IL 60607

[email protected]

© 2021 FocusedLabs, All Rights Reserved.

  • facebook icon
  • twitter icon
  • linkedin icon
  • github icon