test(hook): add test for new sessionStorage hook

examples/basic.html

@@ -52,26 +52,13 @@ <h3>450 €</h3>
     <!-- <script src="https://cdn.jsdelivr.net/npm/@alma/widgets@3.x/dist/widgets.umd.js"></script> -->
 
     <script>
-      var widgets = Alma.Widgets.initialize('merchant_11y01pX1qXqx7HEtQUfQMdXVWJIabIE5f9', 'http://localhost:1337')
-
+      var widgets = Alma.Widgets.initialize('11gKoO333vEXacMNMUMUSc4c4g68g2Les4', Alma.ApiMode.TEST)
       function renderPaymentPlans() {
         var purchaseAmount = 450 * 100 * document.getElementById('quantity').value
         widgets.add(Alma.Widgets.PaymentPlans, {
           container: '#alma-widget-payment-plans',
           locale: 'fr',
           purchaseAmount,
-          plans: [
-            {
-              installmentsCount: 4,
-              minAmount: 5000,
-              maxAmount: 90000,
-            },
-            {
-              installmentsCount: 10,
-              minAmount: 5000,
-              maxAmount: 90000,
-            },
-          ],
         })
       }
       renderPaymentPlans()

package.json

@@ -53,6 +53,7 @@
     "@rollup/plugin-image": "^2.0.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/classnames": "^2.3.1",
     "@types/jest": "^26.0.16",

src/hooks/useSessionStorage.test.ts

@@ -0,0 +1,57 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import { mockButtonPlans } from 'test/fixtures'
+import { useSessionStorage } from 'hooks/useSessionStorage'
+describe('useSessionStorage', () => {
+  let mockStorage: Record<string, string> = {}
+
+  beforeAll(() => {
+    global.Storage.prototype.setItem = jest.fn((key: string, value) => {
+      mockStorage[key] = value
+    })
+    global.Storage.prototype.getItem = jest.fn((key) => {
+      return mockStorage[key]
+    })
+    global.Storage.prototype.removeItem = jest.fn((key) => {
+      delete mockStorage[key]
+    })
+    global.Storage.prototype.clear = jest.fn(() => {
+      mockStorage = {}
+    })
+  })
+
+  beforeEach(() => {
+    // Start with a clean storage
+    mockStorage = {}
+  })
+
+  afterAll(() => {
+    jest.resetAllMocks()
+  })
+
+  it('should call the dedicated sessionStorage functions', () => {
+    const { result } = renderHook(() => useSessionStorage())
+
+    // First we check that the storage is empty for a key
+    expect(result.current.getCache('someKey')).toEqual(null)
+    // We set values for the specific key
+    act(() => result.current.setCache('someKey', mockButtonPlans))
+
+    // We check that storage has been updated
+    expect(result.current.getCache('someKey')).toStrictEqual(mockButtonPlans)
+
+    // We set another value for the another key
+    act(() => result.current.setCache('otherKey', [mockButtonPlans[0]]))
+
+    // We delete someKey values
+    act(() => result.current.deleteCache('someKey'))
+    // We check that storage is empty again for this key
+    expect(result.current.getCache('someKey')).toEqual(null)
+    // But it's still filled for the other key
+    expect(result.current.getCache('otherKey')).toStrictEqual([mockButtonPlans[0]])
+
+    // We clean the storage
+    act(() => result.current.clearCache())
+    // We check that storage is empty for the remaining key
+    expect(result.current.getCache('otherKey')).toStrictEqual(null)
+  })
+})

src/hooks/useSessionStorage.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ConfigPlan, EligibilityPlan } from 'types'
 import { hashStringForStorage } from 'utils/utilsForStorage'
 

src/setupTests.ts

@@ -4,7 +4,6 @@
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect'
 import secondsToMilliseconds from 'date-fns/secondsToMilliseconds'
-import { EligibilityPlan } from './types'
 
 jest.mock('no-scroll', () => ({ on: jest.fn(), off: jest.fn() }))