|
|
@@ -14,7 +14,8 @@
|
|
|
// See the License for the specific language governing permissions and
|
|
|
// limitations under the License.
|
|
|
|
|
|
-import { shallowMount } from '@vue/test-utils';
|
|
|
+import { mount, shallowMount } from '@vue/test-utils';
|
|
|
+import TimeAgo from 'components/TimeAgo.vue';
|
|
|
import { Column, Row } from './HueTable';
|
|
|
import HueTable from './HueTable.vue';
|
|
|
|
|
|
@@ -38,4 +39,49 @@ describe('HueTable.vue', () => {
|
|
|
});
|
|
|
expect(wrapper.element).toMatchSnapshot();
|
|
|
});
|
|
|
+
|
|
|
+ it('should render a table with a custom component for a cell', () => {
|
|
|
+ const now = Date.now() + 30000000000; // Guarantees future ~year, i.e, TimeAgo will show "now"
|
|
|
+ const wrapper = mount(HueTable, {
|
|
|
+ components: { 'time-ago': TimeAgo },
|
|
|
+ propsData: {
|
|
|
+ columns: <Column[]>[
|
|
|
+ { key: 'a', label: 'A' },
|
|
|
+ {
|
|
|
+ key: 'b',
|
|
|
+ label: 'B',
|
|
|
+ cellComponent: TimeAgo,
|
|
|
+ cellProps: (key, row) => ({ value: row[key] })
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ rows: <Row[]>[
|
|
|
+ { a: '1', b: now },
|
|
|
+ { a: '4', b: now }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ expect(wrapper.element).toMatchSnapshot();
|
|
|
+ });
|
|
|
+
|
|
|
+ it('should render a table with adapter', () => {
|
|
|
+ const wrapper = shallowMount(HueTable, {
|
|
|
+ propsData: {
|
|
|
+ columns: <Column[]>[
|
|
|
+ { key: 'a', label: 'A' },
|
|
|
+ {
|
|
|
+ key: 'b',
|
|
|
+ label: 'B + C',
|
|
|
+ adapter: (key, row) => (row['b'] as number) + (row['c'] as number)
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ rows: <Row[]>[
|
|
|
+ { a: '1', b: 5, c: 9 },
|
|
|
+ { a: '2', b: 6, c: 10 },
|
|
|
+ { a: '3', b: 7, c: 11 },
|
|
|
+ { a: '4', b: 8, c: 12 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ expect(wrapper.element).toMatchSnapshot();
|
|
|
+ });
|
|
|
});
|