import React from 'react';
import { Typography } from '@material-ui/core';
import { DateTime } from 'luxon';

const LastUpdatedTime = ({ recordedOn }) => {
  if (!recordedOn) {
    return <></>;
  }
  const date = DateTime.fromMillis(recordedOn).toLocaleString();
  return (
    <>
      <Typography data-testid="caption" style={{ color: '#757575' }} variant="caption">
        {`Last recorded on`}
      </Typography>
      <Typography data-testid="date" style={{ color: '#757575' }} variant="body2">
        {`${date}`}
      </Typography>
    </>
  );
};

export default LastUpdatedTime;

import React from 'react';
import { render } from '@testing-library/react';
import LastUpdatedTime from './index'

describe('<LastUpdatedTime />' ,()=>{

    it('should render the date message',()=>{
        const { getByTestId} = render(<LastUpdatedTime recordedOn={1645109616314} />)
        const captionEl = getByTestId("caption")
        expect(captionEl.textContent).toBe('Last recorded on')
    })
    it('should render the date provided from the component',()=>{
        const {getByTestId} = render(<LastUpdatedTime recordedOn={1645109616314} />)
        const dateEl = getByTestId("date")
        expect(dateEl.textContent).toBeTruthy()
    })
    it('should render nothing if there was no recordedOn time provided' ,()=>{
        const {getByTestId} =render(<LastUpdatedTime recordedOn={1645109616314} />)
        const dateEl = getByTestId("date")
        expect(dateEl).toBeNull()
    })
})