Difficulties testing updateCache helper

[flacial]

Issue

I updated updateCache to support deleting submission comment.

Jest Coverage kept indicating that line 46 isn't being tested, which is what's deleting the submission comment _.remove(copy[0].comments!, comment => comment!.id === commentToDeleteId). But I don't know how to test it. I also noticed that some tests weren't working. Only the tests for thrown errors are working.

updateCache.ts

export const updateCache = (
  submissionId: number,
  commentToDeleteId?: number, // Change
  content?: string,
  name?: string,
  username?: string,
  lessonId?: number,
  line?: number,
  fileName?: string,
  challengeId?: number,
  userId?: number
) => {
  return (cache: ApolloCache<AddCommentMutation>) => {
    const data = cache.readQuery<GetPreviousSubmissionsQuery>({
      query: GET_PREVIOUS_SUBMISSIONS,
      variables: {
        lessonId,
        challengeId,
        userId
      }
    })
    if (!data) throw new Error('No cache to update')
    const current = data.getPreviousSubmissions?.filter(
      s => s.id === submissionId
    )
    const copy = _.cloneDeep(current) as RecursivePartial<Submission>[]
    if (!copy.length)
      throw new Error('Incorrect submission id (no submission was found)')

    // Change
    if (commentToDeleteId) {
      _.remove(copy[0].comments!, comment => comment!.id === commentToDeleteId)
    } else {
      copy[0].comments!.push({
        content,
        fileName,
        line,
        submissionId,
        author: {
          name,
          username
        }
      })
    }

    const newData = data?.getPreviousSubmissions?.map(s => {
      if (s.id === submissionId) return copy[0]
      return s
    })
    cache.writeQuery({
      query: GET_PREVIOUS_SUBMISSIONS,
      variables: { lessonId, challengeId, userId },
      data: { ...data, getPreviousSubmissions: newData }
    })
  }
}

updateCache.test.js

const submission = {
  id: 0,
  status: SubmissionStatus.Open,
  mrUrl: '',
  diff: 'diff --git a/js7/1.js b/js7/1.js\nindex 9c96b34..853bddf 100644\n--- a/js7/1.js\n+++ b/js7/1.js\n@@ -1,8 +1,19 @@\n-// write your code here!\n const solution = () => {\n-  // global clear all timeout:\n+  const allT = [];\n+  const old = setTimeout;\n+  window.setTimeout = (func, delay) => {\n+    const realTimeout = old(func, delay);\n+    allT.push(realTimeout);\n+    return realTimeout;\n+  };\n+  window.clearAllTimouts = () => {\n+    while (allT.length) {\n+      clearTimeout(allT.pop());\n+    }\n+  };\n   cat = () => {\n-  }\n+    window.clearAllTimouts();\n+  };\n };\n \n module.exports = solution;\n',
  viewCount: 0,
  comment: 'Some comment',
  order: 0,
  challengeId: 146,
  lessonId: 2,
  user: {
    username: 'fake user',
    name: 'fake student',
    email: '[email protected]',
    id: 1,
    isAdmin: false
  },
  challenge: {
    id: 23,
    title: 'fake challenge',
    description: 'fake description',
    lessonId: 2,
    order: 1
  },
  reviewer: {
    id: 1,
    username: 'fake reviewer',
    name: 'fake reviewer',
    email: '[email protected]',
    isAdmin: false
  },
  createdAt: '123',
  updatedAt: '123',
  comments: [
    {
      id: 1,
      content: 'test comment',
      submissionId: 0,
      createdAt: '124',
      authorId: 1,
      line: 22,
      fileName: 'js7/1.js',
      author: {
        username: 'fake reviewer',
        name: 'fake reviewer'
      }
    }
  ]
}
const submissionsData = [submission, { ...submission, id: 1 }]
describe('updateCache helper', () => {
  it('should update previous submissions in cache', () => {
    const cache = new InMemoryCache({ addTypename: false })
    cache.writeQuery({
      query: GET_PREVIOUS_SUBMISSIONS,
      variables: { userId: 1, challengeId: 23 },
      data: { getPreviousSubmissions: submissionsData }
    })
    updateCache(
      0,
      undefined, // commentToDeleteId
      'Test comment!',
      'Test User',
      'testuser',
      2,
      undefined,
      undefined,
      23,
      1
    )(cache)
  })
  it('should throw an error if there is no cache to update', () => {
    const cache = new InMemoryCache({ addTypename: false })
    expect(() => {
      updateCache(
        0,
        undefined, // commentToDeleteId
        'Test comment!',
        'Test User',
        'testuser',
        2,
        undefined,
        undefined,
        23,
        1
      )(cache)
    }).toThrow('No cache to update')
  })
  it('should throw if no submission is found', () => {
    const cache = new InMemoryCache({ addTypename: false })
    cache.writeQuery({
      query: GET_PREVIOUS_SUBMISSIONS,
      variables: { userId: 1, challengeId: 23 },
      data: { getPreviousSubmissions: submissionsData }
    })
    expect(() =>
      updateCache(
        11,
        undefined, // commentToDeleteId
        'Test comment!',
        'Test User',
        'testuser',
        2,
        undefined,
        undefined,
        23,
        1
      )(cache)
    ).toThrow('Incorrect submission id (no submission was found)')
  })
  it('should delete previous submission comment in cache', () => {
    const cache = new InMemoryCache({ addTypename: false })
    cache.writeQuery({
      query: GET_PREVIOUS_SUBMISSIONS,
      variables: { userId: 1, challengeId: 23 },
      data: { getPreviousSubmissions: submissionsData }
    })
    expect(() =>
      updateCache(
        11,
        1, // commentToDeleteId
        'Test comment!',
        'Test User',
        'testuser',
        2,
        undefined,
        undefined,
        23,
        1
      )(cache)
    )
  })
})

My question is: How to test it and is it possible to view what got cached then perhaps do something like expect(cach.submission.comments.length).toEqual(0)

@Ulisseus Hi. If you're free, I hope you can help.

[anthonykhoa]

--> Jest Coverage kept indicating that line 46 isn't being tested

To confirm, which test file are you referring to?

[anthonykhoa]

Oh nevermind I see the test file in description now

[flacial]

I found a solution. It'll basically do:

1. Write the query
2. Update the cache
3. Read the query and check if the comments are empty or not

  it('should delete previous submission comment in cache', () => {
    expect.assertions(1)

    const cache = new InMemoryCache({ addTypename: false })

    cache.writeQuery({
      query: GET_PREVIOUS_SUBMISSIONS,
      variables: { userId: 1, challengeId: 23 },
      data: { getPreviousSubmissions: submissionsData }
    })

    updateCache(
      0,
      1,
      'Test comment!',
      'Test User',
      'testuser',
      2,
      undefined,
      undefined,
      23,
      1
    )(cache)

    const newCache = cache.readQuery({
      query: GET_PREVIOUS_SUBMISSIONS,
      variables: { userId: 1, challengeId: 23 },
      data: { getPreviousSubmissions: submissionsData }
    })

    expect(newCache.getPreviousSubmissions[0].comments.length).toEqual(0)
  })

[JasirZaeem]

There is also cache.extract() to get access to the cache's data, https://www.apollographql.com/docs/react/api/cache/InMemoryCache/#extract

[songz]

NICE