Skip to content

Commit 87b286b

Browse files
mohanrajpacmohanrajpac
committed
adds php snippet test
1 parent 284b2b6 commit 87b286b

File tree

5 files changed

+438
-3
lines changed

5 files changed

+438
-3
lines changed

‎src/components/snippets/PhpSnippet.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useMemo } from '@wordpress/element';
33
import { __ } from '@wordpress/i18n';
44
import Clipboard from '../common/Clipboard';
55

6-
export default function ({ flag }: { flag: string }): JSX.Element {
6+
const PhpSnippet = ({ flag }: { flag: string }) => {
77
const phpSnippet = useMemo(() => {
88
return `use CodeB\\FeatureFlags\\Flag;
99
if ( class_exists( '\\CodeB\\FeatureFlags\\Flag' ) && Flag::is_enabled( '${flag}' ) ) {
@@ -17,4 +17,6 @@ if ( class_exists( '\\CodeB\\FeatureFlags\\Flag' ) && Flag::is_enabled( '${flag}
1717
<Snippet data={phpSnippet} language={'php'} />
1818
</div>
1919
);
20-
}
20+
};
21+
22+
export default PhpSnippet;

‎src/components/snippets/__tests__/JsSnippet.test.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,17 @@ describe('JsSnippet component', () => {
1616
});
1717

1818
test('should update the JavaScript snippet when the flag prop changes', async () => {
19-
const { rerender } = render(<JsSnippet flag="testFlag1" />);
19+
const { rerender, asFragment } = render(<JsSnippet flag="testFlag1" />);
2020
let snip = screen.getByText(/testFlag1'/i);
2121
expect(snip).toBeInTheDocument();
22+
expect(asFragment()).toMatchSnapshot();
23+
2224
rerender(<JsSnippet flag="testFlag2" />);
2325
snip = screen.queryByText(/'testFlag1'/i);
2426
expect(snip).toBeNull();
27+
2528
snip = screen.getByText(/'testFlag2'/i);
2629
expect(snip).toBeInTheDocument();
30+
expect(asFragment()).toMatchSnapshot();
2731
});
2832
});

‎src/components/snippets/__tests__/PhpSnippet.test.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import PhpSnippet from '../PhpSnippet';
2+
import { render } from '@testing-library/react';
3+
4+
describe('PhpSnippet component', () => {
5+
it('it should render the correct PHP snippet', () => {
6+
const { getByText } = render(<PhpSnippet flag={'testFlag'} />);
7+
expect(getByText(/testFlag/i)).toBeInTheDocument();
8+
});
9+
10+
it('matches snapshot', () => {
11+
const { asFragment } = render(<PhpSnippet flag={'testFlag'} />);
12+
expect(asFragment()).toMatchSnapshot();
13+
});
14+
});

‎src/components/snippets/__tests__/__snapshots__/JsSnippet.test.js.snap‎

Lines changed: 311 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,311 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`JsSnippet component should update the JavaScript snippet when the flag prop changes 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="mr-feature-flag-js-snippet-container"
7+
>
8+
<h3>
9+
JavaScript Snippet
10+
</h3>
11+
<button
12+
aria-label="Copy to clipboard"
13+
aria-pressed="false"
14+
class="components-button codeb-feature-flags-clipboard-base is-tertiary has-icon"
15+
type="button"
16+
>
17+
<span
18+
class="dashicon dashicons dashicons-clipboard"
19+
/>
20+
</button>
21+
<pre
22+
style="display: block; overflow-x: auto; background: rgb(43, 43, 43); color: rgb(248, 248, 242); padding: 0.5em;"
23+
>
24+
<code
25+
class="language-typescript"
26+
style="white-space: pre;"
27+
>
28+
<span
29+
style="color: rgb(220, 198, 224);"
30+
>
31+
import
32+
</span>
33+
<span>
34+
domReady
35+
</span>
36+
<span
37+
style="color: rgb(220, 198, 224);"
38+
>
39+
from
40+
</span>
41+
<span>
42+
43+
</span>
44+
<span
45+
style="color: rgb(171, 227, 56);"
46+
>
47+
'@wordpress/dom-ready'
48+
</span>
49+
<span>
50+
;
51+
52+
</span>
53+
<span>
54+
domReady(
55+
</span>
56+
<span
57+
class="hljs-function"
58+
style="color: rgb(220, 198, 224);"
59+
>
60+
function
61+
</span>
62+
<span
63+
class="hljs-function"
64+
>
65+
(
66+
</span>
67+
<span
68+
class="hljs-function"
69+
>
70+
)
71+
</span>
72+
<span>
73+
{
74+
75+
</span>
76+
<span>
77+
78+
</span>
79+
<span
80+
style="color: rgb(220, 198, 224);"
81+
>
82+
if
83+
</span>
84+
<span>
85+
(
86+
87+
</span>
88+
<span>
89+
90+
</span>
91+
<span
92+
style="color: rgb(220, 198, 224);"
93+
>
94+
typeof
95+
</span>
96+
<span>
97+
98+
</span>
99+
<span
100+
style="color: rgb(245, 171, 53);"
101+
>
102+
window
103+
</span>
104+
<span>
105+
?.codebFeatureFlags !==
106+
</span>
107+
<span
108+
style="color: rgb(171, 227, 56);"
109+
>
110+
'undefined'
111+
</span>
112+
<span>
113+
&&
114+
115+
</span>
116+
<span>
117+
118+
</span>
119+
<span
120+
style="color: rgb(245, 171, 53);"
121+
>
122+
window
123+
</span>
124+
<span>
125+
.codebFeatureFlags.isEnabled(
126+
</span>
127+
<span
128+
style="color: rgb(171, 227, 56);"
129+
>
130+
'testFlag1'
131+
</span>
132+
<span>
133+
)
134+
135+
</span>
136+
) {
137+
138+
<span>
139+
140+
</span>
141+
<span
142+
style="color: rgb(212, 208, 171);"
143+
>
144+
// js code goes here...
145+
</span>
146+
<span>
147+
148+
149+
</span>
150+
}
151+
});
152+
</code>
153+
</pre>
154+
</div>
155+
</DocumentFragment>
156+
`;
157+
158+
exports[`JsSnippet component should update the JavaScript snippet when the flag prop changes 2`] = `
159+
<DocumentFragment>
160+
<div
161+
class="mr-feature-flag-js-snippet-container"
162+
>
163+
<h3>
164+
JavaScript Snippet
165+
</h3>
166+
<button
167+
aria-label="Copy to clipboard"
168+
aria-pressed="false"
169+
class="components-button codeb-feature-flags-clipboard-base is-tertiary has-icon"
170+
type="button"
171+
>
172+
<span
173+
class="dashicon dashicons dashicons-clipboard"
174+
/>
175+
</button>
176+
<pre
177+
style="display: block; overflow-x: auto; background: rgb(43, 43, 43); color: rgb(248, 248, 242); padding: 0.5em;"
178+
>
179+
<code
180+
class="language-typescript"
181+
style="white-space: pre;"
182+
>
183+
<span
184+
style="color: rgb(220, 198, 224);"
185+
>
186+
import
187+
</span>
188+
<span>
189+
domReady
190+
</span>
191+
<span
192+
style="color: rgb(220, 198, 224);"
193+
>
194+
from
195+
</span>
196+
<span>
197+
198+
</span>
199+
<span
200+
style="color: rgb(171, 227, 56);"
201+
>
202+
'@wordpress/dom-ready'
203+
</span>
204+
<span>
205+
;
206+
207+
</span>
208+
<span>
209+
domReady(
210+
</span>
211+
<span
212+
class="hljs-function"
213+
style="color: rgb(220, 198, 224);"
214+
>
215+
function
216+
</span>
217+
<span
218+
class="hljs-function"
219+
>
220+
(
221+
</span>
222+
<span
223+
class="hljs-function"
224+
>
225+
)
226+
</span>
227+
<span>
228+
{
229+
230+
</span>
231+
<span>
232+
233+
</span>
234+
<span
235+
style="color: rgb(220, 198, 224);"
236+
>
237+
if
238+
</span>
239+
<span>
240+
(
241+
242+
</span>
243+
<span>
244+
245+
</span>
246+
<span
247+
style="color: rgb(220, 198, 224);"
248+
>
249+
typeof
250+
</span>
251+
<span>
252+
253+
</span>
254+
<span
255+
style="color: rgb(245, 171, 53);"
256+
>
257+
window
258+
</span>
259+
<span>
260+
?.codebFeatureFlags !==
261+
</span>
262+
<span
263+
style="color: rgb(171, 227, 56);"
264+
>
265+
'undefined'
266+
</span>
267+
<span>
268+
&&
269+
270+
</span>
271+
<span>
272+
273+
</span>
274+
<span
275+
style="color: rgb(245, 171, 53);"
276+
>
277+
window
278+
</span>
279+
<span>
280+
.codebFeatureFlags.isEnabled(
281+
</span>
282+
<span
283+
style="color: rgb(171, 227, 56);"
284+
>
285+
'testFlag2'
286+
</span>
287+
<span>
288+
)
289+
290+
</span>
291+
) {
292+
293+
<span>
294+
295+
</span>
296+
<span
297+
style="color: rgb(212, 208, 171);"
298+
>
299+
// js code goes here...
300+
</span>
301+
<span>
302+
303+
304+
</span>
305+
}
306+
});
307+
</code>
308+
</pre>
309+
</div>
310+
</DocumentFragment>
311+
`;

0 commit comments

Comments
 (0)