ci: Add script to workflow for testing storybooks. (#1750)

* ci: Add script to workflow for testing storybooks.

* Code comment fixes

* Lint fix

* Moved the test into typescript.yml

.github/workflows/typescript.yml

@@ -108,3 +108,13 @@ jobs:
             git commit -m "Update Github Pages"
             git push "https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git" gh-pages
           fi
+
+      - name: Serve Storybook and run tests
+        env:
+            PORT: 8080
+            HOST: 127.0.0.1
+        run: |
+            npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+              "npx playwright install"  \
+              "npx http-server storybook-static --port $PORT -a $HOST" \
+              "npx wait-on http://$HOST:$PORT/ && npm run storybook:test -- --ci --url http://$HOST:$PORT/"

typescript/package.json

@@ -22,6 +22,7 @@
         "validate": "npm run typecheck && npm run lint",
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build",
+        "storybook:test": "test-storybook",
         "cy:run": "npx cypress run -b chrome --component --headed",
         "postpack": "npm run tidy-up",
         "git:hooks:enable": "cd .. && husky install",
@@ -52,6 +53,7 @@
         "@storybook/addon-storysource": "^7.0.23",
         "@storybook/react": "^7.0.23",
         "@storybook/react-webpack5": "^7.0.23",
+        "@storybook/test-runner": "^0.13.0",
         "@storybook/testing-react": "^2.0.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",

typescript/packages/group-tree/src/components/GroupTreeComponent.tsx

@@ -24,12 +24,7 @@ export interface GroupTreeProps {
 }
 
 const GroupTreeComponent: React.FC<GroupTreeProps> = React.memo(
-    ({
-        id,
-        data,
-        edgeOptions: edge_options,
-        nodeOptions: node_options,
-    }: GroupTreeProps) => {
+    ({ id, data, edgeOptions, nodeOptions }: GroupTreeProps) => {
         const [index, setIndex] = useState([0, 0] as [number, number]);
 
         const currentDateTimeChangedCallBack = useCallback(
@@ -49,14 +44,14 @@ const GroupTreeComponent: React.FC<GroupTreeProps> = React.memo(
             <DataProvider
                 id={id}
                 data={data}
-                edge_options={edge_options}
-                node_options={node_options}
+                edge_options={edgeOptions}
+                node_options={nodeOptions}
                 initial_index={index}
             >
                 <GroupTreeViewer
                     id={id}
-                    edge_options={edge_options}
-                    node_options={node_options}
+                    edge_options={edgeOptions}
+                    node_options={nodeOptions}
                     currentDateTimeChangedCallBack={
                         currentDateTimeChangedCallBack
                     }

typescript/packages/group-tree/src/storybook/GroupTreeComponent.stories.tsx

@@ -27,6 +27,6 @@ export const Default = Template.bind({});
 Default.args = {
     id: "grouptree",
     data: require("../../../../../example-data/group-tree.json"),
-    edge_options: edge_options,
-    node_options: node_options,
+    edgeOptions: edge_options,
+    nodeOptions: node_options,
 };

typescript/packages/subsurface-viewer/src/components/Map.tsx

@@ -196,8 +196,8 @@ function boundingBoxCenter(box: BoundingBox3D): [number, number, number] {
 // Exclude "layerIds" when monitoring changes to "view" prop as we do not
 // want to recalculate views when the layers change.
 function compareViewsProp(views: ViewsType | undefined): string | undefined {
-    if (typeof views === "undefined") {
-        return views;
+    if (typeof views === "undefined" || Object.keys(views).length === 0) {
+        return undefined;
     }
 
     const copy = cloneDeep(views);
@@ -1352,6 +1352,7 @@ function createViewsAndViewStates(
     const isOk =
         deck &&
         views &&
+        Object.keys(views).length !== 0 &&
         views.layout[0] >= 1 &&
         views.layout[1] >= 1 &&
         widthViewPort > 0 &&