diff --git a/README.md b/README.md index aab8970..4eef5ad 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ This theme developed by superheroes from [Caravel](https://github.com/caravelx) ### Requirements: -- NodeJS v14 or later +- NodeJS v16 or later - Yarn - Magento >= v2.4.3 instance for GraphQL endpoint - Change Magento GraphQL Query Complexity and Depth values diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..2207af6 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,17 @@ +/* eslint-disable unicorn/prefer-module */ +module.exports = { + env: { + test: { + presets: [ + [ + '@babel/preset-env', + { + targets: { + node: 'current', + }, + }, + ], + ], + }, + }, +}; diff --git a/components/AppHeader.vue b/components/AppHeader.vue index a920afb..03c1c48 100644 --- a/components/AppHeader.vue +++ b/components/AppHeader.vue @@ -277,9 +277,7 @@ export default defineComponent({ itemsPerPage: 12, term: term.value, }), - categoriesSearch({ - term: term.value, - }), + categoriesSearch({ filters: { name: { match: `${term.value}` } } }), ]); result.value = { diff --git a/components/CartSidebar.vue b/components/CartSidebar.vue index c7566b9..ffe28e5 100644 --- a/components/CartSidebar.vue +++ b/components/CartSidebar.vue @@ -292,7 +292,7 @@ export default defineComponent({ }); const goToCheckout = async () => { - const redirectUrl = await initializeCheckout('/checkout/user-account'); + const redirectUrl = await initializeCheckout({ baseUrl: '/checkout/user-account' }); await router.push(redirectUrl); }; diff --git a/components/CurrencySelector.vue b/components/CurrencySelector.vue index 7506cbe..0853d8c 100644 --- a/components/CurrencySelector.vue +++ b/components/CurrencySelector.vue @@ -22,7 +22,7 @@ href="/" :class="selectedCurrency === currency ? 'container__currency--selected-label' : ''" @click.prevent="handleChanges({ - callback: () => changeCurrency(currency), + callback: () => changeCurrency({id: currency}), redirect: false, refresh: true })" diff --git a/components/LocaleSelector.vue b/components/LocaleSelector.vue index 161f9c1..799074b 100644 --- a/components/LocaleSelector.vue +++ b/components/LocaleSelector.vue @@ -5,7 +5,7 @@ @click="isLangModalOpen = !isLangModalOpen" > @@ -131,6 +131,7 @@ export default defineComponent({ stores, change: changeStore, } = useStore(); + const { handleChanges } = useHandleChanges(); const { diff --git a/components/__tests__/AddtoWishlist.spec.js b/components/__tests__/AddtoWishlist.spec.js new file mode 100644 index 0000000..4855df9 --- /dev/null +++ b/components/__tests__/AddtoWishlist.spec.js @@ -0,0 +1,49 @@ +import userEvent from '@testing-library/user-event'; +import { render } from '~/test-utils'; +// @ts-ignore +import AddToWishlist from '../AddToWishlist'; + +describe('', () => { + it('Should not render add to wishlist button because isShow prop equals false by default', () => { + const { queryByText } = render(AddToWishlist); + + expect(queryByText('Add to wishlist')).toBeNull(); + }); + + it('Should render add to wishlist button', () => { + const { getByText } = render(AddToWishlist, { + props: { + isShow: true, + }, + }); + + const button = getByText('Add to wishlist'); + expect(button).toBeInTheDocument(); + }); + + it('Should render remove from wishlist button', () => { + const { getByText } = render(AddToWishlist, { + props: { + isShow: true, + isInWishlist: true, + }, + }); + + const button = getByText('Remove from wishlist'); + expect(button).toBeInTheDocument(); + }); + + it('Should emit clock event when add to wishlist button is clicked', () => { + const { getByText, emitted } = render(AddToWishlist, { + props: { + isShow: true, + }, + }); + + const button = getByText('Add to wishlist'); + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + userEvent.click(button); + + expect(emitted()).toHaveProperty('addToWishlist'); + }); +}); diff --git a/composables/useMagentoConfiguration.ts b/composables/useMagentoConfiguration.ts index ceeea8e..df22997 100644 --- a/composables/useMagentoConfiguration.ts +++ b/composables/useMagentoConfiguration.ts @@ -30,24 +30,35 @@ export const useMagentoConfiguration = () => { const selectedStore = computed(() => app.$cookies.get(cookieNames.storeCookieName)); - const loadConfiguration = async () => { + const loadConfiguration = async (params = { + updateCookies: false, + updateLocale: false, + }) => { + const { + updateCookies, + updateLocale, + } = params; await Promise.all([ loadConfig(), loadStores(), loadCurrencies(), ]); - if (!app.$cookies.get(cookieNames.storeCookieName)) { + if (!app.$cookies.get(cookieNames.storeCookieName) || updateCookies) { app.$cookies.set(cookieNames.storeCookieName, storeConfigGetters.getCode(storeConfig.value)); } - if (!app.$cookies.get(cookieNames.localeCookieName)) { + if (!app.$cookies.get(cookieNames.localeCookieName) || updateCookies) { app.$cookies.set(cookieNames.localeCookieName, storeConfigGetters.getLocale(storeConfig.value)); } - if (!app.$cookies.get(cookieNames.currencyCookieName)) { + if (!app.$cookies.get(cookieNames.currencyCookieName) || updateCookies) { app.$cookies.set(cookieNames.currencyCookieName, storeConfigGetters.getCurrency(storeConfig.value)); } + + if (updateLocale) { + app.i18n.setLocale(storeConfigGetters.getLocale(storeConfig.value)); + } }; return { diff --git a/composables/useUrlResolver.ts b/composables/useUrlResolver.ts index f78eb19..43f6fe6 100644 --- a/composables/useUrlResolver.ts +++ b/composables/useUrlResolver.ts @@ -17,7 +17,7 @@ export const useUrlResolver = () => { return { path, search: async () => { - await search(path); + await search({ url: path }); if (!result?.value) error({ statusCode: 404 }); }, result, diff --git a/jest-setup.js b/jest-setup.js new file mode 100644 index 0000000..0e41548 --- /dev/null +++ b/jest-setup.js @@ -0,0 +1,4 @@ +import '@testing-library/jest-dom'; +import Vue from 'vue'; + +Vue.directive('e2e', {}); diff --git a/jest.config.js b/jest.config.js index 555d456..4c56056 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,4 +1,4 @@ -'use strict' +/* eslint-disable unicorn/prefer-module */ module.exports = { globals: { __DEV__: true, @@ -20,25 +20,26 @@ module.exports = { }, coveragePathIgnorePatterns: ['/node_modules/', '.d.ts$', '/__mocks__/'], - collectCoverage: true, - testEnvironment: 'jest-environment-jsdom-sixteen', + collectCoverage: false, + testEnvironment: 'jsdom', moduleNameMapper: { '^@/(.*)$': '/$1', '^~/(.*)$': '/$1', - '^vue$': 'vue/dist/vue.common.js' + '^vue$': 'vue/dist/vue.common.js', }, - moduleFileExtensions: ['js', 'vue', 'json'], + moduleFileExtensions: ['js', 'vue', 'json', 'ts'], transform: { '^.+\\.(ts)$': 'ts-jest', '^.+\\.js$': 'babel-jest', - '.*\\.(vue)$': 'vue-jest' + '^.+\\.vue$': 'vue-jest', + '^.+\\.(css|svg)': 'jest-transform-stub', }, coverageDirectory: './coverage/', collectCoverageFrom: [ '/components/**/*.vue', - '/pages/**/*.vue' + '/pages/**/*.vue', ], setupFiles: [ @@ -46,13 +47,17 @@ module.exports = { 'jest-localstorage-mock', ], + setupFilesAfterEnv: ['/jest-setup.js'], + transformIgnorePatterns: [ - 'node_modules', - '/node_modules', + 'node_modules/(?!(@storefront-ui)|vee-validate/dist/rules|nouislider)', + ], testMatch: ['/**/__tests__/**/*spec.[jt]s?(x)'], + modulePathIgnorePatterns: ['_theme', 'tests/e2e'], + watchPlugins: [ 'jest-watch-typeahead/filename', 'jest-watch-typeahead/testname', diff --git a/middleware.config.js b/middleware.config.js index b411b52..91ab3a4 100755 --- a/middleware.config.js +++ b/middleware.config.js @@ -19,9 +19,6 @@ module.exports = { default: config.get('enableMagentoExternalCheckout'), }, }, - tax: { - displayCartSubtotalIncludingTax: true, - }, facets: { available: ['color', 'size', 'price'], }, diff --git a/nuxt.config.js b/nuxt.config.js index fa83468..444a405 100755 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -1,3 +1,6 @@ +// @core-development-only-start +/* eslint-disable unicorn/prefer-module */ +// @core-development-only-end import webpack from 'webpack'; import config from './config.js'; import middleware from './middleware.config'; @@ -9,9 +12,7 @@ const { configuration: { cookies, externalCheckout, - tax, defaultStore, - websites, facets, }, }, @@ -71,9 +72,7 @@ export default { }, cookies, externalCheckout, - tax, defaultStore, - websites, facets, }], ], @@ -110,6 +109,20 @@ export default { currencyDisplay: 'symbol', }, }, + 'de-DE': { + currency: { + style: 'currency', + currency: 'EUR', + currencyDisplay: 'symbol', + }, + }, + 'nl-NL': { + currency: { + style: 'currency', + currency: 'EUR', + currencyDisplay: 'symbol', + }, + }, }, }, detectBrowserLanguage: { diff --git a/package.json b/package.json index 9021b16..ecd9d20 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@vue-storefront/magento-theme", - "version": "1.0.0-rc.5.1", + "version": "1.0.0-rc.5.2", "private": true, "license": "MIT", "homepage": "https://github.com/vuestorefront/magento2", @@ -17,6 +17,8 @@ "precommit": "lint-staged", "start": "nuxt start", "test": "jest", + "test:watch": "jest --watch", + "test:coverage": "jest --coverage", "test:e2e": "cypress open --config-file tests/e2e/cypress.json", "test:e2e:generate:report": "yarn -s mochawesome-merge \"tests/e2e/report/*.json\" > \"tests/e2e/report.json\" && yarn -s marge tests/e2e/report.json -o \"tests/e2e/report\"", "test:e2e:hl": "cypress run --headless --config-file tests/e2e/cypress.json", @@ -26,20 +28,19 @@ "dependencies": { "@nuxtjs/composition-api": "^0.31.0", "@nuxtjs/google-fonts": "^1.3.0", - "@nuxtjs/html-validator": "^0.6.0", "@nuxtjs/pwa": "^3.3.5", "@nuxtjs/style-resources": "^1.2.1", - "@storefront-ui/vue": "^0.11.3", - "@vue-storefront/core": "~2.5.2", - "@vue-storefront/magento": "1.0.0-rc.5.1", - "@vue-storefront/middleware": "~2.5.2", - "@vue-storefront/nuxt": "~2.5.2", - "@vue-storefront/nuxt-theme": "~2.5.2", + "@storefront-ui/vue": "^0.11.5", + "@vue-storefront/core": "~2.5.3", + "@vue-storefront/magento": "1.0.0-rc.5.2", + "@vue-storefront/middleware": "~2.5.3", + "@vue-storefront/nuxt": "~2.5.3", + "@vue-storefront/nuxt-theme": "~2.5.3", "convict": "^6.2.1", "convict-format-with-validator": "^6.2.0", "cookie-universal-nuxt": "^2.1.5", "deepdash": "^5.3.9", - "isomorphic-dompurify": "^0.16.0", + "isomorphic-dompurify": "^0.17.0", "lodash.debounce": "^4.0.8", "lodash.merge": "^4.6.2", "nuxt": "^2.15.8", @@ -51,39 +52,49 @@ "vue-scrollto": "^2.20.0" }, "devDependencies": { + "@babel/core": "^7.16.5", "@nuxt/types": "latest", "@nuxt/typescript-build": "latest", + "@nuxtjs/html-validator": "^0.6.0", + "@testing-library/jest-dom": "^5.16.1", + "@testing-library/user-event": "^13.5.0", + "@testing-library/vue": "^5.8.2", "@vue/test-utils": "^1.3.0", "babel-core": "7.0.0-bridge.0", - "babel-jest": "^27.4.2", - "cypress": "^9.1.1", + "babel-jest": "^27.4.5", + "cypress": "^9.2.0", "cypress-pipe": "^2.0.0", "cypress-tags": "^0.3.0", "dotenv": "^10.0.0", "ejs": "^3.1.6", - "jest": "^27.4.3", + "jest": "^27.4.5", "jest-date-mock": "^1.0.8", - "jest-environment-jsdom-sixteen": "^2.0.0", + "jest-environment-jsdom": "^27.4.4", "jest-localstorage-mock": "^2.4.18", "jest-silent-reporter": "^0.5.0", "jest-transform-stub": "^2.0.0", "jest-watch-toggle-config": "^2.0.1", "jest-watch-typeahead": "^1.0.0", - "lint-staged": "^12.1.2", + "lint-staged": "^12.1.3", "majestic": "^1.8.1", + "mocha": "^9.1.3", "mochawesome": "^7.0.1", "mochawesome-merge": "^4.2.1", "mochawesome-report-generator": "^6.0.1", - "npm-check-updates": "^12.0.3", + "npm-check-updates": "^12.0.5", "rollup-plugin-terser": "^7.0.2", - "ts-jest": "^27.1.1", + "ts-jest": "^27.1.2", "ts-loader": "^8.1.0", + "ts-node": "^10.4.0", "tslib": "^2.3.1", - "typescript": "^4.5.2", - "vue-jest": "^4.0.0-0", + "typescript": "^4.5.4", + "vue-jest": "^3.0.7", "webpack": "4.46.0" }, + "peerDependencies": { + "vue": "^2.6.11" + }, "engines": { - "node": ">=14.x" + "node": ">=16.x" } } diff --git a/pages/Checkout/UserAccount.vue b/pages/Checkout/UserAccount.vue index 048fe83..4c15942 100644 --- a/pages/Checkout/UserAccount.vue +++ b/pages/Checkout/UserAccount.vue @@ -1,5 +1,5 @@