diff --git a/.changeset/fix-chunk-selection.md b/.changeset/fix-chunk-selection.md new file mode 100644 index 00000000..bcd5ee28 --- /dev/null +++ b/.changeset/fix-chunk-selection.md @@ -0,0 +1,5 @@ +--- +"webpack-bundle-analyzer": patch +--- + +Fix the treemap not reflecting chunk checkbox selections. diff --git a/client/components/ModulesTreemap.jsx b/client/components/ModulesTreemap.jsx index 474719f2..dcd2daf6 100644 --- a/client/components/ModulesTreemap.jsx +++ b/client/components/ModulesTreemap.jsx @@ -331,7 +331,7 @@ class ModulesTreemap extends Component { }; handleSelectedChunksChange = (selectedChunks) => { - store.setSelectedSize(selectedChunks); + store.setSelectedChunks(selectedChunks); }; handleMouseLeaveTreemap = () => { diff --git a/test/analyzer.js b/test/analyzer.js index ec05eb5b..1ecf2d2a 100644 --- a/test/analyzer.js +++ b/test/analyzer.js @@ -125,6 +125,59 @@ describe("Analyzer", () => { }); }); + it("should update the treemap when a chunk is deselected", async () => { + generateReportFrom("with-worker-loader-dynamic-import/stats.json"); + const page = await browser.newPage(); + try { + await page.goto( + url.pathToFileURL(path.resolve(__dirname, "./output/report.html")), + ); + + const chunkLabel = await page.evaluate( + () => globalThis.chartData[0].label, + ); + + await page.type('input[placeholder="Enter regexp"]', "."); + await page.keyboard.press("Enter"); + await page.waitForFunction( + (label) => + [ + ...document.querySelectorAll('[class*="foundModulesChunkName"]'), + ].some((node) => node.textContent.trim() === label), + {}, + chunkLabel, + ); + + const checkboxChecked = await page.evaluate((label) => { + const checkboxLabel = [...document.querySelectorAll("label")].find( + (node) => node.textContent.trim().startsWith(`${label} (`), + ); + const checkbox = checkboxLabel.querySelector('input[type="checkbox"]'); + checkbox.click(); + return checkbox.checked; + }, chunkLabel); + + await page.waitForFunction( + (label) => + ![ + ...document.querySelectorAll('[class*="foundModulesChunkName"]'), + ].some((node) => node.textContent.trim() === label), + {}, + chunkLabel, + ); + + const visibleChunkLabels = await page.$$eval( + '[class*="foundModulesChunkName"]', + (nodes) => nodes.map((node) => node.textContent.trim()), + ); + + expect(checkboxChecked).toBe(false); + expect(visibleChunkLabels).not.toContain(chunkLabel); + } finally { + await page.close(); + } + }); + it("should support stats files with modules inside `chunks` array", async () => { generateReportFrom("with-modules-in-chunks/stats.json"); const chartData = await getChartData();