Add a test to check the in-place update feature.

test/e2e/graphs.test.ts

@@ -13,18 +13,17 @@ const matchSnapshotConfig = {
 }
 
 describe('Function Plot', () => {
-  let page: any
-
-  beforeAll(async () => {
-    const browser = await puppeteer.launch()
-    page = await browser.newPage()
+  async function getPage() {
+    const browser = await puppeteer.launch({ headless: 'new' })
+    const page = await browser.newPage()
     await page.setViewport({
       width: 1000,
       height: 1000,
       deviceScaleFactor: 2
     })
     await page.goto('http://localhost:4444/jest-function-plot.html')
-  })
+    return page
+  }
 
   function stripWrappingFunction(fnString: string) {
     fnString = fnString.replace(/^\s*function\s*\(\)\s*\{/, '')
@@ -34,6 +33,7 @@ describe('Function Plot', () => {
 
   snippets.forEach((snippet) => {
     it(snippet.testName, async () => {
+      const page = await getPage()
       await page.evaluate(stripWrappingFunction(snippet.fn.toString()))
       // When a function that's evaluated asynchronously runs
       // it's possible that the rendering didn't happen yet.
@@ -50,4 +50,28 @@ describe('Function Plot', () => {
       expect(image).toMatchImageSnapshot(matchSnapshotConfig)
     })
   })
+
+  it('update the graph using multiple renders', async () => {
+    const page = await getPage()
+    const firstRender = `
+      const dualRender = {
+        target: '#playground',
+        data: [{ fn: 'x^2', graphType: 'polyline' }]
+      }
+      functionPlot(dualRender)
+    `
+    await page.evaluate(firstRender.toString())
+    const firstImage = await page.screenshot()
+    // @ts-ignore
+    expect(firstImage).toMatchImageSnapshot(matchSnapshotConfig)
+
+    const secondRender = `
+      dualRender.data[0].fn = 'x'
+      functionPlot(dualRender)
+    `
+    await page.evaluate(secondRender.toString())
+    const secondImage = await page.screenshot()
+    // @ts-ignore
+    expect(secondImage).toMatchImageSnapshot(matchSnapshotConfig)
+  })
 })