Merge pull request #314 from chromaui/239-sidebarbottom-create-story-…

…for-visual-test-coverage

Add stories for `SidebarBottom`

src/components/SidebarBottom.stories.tsx

@@ -0,0 +1,40 @@
+import { action } from "@storybook/addon-actions";
+
+import { ADDON_ID } from "../constants";
+import { SidebarBottomBase } from "./SidebarBottom";
+
+export default {
+  component: SidebarBottomBase,
+  args: {
+    api: { experimental_setFilter: action("experimental_setFilter"), emit: action("emit") },
+  },
+};
+
+export const Changes = {
+  args: {
+    status: {
+      one: { [ADDON_ID]: { status: "warn" } },
+      two: { [ADDON_ID]: { status: "warn" } },
+    },
+  },
+};
+
+export const Errors = {
+  args: {
+    status: {
+      one: { [ADDON_ID]: { status: "error" } },
+      two: { [ADDON_ID]: { status: "error" } },
+    },
+  },
+};
+
+export const Both = {
+  args: {
+    status: {
+      one: { [ADDON_ID]: { status: "warn" } },
+      two: { [ADDON_ID]: { status: "warn" } },
+      three: { [ADDON_ID]: { status: "error" } },
+      four: { [ADDON_ID]: { status: "error" } },
+    },
+  },
+};

src/SidebarBottom.tsx → src/components/SidebarBottom.tsx

@@ -1,10 +1,10 @@
-import { type API, useStorybookState } from "@storybook/manager-api";
+import { type API, type State, useStorybookState } from "@storybook/manager-api";
 import { styled } from "@storybook/theming";
 import type { API_FilterFunction } from "@storybook/types";
 import React, { useCallback, useEffect } from "react";
 
-import { SidebarToggleButton } from "./components/SidebarToggleButton";
-import { ADDON_ID, ENABLE_FILTER } from "./constants";
+import { ADDON_ID, ENABLE_FILTER } from "../constants";
+import { SidebarToggleButton } from "./SidebarToggleButton";
 
 const filterNone: API_FilterFunction = () => true;
 const filterWarn: API_FilterFunction = ({ status }) => status?.[ADDON_ID]?.status === "warn";
@@ -26,13 +26,13 @@ const Wrapper = styled.div({
 
 interface SidebarBottomProps {
   api: API;
+  status: State["status"];
 }
 
-export const SidebarBottom = ({ api }: SidebarBottomProps) => {
+export const SidebarBottomBase = ({ api, status }: SidebarBottomProps) => {
   const [showWarnings, setShowWarnings] = React.useState(false);
   const [showErrors, setShowErrors] = React.useState(false);
 
-  const { status } = useStorybookState();
   const warnings = Object.values(status).filter((value) => value[ADDON_ID]?.status === "warn");
   const errors = Object.values(status).filter((value) => value[ADDON_ID]?.status === "error");
   const hasWarnings = warnings.length > 0;
@@ -74,3 +74,8 @@ export const SidebarBottom = ({ api }: SidebarBottomProps) => {
     </Wrapper>
   );
 };
+
+export const SidebarBottom = (props: Omit<SidebarBottomProps, "status">) => {
+  const { status } = useStorybookState();
+  return <SidebarBottomBase {...props} status={status} />;
+};

src/SidebarTop.tsx → src/components/SidebarTop.tsx

@@ -4,7 +4,6 @@ import { color } from "@storybook/theming";
 import pluralize from "pluralize";
 import React, { useCallback, useContext, useEffect, useRef } from "react";
 
-import { SidebarTopButton } from "./components/SidebarTopButton";
 import {
   ADDON_ID,
   API_INFO,
@@ -13,13 +12,14 @@ import {
   IS_OUTDATED,
   LOCAL_BUILD_PROGRESS,
   PANEL_ID,
-} from "./constants";
-import { APIInfoPayload, ConfigInfoPayload, LocalBuildProgress } from "./types";
-import { useAccessToken } from "./utils/graphQLClient";
-import { TelemetryContext } from "./utils/TelemetryContext";
-import { useBuildEvents } from "./utils/useBuildEvents";
-import { useProjectId } from "./utils/useProjectId";
-import { useSharedState } from "./utils/useSharedState";
+} from "../constants";
+import { APIInfoPayload, ConfigInfoPayload, LocalBuildProgress } from "../types";
+import { useAccessToken } from "../utils/graphQLClient";
+import { TelemetryContext } from "../utils/TelemetryContext";
+import { useBuildEvents } from "../utils/useBuildEvents";
+import { useProjectId } from "../utils/useProjectId";
+import { useSharedState } from "../utils/useSharedState";
+import { SidebarTopButton } from "./SidebarTopButton";
 
 interface SidebarTopProps {
   api: API;

src/manager.tsx

@@ -4,10 +4,10 @@ import { color } from "@storybook/theming";
 import { Addon_TypesEnum } from "@storybook/types";
 import React from "react";
 
+import { SidebarBottom } from "./components/SidebarBottom";
+import { SidebarTop } from "./components/SidebarTop";
 import { ADDON_ID, PANEL_ID, SIDEBAR_BOTTOM_ID, SIDEBAR_TOP_ID } from "./constants";
 import { Panel } from "./Panel";
-import { SidebarBottom } from "./SidebarBottom";
-import { SidebarTop } from "./SidebarTop";
 
 let heartbeatTimeout: NodeJS.Timeout;
 const expectHeartbeat = (api: API) => {

src/screens/VisualTests/VisualTests.stories.tsx

@@ -3,15 +3,7 @@
 import { VariablesOf } from "@graphql-typed-document-node/core";
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, fn } from "@storybook/test";
-import {
-  findByLabelText,
-  findByRole,
-  fireEvent,
-  screen,
-  userEvent,
-  waitFor,
-  within,
-} from "@storybook/testing-library";
+import { findByLabelText, findByRole, fireEvent, waitFor } from "@storybook/testing-library";
 import { delay, HttpResponse } from "msw";
 import React from "react";