Upgrade PhotoSwipe (#13833)

Author: willdurand

jest.config.js

@@ -40,7 +40,10 @@ module.exports = {
     // Tests can assert on the filename.
     '^.+\\.(jpg|jpeg|gif|png|svg)$': '<rootDir>/tests/fileTransformer',
   },
-  transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  transformIgnorePatterns: [
+    // ESM modules should be transformed.
+    '<rootDir>/node_modules/(?!(react-photoswipe-gallery|photoswipe)/)',
+  ],
   watchPlugins: [
     'jest-watch-typeahead/filename',
     'jest-watch-typeahead/testname',

package.json

@@ -209,7 +209,7 @@
     "nano-time": "1.0.0",
     "normalize.css": "8.0.1",
     "photon-colors": "3.3.2",
-    "photoswipe": "4.1.3",
+    "photoswipe": "5.4.4",
     "pino": "9.10.0",
     "pino-syslog": "3.1.0",
     "prop-types": "15.8.1",
@@ -225,7 +225,7 @@
     "react-keydown": "1.9.12",
     "react-nested-status": "0.2.1",
     "react-onclickoutside": "6.13.2",
-    "react-photoswipe-gallery": "1.3.10",
+    "react-photoswipe-gallery": "4.0.0",
     "react-redux": "8.1.3",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
@@ -333,7 +333,7 @@
   "bundlewatch": [
     {
       "path": "./dist/static/amo-!(i18n-)*.js",
-      "maxSize": "369 kB"
+      "maxSize": "371 kB"
     },
     {
       "path": "./dist/static/amo-i18n-*.js",

src/amo/components/ScreenShots/index.js

@@ -3,20 +3,12 @@ import invariant from 'invariant';
 import * as React from 'react';
 import { Gallery, Item } from 'react-photoswipe-gallery';
 import 'photoswipe/dist/photoswipe.css';
-import 'photoswipe/dist/default-skin/default-skin.css';
 
 import type { PreviewType } from 'amo/types/addons';
 import './styles.scss';
 
 export const PHOTO_SWIPE_OPTIONS = {
-  closeEl: true,
-  captionEl: true,
-  fullscreenEl: false,
-  zoomEl: false,
-  shareEl: false,
-  counterEl: true,
-  arrowEl: true,
-  preloaderEl: true,
+  bgOpacity: 0.9,
 };
 
 type Props = {|
@@ -35,8 +27,8 @@ export default class ScreenShots extends React.Component<Props> {
     // This is used to update the horizontal list of thumbnails in order to
     // show the last image displayed in fullscreen mode when we close the
     // carousel.
-    photoswipe.listen('close', () => {
-      const index = photoswipe.getCurrentIndex();
+    photoswipe.on('close', () => {
+      const { index } = photoswipe.currSlide;
       const currentItem = list.children[index];
       const offset = currentItem.getBoundingClientRect().left;
 
@@ -59,6 +51,7 @@ export default class ScreenShots extends React.Component<Props> {
             <Gallery
               options={PHOTO_SWIPE_OPTIONS}
               onOpen={this.onOpenPhotoswipe}
+              withCaption
             >
               {previews.map((preview) => (
                 <Item
@@ -67,7 +60,7 @@ export default class ScreenShots extends React.Component<Props> {
                   thumbnail={preview.thumbnail_src}
                   width={preview.w}
                   height={preview.h}
-                  title={preview.title}
+                  caption={preview.title}
                 >
                   {({ ref, open }) => (
                     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions

tests/unit/amo/components/TestScreenShots.js

@@ -1,3 +1,4 @@
+/* global window */
 import * as React from 'react';
 import userEvent from '@testing-library/user-event';
 
@@ -7,6 +8,21 @@ import { render as defaultRender, screen } from 'tests/unit/helpers';
 const HEIGHT = 400;
 const WIDTH = 200;
 
+// See: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 describe(__filename, () => {
   const testPreviews = [
     {
@@ -53,34 +69,7 @@ describe(__filename, () => {
 
     await userEvent.click(screen.getByAltText(testPreviews[0].title));
 
-    // Verifying the output of PHOTO_SWIPE_OPTIONS.
-    // closeEl: true,
-    expect(screen.getByTitle('Close (Esc)')).not.toHaveClass(
-      'pswp__element--disabled',
-    );
-    // captionEl: true,
-    expect(screen.getAllByText(testPreviews[0].title)).toHaveLength(2);
-    // fullscreenEl: false,
-    expect(screen.getByTitle('Toggle fullscreen')).toHaveClass(
-      'pswp__element--disabled',
-    );
-    // zoomEl: false,
-    expect(screen.getByTitle('Zoom in/out')).toHaveClass(
-      'pswp__element--disabled',
-    );
-    // shareEl: false,
-    expect(screen.getByTitle('Share')).toHaveClass('pswp__element--disabled');
-    // counterEl: true,
-    expect(screen.getByText('1 / 2')).toBeInTheDocument();
-    // arrowEl: true,
-    expect(screen.getByTitle('Previous (arrow left)')).not.toHaveClass(
-      'pswp__element--disabled',
-    );
-    expect(screen.getByTitle('Next (arrow right)')).not.toHaveClass(
-      'pswp__element--disabled',
-    );
-    // preloaderEl: true,
-    expect(screen.getByClassName('pswp__preloader')).toBeInTheDocument();
+    expect(screen.getByText(testPreviews[0].title)).toBeInTheDocument();
   });
 
   // eslint-disable-next-line jest/no-commented-out-tests
@@ -98,11 +87,11 @@ describe(__filename, () => {
 
   it('scrolls to the active item on close', async () => {
     const { unmount } = render();
-    
+
     // eslint-disable-next-line testing-library/no-node-access
     const list = document.querySelector('.ScreenShots-list');
     const scrollLeft = jest.spyOn(list, 'scrollLeft', 'set');
-    
+
     // This clicks the Escape key.
     fireEvent.keyDown(screen.getByAltText(testPreviews[0].title), {
       key: 'Escape',
@@ -113,7 +102,7 @@ describe(__filename, () => {
     await userEvent.keyboard('[Escape]');
     await userEvent.keyboard('{esc}');
     unmount();
-    
+
     await waitFor(() => expect(scrollLeft).toHaveBeenCalled());
   });
   */

yarn.lock

@@ -8196,10 +8196,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/photon-colors/-/photon-colors-3.3.2.tgz#eaf2e5a8ba9368fcdee0607cc86a9f613e6d3417"
   integrity sha512-xCeL7J2F8cjM00zQZEZawHAGnrSOM509RbanL4c8hvrV8n19V/wwdzydX6rSUEtLYj4nx4OvhmKC4/vujo9f/Q==
 
-photoswipe@4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-4.1.3.tgz#59f49494eeb9ddab5888d03392926a19bc197550"
-  integrity sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA==
+photoswipe@5.4.4:
+  version "5.4.4"
+  resolved "https://registry.yarnpkg.com/photoswipe/-/photoswipe-5.4.4.tgz#e045dc036453493188d5c8665b0e8f1000ac4d6e"
+  integrity sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==
 
 picocolors@^1.0.0, picocolors@^1.1.0, picocolors@^1.1.1:
   version "1.1.1"
@@ -8979,10 +8979,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.13.2.tgz#caa6df2c0cfe017506548fa810303fb85d13fb7c"
   integrity sha512-h6Hbf1c8b7tIYY4u90mDdBLY4+AGQVMFtIE89HgC0DtVCh/JfKl477gYqUtGLmjZBKK3MJxomP/lFiLbz4sq9A==
 
-react-photoswipe-gallery@1.3.10:
-  version "1.3.10"
-  resolved "https://registry.yarnpkg.com/react-photoswipe-gallery/-/react-photoswipe-gallery-1.3.10.tgz#82d87c3a435bf8eddce69f17f2d9ecf54e203312"
-  integrity sha512-KIfhIjdqutX+FHEXw06gFsLgbBMSUW9Y5qAW+bI3deTNiSDmF1Sgfh/sKJF+gNkFZTWbmnhG2g7BsrjC7T9etg==
+react-photoswipe-gallery@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/react-photoswipe-gallery/-/react-photoswipe-gallery-4.0.0.tgz#a96d3c91871a3b92d89ee1b09ab1ead72241b407"
+  integrity sha512-rpvGSBddLp1hZfTZgi3UFLJKlupHfDhW6e7w6jUUr5bagTWfrxJ7nB8yzNkx+BaoiMyy4FvJBwc4n/+QW2ft4g==
 
 [email protected]:
   version "8.1.3"