Skip to content

Update jest packages #4048

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 8, 2024
Merged

Update jest packages #4048

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9f49b51
Update jest packages
obulat Apr 8, 2024
5f3be71
Update frontend/test/unit/test-utils/api-service-mock.ts
obulat Apr 8, 2024
2be331d
Update the lock file
obulat Apr 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions frontend/jest.config.js → frontend/jest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
module.exports = {
import type { Config } from "jest"

const config: Config = {
globals: {
"vue-jest": {
experimentalCSSCompile: false,
Expand All @@ -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
29 changes: 15 additions & 14 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
242 changes: 104 additions & 138 deletions frontend/src/components/VImageCell/VImageCell.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,8 @@
</li>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from "vue"
<script setup lang="ts">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Exciting!

import { computed, withDefaults } from "vue"

import { useContext } from "@nuxtjs/composition-api"

Expand All @@ -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://") ||
Expand All @@ -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>
Expand Down
Loading