Commit 9573c577 authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

Adds mocked dates to the rotations_list_seciion_spec

Fixes a broken master by ensuring we mock the date
used in our rotations list specs.

Additionally splits the test into 2 sections, one for
the current date being today and the opposite
parent 65865e17
...@@ -17,5 +17,10 @@ export default { ...@@ -17,5 +17,10 @@ export default {
</script> </script>
<template> <template>
<span v-if="hasToday" :style="getIndicatorStyles()" class="current-day-indicator"></span> <span
v-if="hasToday"
:style="getIndicatorStyles()"
data-testid="current-day-indicator"
class="current-day-indicator"
></span>
</template> </template>
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`RotationsListSectionComponent renders component layout 1`] = ` exports[`RotationsListSectionComponent when the timeframe includes today renders component layout 1`] = `
<div <div
class="list-section" class="list-section"
> >
...@@ -70,6 +70,7 @@ exports[`RotationsListSectionComponent renders component layout 1`] = ` ...@@ -70,6 +70,7 @@ exports[`RotationsListSectionComponent renders component layout 1`] = `
> >
<span <span
class="current-day-indicator" class="current-day-indicator"
data-testid="current-day-indicator"
style="left: 7.142857142857143%;" style="left: 7.142857142857143%;"
/> />
......
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { GlCard } from '@gitlab/ui'; import { GlCard } from '@gitlab/ui';
import { useFakeDate } from 'helpers/fake_date';
import RotationsListSection from 'ee/oncall_schedules/components/schedule/components/rotations_list_section.vue'; import RotationsListSection from 'ee/oncall_schedules/components/schedule/components/rotations_list_section.vue';
import CurrentDayIndicator from 'ee/oncall_schedules/components/schedule/components/current_day_indicator.vue'; import CurrentDayIndicator from 'ee/oncall_schedules/components/schedule/components/current_day_indicator.vue';
import RotationsAssignee from 'ee/oncall_schedules/components/rotations/components/rotation_assignee.vue'; import RotationsAssignee from 'ee/oncall_schedules/components/rotations/components/rotation_assignee.vue';
...@@ -32,9 +33,10 @@ describe('RotationsListSectionComponent', () => { ...@@ -32,9 +33,10 @@ describe('RotationsListSectionComponent', () => {
}); });
} }
beforeEach(() => { const findTimelineCells = () => wrapper.findAll('[data-testid="timelineCell"]');
createComponent(); const findRotationAssignees = () => wrapper.findAllComponents(RotationsAssignee);
}); const findCurrentDayIndicatorContent = () =>
wrapper.find('[data-testid="current-day-indicator"]');
afterEach(() => { afterEach(() => {
if (wrapper) { if (wrapper) {
...@@ -42,25 +44,44 @@ describe('RotationsListSectionComponent', () => { ...@@ -42,25 +44,44 @@ describe('RotationsListSectionComponent', () => {
} }
}); });
const findTimelineCells = () => wrapper.findAll('[data-testid="timelineCell"]'); describe('when the timeframe includes today', () => {
const findRotationAssignees = () => wrapper.findAllComponents(RotationsAssignee); beforeEach(() => {
useFakeDate(2021, 0, 14);
createComponent();
});
it('renders component layout', () => { it('renders component layout', () => {
expect(wrapper.element).toMatchSnapshot(); expect(wrapper.element).toMatchSnapshot();
}); });
it('renders timeline cell items based on timeframe data', () => { it('renders the current day indicator if the timeframe includes the current day', () => {
expect(findTimelineCells().length).toBe(mockTimeframeWeeks.length); expect(findCurrentDayIndicatorContent().exists()).toBe(true);
}); });
it('renders timeline cell items based on timeframe data', () => {
expect(findTimelineCells().length).toBe(mockTimeframeWeeks.length);
});
it('renders current day indicator in the first timeline cell', () => {
expect(findTimelineCells().at(0).find(CurrentDayIndicator).exists()).toBe(true);
});
it('renders current day indicator in the first timeline cell', () => { it('render the correct amount of rotation assignees with their related information', () => {
expect(findTimelineCells().at(0).find(CurrentDayIndicator).exists()).toBe(true); expect(findRotationAssignees()).toHaveLength(2);
expect(findRotationAssignees().at(0).props().assignee.user).toEqual(
mockRotations[0].shifts.nodes[0].participant.user,
);
});
}); });
it('render the correct amount of rotation assignees with their related information', () => { describe('when the timeframe does not include today', () => {
expect(findRotationAssignees()).toHaveLength(2); beforeEach(() => {
expect(findRotationAssignees().at(0).props().assignee.user).toEqual( useFakeDate(2021, 0, 31);
mockRotations[0].shifts.nodes[0].participant.user, createComponent();
); });
it('does not render the current day indicator', () => {
expect(findCurrentDayIndicatorContent().exists()).toBe(false);
});
}); });
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment