import React from 'react';
import TestRenderer from 'react-test-renderer';

import { DialTile } from '../components/DialTile';

describe('DialTile', () => {
  it('renders label and value', () => {
    let tree: any;
    TestRenderer.act(() => {
      tree = TestRenderer.create(React.createElement(DialTile, { label: 'RSSI', value: '-61 dBm', testID: 'dial' }));
    });
    const json = JSON.stringify(tree.toJSON());
    expect(json).toContain('RSSI');
    expect(json).toContain('-61 dBm');
  });

  it('combines label and value into accessibilityLabel', () => {
    let tree: any;
    TestRenderer.act(() => {
      tree = TestRenderer.create(React.createElement(DialTile, { label: 'RSSI', value: '-61 dBm', testID: 'dial' }));
    });
    const json = JSON.stringify(tree.toJSON());
    expect(json).toContain('"accessibilityLabel":"RSSI: -61 dBm"');
  });

  it('uses action color when tone=red', () => {
    let tree: any;
    TestRenderer.act(() => {
      tree = TestRenderer.create(React.createElement(DialTile, { label: 'X', value: 'Y', tone: 'red', testID: 'dial' }));
    });
    const json = JSON.stringify(tree.toJSON());
    expect(json).toContain('#E23B2E');
  });
});