material-ui/src/Snackbar/Snackbar.spec.js at e811bb2f1246539a807561f1becbe8a0b2f4d761 · mui/material-ui · GitHub

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/* eslint-env mocha */
import React from 'react';
import {shallow} from 'enzyme';
import {assert} from 'chai';
import Snackbar from './Snackbar';
import SnackbarBody from './SnackbarBody';
import getMuiTheme from '../styles/getMuiTheme';

describe('<Snackbar />', () => {
  const muiTheme = getMuiTheme();
  const shallowWithContext = (node) => shallow(node, {context: {muiTheme}});

  describe('prop: open', () => {
    it('should be hidden when open is false', () => {
      const wrapper = shallowWithContext(
        <Snackbar open={false} message="Message" />
      );

      assert.strictEqual(
        wrapper.find('div').at(0).node.props.style.visibility,
        'hidden',
        'The element should be hidden.'
      );
    });

    it('should be hidden when open is true', () => {
      const wrapper = shallowWithContext(
        <Snackbar open={true} message="Message" />
      );

      assert.strictEqual(
        wrapper.find('div').at(0).node.props.style.visibility,
        'visible',
        'The element should be hidden.'
      );
    });
  });

  it('should show the next message after an update', (done) => {
    const wrapper = shallowWithContext(
      <Snackbar open={true} message="First message" />
    );

    wrapper.setProps({
      message: 'Second message',
    });
    assert.strictEqual(wrapper.state('message'), 'First message');

    setTimeout(() => {
      assert.strictEqual(wrapper.state('message'), 'Second message',
        'Should take into account the next message');
      done();
    }, 500);
  });

  it('should show the latest message of consecutive updates', (done) => {
    const wrapper = shallowWithContext(
      <Snackbar open={false} message="First message" />
    );

    wrapper.setProps({
      open: true,
      message: 'Second message',
    });
    assert.strictEqual(wrapper.state('message'), 'Second message');
    wrapper.setProps({
      open: true,
      message: 'Third message',
    });
    assert.strictEqual(wrapper.state('message'), 'Second message');

    setTimeout(() => {
      assert.strictEqual(wrapper.state('message'), 'Third message',
        'Should take into account the latest message');
      done();
    }, 500);
  });

  describe('prop: contentStyle', () => {
    it('should apply the style on the right element', () => {
      const contentStyle = {};
      const wrapper = shallowWithContext(
        <Snackbar open={false} message="" contentStyle={contentStyle} />
      );

      assert.strictEqual(
        wrapper.find(SnackbarBody).props().contentStyle,
        contentStyle
      );
    });
  });
});