Fix an issue with ghost graphs, additional snapshot test images

mauriciopoppe · Dec 15, 2023 · 019e345 · 019e345
1 parent 2e50501
commit 019e345
Show file tree

Hide file tree

Showing 13 changed files with 218 additions and 11 deletions.
diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
@@ -6,11 +6,24 @@ on:
     types: [opened, reopened, synchronize]
 
 jobs:
-  build-and-test:
+  build:
     runs-on: ubuntu-latest
 
-    env:
-      FOSSA_API_KEY: ${{ secrets.FOSSA_API_KEY }}
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - uses: actions/[email protected]
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+  test:
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v2
@@ -25,11 +38,28 @@ jobs:
       - name: Test
         run: npm run test
 
-      - name: Build
-        run: npm run build
+      - name: Archive test artifacst
+        uses: actions/upload-artifact@v3
+        with:
+          name: test images
+          path: |
+            test/e2e/**/*.png
+
+
+  license:
+    runs-on: ubuntu-latest
+
+    env:
+      FOSSA_API_KEY: ${{ secrets.FOSSA_API_KEY }}
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
 
       - name: Run Fossa and upload data
         if: env.FOSSA_API_KEY != ''
         uses: fossa-contrib/fossa-action@v1
         with:
           fossa-api-key: ${{ env.FOSSA_API_KEY }}
+
diff --git a/site/jest-function-plot.html b/site/jest-function-plot.html
@@ -4,6 +4,13 @@
 	<meta charset="UTF-8">
 	<title>Function Plot</title>
   <link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="./css/reset.css">
+<style>
+body, text {
+    font-family: Arial, sans-serif;
+    color: black;
+    font-size: 14px;
+}
+</style>
 </head>
 <body>
   <div id="playground"></div>

diff --git a/src/chart.ts b/src/chart.ts
@@ -534,7 +534,9 @@ export class Chart extends EventEmitter.EventEmitter {
     const graphs = content
       .merge(contentEnter)
       .selectAll(':scope > g.graph')
-      .data((d: FunctionPlotOptions) => d.data.map(datumDefaults))
+      .data((d: FunctionPlotOptions) => {
+        return d.data.map(datumDefaults)
+      })
 
     // enter
     const graphsEnter = graphs.enter().append('g').attr('class', 'graph')
@@ -548,6 +550,9 @@ export class Chart extends EventEmitter.EventEmitter {
       selection.call(globals.graphTypes[d.graphType](self))
       selection.call(helpers(self))
     })
+
+    // exit
+    graphs.exit().remove()
   }
 
   buildZoomHelper() {

diff --git a/..._/graphs-test-js-function-plot-should-evaluate-with-multiple-samples-1-snap.png b/..._/graphs-test-js-function-plot-should-evaluate-with-multiple-samples-1-snap.png
diff --git a/..._image_snapshots__/graphs-test-js-function-plot-should-render-a-grid-1-snap.png b/..._image_snapshots__/graphs-test-js-function-plot-should-render-a-grid-1-snap.png
diff --git a/..._snapshots__/graphs-test-js-function-plot-should-render-an-x-2-graph-1-snap.png b/..._snapshots__/graphs-test-js-function-plot-should-render-an-x-2-graph-1-snap.png
diff --git a/...e_snapshots__/graphs-test-js-function-plot-should-render-annotations-1-snap.png b/...e_snapshots__/graphs-test-js-function-plot-should-render-annotations-1-snap.png
diff --git a/..._snapshots__/graphs-test-js-function-plot-should-render-closed-paths-1-snap.png b/..._snapshots__/graphs-test-js-function-plot-should-render-closed-paths-1-snap.png
diff --git a/...s__/graphs-test-js-function-plot-should-render-different-graph-types-1-snap.png b/...s__/graphs-test-js-function-plot-should-render-different-graph-types-1-snap.png
diff --git a/...pshots__/graphs-test-js-function-plot-should-render-distinct-domains-1-snap.png b/...pshots__/graphs-test-js-function-plot-should-render-distinct-domains-1-snap.png
diff --git a/...hots__/graphs-test-js-function-plot-should-render-logarithmic-scales-1-snap.png b/...hots__/graphs-test-js-function-plot-should-render-logarithmic-scales-1-snap.png
diff --git a/..._/graphs-test-js-function-plot-should-render-with-additional-options-1-snap.png b/..._/graphs-test-js-function-plot-should-render-with-additional-options-1-snap.png
diff --git a/test/e2e/graphs.test.js b/test/e2e/graphs.test.js
@@ -3,17 +3,28 @@ import { toMatchImageSnapshot } from 'jest-image-snapshot'
 
 expect.extend({ toMatchImageSnapshot })
 
+const matchSnapshotConfig = {
+  comparisonMethod: 'ssim',
+  failureThreshold: 0.01,
+  failureThresholdType: 'percent'
+}
+
 describe('Function Plot', () => {
   let browser
   let page
 
   beforeAll(async () => {
     browser = await puppeteer.launch({ headless: 'new' })
     page = await browser.newPage()
+    await page.setViewport({
+      width: 1000,
+      height: 1000,
+      deviceScaleFactor: 2
+    })
+    await page.goto('http://localhost:4444/jest-function-plot.html')
   })
 
   it('should render an x^2 graph', async () => {
-    await page.goto('http://localhost:4444/jest-function-plot.html')
     await page.evaluate(`
 functionPlot({
   target: '#playground',
@@ -23,9 +34,163 @@ functionPlot({
 })
     `)
     const image = await page.screenshot()
-    expect(image).toMatchImageSnapshot({
-      failureThreshold: 0.01,
-      failureThresholdType: 'percent'
-    })
+    expect(image).toMatchImageSnapshot(matchSnapshotConfig)
+  })
+
+  it('should render with additional options', async () => {
+    await page.evaluate(`
+functionPlot({
+  target: '#playground',
+  title: 'quadratic with options',
+  width: 580,
+  height: 400,
+  disableZoom: true,
+  xAxis: {
+    label: 'x - axis',
+    domain: [-6, 6]
+  },
+  yAxis: {
+    label: 'y - axis'
+  },
+  data: [{
+    fn: 'x^2'
+  }]
+})
+    `)
+    const image = await page.screenshot()
+    expect(image).toMatchImageSnapshot(matchSnapshotConfig)
+  })
+
+  it('should render a grid', async () => {
+    await page.evaluate(`
+functionPlot({
+  target: '#playground',
+  xAxis: {
+    label: 'real'
+  },
+  yAxis: {
+    label: 'imaginary'
+  },
+  grid: true,
+  data: [
+    { fn: 'sqrt(1 - x * x)' },
+    { fn: '-sqrt(1 - x * x)' }
+  ]
+})
+    `)
+    const image = await page.screenshot()
+    expect(image).toMatchImageSnapshot(matchSnapshotConfig)
+  })
+
+  it('should render distinct domains', async () => {
+    await page.evaluate(`
+functionPlot({
+  target: '#playground',
+  yAxis: {domain: [-1, 1]},
+  xAxis: {domain: [8, 24]},
+  data: [{
+    fn: 'sin(x)'
+  }]
+})
+    `)
+    const image = await page.screenshot()
+    expect(image).toMatchImageSnapshot(matchSnapshotConfig)
+  })
+
+  it('should evaluate with multiple samples', async () => {
+    await page.evaluate(`
+functionPlot({
+  target: '#playground',
+  data: [{
+    fn: 'sin(x)',
+    nSamples: 1000
+  }]
+})
+    `)
+    const image = await page.screenshot()
+    expect(image).toMatchImageSnapshot(matchSnapshotConfig)
+  })
+
+  it('should render annotations', async () => {
+    await page.evaluate(`
+functionPlot({
+  target: '#playground',
+  yAxis: {domain: [-1, 9]},
+  data: [{
+    fn: 'x^2'
+  }],
+  annotations: [{
+    x: -1
+  }, {
+    x: 1,
+    text: 'x = 1'
+  }, {
+    y: 2,
+    text: 'y = 2'
+  }]
+})
+    `)
+    const image = await page.screenshot()
+    expect(image).toMatchImageSnapshot(matchSnapshotConfig)
+  })
+
+  it('should render closed paths', async () => {
+    await page.evaluate(`
+functionPlot({
+  target: '#playground',
+  xAxis: {domain: [-2, 12]},
+  data: [{
+    fn: '3 + sin(x)',
+    range: [2, 8],
+    closed: true
+  }]
+})
+    `)
+    const image = await page.screenshot()
+    expect(image).toMatchImageSnapshot(matchSnapshotConfig)
+  })
+
+  it('should render logarithmic scales', async () => {
+    await page.evaluate(`
+functionPlot({
+  target: '#playground',
+  xAxis: {
+    type: 'log',
+    domain: [0.01, 1]
+  },
+  yAxis: {
+    domain: [-100, 100]
+  },
+  grid: true,
+  data: [{
+    fn: '1/x * cos(1/x)',
+    // to make it look like a definite integral
+    closed: true
+  }]
+})
+    `)
+    const image = await page.screenshot()
+    expect(image).toMatchImageSnapshot(matchSnapshotConfig)
+  })
+
+  it('should render different graph types', async () => {
+    await page.evaluate(`
+functionPlot({
+  target: '#playground',
+  data: [{
+    fn: '-sqrt(-x)',
+    nSamples: 100,
+    graphType: 'scatter'
+  }, {
+    fn: 'sqrt(x)',
+    graphType: 'polyline'
+  }, {
+    fn: 'x^2',
+    graphType: 'interval'
+  }]
+})
+    `)
+    const image = await page.screenshot()
+    expect(image).toMatchImageSnapshot(matchSnapshotConfig)
   })
 })