Update On-call test suite

ee/spec/features/oncall_schedules/user_creates_schedule_spec.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'On-call Schedules', :js do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:group) { create(:group) }
+  let_it_be_with_reload(:project) { create(:project) }
+
+  before do
+    stub_licensed_features(oncall_schedules: true)
+    stub_feature_flags(multiple_oncall_schedules: true)
+
+    project.add_maintainer(user)
+    sign_in(user)
+
+    visit project_incident_management_oncall_schedules_path(project)
+    wait_for_all_requests
+  end
+
+  context 'displaying the empty state by default' do
+    it { expect(page).to have_button 'Add a schedule' }
+  end
+
+  context 'creating a schedule' do
+    it 'adds a schedule given valid options' do
+      click_button 'Add a schedule'
+      fill_in 'schedule-name', with: 'Test schedule'
+      fill_in 'schedule-description', with: 'Test schedule description'
+
+      click_button 'Select timezone'
+      click_button '(UTC -12:00) -12 International Date Line West'
+      click_button 'Add schedule'
+
+      wait_for_all_requests
+      expect(page).to have_css '.gl-alert-tip'
+      expect(page).to have_css '.gl-card'
+      expect(page).to have_text 'Test schedule'
+      expect(page).to have_text 'Test schedule description | (UTC -12:00) Etc/GMT+12'
+    end
+  end
+end

ee/spec/frontend/oncall_schedule/oncall_schedule_spec.js

@@ -207,6 +207,18 @@ describe('On-call schedule', () => {
         expect(dateTimeUtility.nWeeksBefore).toHaveBeenCalledWith(expect.any(Date), 2);
         expect(wrapper.vm.timeframeStartDate).toEqual(mockDate);
       });
+
+      it('should query with a two week timeframe', () => {
+        const expectedVariables = {
+          iids: [mockSchedule.iid],
+          projectPath: 'group/project',
+          startsAt: new Date('2020-07-06'),
+          endsAt: new Date('2020-07-20'),
+        };
+        expect(wrapper.vm.$options.apollo.rotations.variables.bind(wrapper.vm)()).toEqual(
+          expectedVariables,
+        );
+      });
     });
 
     describe('DAYS view', () => {
@@ -228,6 +240,18 @@ describe('On-call schedule', () => {
         expect(dateTimeUtility.nDaysBefore).toHaveBeenCalledWith(expect.any(Date), 1);
         expect(wrapper.vm.timeframeStartDate).toEqual(mockDate);
       });
+
+      it('should query with a two week timeframe', () => {
+        const expectedVariables = {
+          iids: [mockSchedule.iid],
+          projectPath: 'group/project',
+          startsAt: new Date('2020-07-06'),
+          endsAt: new Date('2020-07-07'),
+        };
+        expect(wrapper.vm.$options.apollo.rotations.variables.bind(wrapper.vm)()).toEqual(
+          expectedVariables,
+        );
+      });
     });
   });
 

ee/spec/frontend/oncall_schedule/schedule/components/shifts/components/shift_item_spec.js

@@ -12,12 +12,12 @@ const shift = {
     },
   },
   // 3.5 days
-  startsAt: '2021-01-12T10:04:56.333Z',
-  endsAt: '2021-01-15T22:04:56.333Z',
+  startsAt: '2021-01-15T04:00:00.000Z',
+  endsAt: '2021-01-15T06:00:00.000Z', // absolute shift length is 2 hours(7200000 milliseconds)
 };
 
 const CELL_WIDTH = 50;
-const timeframeItem = new Date(2021, 0, 13);
+const timeframeItem = new Date(2021, 0, 13); // Timeframe starts on the 13th
 const timeframe = [timeframeItem, new Date(nDaysAfter(timeframeItem, DAYS_IN_WEEK))];
 
 describe('ee/oncall_schedules/components/schedule/components/shifts/components/shift_item.vue', () => {
@@ -28,8 +28,8 @@ describe('ee/oncall_schedules/components/schedule/components/shifts/components/s
       propsData: {
         shift,
         timeframe,
-        presetType: PRESET_TYPES.WEEKS,
-        timelineWidth: CELL_WIDTH * 14,
+        presetType: PRESET_TYPES.WEEKS, // Total grid time in MS: 1209600000
+        timelineWidth: CELL_WIDTH * 14, // Total grid width in px: 700
         ...props,
       },
     });
@@ -45,42 +45,28 @@ describe('ee/oncall_schedules/components/schedule/components/shifts/components/s
 
   const findRotationAssignee = () => wrapper.findComponent(RotationsAssignee);
 
-  describe('shift overlaps inside the current time-frame with a shift greater than 24 hours', () => {
-    it('should render a rotation assignee child component', () => {
-      expect(findRotationAssignee().exists()).toBe(true);
-    });
+  it('should render a rotation assignee child component', () => {
+    expect(findRotationAssignee().exists()).toBe(true);
   });
 
-  describe('shift overlaps inside the current time-frame with a shift equal to 24 hours', () => {
-    beforeEach(() => {
-      createComponent({
-        props: { shift: { ...shift, startsAt: '2021-01-14T10:04:56.333Z' } },
-        data: { shiftTimeUnitWidth: CELL_WIDTH },
-      });
-    });
-
-    it('should render a rotation assignee child component', () => {
-      expect(findRotationAssignee().exists()).toBe(true);
-    });
+  it('should calculate a rotation assignee child components width based on its absolute time', () => {
+    // See `getPixelWidth`
+    // const width = ((durationMillis + DLSOffset) * timelineWidth) / totalTime;
+    // ((7200000 + 0) * 700) / 1209600000
+    expect(findRotationAssignee().props('rotationAssigneeStyle').width).toBe('4px');
   });
 
-  describe('shift overlaps inside the current time-frame with a shift less than 24 hours', () => {
-    beforeEach(() => {
-      createComponent({
-        props: {
-          shift: {
-            ...shift,
-            startsAt: '2021-01-14T10:04:56.333Z',
-            endsAt: '2021-01-14T12:04:56.333Z',
-          },
-          rotationLength: { lengthUnit: 'HOURS' },
-        },
-        data: { shiftTimeUnitWidth: CELL_WIDTH },
-      });
-    });
+  it('should calculate a shift width the same as rotation assignee child components width', () => {
+    expect(findRotationAssignee().props('shiftWidth')).toBe(4);
+  });
 
-    it('should render a rotation assignee child component', () => {
-      expect(findRotationAssignee().exists()).toBe(true);
-    });
+  it('should a rotation assignee child components offset based on its absolute time', () => {
+    // See `getPixelOffset`
+    // const left = (timelineWidth * timeOffset) / totalTime;
+    // (700 * 187200000) / 1209600000
+    const rotationAssigneeOffset = parseFloat(
+      findRotationAssignee().props('rotationAssigneeStyle').left,
+    );
+    expect(rotationAssigneeOffset).toBeCloseTo(108.33);
   });
 });