Skip to content

Commit

Permalink
Merge branch 'main' into add-param-key
Browse files Browse the repository at this point in the history
  • Loading branch information
mellm0 authored Aug 29, 2024
2 parents 08d83ba + a6ddf15 commit c58f439
Show file tree
Hide file tree
Showing 8 changed files with 56 additions and 13 deletions.
12 changes: 12 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
# v1.7.0 (Tue Aug 20 2024)

#### 🚀 Enhancement

- Update story status reporting for Storybook 8.3 and use new `SET_FILTER` event [#332](https://github.com/chromaui/addon-visual-tests/pull/332) ([@ghengeveld](https://github.com/ghengeveld))

#### Authors: 1

- Gert Hengeveld ([@ghengeveld](https://github.com/ghengeveld))

---

# v1.6.1 (Thu Jul 04 2024)

#### 🐛 Bug Fix
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@chromatic-com/storybook",
"version": "1.6.1",
"version": "1.7.0",
"description": "Catch unexpected visual changes & UI bugs in your stories",
"keywords": [
"storybook-addons",
Expand Down
2 changes: 1 addition & 1 deletion src/components/SidebarBottom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const SidebarBottomBase = ({ api, status }: SidebarBottomProps) => {
<Wrapper id="sidebar-bottom-wrapper">
{hasWarnings && (
<SidebarToggleButton
id="changes-found-filter"
id="warnings-found-filter"
active={showWarnings}
count={warnings.length}
label="Change"
Expand Down
18 changes: 14 additions & 4 deletions src/screens/GuidedTour/GuidedTour.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { useSelectedStoryState } from "../VisualTests/BuildContext";
import { Confetti } from "./Confetti";
import { Tooltip, TooltipProps } from "./Tooltip";

const SET_FILTER = "setFilter"; // TODO: Import from @storybook/core-events once available

type GuidedTourStep = TooltipProps["step"];

interface TourProps {
Expand Down Expand Up @@ -75,14 +77,22 @@ export const GuidedTour = ({
}, []);

useEffect(() => {
// Listen for internal event to indicate a filter was set before moving to next step.
managerApi.once(ENABLE_FILTER, () => {
const onFilter = () => {
setStepIndex(1);
// Force a resize to make sure the react-joyride centers on the sidebar properly. Timeout is needed to make sure the filter takes place.
setTimeout(() => {
window.dispatchEvent(new Event("resize"));
}, 100);
});
};

// Listen for event to indicate a filter was set before moving to next step.
// Storybook before v8.3 didn't have SET_FILTER, those versions use ENABLE_FILTER instead.
managerApi.on(ENABLE_FILTER, onFilter);
managerApi.on(SET_FILTER, onFilter);
return () => {
managerApi.off(ENABLE_FILTER, onFilter);
managerApi.off(SET_FILTER, onFilter);
};
}, [managerApi, setStepIndex]);

useEffect(() => {
Expand All @@ -107,7 +117,7 @@ export const GuidedTour = ({
</>
),
floaterProps: {
target: "#changes-found-filter",
target: "#warnings-found-filter",
options: {
preventOverflow: {
boundariesElement: "window",
Expand Down
1 change: 1 addition & 0 deletions src/screens/VisualTests/VisualTests.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -704,6 +704,7 @@ export const Pending = {
expect(args.updateBuildStatus).toHaveBeenCalledWith({
"button--primary": {
status: "warn",
onClick: expect.anything(),
title: "Visual Tests",
description: "Chromatic Visual Tests",
},
Expand Down
3 changes: 2 additions & 1 deletion src/screens/VisualTests/VisualTests.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,8 @@ export const VisualTestsWithoutSelectedBuildId = ({
"testsForStatus" in lastBuildOnBranch &&
lastBuildOnBranch.testsForStatus?.nodes &&
getFragment(FragmentStatusTestFields, lastBuildOnBranch.testsForStatus.nodes);
const statusUpdate = lastBuildOnBranchIsSelectable && testsToStatusUpdate(testsForStatus || []);
const statusUpdate =
lastBuildOnBranchIsSelectable && testsToStatusUpdate(managerApi, testsForStatus || []);
useEffect(() => {
updateBuildStatus((state) => ({
...createEmptyStoryStatusUpdate(state),
Expand Down
23 changes: 17 additions & 6 deletions src/utils/testsToStatusUpdate.test.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import { expect, it } from "vitest";
import type { API } from "@storybook/manager-api";
import { expect, it, vi } from "vitest";

import { TestStatus } from "../gql/graphql";
import { testsToStatusUpdate } from "./testsToStatusUpdate";

const api: API = {
setSelectedPanel: vi.fn(),
togglePanel: vi.fn(),
} as any;

it("handles single test with no changes", () => {
expect(
testsToStatusUpdate([
testsToStatusUpdate(api, [
{
id: "1",
status: TestStatus.Passed,
Expand All @@ -23,7 +29,7 @@ it("handles single test with no changes", () => {

it("handles single test with changes", () => {
expect(
testsToStatusUpdate([
testsToStatusUpdate(api, [
{
id: "1",
status: TestStatus.Pending,
Expand All @@ -36,6 +42,7 @@ it("handles single test with changes", () => {
{
"story--id": {
"description": "Chromatic Visual Tests",
"onClick": [Function],
"status": "warn",
"title": "Visual Tests",
},
Expand All @@ -45,7 +52,7 @@ it("handles single test with changes", () => {

it("handles multiple tests", () => {
expect(
testsToStatusUpdate([
testsToStatusUpdate(api, [
{
id: "1",
status: TestStatus.Pending,
Expand All @@ -65,11 +72,13 @@ it("handles multiple tests", () => {
{
"story--id": {
"description": "Chromatic Visual Tests",
"onClick": [Function],
"status": "warn",
"title": "Visual Tests",
},
"story2--id": {
"description": "Chromatic Visual Tests",
"onClick": [Function],
"status": "error",
"title": "Visual Tests",
},
Expand All @@ -79,7 +88,7 @@ it("handles multiple tests", () => {

it("handles multiple viewports", () => {
expect(
testsToStatusUpdate([
testsToStatusUpdate(api, [
{
id: "1",
status: TestStatus.Broken,
Expand All @@ -99,6 +108,7 @@ it("handles multiple viewports", () => {
{
"story--id": {
"description": "Chromatic Visual Tests",
"onClick": [Function],
"status": "error",
"title": "Visual Tests",
},
Expand All @@ -108,7 +118,7 @@ it("handles multiple viewports", () => {

it("handles multiple viewports, reverse order", () => {
expect(
testsToStatusUpdate([
testsToStatusUpdate(api, [
{
id: "1",
status: TestStatus.Pending,
Expand All @@ -128,6 +138,7 @@ it("handles multiple viewports, reverse order", () => {
{
"story--id": {
"description": "Chromatic Visual Tests",
"onClick": [Function],
"status": "error",
"title": "Visual Tests",
},
Expand Down
8 changes: 8 additions & 0 deletions src/utils/testsToStatusUpdate.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import type { API } from "@storybook/manager-api";
import type { API_StatusUpdate, API_StatusValue, StoryId } from "@storybook/types";

import { PANEL_ID } from "../constants";
import { StatusTestFieldsFragment, TestStatus } from "../gql/graphql";

export const statusMap: Partial<Record<TestStatus, API_StatusValue>> = {
Expand All @@ -22,6 +24,7 @@ function chooseWorseStatus(status: API_StatusValue | null, oldStatus: API_Status
}

export function testsToStatusUpdate<T extends StatusTestFieldsFragment>(
api: API,
tests: readonly T[]
): API_StatusUpdate {
const storyIdToStatus: Record<StoryId, API_StatusValue | null> = {};
Expand All @@ -34,13 +37,18 @@ export function testsToStatusUpdate<T extends StatusTestFieldsFragment>(
storyIdToStatus[test.story.storyId]
);
});
const openAddonPanel = () => {
api.setSelectedPanel(PANEL_ID);
api.togglePanel(true);
};
const update = Object.fromEntries(
Object.entries(storyIdToStatus).map(([storyId, status]) => [
storyId,
status && {
status,
title: "Visual Tests",
description: "Chromatic Visual Tests",
onClick: openAddonPanel,
},
])
);
Expand Down

0 comments on commit c58f439

Please sign in to comment.