/
testing.js
68 lines (62 loc) · 1.99 KB
/
testing.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import { graphql } from 'gatsby';
import PropTypes from 'prop-types';
import React from 'react';
import { Container } from 'react-bootstrap';
import Layout from '../components/Layout';
import Example from '../components/Example';
const propTypes = {
location: PropTypes.object.isRequired,
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
componentPages: PropTypes.arrayOf(
PropTypes.shape({
path: PropTypes.string.isRequired,
displayName: PropTypes.string.isRequired,
})
).isRequired,
}).isRequired,
}).isRequired,
}).isRequired,
};
const Testing = ({ data, location }) => (
<Layout data={data} location={location}>
<Container>
<h1>Testing Components with Transitions</h1>
<p>
In some situations, like visual snapshot testing, it's helpful to
disable transitions so they don't complicate the test, or introduce
abitrary waits. To make this easier <code>react-transition-group</code>{' '}
exposes a way to globally toggle transitions. When set,{' '}
<strong>all</strong> transitions, when toggled, will immediately switch
to their entered or exited states as appropriate.
</p>
<pre className="language-js">
<code>
{`
import { config } from 'react-transition-group
config.disabled = true
`.trim()}
</code>
</pre>
<blockquote>
<p>
<b>Note</b>: This <strong>does not</strong> automatically disable
animations. It only disabled waits in <code>Transition</code>. You may
also have to disable animation as appropriate for the library.
example:{' '}
<a href="http://velocityjs.org/#mock">Mocking in Velocity.js</a>
</p>
</blockquote>
</Container>
</Layout>
);
Testing.propTypes = propTypes;
export default Testing;
export const pageQuery = graphql`
query TestingQuery {
site {
...Layout_site
}
}
`;