px-table-view/test.html at main · predix/px-table-view · 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="../webcomponentsjs/webcomponents.js"></script>
    <script src="../web-component-tester/browser.js"></script>
    <link rel="import" href="../px-theme/px-app.html">
    <link rel="import" href="../px-theme/px-theme.html">
    <link rel="import" href="px-table-view.html">
    <style media="screen">
      html, body{
        background-color: white !important;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body class="viewport">
    <h2>Default Table View</h2>
    <px-table-view id="px_table_view_1" modifier="large" row-modifier="tappable nav-right">
      <px-table-row title="Row 1"></px-table-row>
    </px-table-view>
    <h2>Large Table View</h2>
    <px-table-view id="px_table_view_2" modifier="large" row-modifier="tappable nav-right">
      <px-table-row title="Row 2"></px-table-row>
    </px-table-view>
    <h2>Table Row Switch</h2>
    <template id="tmpl_3" is="dom-bind">
      <px-table-view id="px_table_view_3" modifier="small">
        <px-table-row icon="fa:fa-wifi" title="WiFi" modifier="switch">
          <px-table-row-switch name="cb" size="small" checked="{{checked}}"></px-table-row-switch>
        </px-table-row>
        <px-table-row modifier="switch" title="Switch">
          <px-table-row-switch id="switch1" name="cb05" checked="{{checked}}"></px-table-row-switch>
        </px-table-row>
        <px-table-row modifier="switch" title="Checked Switch">
          <px-table-row-switch name="cb06" checked="{{checked}}"></px-table-row-switch>
        </px-table-row>
        <px-table-row modifier="switch" title="Switch (Disabled)">
          <px-table-row-switch name="cb07" disabled></px-table-row-switch>
        </px-table-row>
        <px-table-row modifier="switch" title="Checked Switch (Disabled)">
          <px-table-row-switch name="cb08" disabled checked="{{checked}}"></px-table-row-switch>
        </px-table-row>
      </px-table-view>
    </template>
    <h2>Swipeable Table View</h2>
    <template id="table-view-actions-2" is="dom-bind">
      <style is="custom-style">
        :root .b {
          --px-table-row-underlay: {
            right: 0;
          }
        }
      </style>
      <px-table-view id="px_table_view_4" modifier="small">
        <template is="dom-repeat" items="[[items]]">
          <px-table-row title="Text Label" label1="Yesterday" modifier="nav-right" swipeable swipe-left fit-underlay class="b">
            <div underlay class="full-height flex flex--stretch flex--right">
              <px-table-row-action-button label="More" type="more"></px-table-row-action-button>
              <px-table-row-action-button label="Flag" type="flag"></px-table-row-action-button>
              <px-table-row-action-button label="Delete" type="delete"></px-table-row-action-button>
            </div>
          </px-table-row>
        </template>
      </px-table-view>
    </template>
    <script type="text/javascript">
      document.addEventListener('WebComponentsReady', function () {
        var app = document.getElementById('table-view-actions-2');
        app.items = [1, 2, 3, 4, 5];
      });
    </script>
    <script>
      suite('<px-table-view>', function () {
        var element = document.getElementById('px_table_view_1');
        element.tableData = [
          {
            title: 'Item 1'
          }
        ];
        test('renders', function () {
          assert.ok(element);
        });
        test('has correct # of items', function () {
          assert.ok(element.tableData[0].title = 'Item 1');
        });
        test('can add item to element', function () {
          element.push('tableData', {
            title: 'Item 2',
            modifier: 'nav-right',
            href: '#'
          });
          element.push('tableData', {
            title: 'Item 3',
            modifier: 'nav-right',
            href: '#'
          });
          assert.ok(element.tableData.length === 3);
        });
        test('has correct # of items', function () {
          assert.ok(element.tableData.length === 3);
        });
      });

      suite('<px-table-row-switch>', function () {
        var scope = document.getElementById('tmpl_3');
        scope.checked = false;
        var element = document.getElementById('switch1');

        test('switch should change binded value when toggled', function(){
          assert(element.checked === false);
          element.click();
        });
        test('switch should NOT change binded value when disabled', function(){

        });
      });
      suite('<px-table-row-checkbox>', function () {

      });
      suite('<px-table-row>', function () {

      });
    </script>
  </body>
</html>