Cypress w/graphql - having issues getting AUTH with testing via UI. Better way to stub mutation?

Question

So, if I am testing pages in a vacuum without much interaction with the backend, it works great. I am having issues with actually interacting with my UI if it hits any type of service. Basically, nothing is Auth'd. I try programmatically setCookie, no dice. I try to read the cookie, nope. Btw, my whole site requires a login.

cy.setCookie('sess', ';askjdfa;skdjfa;skdjfa;skdjfa;skfjd');<-- does not work

cy.getCookie('sess').should('exist') <-- does not work

I am having an issue on really the best way to "test" this. For example, I have an account section that a user can "update" their personals. I try, fill out the form (via UI testing), but the submission is rejected, no Auth. EVEN THOUGH I just logged in (via UI testing). - I know I need to remove that since it is bad practice to UI-Login for every section of my site.

So, I don't know how to stub graphql calls with cy.request(). Here is my mutation.

mutation Login($email: Email!, $password: String!) {
  login(email: $email, password: $password) {
    userID
    firstName
    lastName
  }
}

1. Right now, I am importing the login spec for each section of the site i am testing. I know this is an anti-pattern. Like to solve this problem.

2. My AUTH (cookie) is not being set. Even when I try to set it, programmatically, doesn't work.

3. Maybe I should just stub out my graphql mutations? How?

4. Lastly, IF I am stubbing out my graphql mututations, how do I update the session ( via my main session query ). If I can get these mutations to work, then refreshing the page will get my my updated data, so I'm not completely needing this part.

Any ideas?

Answer 1

I didn't do the stub and all those, as you were asking how the mutation would work with cy.request in my other post. I did it this way and it just basically works. Hopefully this would help

I created a const first though

export const join_graphQL = (query, extra={}) => {
  return `mutation {
    ${query}(join: { email: "${extra.email}", id: "${extra.id}" }) {
              id, name, email
          }    
  }`
};

request config const

export const graphqlReqConfig = (body={}, api=graphQlapi, method='POST') => {
  return {
    method,
    body,
    url: api,
    failOnStatusCode: false
  }
};

mutation query with cy.request

const mutationQuery = join_graphQL('mutationName', {
  email: "email",
  id: 38293
});

cy.request(graphqlReqConfig({
  query: mutationQuery
})).then((res) => {
  const data = res.body.data['mutationName'];  // your result
});

hopefully it's not too messy to see.

basically the fields need to be string such as "${extra.email}" else it will give you error. Not sure how the graphql works deeply but if I just do ${extra.email} I would get an error which I forgot what error it was.