Update jest packages (#4048)

* Update jest packages Signed-off-by: Olga Bulat <[email protected]> * Update frontend/test/unit/test-utils/api-service-mock.ts * Update the lock file Signed-off-by: Olga Bulat <[email protected]> --------- Signed-off-by: Olga Bulat <[email protected]>
WordPress · Apr 8, 2024 · cd74e8a · cd74e8a
1 parent f68317b
commit cd74e8a
Show file tree

Hide file tree

Showing 14 changed files with 2,418 additions and 3,722 deletions.
diff --git a/frontend/jest.config.js → frontend/jest.config.ts b/frontend/jest.config.js → frontend/jest.config.ts
@@ -1,4 +1,6 @@
-module.exports = {
+import type { Config } from "jest"
+
+const config: Config = {
   globals: {
     "vue-jest": {
       experimentalCSSCompile: false,
@@ -7,31 +9,30 @@ module.exports = {
       },
     },
   },
+  testEnvironment: "jsdom",
   moduleFileExtensions: ["ts", "js", "vue", "json"],
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
-    "^~/(.*.svg)\\?inline$": "<rootDir>/src/$1",
     "^~/(.*)$": "<rootDir>/src/$1",
     "^~~/(.*)$": "<rootDir>/$1",
-    "^vue$": "vue/dist/vue.common.js",
-    "(.*svg)(\\?inline)$": "<rootDir>/test/unit/test-utils/svgTransform.js",
-    "^axios$": "axios/dist/node/axios.cjs",
+    "^@nuxtjs/composition-api$":
+      "<rootDir>/node_modules/@nuxtjs/composition-api/dist/runtime/index.js",
   },
   setupFiles: ["<rootDir>/test/unit/setup.js"],
   setupFilesAfterEnv: ["<rootDir>/test/unit/setup-after-env.js"],
   transform: {
     "^.+\\.(j|t)s$": "babel-jest",
-    ".*\\.(vue)$": "vue-jest",
+    ".*\\.(vue)$": "@vue/vue2-jest",
     ".+\\.(css|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
-    "^.+\\.svg$": "<rootDir>/test/unit/svg-transform.js",
   },
+  transformIgnorePatterns: ["/node_modules/(?!@nuxtjs/composition-api)"],
   testPathIgnorePatterns: ["/playwright/", "/storybook/", ".remake"],
   collectCoverage: false,
   coverageDirectory: "<rootDir>/test/unit/coverage",
   collectCoverageFrom: [
     "<rootDir>/src/**/*.vue",
     "<rootDir>/src/**/*.js",
     "<rootDir>/src/**/*.ts",
-    "!<rootDir>/src/**/*.stories.js",
   ],
 }
+export default config
diff --git a/frontend/package.json b/frontend/package.json
@@ -74,7 +74,7 @@
     "axios-mock-adapter": "^1.20.0",
     "clipboard": "^2.0.11",
     "cookie-universal-nuxt": "^2.1.5",
-    "core-js": "^3.27.2",
+    "core-js": "^3.36.1",
     "express-prom-bundle": "^6.4.1",
     "express-useragent": "^1.0.15",
     "focus-trap": "^7.5.4",
@@ -95,37 +95,39 @@
     "vue-plausible": "^1.3.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/parser": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/core": "^7.24.4",
+    "@babel/parser": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-typescript": "^7.24.1",
     "@itsjonq/remake": "^2.0.0",
     "@nuxt/types": "^2.17.2",
     "@nuxt/typescript-build": "^3.0.1",
     "@nuxtjs/storybook": "^4.3.2",
     "@pinia/testing": "^0.1.0",
     "@playwright/test": "1.42.1",
     "@tailwindcss/typography": "^0.5.10",
-    "@testing-library/dom": "^8.13.0",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/user-event": "^14.0.0",
-    "@testing-library/vue": "^5.8.2",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/vue": "^5.9.0",
     "@types/express-useragent": "^1.0.2",
-    "@types/jest": "^29.5.4",
+    "@types/jest": "^29.5.12",
     "@types/node": "18.19.28",
     "@types/throttle-debounce": "^5.0.0",
     "@types/uuid": "^9.0.6",
     "@vue/test-utils": "^1.1.3",
+    "@vue/vue2-jest": "^29.2.6",
     "adm-zip": "^0.5.10",
     "autoprefixer": "^10.4.16",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^29.7.0",
     "babel-loader": "8.3.0",
     "chokidar": "^3.5.3",
     "comment-json": "^4.2.3",
     "css-loader": "^5.2.7",
-    "jest": "^26.6.3",
-    "jest-fail-on-console": "^3.1.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-fail-on-console": "^3.2.0",
     "jest-transform-stub": "^2.0.0",
     "npm-run-all2": "^6.1.2",
     "postcss": "^8.4.31",
@@ -137,7 +139,6 @@
     "typescript": "^5.2.2",
     "vue-demi": "^0.14.7",
     "vue-i18n-extract": "^2.0.7",
-    "vue-jest": "^3.0.7",
     "vue-loader": "^15.10.0",
     "vue-server-renderer": "^2.7.15",
     "vue-template-compiler": "^2.7.15",

diff --git a/frontend/src/components/VImageCell/VImageCell.vue b/frontend/src/components/VImageCell/VImageCell.vue
@@ -60,8 +60,8 @@
   </li>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { computed, withDefaults } from "vue"
 
 import { useContext } from "@nuxtjs/composition-api"
 
@@ -81,6 +81,29 @@ import VLink from "~/components/VLink.vue"
 
 import errorImage from "~/assets/image_not_available_placeholder.png"
 
+const props = withDefaults(
+  defineProps<{
+    image: ImageDetail
+    /**
+     * The search term is added to the URL to allow the user to
+     * navigate back/forward to the search results page.
+     */
+    searchTerm: string | null
+    /**
+     * All content view uses the square image cells, Image view
+     * uses the image's intrinsic size.
+     */
+    aspectRatio?: AspectRatio
+    kind?: ResultKind
+    relatedTo?: string | null
+  }>(),
+  {
+    aspectRatio: () => "square",
+    kind: () => "search",
+    relatedTo: () => null,
+  }
+)
+
 const toAbsolutePath = (url: string, prefix = "https://") => {
   if (
     url.startsWith("http://") ||
@@ -92,148 +115,91 @@ const toAbsolutePath = (url: string, prefix = "https://") => {
   return `${prefix}${url}`
 }
 
-export default defineComponent({
-  name: "VImageCell",
-  components: { VLicense, VLink },
-  props: {
-    image: {
-      type: Object as PropType<ImageDetail>,
-      required: true,
-    },
-    /**
-     * The search term is added to the URL to allow the user to
-     * navigate back/forward to the search results page.
-     */
-    searchTerm: {
-      type: String,
-    },
-    /**
-     * All content view uses the square image cells, Image view
-     * uses the image's intrinsic size.
-     */
-    aspectRatio: {
-      type: String as PropType<AspectRatio>,
-      default: "square",
-    },
-    kind: {
-      type: String as PropType<ResultKind>,
-      default: "search",
-    },
-    relatedTo: {
-      type: [String, null] as PropType<string | null>,
-      default: null,
-    },
-  },
-  setup(props) {
-    const isSquare = computed(() => props.aspectRatio === "square")
-    const { imgHeight, imgWidth, isPanorama, styles } = useImageCellSize({
-      imageSize: { width: props.image.width, height: props.image.height },
-      isSquare,
-    })
-    const i18n = useI18n()
-
-    const imageUrl = computed(() => {
-      // TODO: check if we have blurry panorama thumbnails
-      // Use the main image file and not the thumbnails for panorama images to
-      // fix for blurry panorama thumbnails, introduced in
-      // https://github.com/cc-archive/cccatalog-frontend/commit/4c9bdac5
-      if (isPanorama.value) {
-        return toAbsolutePath(props.image.url)
-      }
-      const url = props.image.thumbnail || props.image.url
-      return toAbsolutePath(url)
-    })
-
-    const imageLink = computed(() => {
-      return `/image/${props.image.id}/${
-        props.searchTerm ? "?q=" + props.searchTerm : ""
-      }`
-    })
-
-    const getImageForeignUrl = () =>
-      toAbsolutePath(props.image.foreign_landing_url)
-
-    /**
-     * If the thumbnail fails to load, try replacing it with the original image URL.
-     * If the original image fails, too, use the error image placeholder.
-     * @param event - the error event.
-     */
-    const onImageLoadError = (event: Event) => {
-      const element = event.target as HTMLImageElement
-      element.src =
-        element.src === props.image.url ? errorImage : props.image.url
-    }
-    /**
-     * If the image is not square, on the image load event, update
-     * the img's height and width with image natural dimensions.
-     * @param event - the load event.
-     */
-    const getImgDimension = (event: Event) => {
-      if (props.aspectRatio === "square") {
-        return
-      }
-      const element = event.target as HTMLImageElement
-      imgHeight.value = element.naturalHeight
-      imgWidth.value = element.naturalWidth
-    }
-
-    const contextSensitiveTitle = computed(() => {
-      return shouldBlur.value
-        ? i18n.t("sensitiveContent.title.image")
-        : i18n.t("browsePage.aria.imageTitle", {
-            title: props.image.title,
-          })
-    })
-
-    const { $sendCustomEvent } = useContext()
-    const searchStore = useSearchStore()
+const isSquare = computed(() => props.aspectRatio === "square")
+const { imgHeight, imgWidth, isPanorama, styles } = useImageCellSize({
+  imageSize: { width: props.image.width, height: props.image.height },
+  isSquare,
+})
+const i18n = useI18n()
+
+const imageUrl = computed(() => {
+  // TODO: check if we have blurry panorama thumbnails
+  // Use the main image file and not the thumbnails for panorama images to
+  // fix for blurry panorama thumbnails, introduced in
+  // https://github.com/cc-archive/cccatalog-frontend/commit/4c9bdac5
+  if (isPanorama.value) {
+    return toAbsolutePath(props.image.url)
+  }
+  const url = props.image.thumbnail || props.image.url
+  return toAbsolutePath(url)
+})
 
-    /**
-     * If the user left clicks on a search result, send
-     * the SELECT_SEARCH_RESULT custom event
-     * @param event - the mouse click event
-     */
-    const sendSelectSearchResultEvent = (event: MouseEvent) => {
-      if (event.button !== 0) {
-        return
-      }
-
-      $sendCustomEvent("SELECT_SEARCH_RESULT", {
-        id: props.image.id,
-        kind: props.kind,
-        mediaType: IMAGE,
-        provider: props.image.provider,
-        query: props.searchTerm || "",
-        relatedTo: props.relatedTo,
-        sensitivities: props.image.sensitivity?.join(",") ?? "",
-        isBlurred: shouldBlur.value,
-        collectionType:
-          searchStore.strategy !== "default" ? searchStore.strategy : null,
-        collectionValue: searchStore.collectionValue,
-      })
-    }
+const imageLink = computed(() => {
+  return `/image/${props.image.id}/${
+    props.searchTerm ? "?q=" + props.searchTerm : ""
+  }`
+})
 
-    const { isHidden: shouldBlur } = useSensitiveMedia(props.image)
+/**
+ * If the thumbnail fails to load, try replacing it with the original image URL.
+ * If the original image fails, too, use the error image placeholder.
+ * @param event - the error event.
+ */
+const onImageLoadError = (event: Event) => {
+  const element = event.target as HTMLImageElement
+  element.src = element.src === props.image.url ? errorImage : props.image.url
+}
+/**
+ * If the image is not square, on the image load event, update
+ * the img's height and width with image natural dimensions.
+ * @param event - the load event.
+ */
+const getImgDimension = (event: Event) => {
+  if (props.aspectRatio === "square") {
+    return
+  }
+  const element = event.target as HTMLImageElement
+  imgHeight.value = element.naturalHeight
+  imgWidth.value = element.naturalWidth
+}
 
-    return {
-      styles,
-      imgWidth,
-      imgHeight,
-      imageUrl,
-      imageLink,
-      contextSensitiveTitle,
-      shouldBlur,
+const contextSensitiveTitle = computed(() => {
+  return shouldBlur.value
+    ? i18n.t("sensitiveContent.title.image")
+    : i18n.t("browsePage.aria.imageTitle", {
+        title: props.image.title,
+      })
+})
 
-      getImageForeignUrl,
-      onImageLoadError,
-      getImgDimension,
+const { $sendCustomEvent } = useContext()
+const searchStore = useSearchStore()
+
+/**
+ * If the user left clicks on a search result, send
+ * the SELECT_SEARCH_RESULT custom event
+ * @param event - the mouse click event
+ */
+const sendSelectSearchResultEvent = (event: MouseEvent) => {
+  if (event.button !== 0) {
+    return
+  }
 
-      isSquare,
+  $sendCustomEvent("SELECT_SEARCH_RESULT", {
+    id: props.image.id,
+    kind: props.kind,
+    mediaType: IMAGE,
+    provider: props.image.provider,
+    query: props.searchTerm || "",
+    relatedTo: props.relatedTo,
+    sensitivities: props.image.sensitivity?.join(",") ?? "",
+    isBlurred: shouldBlur.value,
+    collectionType:
+      searchStore.strategy !== "default" ? searchStore.strategy : null,
+    collectionValue: searchStore.collectionValue,
+  })
+}
 
-      sendSelectSearchResultEvent,
-    }
-  },
-})
+const { isHidden: shouldBlur } = useSensitiveMedia(props.image)
 </script>
 
 <style scoped>