[CallStack] Add tests for framework grouping (firefox-devtools#5502)

Author: iocalebs

.vscode/settings.json

@@ -2,5 +2,8 @@
   "flow.pathToFlow": "${workspaceRoot}/node_modules/.bin/flow",
   "eslint.autoFixOnSave": true,
   "prettier.eslintIntegration": true,
-  "javascript.validate.enable": false
+  "javascript.validate.enable": false,
+  "editor.rulers": [
+    80
+  ]
 }

src/components/SecondaryPanes/Frames/tests/Frames.spec.js

@@ -122,5 +122,32 @@ describe("Frames", () => {
       expect(component.find("FrameComponent")).toHaveLength(2);
       expect(component).toMatchSnapshot();
     });
+
+    it("groups all the Webpack-related frames", () => {
+      const frames = [
+        { id: "1-appFrame" },
+        {
+          id: "2-webpackBootstrapFrame",
+          source: { url: "webpack:///webpack/bootstrap 01d88449ca6e9335a66f" }
+        },
+        {
+          id: "3-webpackBundleFrame",
+          source: { url: "https://foo.com/bundle.js" }
+        },
+        {
+          id: "4-webpackBootstrapFrame",
+          source: { url: "webpack:///webpack/bootstrap 01d88449ca6e9335a66f" }
+        },
+        {
+          id: "5-webpackBundleFrame",
+          source: { url: "https://foo.com/bundle.js" }
+        }
+      ];
+      const selectedFrame = frames[0];
+      const frameworkGroupingOn = true;
+      const component = render({ frames, frameworkGroupingOn, selectedFrame });
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });

src/components/SecondaryPanes/Frames/tests/__snapshots__/Frames.spec.js.snap

@@ -67,6 +67,76 @@ exports[`Frames Blackboxed Frames filters blackboxed frames 1`] = `
 </div>
 `;
 
+exports[`Frames Library Frames groups all the Webpack-related frames 1`] = `
+<div
+  className="pane frames"
+>
+  <ul>
+    <Frame
+      copyStackTrace={[Function]}
+      frame={
+        Object {
+          "id": "1-appFrame",
+        }
+      }
+      frameworkGroupingOn={true}
+      hideLocation={false}
+      key="1-appFrame"
+      selectFrame={[Function]}
+      selectedFrame={
+        Object {
+          "id": "1-appFrame",
+        }
+      }
+      shouldMapDisplayName={true}
+      toggleBlackBox={[Function]}
+      toggleFrameworkGrouping={[Function]}
+    />
+    <Group
+      copyStackTrace={[Function]}
+      frameworkGroupingOn={true}
+      group={
+        Array [
+          Object {
+            "id": "2-webpackBootstrapFrame",
+            "source": Object {
+              "url": "webpack:///webpack/bootstrap 01d88449ca6e9335a66f",
+            },
+          },
+          Object {
+            "id": "3-webpackBundleFrame",
+            "source": Object {
+              "url": "https://foo.com/bundle.js",
+            },
+          },
+          Object {
+            "id": "4-webpackBootstrapFrame",
+            "source": Object {
+              "url": "webpack:///webpack/bootstrap 01d88449ca6e9335a66f",
+            },
+          },
+          Object {
+            "id": "5-webpackBundleFrame",
+            "source": Object {
+              "url": "https://foo.com/bundle.js",
+            },
+          },
+        ]
+      }
+      key="2-webpackBootstrapFrame"
+      selectFrame={[Function]}
+      selectedFrame={
+        Object {
+          "id": "1-appFrame",
+        }
+      }
+      toggleBlackBox={[Function]}
+      toggleFrameworkGrouping={[Function]}
+    />
+  </ul>
+</div>
+`;
+
 exports[`Frames Library Frames toggling framework frames 1`] = `
 <div
   className="pane frames"