// Stepper Test.tsx
import '@testing-library/jest-dom';
import Input from 'src/components/Calculator/inputComponents/Input';
import Slider from 'src/components/Calculator/inputComponents/Slider';
import YearlySavings from './outputComponents/YearlySavings';
import { renderWithCTX, screen, fireEvent } from 'src/lib/testWrappers';
const props: Parameters<typeof Input>[0] = {
prompt: 'Current Gas Price',
defaultVal: '3.12',
label: 'per gallon',
isInDollars: true,
};
describe('calculator input', () => {
it('should render', () => {
renderWithCTX(<Input {...props} />);
const input = screen.getByRole('textbox', {
name: `${props?.prompt} ${props?.label}`,
});
expect(input).toBeInTheDocument();
expect(input).toHaveAttribute('value', props.defaultVal);
});
it('should prefix with $ if applicable', () => {
const { rerender } = renderWithCTX(<Input {...props} />);
let currency: HTMLElement | null = screen.getByText(/\$/i);
expect(currency).toBeInTheDocument();
rerender(<Input {...props} isInDollars={false} />);
currency = screen.queryByText(/\$/i);
expect(currency).not.toBeInTheDocument();
});
});
describe('calculator slider input', () => {
const props = {
prompt: 'How many miles do you drive daily?',
defaultVal: '160',
label: 'Daily Miles',
min: '0',
max: '320',
step: '1',
};
it('should render', () => {
renderWithCTX(<Slider {...props} />);
const slider = screen.getByRole('slider', { name: `${props.prompt} ${props.label}` });
const input = screen.getByRole('textbox', { name: `${props.prompt} ${props.label}` });
const label = screen.getByText(/daily miles/i);
const heading = screen.getByRole('heading', { name: /how many miles do you drive daily\?/i });
expect(slider).toBeInTheDocument();
expect(input).toBeInTheDocument();
expect(label).toBeInTheDocument();
expect(heading).toBeInTheDocument();
});
it('should default to midpoint between min and max when defaultVal is missing', () => {
renderWithCTX(<Slider {...props} defaultVal="" min="100" max="300" />);
const slider = screen.getByRole('slider', { name: `${props.prompt} ${props.label}` });
expect(slider).toHaveAttribute('value', '200');
});
it('should keep the same slider and text input values', () => {
renderWithCTX(<Slider {...props} />);
const slider = screen.getByRole('slider', { name: `${props.prompt} ${props.label}` });
const input = screen.getByRole('textbox', { name: `${props.prompt} ${props.label}` });
// slider changes input
fireEvent.change(slider, { target: { value: 28 } });
expect(input).toHaveAttribute('value', '28');
// input changes slider
fireEvent.change(input, { target: { value: 140 } });
expect(slider).toHaveAttribute('value', '140');
});
});
describe('yearly savings output', () => {
const props = {
headline: 'Yearly Savings',
monthlyText: 'Monthly Savings',
dailyText: 'Daily Savings',
dailySavings: 2.22,
};
it('should render', () => {
renderWithCTX(<YearlySavings {...props} />);
const heading = screen.getByRole('heading', { name: props.headline });
const daily = screen.getByText(props.dailyText);
const monthly = screen.getByText(props.monthlyText);
expect(heading).toBeInTheDocument();
expect(daily).toBeInTheDocument();
expect(monthly).toBeInTheDocument();
});
it('should properly display rounded monetary amounts', () => {
renderWithCTX(<YearlySavings dailySavings={7.998} />);
const dollars = screen.getByText('8');
const cents = screen.getByText(/\$\.00/i);
expect(dollars).toBeInTheDocument();
expect(cents).toBeInTheDocument();
});
});
describe('calculator slider input', () => {
const props = {
prompt: 'How many miles do you drive daily?',
defaultVal: '160',
label: 'Daily Miles',
min: '0',
max: '320',
step: '1',
};
it('should render', () => {
renderWithCTX(<Slider {...props} />);
const slider = screen.getByRole('slider', { name: `${props.prompt} ${props.label}` });
const input = screen.getByRole('textbox', { name: `${props.prompt} ${props.label}` });
const label = screen.getByText(/daily miles/i);
const heading = screen.getByRole('heading', { name: /how many miles do you drive daily\?/i });
expect(slider).toBeInTheDocument();
expect(input).toBeInTheDocument();
expect(label).toBeInTheDocument();
expect(heading).toBeInTheDocument();
});
it('should default to midpoint between min and max when defaultVal is missing', () => {
renderWithCTX(<Slider {...props} defaultVal="" min="100" max="300" />);
const slider = screen.getByRole('slider', { name: `${props.prompt} ${props.label}` });
expect(slider).toHaveAttribute('value', '200');
});
it('should keep the same slider and text input values', () => {
renderWithCTX(<Slider {...props} />);
const slider = screen.getByRole('slider', { name: `${props.prompt} ${props.label}` });
const input = screen.getByRole('textbox', { name: `${props.prompt} ${props.label}` });
// slider changes input
fireEvent.change(slider, { target: { value: 28 } });
expect(input).toHaveAttribute('value', '28');
// input changes slider
fireEvent.change(input, { target: { value: 140 } });
expect(slider).toHaveAttribute('value', '140');
});
});
describe('yearly savings output', () => {
const props = {
headline: 'Yearly Savings',
monthlyText: 'Monthly Savings',
dailyText: 'Daily Savings',
dailySavings: 2.22,
};
it('should render', () => {
renderWithCTX(<YearlySavings {...props} />);
const heading = screen.getByRole('heading', { name: props.headline });
const daily = screen.getByText(props.dailyText);
const monthly = screen.getByText(props.monthlyText);
expect(heading).toBeInTheDocument();
expect(daily).toBeInTheDocument();
expect(monthly).toBeInTheDocument();
});
it('should properly display rounded monetary amounts', () => {
renderWithCTX(<YearlySavings dailySavings={7.998} />);
const dollars = screen.getByText('8');
const cents = screen.getByText(/\$\.00/i);
expect(dollars).toBeInTheDocument();
expect(cents).toBeInTheDocument();
});
});