diff --git a/app/assets/javascripts/initializePage.js b/app/assets/javascripts/initializePage.js index 6060097f3..8d69cd0db 100644 --- a/app/assets/javascripts/initializePage.js +++ b/app/assets/javascripts/initializePage.js @@ -3,7 +3,7 @@ initializeAllTagEditButtons, initializeUserFollowButts, initializeCommentsPage, initializeSettings, initializeRuntimeBanner, - initializeTimeFixer, initializeCreditsPage, + initializeCreditsPage, initializeOnboardingTaskCard, initScrolling, nextPage:writable, fetching:writable, done:writable, initializePaymentPointers, @@ -14,7 +14,6 @@ function callInitializers() { initializePaymentPointers(); initializeCommentsPage(); initializeSettings(); - initializeTimeFixer(); initializeCreditsPage(); initializeOnboardingTaskCard(); } diff --git a/app/javascript/packs/baseInitializers.js b/app/javascript/packs/baseInitializers.js index 47c117354..eff57ad3a 100644 --- a/app/javascript/packs/baseInitializers.js +++ b/app/javascript/packs/baseInitializers.js @@ -1,5 +1,6 @@ import { initializeCommentDate } from './initializers/initializeCommentDate'; import { initializeCommentPreview } from './initializers/initializeCommentPreview'; +import { initializeTimeFixer } from './initializers/initializeTimeFixer'; import { initializeNotifications } from './initializers/initializeNotifications'; import { initializeDateHelpers } from './initializers/initializeDateTimeHelpers'; import { @@ -10,6 +11,7 @@ import { initializeCommentDate(); initializeCommentPreview(); initializeNotifications(); +initializeTimeFixer(); initializeDateHelpers(); InstantClick.on('change', () => { diff --git a/app/javascript/packs/initializers/__tests__/initializeTimeFixer.test.js b/app/javascript/packs/initializers/__tests__/initializeTimeFixer.test.js new file mode 100644 index 000000000..ed1c1e7e8 --- /dev/null +++ b/app/javascript/packs/initializers/__tests__/initializeTimeFixer.test.js @@ -0,0 +1,209 @@ +import { + initializeTimeFixer, + convertUtcDate, + convertUtcTime, + formatDateTime, + updateLocalDateTime, + convertCalEvent, +} from '../initializeTimeFixer'; + +describe('initializeTimeFixer', () => { + beforeEach(() => { + const utcTimeClassDiv = document.createElement('div'); + const utcDateClassDiv = document.createElement('div'); + const utcDiv = document.createElement('div'); + + utcTimeClassDiv.classList.add('utc-time'); + utcDateClassDiv.classList.add('utc-date'); + utcDiv.classList.add('utc'); + + utcTimeClassDiv.dataset.datetime = 823230245000; + }); + + test('should call event listener when preview button exist', async () => { + const button = document.createElement('button'); + button.classList.add('preview-toggle'); + button.addEventListener = jest.fn(); + initializeTimeFixer(); + + expect(button.addEventListener).not.toHaveBeenCalled(); + }); + + test('should call updateLocalDateTime', async () => { + const updateLocalDateTime = jest.fn(); + initializeTimeFixer(); + + expect(updateLocalDateTime).not.toHaveBeenCalled(); + }); + + test('should call convertUtcDate', async () => { + const convertUtcDate = jest.fn(); + initializeTimeFixer(); + + expect(convertUtcDate).not.toHaveBeenCalled(); + }); + + test('should convert Utc Dates', async () => { + const utcDate = Date.UTC(96, 1, 2, 3, 4, 5); + const dateConversion = await convertUtcDate(utcDate); + // const formatDateTime = jest.fn(); + + expect(dateConversion).toContain('Feb 2'); + }); + + test('convertUtcDate function with different options', () => { + const utcDate = 917924645000; + + const options1 = { + month: 'short', + day: 'numeric', + }; + expect(convertUtcDate(utcDate, options1)).toBe('Feb 2'); + + const options2 = { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + timeZoneName: 'short', + }; + expect(convertUtcDate(utcDate, options2)).toBe('Feb 2'); + }); + + test('convertUtcTime function with different options', () => { + const utcTime = 917924645000; + + const options1 = { + hour: 'numeric', + minute: 'numeric', + timeZoneName: 'short', + }; + expect(convertUtcTime(utcTime, options1)).toBe('3:04 AM UTC'); + + const options2 = { + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + timeZoneName: 'short', + }; + expect(convertUtcTime(utcTime, options2)).toBe('3:04 AM UTC'); + }); + + test('formatDateTime function with different options and values', () => { + const options1 = { + hour: 'numeric', + minute: 'numeric', + timeZoneName: 'short', + }; + const value1 = new Date(917924645000); + expect(formatDateTime(options1, value1)).toBe('3:04 AM UTC'); + + const options2 = { + year: 'numeric', + month: 'short', + day: 'numeric', + }; + const value2 = new Date(917924645000); + expect(formatDateTime(options2, value2)).toBe('Feb 2, 1999'); + }); +}); + +describe('formatDateTime', () => { + it('formats the date time with given options', () => { + const options = { + month: 'short', + day: 'numeric', + year: 'numeric', + hour: 'numeric', + minute: 'numeric', + }; + const value = new Date('2022-04-13T12:34:56Z'); + const expected = 'Apr 13, 2022, 12:34 PM'; + + expect(formatDateTime(options, value)).toEqual(expected); + }); +}); + +describe('convertUtcTime', () => { + it('converts the UTC time to local time with proper format', () => { + const utcTime = 917924645000; + const expected = '3:04 AM UTC'; + + expect(convertUtcTime(utcTime)).toEqual(expected); + }); +}); + +describe('convertUtcDate', () => { + it('converts the UTC date to local date with proper format', () => { + const utcDate = 917924645000; + const expected = expect.stringMatching(/^\w{3} \d{1,2}$/); + + expect(convertUtcDate(utcDate)).toEqual(expected); + }); +}); + +describe('updateLocalDateTime', () => { + it('updates the innerHTML of given elements with local time', () => { + document.body.innerHTML = ` +