storybook-addon-vis 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/expect.to_match_image_snapshot.stories.tsx +45 -45
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "storybook-addon-vis",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "description": "Storybook Vitest Image Snapshot addon",
5
5
  "keywords": [
6
6
  "image-snapshot",
package/src/expect.to_match_image_snapshot.stories.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react'
2
2
  import { expect } from '@storybook/test'
3
- import dedent from 'dedent'
4
3
  import { page } from './@vitest/browser/context'
5
4
  import { UNI_PNG_URL } from './testing/constants'
6
5
 
@@ -27,13 +26,12 @@ export const Failed: StoryObj = {
27
26
  )
28
27
  },
29
28
  async play() {
30
- await expect(() => expect(page.imageSnapshot()).toMatchImageSnapshot()).rejects.toMatchObject({
31
- message: dedent`Expected image to match but was differ by 5105 pixels.
32
-
33
- Expected: '../__snapshots__/expect.to_match_image_snapshot.stories.tsx/failed-1.png'
34
- Actual: '../__snapshots__/__results__/expect.to_match_image_snapshot.stories.tsx/failed-1.png'
35
- Difference: '../__snapshots__/__diff_output__/expect.to_match_image_snapshot.stories.tsx/failed-1.png'`,
36
- })
29
+ await expect(page.imageSnapshot())
30
+ .toMatchImageSnapshot()
31
+ .then(
32
+ () => new Error('Should not reach'),
33
+ (error) => expect(error.message).toMatch(/Expected image to match but was differ by \d+ pixels./),
34
+ )
37
35
  },
38
36
  }
39
37
 
@@ -54,13 +52,12 @@ export const DifferentSize: StoryObj = {
54
52
  },
55
53
  async play({ canvas }) {
56
54
  const image = await canvas.getByRole('img')
57
- await expect(() => expect(page.imageSnapshot({ element: image })).toMatchImageSnapshot()).rejects.toMatchObject({
58
- message: dedent`Expected image to match but was differ by 51931 pixels.
59
-
60
- Expected: '../__snapshots__/expect.to_match_image_snapshot.stories.tsx/different-size-1.png'
61
- Actual: '../__snapshots__/__results__/expect.to_match_image_snapshot.stories.tsx/different-size-1.png'
62
- Difference: '../__snapshots__/__diff_output__/expect.to_match_image_snapshot.stories.tsx/different-size-1.png'`,
63
- })
55
+ await expect(page.imageSnapshot({ element: image }))
56
+ .toMatchImageSnapshot()
57
+ .then(
58
+ () => new Error('Should not reach'),
59
+ (error) => expect(error.message).toMatch(/Expected image to match but was differ by \d+ pixels./),
60
+ )
64
61
  },
65
62
  }
66
63
 
@@ -80,17 +77,15 @@ export const FailureThreshold: StoryObj = {
80
77
  // render: () => <div data-testid="subject">unit text</div>,
81
78
  async play({ canvas }) {
82
79
  const subject = canvas.getByTestId('subject')
83
- await expect(() =>
84
- expect(page.imageSnapshot({ element: subject })).toMatchImageSnapshot({
80
+ await expect(page.imageSnapshot({ element: subject }))
81
+ .toMatchImageSnapshot({
85
82
  failureThreshold: 10,
86
- }),
87
- ).rejects.toMatchObject({
88
- message: dedent`Expected image to match within 10 pixels but was differ by 60 pixels.
89
-
90
- Expected: '../__snapshots__/expect.to_match_image_snapshot.stories.tsx/failure-threshold-1.png'
91
- Actual: '../__snapshots__/__results__/expect.to_match_image_snapshot.stories.tsx/failure-threshold-1.png'
92
- Difference: '../__snapshots__/__diff_output__/expect.to_match_image_snapshot.stories.tsx/failure-threshold-1.png'`,
93
- })
83
+ })
84
+ .then(
85
+ () => new Error('Should not reach'),
86
+ (error) =>
87
+ expect(error.message).toMatch(/Expected image to match within 10 pixels but was differ by \d+ pixels./),
88
+ )
94
89
  },
95
90
  }
96
91
 
@@ -99,18 +94,15 @@ export const FailureThresholdByPercentage: StoryObj = {
99
94
  render: () => <div data-testid="subject">unit text</div>,
100
95
  async play({ canvas }) {
101
96
  const subject = canvas.getByTestId('subject')
102
- await expect(() =>
103
- expect(page.imageSnapshot({ element: subject })).toMatchImageSnapshot({
97
+ await expect(page.imageSnapshot({ element: subject }))
98
+ .toMatchImageSnapshot({
104
99
  failureThreshold: 0.1,
105
100
  failureThresholdType: 'percent',
106
- }),
107
- ).rejects.toMatchObject({
108
- message: dedent`Expected image to match within 0.1% but was differ by 0.2777777777777778%.
109
-
110
- Expected: '../__snapshots__/expect.to_match_image_snapshot.stories.tsx/failure-threshold-by-percentage-1.png'
111
- Actual: '../__snapshots__/__results__/expect.to_match_image_snapshot.stories.tsx/failure-threshold-by-percentage-1.png'
112
- Difference: '../__snapshots__/__diff_output__/expect.to_match_image_snapshot.stories.tsx/failure-threshold-by-percentage-1.png'`,
113
- })
101
+ })
102
+ .then(
103
+ () => new Error('Should not reach'),
104
+ (error) => expect(error.message).toMatch(/Expected image to match within 0.1% but was differ by \d+\.\d+%/),
105
+ )
114
106
  },
115
107
  }
116
108
 
@@ -131,16 +123,24 @@ export const ExactFailureThresholdByPercentage: StoryObj = {
131
123
  render: () => <div data-testid="subject">unit text</div>,
132
124
  async play({ canvas }) {
133
125
  const subject = canvas.getByTestId('subject')
134
- await expect(() =>
135
- expect(page.imageSnapshot({ element: subject })).toMatchImageSnapshot({
126
+ await expect(page.imageSnapshot({ element: subject }))
127
+ .toMatchImageSnapshot({
136
128
  failureThresholdType: 'percent',
137
- }),
138
- ).rejects.toMatchObject({
139
- message: dedent`Expected image to match but was differ by 0.2777777777777778%.
140
-
141
- Expected: '../__snapshots__/expect.to_match_image_snapshot.stories.tsx/exact-failure-threshold-by-percentage-1.png'
142
- Actual: '../__snapshots__/__results__/expect.to_match_image_snapshot.stories.tsx/exact-failure-threshold-by-percentage-1.png'
143
- Difference: '../__snapshots__/__diff_output__/expect.to_match_image_snapshot.stories.tsx/exact-failure-threshold-by-percentage-1.png'`,
144
- })
129
+ })
130
+ .then(
131
+ () => new Error('Should not reach'),
132
+ (error) => {
133
+ expect(error.message).toMatch(/Expected image to match but was differ by \d+\.\d+%/)
134
+ expect(error.message).toMatch(
135
+ `Expected: '../__snapshots__/expect.to_match_image_snapshot.stories.tsx/exact-failure-threshold-by-percentage-1.png'`,
136
+ )
137
+ expect(error.message).toMatch(
138
+ `Actual: '../__snapshots__/__results__/expect.to_match_image_snapshot.stories.tsx/exact-failure-threshold-by-percentage-1.png'`,
139
+ )
140
+ expect(error.message).toMatch(
141
+ `Difference: '../__snapshots__/__diff_output__/expect.to_match_image_snapshot.stories.tsx/exact-failure-threshold-by-percentage-1.png'`,
142
+ )
143
+ },
144
+ )
145
145
  },
146
146
  }