chore: Jest updates to support Filter Packages (#2246)

Author: mdodgelooker

__mocks__/i18next.ts

@@ -23,20 +23,24 @@
  SOFTWARE.
 
  */
-export const useTranslation = () => {
-  return {
-    t: (key: string, options: { [key: string]: string }) => {
-      return `${key} ${
-        options
-          ? Object.keys(options)
-              .map((optionsKey) =>
-                optionsKey === 'ns' ? '' : options[optionsKey]
-              )
-              .join(' ')
-          : ''
-      }`
-    },
-  }
-}
+export const useTranslation = () => ({
+  t: (key, options) =>
+    [
+      key,
+      ...(options
+        ? Object.keys(options).map((optionsKey) =>
+            optionsKey === 'ns' ? '' : options[optionsKey]
+          )
+        : []),
+    ]
+      .join(' ')
+      .trim()
+      .replace(/\s+/g, ' '),
+})
 
-export const initReactI18next = jest.fn()
+export const initReactI18next = {
+  init: () => {
+    //
+  },
+  type: '3rdParty',
+}

__mocks__/react-i18next.ts

@@ -23,7 +23,7 @@
  SOFTWARE.
 
  */
-process.env.TZ = 'UTC'
+process.env.TZ = 'PST8PDT'
 
 module.exports = {
   automock: false,
@@ -41,7 +41,8 @@ module.exports = {
   moduleDirectories: ['./node_modules', './packages'],
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
   moduleNameMapper: {
-    '@looker/([^/]+)$': '<rootDir>/packages/$1/src',
+    '@looker/components/lib/date': '<rootDir>/packages/components/src/date',
+    '@looker\\/((?!sdk)[^\\/]+)': '<rootDir>/packages/$1/src',
     '\\.(css)$': '<rootDir>/config/jest/styleMock.js',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/config/jest/fileMock.js',

jest.config.js

@@ -42,15 +42,6 @@ globalAny.IntersectionObserver = observeMock
 // js-dom doesn't do scrollIntoView
 Element.prototype.scrollIntoView = jest.fn()
 
-// Ensure jest viewport has real dimensions to support responsively rendering content
-Object.defineProperty(document.body, 'clientWidth', {
-  value: 800, // match storyshots default viewport
-})
-
-Object.defineProperty(document.body, 'clientHeight', {
-  value: 600, // match storyshots default viewport
-})
-
 /**
  * Throw a hard-error if an underlying library (e.g.: React) is throwing console.error
  * Inspired by: https://github.com/facebook/jest/issues/6121#issuecomment-529591574

jest.setup.js

@@ -37,15 +37,19 @@ const TestComponent = (props: UseI18nProps) => {
 
 describe('useI18n', () => {
   test('initializes i18next', () => {
+    const spy = jest.spyOn(i18next, 'init')
     render(<TestComponent />)
     expect(i18next.init).toHaveBeenCalledTimes(1)
+    spy.mockRestore()
   })
 
   test('updates with new props', () => {
+    const spy = jest.spyOn(i18next, 'addResourceBundle')
     i18next.isInitialized = true
     render(<TestComponent />)
     expect(i18next.addResourceBundle).toHaveBeenCalledTimes(
       Object.keys(i18nResources.en).length
     )
+    spy.mockRestore()
   })
 })

packages/components-providers/src/I18n/useI18n.test.tsx

@@ -38,6 +38,22 @@ import { Breakpoint } from './Breakpoint'
  */
 
 describe('Breakpoint', () => {
+  let widthSpy: jest.SpyInstance<number, []>
+  let heightSpy: jest.SpyInstance<number, []>
+
+  beforeEach(() => {
+    widthSpy = jest
+      .spyOn(document.body, 'clientWidth', 'get')
+      .mockImplementation(() => 800)
+    heightSpy = jest
+      .spyOn(document.body, 'clientHeight', 'get')
+      .mockImplementation(() => 600)
+  })
+  afterEach(() => {
+    widthSpy.mockRestore()
+    heightSpy.mockRestore()
+  })
+
   test('all', () => {
     renderWithTheme(
       <Breakpoint show={['mobile', 'xl']}>

packages/components/src/Breakpoint/Breakpoint.test.tsx

@@ -36,7 +36,7 @@ const realDateNow = Date.now.bind(global.Date)
 
 beforeEach(() => {
   /* eslint-disable-next-line @typescript-eslint/unbound-method */
-  global.Date.now = jest.fn(() => 1580517818172)
+  global.Date.now = jest.fn(() => 1580567580000)
 })
 
 afterEach(() => {

packages/components/src/Calendar/CalendarNav.test.tsx

@@ -57,7 +57,7 @@ describe('DateTimeFormat', () => {
     )
     expect(container).toMatchInlineSnapshot(`
       <div>
-        Jan 25, 1988, 5:28:03 PM GMT+5:30
+        Jan 26, 1988, 1:28:03 AM GMT+5:30
       </div>
     `)
   })
@@ -79,7 +79,7 @@ describe('DateTimeFormat', () => {
     )
     expect(container).toMatchInlineSnapshot(`
       <div>
-        January 25th, 1988 at 11:58:03 AM GMT+0
+        January 25th, 1988 at 11:58:03 AM GMT-8
       </div>
     `)
   })
@@ -90,7 +90,7 @@ describe('DateTimeFormat', () => {
     )
     expect(container).toMatchInlineSnapshot(`
       <div>
-        Monday, January 25th, 1988 at 11:58:03 AM GMT+00:00
+        Monday, January 25th, 1988 at 11:58:03 AM GMT-08:00
       </div>
     `)
   })

packages/components/src/DateTimeFormat/DateTimeFormat.test.tsx

@@ -34,7 +34,7 @@ const realDateNow = Date.now.bind(global.Date)
 
 beforeEach(() => {
   /* eslint-disable-next-line @typescript-eslint/unbound-method */
-  global.Date.now = jest.fn(() => 1580517818172)
+  global.Date.now = jest.fn(() => 1580567580000)
 })
 
 afterEach(() => {

packages/components/src/Form/Fields/FieldDate/FieldDate.test.tsx

@@ -34,7 +34,7 @@ const realDateNow = Date.now.bind(global.Date)
 
 beforeEach(() => {
   /* eslint-disable-next-line @typescript-eslint/unbound-method */
-  global.Date.now = jest.fn(() => 1580517818172)
+  global.Date.now = jest.fn(() => 1580567580000)
 })
 
 afterEach(() => {