@transferwise/components 0.0.0-experimental-cbb427b → 0.0.0-experimental-94be5c5

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-cbb427b",
3
+ "version": "0.0.0-experimental-94be5c5",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -10,14 +10,6 @@ jest.mock('react-transition-group', () => ({
10
10
  CSSTransition: (props) => (props.in ? props.children : null),
11
11
  }));
12
12
 
13
- jest.mock(
14
- '../dimmer',
15
- () =>
16
- function ({ open, children }) {
17
- return open ? <div className="dimmer">{children}</div> : null;
18
- },
19
- );
20
-
21
13
  describe('Popover', () => {
22
14
  const props = {
23
15
  arrow: true,
@@ -114,7 +106,23 @@ describe('Popover', () => {
114
106
  });
115
107
  });
116
108
 
109
+ it('onClose fires when close Popover', async () => {
110
+ const handleOnClose = jest.fn();
111
+ render(
112
+ <Popover {...props} onClose={handleOnClose}>
113
+ <button type="button">Open</button>
114
+ </Popover>,
115
+ );
116
+
117
+ expect(handleOnClose).not.toHaveBeenCalled();
118
+ userEvent.click(screen.getByText('Open'));
119
+ await waitForPanel();
120
+ userEvent.click(getDimmer());
121
+ expect(handleOnClose).toHaveBeenCalledTimes(1);
122
+ });
123
+
117
124
  const waitForPanel = async () => screen.findByText('content');
125
+ const getDimmer = () => document.querySelector('.dimmer');
118
126
  const getPanel = () => document.querySelector('.np-panel');
119
127
  const getBottomSheet = () => document.querySelector('.np-bottom-sheet');
120
128
  const getTitle = () => screen.queryByText('title');
@@ -45,62 +45,6 @@ exports[`Popover on mobile renders when is open 1`] = `
45
45
  Open
46
46
  </button>
47
47
  </span>
48
- <div
49
- class="dimmer"
50
- >
51
- <div
52
- class="sliding-panel sliding-panel--open-bottom np-bottom-sheet np-popover__container"
53
- >
54
- <div
55
- class="np-bottom-sheet--top-bar"
56
- >
57
- <div
58
- class="np-bottom-sheet--handler"
59
- />
60
- <button
61
- aria-label="Close"
62
- class="np-close-button close btn-link text-no-decoration sr-only np-bottom-sheet--close-btn"
63
- type="button"
64
- >
65
- <span
66
- aria-hidden="true"
67
- class="tw-icon tw-icon-cross "
68
- data-testid="cross-icon"
69
- role="presentation"
70
- >
71
- <svg
72
- fill="currentColor"
73
- focusable="false"
74
- height="16"
75
- viewBox="0 0 24 24"
76
- width="16"
77
- >
78
- <path
79
- d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
80
- />
81
- </svg>
82
- </span>
83
- </button>
84
- </div>
85
- <div
86
- class="np-bottom-sheet--content"
87
- style="max-height: calc(768px - 64px - 32px);"
88
- >
89
- <div
90
- aria-hidden="false"
91
- class="np-popover__content"
92
- role="dialog"
93
- >
94
- <h4
95
- class="np-text-title-body m-b-1"
96
- >
97
- title
98
- </h4>
99
- content
100
- </div>
101
- </div>
102
- </div>
103
- </div>
104
48
  </span>
105
49
  </div>
106
50
  `;