@financial-times/spark-o-date/DateTime.spec.js

Spark React component library for Origami

import React from 'react';
import { DateTime, DatePrinter } from './index.js';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';

describe('<DateTime />', () => {
	it('renders a date', () => {
		const { container } = render(<DateTime />);
		expect(container.querySelector('time')).toBeTruthy();
	});

	it('adds a format', () => {
		const { container } = render(<DateTime format="date-only" />);

		expect(container.querySelector('time')).toBeTruthy();
		expect(container.querySelector('time')).toHaveClass('o-date');
		expect(container.querySelector('time')).toHaveAttribute(
			'data-o-date-format'
		);
		expect(container.querySelector('time')).toHaveAttribute(
			'data-o-date-format',
			'date-only'
		);
	});
	it('adds a dateTime', () => {
		const { container } = render(<DateTime dateTime="2020-01-01T00:00:00Z" />);

		expect(container.querySelector('time')).toBeTruthy();
		expect(container.querySelector('time')).toHaveClass('o-date');
		expect(container.querySelector('time')).toHaveAttribute('datetime');
		expect(container.querySelector('time')).toHaveAttribute(
			'datetime',
			'2020-01-01T00:00:00Z'
		);
	});
	it('adds a format and dateTime', () => {
		const { container } = render(
			<DateTime dateTime="2020-01-01T00:00:00Z" format="date-only" />
		);
		expect(container.querySelector('time')).toHaveAttribute(
			'data-o-date-format',
			'date-only'
		);
	});
});

describe('<DatePrinter />', () => {
	fit('renders a datePrinter ', () => {
		const { container } = render(
			<DatePrinter format="time-ago-limit-24-hours" />
		);

		expect(container.querySelector('span')).toBeTruthy();
		expect(container.querySelector('span')).toHaveAttribute(
			'data-o-date-printer'
		);
		expect(container.querySelector('span')).toHaveAttribute(
			'data-o-date-format',
			'time-ago-limit-24-hours'
		);
	});
});