// Copyright (c) 2017 Uber Technologies, Inc.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { render, screen } from '@testing-library/react';
import React from 'react';

import TickLabels from './TickLabels';

describe('<TickLabels>', () => {
  const defaultProps = {
    numTicks: 4,
    duration: 5000,
  };

  let ticks: HTMLElement[];

  beforeEach(() => {
    render(<TickLabels {...defaultProps} />);
    ticks = screen.getAllByTestId('tick');
  });

  it('renders the right number of ticks', () => {
    expect(ticks).toHaveLength(defaultProps.numTicks + 1);
  });

  it('places the first tick on the left', () => {
    const firstTick = ticks[0];
    expect(firstTick).toHaveStyle(`left: 0%;`);
  });

  it('places the last tick on the right', () => {
    const lastTick = ticks[ticks.length - 1];
    expect(lastTick).toHaveStyle(`right: 0%;`);
  });

  it('places middle ticks at proper intervals', () => {
    const positions = ['25%', '50%', '75%'];
    positions.forEach((pos, i) => {
      const tick = ticks.at(i + 1);
      expect(tick).toHaveStyle(`left: ${pos};`);
    });
  });
  it('shows the correct value above each tick', () => {
    expect(screen.getByText('0μs')).toBeTruthy();
    expect(screen.getByText('1.25ms')).toBeTruthy();
    expect(screen.getByText('2.5ms')).toBeTruthy();
    expect(screen.getByText('3.75ms')).toBeTruthy();
    expect(screen.getByText('5ms')).toBeTruthy();
  });
});
