storybook_vitest_addon 0.0.4 → 0.0.7

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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,43 @@
1
+ # v0.0.7 (Tue Apr 12 2022)
2
+
3
+ #### ⚠️ Pushed to `main`
4
+
5
+ - update readme (krzysztof.radomski@netigate.se)
6
+ - fix: dont show panel contents when not active (krzysztof.radomski@netigate.se)
7
+ - fix: dont show panel contents if not configured (krzysztof.radomski@netigate.se)
8
+
9
+ #### Authors: 1
10
+
11
+ - Krzysztof Radomski (krzysztof.radomski@netigate.se)
12
+
13
+ ---
14
+
15
+ # v0.0.6 (Fri Apr 01 2022)
16
+
17
+ #### ⚠️ Pushed to `main`
18
+
19
+ - match breaking change in vitest v0.8.0 (krzysztof.radomski@netigate.se)
20
+
21
+ #### Authors: 1
22
+
23
+ - Krzysztof Radomski (krzysztof.radomski@netigate.se)
24
+
25
+ ---
26
+
27
+ # v0.0.5 (Sun Mar 27 2022)
28
+
29
+ #### ⚠️ Pushed to `main`
30
+
31
+ - Merge branch 'main' of https://github.com/krzysztofradomski/storybook-addon-vitest (krzysztof.radomski@netigate.se)
32
+ - update readme file (krzysztof.radomski@netigate.se)
33
+ - improve config error messages (krzysztof.radomski@netigate.se)
34
+
35
+ #### Authors: 1
36
+
37
+ - Krzysztof Radomski (krzysztof.radomski@netigate.se)
38
+
39
+ ---
40
+
1
41
  # v0.0.4 (Sun Mar 27 2022)
2
42
 
3
43
  #### ⚠️ Pushed to `main`
package/README.md CHANGED
@@ -1,23 +1,39 @@
1
+ ## storybook_vitest_addon
2
+
3
+ ### \_
4
+
5
+ [![Release](https://github.com/krzysztofradomski/storybook-addon-vitest/actions/workflows/release.yml/badge.svg)](https://github.com/krzysztofradomski/storybook-addon-vitest/actions/workflows/release.yml)
6
+
7
+ Installation:
8
+
9
+ ```
10
+ yarn add -dev storybook_vitest_addon
11
+ ```
12
+
1
13
  Addon meant to display Vitest unit test results in a new Stoybook panel. Developed and tested with React.
14
+ Simply add it to the addon list in your Storybook config, and then you can use it in any story.
15
+
16
+ The addon offers minimal visuals for maximum clarity.
17
+ It needs 2 params: `testResults` - test results file in json format and `testFile` - name of the component test file (TypeScript definitions available).
2
18
 
3
19
  Example usage:
4
20
 
5
21
  ```
6
- // Component.stories.tsx
22
+ // Button.stories.tsx
7
23
 
8
24
  import vitestResults from "./unit-test-results.json";
9
25
  /.../
10
26
  export default {
11
- title: "Example/Component",
12
- component: Header,
27
+ title: "Example/Button",
28
+ component: Button,
13
29
  parameters: {
14
30
  vitest: {
15
- testFile: "Header.test.tsx",
16
- results: vitestResults,
31
+ testFile: "Button.test.tsx",
32
+ testResults: vitestResults,
17
33
  },
18
34
  },
19
35
  };
20
36
  /.../
21
37
  ```
22
38
 
23
- ![](2022-03-27-18-36-17.png)
39
+ ![](2022-04-01-22-48-00.png)
package/dist/cjs/Panel.js CHANGED
@@ -13,28 +13,61 @@ var _constants = require("./constants");
13
13
 
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
15
 
16
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
17
+
18
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
19
+
20
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
21
+
22
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
23
+
24
+ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
25
+
26
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
27
+
16
28
  var VitestPanel = function VitestPanel() {
17
- var _json$testResults;
29
+ var _json$testResults$fin, _Object$values, _Object$entries;
18
30
 
19
31
  var params = (0, _api.useParameter)(_constants.PARAM_KEY, null);
20
32
  var fileName = (params === null || params === void 0 ? void 0 : params.testFile) || null;
21
- var json = (params === null || params === void 0 ? void 0 : params.results) || null;
22
- var data = json === null || json === void 0 ? void 0 : (_json$testResults = json.testResults) === null || _json$testResults === void 0 ? void 0 : _json$testResults.filter(function (t) {
23
- return t.testFilePath.includes(fileName);
24
- }).map(function (t) {
25
- return {
26
- status: t.status,
27
- displayName: t.displayName
28
- };
29
- });
30
- return /*#__PURE__*/_react["default"].createElement("ul", null, !data && /*#__PURE__*/_react["default"].createElement("li", null, "No test results file available"), (data === null || data === void 0 ? void 0 : data.length) == 0 && /*#__PURE__*/_react["default"].createElement("li", null, "No tests found"), data === null || data === void 0 ? void 0 : data.map(function (d) {
31
- return /*#__PURE__*/_react["default"].createElement("li", {
32
- key: d.displayName
33
- }, /*#__PURE__*/_react["default"].createElement("p", null, d.displayName, /*#__PURE__*/_react["default"].createElement("span", {
34
- style: {
35
- color: d.status === "pass" ? "green" : "red"
36
- }
37
- }, d.status)));
33
+ var json = (params === null || params === void 0 ? void 0 : params.testResults) || null;
34
+ if (!params) return null;
35
+ var data = (json === null || json === void 0 ? void 0 : (_json$testResults$fin = json.testResults.find(function (r) {
36
+ var _r$name;
37
+
38
+ return r === null || r === void 0 ? void 0 : (_r$name = r.name) === null || _r$name === void 0 ? void 0 : _r$name.includes(fileName);
39
+ })) === null || _json$testResults$fin === void 0 ? void 0 : _json$testResults$fin.assertionResults.reduce(function (acc, curr) {
40
+ var _curr$ancestorTitles = _slicedToArray(curr.ancestorTitles, 2),
41
+ key = _curr$ancestorTitles[1];
42
+
43
+ acc[key] = acc[key] || [];
44
+ var group = acc[key];
45
+ group.push({
46
+ title: curr.title,
47
+ status: curr.status
48
+ });
49
+ return acc;
50
+ }, {})) || [];
51
+ return /*#__PURE__*/_react["default"].createElement("div", {
52
+ style: {
53
+ padding: "1rem"
54
+ }
55
+ }, !fileName && !data ? /*#__PURE__*/_react["default"].createElement("p", null, "Please check your config: missing both `testFile` and `testResults`.", " ") : null, !fileName && data ? /*#__PURE__*/_react["default"].createElement("p", null, "Please check your config: missing `testFile` name.") : null, fileName && !data ? /*#__PURE__*/_react["default"].createElement("p", null, "Please check your config: missing `testResults` file.") : null, fileName && ((_Object$values = Object.values(data)) === null || _Object$values === void 0 ? void 0 : _Object$values.length) == 0 && /*#__PURE__*/_react["default"].createElement("p", null, "No tests found"), (_Object$entries = Object.entries(data)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (_ref) {
56
+ var _ref2 = _slicedToArray(_ref, 2),
57
+ title = _ref2[0],
58
+ group = _ref2[1];
59
+
60
+ return /*#__PURE__*/_react["default"].createElement("div", {
61
+ key: title
62
+ }, /*#__PURE__*/_react["default"].createElement("strong", null, title), /*#__PURE__*/_react["default"].createElement("ul", null, group.map(function (d) {
63
+ return /*#__PURE__*/_react["default"].createElement("li", {
64
+ key: d.title
65
+ }, /*#__PURE__*/_react["default"].createElement("p", null, d.title, /*#__PURE__*/_react["default"].createElement("span", {
66
+ style: {
67
+ color: d.status === "passed" ? "green" : "red"
68
+ }
69
+ }, d.status)));
70
+ })));
38
71
  }));
39
72
  };
40
73
 
@@ -1,7 +1,11 @@
1
1
  "use strict";
2
2
 
3
+ var _react = _interopRequireDefault(require("react"));
4
+
3
5
  var _addons = require("@storybook/addons");
4
6
 
7
+ var _components = require("@storybook/components");
8
+
5
9
  var _constants = require("../constants");
6
10
 
7
11
  var _Panel = _interopRequireDefault(require("../Panel"));
@@ -16,6 +20,13 @@ _addons.addons.register(_constants.ADDON_ID, function () {
16
20
  var viewMode = _ref.viewMode;
17
21
  return viewMode === "story";
18
22
  },
19
- render: _Panel["default"]
23
+ render: function render(_ref2) {
24
+ var active = _ref2.active,
25
+ key = _ref2.key;
26
+ return /*#__PURE__*/_react["default"].createElement(_components.AddonPanel, {
27
+ active: active,
28
+ key: key
29
+ }, /*#__PURE__*/_react["default"].createElement(_Panel["default"], null));
30
+ }
20
31
  });
21
32
  });
package/dist/esm/Panel.js CHANGED
@@ -1,29 +1,62 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+
3
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
4
+
5
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
6
+
7
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
8
+
9
+ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
10
+
11
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
12
+
1
13
  import React from "react";
2
14
  import { useParameter } from "@storybook/api";
3
15
  import { PARAM_KEY } from "./constants";
4
16
 
5
17
  var VitestPanel = function VitestPanel() {
6
- var _json$testResults;
18
+ var _json$testResults$fin, _Object$values, _Object$entries;
7
19
 
8
20
  var params = useParameter(PARAM_KEY, null);
9
21
  var fileName = (params === null || params === void 0 ? void 0 : params.testFile) || null;
10
- var json = (params === null || params === void 0 ? void 0 : params.results) || null;
11
- var data = json === null || json === void 0 ? void 0 : (_json$testResults = json.testResults) === null || _json$testResults === void 0 ? void 0 : _json$testResults.filter(function (t) {
12
- return t.testFilePath.includes(fileName);
13
- }).map(function (t) {
14
- return {
15
- status: t.status,
16
- displayName: t.displayName
17
- };
18
- });
19
- return /*#__PURE__*/React.createElement("ul", null, !data && /*#__PURE__*/React.createElement("li", null, "No test results file available"), (data === null || data === void 0 ? void 0 : data.length) == 0 && /*#__PURE__*/React.createElement("li", null, "No tests found"), data === null || data === void 0 ? void 0 : data.map(function (d) {
20
- return /*#__PURE__*/React.createElement("li", {
21
- key: d.displayName
22
- }, /*#__PURE__*/React.createElement("p", null, d.displayName, /*#__PURE__*/React.createElement("span", {
23
- style: {
24
- color: d.status === "pass" ? "green" : "red"
25
- }
26
- }, d.status)));
22
+ var json = (params === null || params === void 0 ? void 0 : params.testResults) || null;
23
+ if (!params) return null;
24
+ var data = (json === null || json === void 0 ? void 0 : (_json$testResults$fin = json.testResults.find(function (r) {
25
+ var _r$name;
26
+
27
+ return r === null || r === void 0 ? void 0 : (_r$name = r.name) === null || _r$name === void 0 ? void 0 : _r$name.includes(fileName);
28
+ })) === null || _json$testResults$fin === void 0 ? void 0 : _json$testResults$fin.assertionResults.reduce(function (acc, curr) {
29
+ var _curr$ancestorTitles = _slicedToArray(curr.ancestorTitles, 2),
30
+ key = _curr$ancestorTitles[1];
31
+
32
+ acc[key] = acc[key] || [];
33
+ var group = acc[key];
34
+ group.push({
35
+ title: curr.title,
36
+ status: curr.status
37
+ });
38
+ return acc;
39
+ }, {})) || [];
40
+ return /*#__PURE__*/React.createElement("div", {
41
+ style: {
42
+ padding: "1rem"
43
+ }
44
+ }, !fileName && !data ? /*#__PURE__*/React.createElement("p", null, "Please check your config: missing both `testFile` and `testResults`.", " ") : null, !fileName && data ? /*#__PURE__*/React.createElement("p", null, "Please check your config: missing `testFile` name.") : null, fileName && !data ? /*#__PURE__*/React.createElement("p", null, "Please check your config: missing `testResults` file.") : null, fileName && ((_Object$values = Object.values(data)) === null || _Object$values === void 0 ? void 0 : _Object$values.length) == 0 && /*#__PURE__*/React.createElement("p", null, "No tests found"), (_Object$entries = Object.entries(data)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map(function (_ref) {
45
+ var _ref2 = _slicedToArray(_ref, 2),
46
+ title = _ref2[0],
47
+ group = _ref2[1];
48
+
49
+ return /*#__PURE__*/React.createElement("div", {
50
+ key: title
51
+ }, /*#__PURE__*/React.createElement("strong", null, title), /*#__PURE__*/React.createElement("ul", null, group.map(function (d) {
52
+ return /*#__PURE__*/React.createElement("li", {
53
+ key: d.title
54
+ }, /*#__PURE__*/React.createElement("p", null, d.title, /*#__PURE__*/React.createElement("span", {
55
+ style: {
56
+ color: d.status === "passed" ? "green" : "red"
57
+ }
58
+ }, d.status)));
59
+ })));
27
60
  }));
28
61
  };
29
62
 
@@ -1,4 +1,6 @@
1
+ import React from "react";
1
2
  import { addons, types } from "@storybook/addons";
3
+ import { AddonPanel } from "@storybook/components";
2
4
  import { ADDON_ID, PANEL_ID } from "../constants";
3
5
  import Panel from "../Panel";
4
6
  addons.register(ADDON_ID, function () {
@@ -9,6 +11,13 @@ addons.register(ADDON_ID, function () {
9
11
  var viewMode = _ref.viewMode;
10
12
  return viewMode === "story";
11
13
  },
12
- render: Panel
14
+ render: function render(_ref2) {
15
+ var active = _ref2.active,
16
+ key = _ref2.key;
17
+ return /*#__PURE__*/React.createElement(AddonPanel, {
18
+ active: active,
19
+ key: key
20
+ }, /*#__PURE__*/React.createElement(Panel, null));
21
+ }
13
22
  });
14
23
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "storybook_vitest_addon",
3
- "version": "0.0.4",
3
+ "version": "0.0.7",
4
4
  "description": "Adds a panel to display Vitest unit test results",
5
5
  "keywords": [
6
6
  "storybook-addons",
@@ -1 +0,0 @@
1
- export {};