Skip to content

Commit

Permalink
test: fix broken tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@logaretm
logaretm committed Feb 15, 2025
1 parent 92a3be6 commit 05cc52b
Showing 1 changed file with 60 additions and 66 deletions.
126 changes: 60 additions & 66 deletions packages/core/src/useCalendar/useCalendar.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,32 +9,26 @@ describe('useCalendar', () => {
test('calendar should not have accessibility violations', async () => {
await render({
setup() {
const {
pickerProps,
panelGridProps,
buttonProps,
panelLabelProps,
nextPanelButtonProps,
previousPanelButtonProps,
} = useCalendar();
const { pickerProps, gridProps, buttonProps, gridLabelProps, nextButtonProps, previousButtonProps } =
useCalendar();

return {
pickerProps,
panelGridProps,
gridProps,
buttonProps,
panelLabelProps,
nextPanelButtonProps,
previousPanelButtonProps,
gridLabelProps,
nextButtonProps,
previousButtonProps,
};
},
template: `
<div data-testid="fixture">
<div v-bind="pickerProps">
<button v-bind="buttonProps">Open Calendar</button>
<div v-bind="panelLabelProps">Month Year</div>
<button v-bind="previousPanelButtonProps">Previous</button>
<button v-bind="nextPanelButtonProps">Next</button>
<div v-bind="panelGridProps">
<div v-bind="gridLabelProps">Month Year</div>
<button v-bind="previousButtonProps">Previous</button>
<button v-bind="nextButtonProps">Next</button>
<div v-bind="gridProps">
<!-- Calendar grid content would go here -->
</div>
</div>
Expand Down Expand Up @@ -103,20 +97,20 @@ describe('useCalendar', () => {
test('closes calendar when Tab is pressed', async () => {
await render({
setup() {
const { pickerProps, isOpen, buttonProps, panelGridProps } = useCalendar();
const { pickerProps, isOpen, buttonProps, gridProps } = useCalendar();

return {
pickerProps,
isOpen,
buttonProps,
panelGridProps,
gridProps,
};
},
template: `
<div data-testid="fixture">
<button v-bind="buttonProps">Open Calendar</button>
<div v-if="isOpen" v-bind="pickerProps">
<span v-bind="panelGridProps" tabindex="0">Calendar Content</span>
<span v-bind="gridProps" tabindex="0">Calendar Content</span>
</div>
</div>
`,
Expand Down Expand Up @@ -245,7 +239,7 @@ describe('useCalendar', () => {

await render({
setup() {
const { pickerProps, buttonProps, isOpen, focusedDate, panelLabelProps, currentPanel } = useCalendar({
const { pickerProps, buttonProps, isOpen, focusedDate, gridLabelProps, currentPanel } = useCalendar({
onDaySelected,
currentDate,
});
Expand All @@ -255,14 +249,14 @@ describe('useCalendar', () => {
buttonProps,
isOpen,
focusedDate,
panelLabelProps,
gridLabelProps,
currentPanel,
};
},
template: `
<div data-testid="fixture">
<button v-bind="buttonProps">Open Calendar</button>
<div v-bind="panelLabelProps" data-testid="panel-label">{{ currentPanel.type }}</div>
<div v-bind="gridLabelProps" data-testid="panel-label">{{ currentPanel.type }}</div>
<div v-if="isOpen" v-bind="pickerProps" data-testid="calendar">
<div>{{ focusedDate?.toString() }}</div>
</div>
Expand All @@ -283,71 +277,71 @@ describe('useCalendar', () => {
// Switch to month panel
await fireEvent.click(panelLabel);
await fireEvent.keyDown(calendar, { code: 'Enter' });
expect(screen.getByTestId('panel-label')).toHaveTextContent('day'); // Should switch back to day panel
expect(screen.getByTestId('panel-label')).toHaveTextContent('weeks'); // Should switch back to day panel

// Switch to year panel
await fireEvent.click(panelLabel);
await fireEvent.click(panelLabel);
await fireEvent.keyDown(calendar, { code: 'Enter' });
expect(screen.getByTestId('panel-label')).toHaveTextContent('month'); // Should switch back to month panel
expect(screen.getByTestId('panel-label')).toHaveTextContent('months'); // Should switch back to month panel
});
});

describe('panel navigation', () => {
test('switches between day, month, and year panels', async () => {
await render({
setup() {
const { panelLabelProps, currentPanel } = useCalendar();
const { gridLabelProps, currentPanel } = useCalendar();

return {
panelLabelProps,
gridLabelProps,
currentPanel,
};
},
template: `
<div data-testid="fixture">
<div v-bind="panelLabelProps" data-testid="panel-label">{{ currentPanel.type }}</div>
<div v-bind="gridLabelProps" data-testid="panel-label">{{ currentPanel.type }}</div>
</div>
`,
});

await flush();
const panelLabel = screen.getByTestId('panel-label');
expect(panelLabel).toHaveTextContent('day');
expect(panelLabel).toHaveTextContent('weeks');

await fireEvent.click(panelLabel);
expect(panelLabel).toHaveTextContent('month');
expect(panelLabel).toHaveTextContent('months');

await fireEvent.click(panelLabel);
expect(panelLabel).toHaveTextContent('year');
expect(panelLabel).toHaveTextContent('years');
});

test('navigates to next/previous panels', async () => {
const onDaySelected = vi.fn();

await render({
setup() {
const { nextPanelButtonProps, previousPanelButtonProps, currentPanel } = useCalendar({
const { nextButtonProps, previousButtonProps, currentPanel } = useCalendar({
onDaySelected,
});

return {
nextPanelButtonProps,
previousPanelButtonProps,
nextButtonProps,
previousButtonProps,
currentPanel,
};
},
template: `
<div data-testid="fixture">
<button v-bind="previousPanelButtonProps">Previous</button>
<button v-bind="previousButtonProps">Previous</button>
<div data-testid="panel-type">{{ currentPanel.type }}</div>
<button v-bind="nextPanelButtonProps">Next</button>
<button v-bind="nextButtonProps">Next</button>
</div>
`,
});

await flush();
expect(screen.getByTestId('panel-type')).toHaveTextContent('day');
expect(screen.getByTestId('panel-type')).toHaveTextContent('weeks');

// Test navigation buttons
await fireEvent.click(screen.getByText('Next'));
Expand All @@ -360,9 +354,9 @@ describe('useCalendar', () => {
await render({
setup() {
const {
nextPanelButtonProps,
previousPanelButtonProps,
panelLabelProps,
nextButtonProps,
previousButtonProps,
gridLabelProps,
focusedDate,
pickerProps,
isOpen,
Expand All @@ -372,9 +366,9 @@ describe('useCalendar', () => {
});

return {
nextPanelButtonProps,
previousPanelButtonProps,
panelLabelProps,
nextButtonProps,
previousButtonProps,
gridLabelProps,
focusedDate,
pickerProps,
isOpen,
Expand All @@ -385,9 +379,9 @@ describe('useCalendar', () => {
<div data-testid="fixture">
<button v-bind="buttonProps">Open Calendar</button>
<div v-if="isOpen" v-bind="pickerProps">
<div v-bind="panelLabelProps" data-testid="panel-label">Month Panel</div>
<button v-bind="previousPanelButtonProps">Previous</button>
<button v-bind="nextPanelButtonProps">Next</button>
<div v-bind="gridLabelProps" data-testid="panel-label">Month Panel</div>
<button v-bind="previousButtonProps">Previous</button>
<button v-bind="nextButtonProps">Next</button>
<div>{{ focusedDate?.toString() }}</div>
</div>
</div>
Expand Down Expand Up @@ -424,9 +418,9 @@ describe('useCalendar', () => {
await render({
setup() {
const {
nextPanelButtonProps,
previousPanelButtonProps,
panelLabelProps,
nextButtonProps,
previousButtonProps,
gridLabelProps,
focusedDate,
pickerProps,
isOpen,
Expand All @@ -436,9 +430,9 @@ describe('useCalendar', () => {
});

return {
nextPanelButtonProps,
previousPanelButtonProps,
panelLabelProps,
nextButtonProps,
previousButtonProps,
gridLabelProps,
focusedDate,
pickerProps,
isOpen,
Expand All @@ -449,9 +443,9 @@ describe('useCalendar', () => {
<div data-testid="fixture">
<button v-bind="buttonProps">Open Calendar</button>
<div v-if="isOpen" v-bind="pickerProps">
<div v-bind="panelLabelProps" data-testid="panel-label">Year Panel</div>
<button v-bind="previousPanelButtonProps">Previous</button>
<button v-bind="nextPanelButtonProps">Next</button>
<div v-bind="gridLabelProps" data-testid="panel-label">Year Panel</div>
<button v-bind="previousButtonProps">Previous</button>
<button v-bind="nextButtonProps">Next</button>
<div>{{ focusedDate?.toString() }}</div>
</div>
</div>
Expand Down Expand Up @@ -560,7 +554,7 @@ describe('useCalendar', () => {

await render({
setup() {
const { pickerProps, isOpen, buttonProps, selectedDate, focusedDate, panelLabelProps } = useCalendar({
const { pickerProps, isOpen, buttonProps, selectedDate, focusedDate, gridLabelProps } = useCalendar({
currentDate,
});

Expand All @@ -570,14 +564,14 @@ describe('useCalendar', () => {
buttonProps,
selectedDate,
focusedDate,
panelLabelProps,
gridLabelProps,
};
},
template: `
<div data-testid="fixture">
<button v-bind="buttonProps">Open Calendar</button>
<div v-if="isOpen" v-bind="pickerProps" data-testid="calendar">
<div v-bind="panelLabelProps" data-testid="panel-label">Month Panel</div>
<div v-bind="gridLabelProps" data-testid="panel-label">Month Panel</div>
<div>{{ focusedDate?.toString() }}</div>
</div>
</div>
Expand Down Expand Up @@ -632,7 +626,7 @@ describe('useCalendar', () => {

await render({
setup() {
const { pickerProps, isOpen, buttonProps, selectedDate, focusedDate, panelLabelProps } = useCalendar({
const { pickerProps, isOpen, buttonProps, selectedDate, focusedDate, gridLabelProps } = useCalendar({
currentDate,
});

Expand All @@ -642,14 +636,14 @@ describe('useCalendar', () => {
buttonProps,
selectedDate,
focusedDate,
panelLabelProps,
gridLabelProps,
};
},
template: `
<div data-testid="fixture">
<button v-bind="buttonProps">Open Calendar</button>
<div v-if="isOpen" v-bind="pickerProps" data-testid="calendar">
<div v-bind="panelLabelProps" data-testid="panel-label">Year Panel</div>
<div v-bind="gridLabelProps" data-testid="panel-label">Year Panel</div>
<div>{{ focusedDate?.toString() }}</div>
</div>
</div>
Expand Down Expand Up @@ -801,7 +795,7 @@ describe('useCalendar', () => {

await render({
setup() {
const { pickerProps, isOpen, buttonProps, focusedDate, panelLabelProps } = useCalendar({
const { pickerProps, isOpen, buttonProps, focusedDate, gridLabelProps } = useCalendar({
currentDate,
});

Expand All @@ -810,14 +804,14 @@ describe('useCalendar', () => {
isOpen,
buttonProps,
focusedDate,
panelLabelProps,
gridLabelProps,
};
},
template: `
<div data-testid="fixture">
<button v-bind="buttonProps">Open Calendar</button>
<div v-if="isOpen" v-bind="pickerProps" data-testid="calendar">
<div v-bind="panelLabelProps" data-testid="panel-label">Month Panel</div>
<div v-bind="gridLabelProps" data-testid="panel-label">Month Panel</div>
<div>{{ focusedDate?.toString() }}</div>
</div>
</div>
Expand Down Expand Up @@ -846,7 +840,7 @@ describe('useCalendar', () => {

await render({
setup() {
const { pickerProps, isOpen, buttonProps, focusedDate, panelLabelProps } = useCalendar({
const { pickerProps, isOpen, buttonProps, focusedDate, gridLabelProps } = useCalendar({
currentDate,
});

Expand All @@ -855,14 +849,14 @@ describe('useCalendar', () => {
isOpen,
buttonProps,
focusedDate,
panelLabelProps,
gridLabelProps,
};
},
template: `
<div data-testid="fixture">
<button v-bind="buttonProps">Open Calendar</button>
<div v-if="isOpen" v-bind="pickerProps" data-testid="calendar">
<div v-bind="panelLabelProps" data-testid="panel-label">Month Panel</div>
<div v-bind="gridLabelProps" data-testid="panel-label">Month Panel</div>
<div>{{ focusedDate?.toString() }}</div>
</div>
</div>
Expand Down

0 comments on commit 05cc52b

Please sign in to comment.