@@ -15,23 +15,23 @@
diff --git a/src/composables/use-device.composable.ts b/src/composables/use-device.composable.ts
index d9d4189f..c2a7911d 100644
--- a/src/composables/use-device.composable.ts
+++ b/src/composables/use-device.composable.ts
@@ -1,4 +1,4 @@
-import { createUseDevice } from '@empathyco/x-components';
-import { breakpoints } from '../device-breakpoints';
+import { createUseDevice } from '@empathyco/x-components'
+import { breakpoints } from '../device-breakpoints'
-export const useDevice = createUseDevice(breakpoints);
+export const useDevice = createUseDevice(breakpoints)
diff --git a/src/composables/use-experience-controls.composable.ts b/src/composables/use-experience-controls.composable.ts
index 60d9e74c..fb6a1c52 100644
--- a/src/composables/use-experience-controls.composable.ts
+++ b/src/composables/use-experience-controls.composable.ts
@@ -1,6 +1,7 @@
-import { computed, ComputedRef } from 'vue';
-import { getSafePropertyChain } from '@empathyco/x-utils';
-import { useState } from '@empathyco/x-components';
+import type { ComputedRef } from 'vue'
+import { useState } from '@empathyco/x-components'
+import { getSafePropertyChain } from '@empathyco/x-utils'
+import { computed } from 'vue'
/**
* Given a controls' object property chain, gets the experience controls values from the response.
@@ -10,20 +11,20 @@ import { useState } from '@empathyco/x-components';
* and set the experience controls property value.
*/
export const useExperienceControls = (): {
- getControlFromPath: (path: string, defaultValue?: SomeType) => ComputedRef;
+ getControlFromPath: (path: string, defaultValue?: SomeType) => ComputedRef
} => {
- const experienceControls = useState('experienceControls', ['controls']).controls;
+ const experienceControls = useState('experienceControls', ['controls']).controls
const getControlFromPath = (
path: string,
- defaultValue?: SomeType
+ defaultValue?: SomeType,
): ComputedRef => {
return computed(() => {
- return getSafePropertyChain(experienceControls.value, path, defaultValue) as SomeType;
- });
- };
+ return getSafePropertyChain(experienceControls.value, path, defaultValue) as SomeType
+ })
+ }
return {
- getControlFromPath
- };
-};
+ getControlFromPath,
+ }
+}
diff --git a/src/composables/use-has-scroll-past-threshold.composable.ts b/src/composables/use-has-scroll-past-threshold.composable.ts
index 1b80509a..775131f6 100644
--- a/src/composables/use-has-scroll-past-threshold.composable.ts
+++ b/src/composables/use-has-scroll-past-threshold.composable.ts
@@ -1,33 +1,38 @@
-import { useState } from '@empathyco/x-components';
-import { computed, watch, ref, Ref } from 'vue';
+import type { ScrollComponentState } from '@empathyco/x-components/types'
+import type { Dictionary } from '@empathyco/x-utils'
+import type { ComputedRef, Ref } from 'vue'
+import { useState } from '@empathyco/x-components'
+import { computed, ref, watch } from 'vue'
export const useHasScrollPastThreshold = (): { hasScrolledPastThreshold: Ref } => {
- const hasScrolledPastThresholdFlag = ref(false);
- const scrollOffset = 100;
- const { data: scrollPositionsMap } = useState('scroll', ['data']);
- const mainScrollPosition = computed(() => scrollPositionsMap.value['main-scroll']?.position);
+ const hasScrolledPastThresholdFlag = ref(false)
+ const scrollOffset = 100
+ const scrollPositionsMap = useState('scroll', ['data']).data as ComputedRef<
+ Dictionary
+ >
+ const mainScrollPosition = computed(() => scrollPositionsMap.value['main-scroll']?.position)
- const hasScrolledPastThreshold = computed(() => hasScrolledPastThresholdFlag.value);
+ const hasScrolledPastThreshold = computed(() => hasScrolledPastThresholdFlag.value)
watch(mainScrollPosition, () => {
- const mainScrollData = scrollPositionsMap.value['main-scroll'];
+ const mainScrollData = scrollPositionsMap.value['main-scroll']
if (mainScrollData?.hasReachedStart) {
- hasScrolledPastThresholdFlag.value = false;
- return;
+ hasScrolledPastThresholdFlag.value = false
+ return
} else {
- hasScrolledPastThresholdFlag.value = true;
+ hasScrolledPastThresholdFlag.value = true
}
- const isScrollingUp = mainScrollData?.direction === 'UP';
+ const isScrollingUp = mainScrollData?.direction === 'UP'
if (isScrollingUp || mainScrollPosition.value < scrollOffset) {
- hasScrolledPastThresholdFlag.value = false;
+ hasScrolledPastThresholdFlag.value = false
} else if (!isScrollingUp && mainScrollPosition.value > scrollOffset) {
- hasScrolledPastThresholdFlag.value = true;
+ hasScrolledPastThresholdFlag.value = true
}
- });
+ })
return {
- hasScrolledPastThreshold
- };
-};
+ hasScrolledPastThreshold,
+ }
+}
diff --git a/src/composables/use-has-searched.composable.ts b/src/composables/use-has-searched.composable.ts
index c0320ef7..8e1815eb 100644
--- a/src/composables/use-has-searched.composable.ts
+++ b/src/composables/use-has-searched.composable.ts
@@ -1,22 +1,23 @@
-import { isStringEmpty, useXBus } from '@empathyco/x-components';
-import { Ref, ref } from 'vue';
+import type { Ref } from 'vue'
+import { isStringEmpty, useXBus } from '@empathyco/x-components'
+import { ref } from 'vue'
export const useHasSearched = (): { hasSearched: Ref } => {
- const bus = useXBus();
- const hasSearched = ref(false);
+ const bus = useXBus()
+ const hasSearched = ref(false)
const searchEvents = [
'UserAcceptedAQuery',
'ParamsLoadedFromUrl',
- 'UserAcceptedAQueryPreview'
- ] as const;
+ 'UserAcceptedAQueryPreview',
+ ] as const
searchEvents.forEach(event => {
bus.on(event, true).subscribe(({ eventPayload }) => {
if (typeof eventPayload === 'string' || !isStringEmpty(eventPayload.query)) {
- hasSearched.value = true;
+ hasSearched.value = true
}
- });
- });
+ })
+ })
- return { hasSearched };
-};
+ return { hasSearched }
+}
diff --git a/src/composables/use-predictive-helpers.composable.ts b/src/composables/use-predictive-helpers.composable.ts
index d6313690..1adbaa8b 100644
--- a/src/composables/use-predictive-helpers.composable.ts
+++ b/src/composables/use-predictive-helpers.composable.ts
@@ -1,15 +1,16 @@
-import { use$x } from '@empathyco/x-components';
-import { computed, ComputedRef } from 'vue';
+import type { ComputedRef } from 'vue'
+import { use$x } from '@empathyco/x-components'
+import { computed } from 'vue'
-type PredictiveHelpers = {
- navigationHijacker: { xEvent: string; moduleName: string; direction: string }[];
- showIdentifierResults: ComputedRef;
- showHistoryQueries: ComputedRef;
- showQuerySuggestions: ComputedRef;
- showNextQueries: ComputedRef;
- showPopularSearches: ComputedRef;
- showEmpathize: ComputedRef;
-};
+interface PredictiveHelpers {
+ navigationHijacker: { xEvent: string; moduleName: string; direction: string }[]
+ showIdentifierResults: ComputedRef
+ showHistoryQueries: ComputedRef
+ showQuerySuggestions: ComputedRef
+ showNextQueries: ComputedRef
+ showPopularSearches: ComputedRef
+ showEmpathize: ComputedRef
+}
/**
* Shared code between the predictive layers.
@@ -19,32 +20,32 @@ type PredictiveHelpers = {
export const usePredictiveHelpers = (): PredictiveHelpers => {
const navigationHijacker = [
{ xEvent: 'UserPressedArrowKey', moduleName: 'scroll', direction: 'ArrowDown' },
- { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' }
- ];
+ { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' },
+ ]
- const $x = use$x();
+ const $x = use$x()
const showIdentifierResults = computed(() => {
- return $x.identifierResults.length > 0;
- });
+ return $x.identifierResults.length > 0
+ })
const showHistoryQueries = computed(() => {
- return $x.historyQueriesWithResults.length > 0;
- });
+ return $x.historyQueriesWithResults.length > 0
+ })
const showQuerySuggestions = computed(() => {
return (
!!$x.query.searchBox && $x.identifierResults.length === 0 && $x.querySuggestions.length > 0
- );
- });
+ )
+ })
const showNextQueries = computed(() => {
- return $x.nextQueries.length > 0 && $x.identifierResults.length === 0;
- });
+ return $x.nextQueries.length > 0 && $x.identifierResults.length === 0
+ })
const showPopularSearches = computed(() => {
- return $x.popularSearches.length > 0 && !$x.query.searchBox;
- });
+ return $x.popularSearches.length > 0 && !$x.query.searchBox
+ })
const showEmpathize = computed(() => {
return (
@@ -52,8 +53,8 @@ export const usePredictiveHelpers = (): PredictiveHelpers => {
showQuerySuggestions.value ||
showNextQueries.value ||
showPopularSearches.value
- );
- });
+ )
+ })
return {
navigationHijacker,
@@ -62,6 +63,6 @@ export const usePredictiveHelpers = (): PredictiveHelpers => {
showQuerySuggestions,
showNextQueries,
showPopularSearches,
- showEmpathize
- };
-};
+ showEmpathize,
+ }
+}
diff --git a/src/device-breakpoints.ts b/src/device-breakpoints.ts
index 9b8d89b8..b3c19a1a 100644
--- a/src/device-breakpoints.ts
+++ b/src/device-breakpoints.ts
@@ -2,5 +2,5 @@ export const breakpoints = {
mobile: 0,
tablet: 744,
desktop: 1280,
- large: 2560
-};
+ large: 2560,
+}
diff --git a/src/i18n/currencies.ts b/src/i18n/currencies.ts
index 729708c9..a2c6990e 100644
--- a/src/i18n/currencies.ts
+++ b/src/i18n/currencies.ts
@@ -1,4 +1,4 @@
export default {
EUR: 'i.iii,dd €',
- USD: '$i,iii.dd'
-} as Record;
+ USD: '$i,iii.dd',
+} as Record
diff --git a/src/i18n/messages.types.ts b/src/i18n/messages.types.ts
index 34451f19..f03a1e15 100644
--- a/src/i18n/messages.types.ts
+++ b/src/i18n/messages.types.ts
@@ -2,133 +2,133 @@
export interface Messages {
searchBox: {
- clear: string;
- placeholder: string;
- };
+ clear: string
+ placeholder: string
+ }
popularSearches: {
- title: string;
- };
+ title: string
+ }
historyQueries: {
- clear: string;
- removeLabel: string;
- title: string;
- };
+ clear: string
+ removeLabel: string
+ title: string
+ }
myHistory: {
- title: string;
- subtitle: string;
+ title: string
+ subtitle: string
message: {
- header: string;
- body: string;
- footer: string;
- };
- noHistory: string;
- openButton: string;
- suggestionResults: string;
+ header: string
+ body: string
+ footer: string
+ }
+ noHistory: string
+ openButton: string
+ suggestionResults: string
switch: {
- title: string;
- enable: string;
- disable: string;
- };
+ title: string
+ enable: string
+ disable: string
+ }
confirmDisableModal: {
- title: string;
- message: string;
- dismiss: string;
- confirm: string;
- };
- };
+ title: string
+ message: string
+ dismiss: string
+ confirm: string
+ }
+ }
nextQueries: {
- title: string;
- };
+ title: string
+ }
nextQueriesGroup: {
- message: string;
- };
+ message: string
+ }
nextQueryPreview: {
- message: string;
- query: string;
- totalResults: string;
- viewResults: string;
- };
+ message: string
+ query: string
+ totalResults: string
+ viewResults: string
+ }
identifierResults: {
- title: string;
- };
+ title: string
+ }
recommendations: {
- title: string;
- };
+ title: string
+ }
facets: {
- gender: string;
- categoryPaths: string;
- price: string;
- brand: string;
- fit: string;
- collection: string;
- genres: string;
- isAdult: string;
- type: string;
- runtimeMinutes: string;
- };
+ gender: string
+ categoryPaths: string
+ price: string
+ brand: string
+ fit: string
+ collection: string
+ genres: string
+ isAdult: string
+ type: string
+ runtimeMinutes: string
+ }
facetsPanel: {
- title: string;
- viewResults: string;
- };
+ title: string
+ viewResults: string
+ }
filters: {
- all: string;
- showMore: string;
- showLess: string;
- };
+ all: string
+ showMore: string
+ showLess: string
+ }
partialResults: {
- query: string;
- totalResults: string;
- viewResults: string;
- };
+ query: string
+ totalResults: string
+ viewResults: string
+ }
priceFilter: {
- lessThan: string;
- fromTo: string;
- from: string;
- };
+ lessThan: string
+ fromTo: string
+ from: string
+ }
toggleAside: {
- showAside: string;
- };
+ showAside: string
+ }
totalResults: {
- message: string;
- };
+ message: string
+ }
semanticQueries: {
- title: string;
- };
+ title: string
+ }
sort: {
- label: string;
+ label: string
values: {
- 'price asc': string;
- 'price desc': string;
- default: string;
- };
- };
+ 'price asc': string
+ 'price desc': string
+ default: string
+ }
+ }
selectedFilters: {
- clear: string;
- };
+ clear: string
+ }
result: {
- addToCart: string;
- };
+ addToCart: string
+ }
spellcheck: {
- message: string;
- };
+ message: string
+ }
noResults: {
- message: string;
- };
+ message: string
+ }
fallbackDisclaimer: {
- message: string;
- };
+ message: string
+ }
columnPicker: {
- message: string;
- };
+ message: string
+ }
queryPreview: {
- viewResults: string;
- };
+ viewResults: string
+ }
redirections: {
- title: string;
- accept: string;
- reject: string;
- };
+ title: string
+ accept: string
+ reject: string
+ }
relatedPrompts: {
- title: string;
- };
+ title: string
+ }
}
diff --git a/src/i18n/messages/index.ts b/src/i18n/messages/index.ts
index 4bab207a..5fbe7078 100644
--- a/src/i18n/messages/index.ts
+++ b/src/i18n/messages/index.ts
@@ -14,11 +14,9 @@
// export { default as es } from './es.messages.json';
// Example of how to make the spanish messages be lazy loaded, only when the locale is set to `es`
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-export const de = () => import('./de.messages.json');
-export const es = () => import('./es.messages.json');
-export const en = () => import('./en.messages.json');
-export const fr = () => import('./fr.messages.json');
-export const pt = () => import('./pt.messages.json');
-export const it = () => import('./it.messages.json');
-/* eslint-enable @typescript-eslint/explicit-function-return-type */
+export const de = async () => import('./de.messages.json')
+export const es = async () => import('./es.messages.json')
+export const en = async () => import('./en.messages.json')
+export const fr = async () => import('./fr.messages.json')
+export const pt = async () => import('./pt.messages.json')
+export const it = async () => import('./it.messages.json')
diff --git a/src/main.ts b/src/main.ts
index 67881b44..c7fbb1c8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,24 +1,29 @@
-import { CssInjector } from '@empathyco/x-archetype-utils';
-import { XInstaller } from '@empathyco/x-components';
-import { getInstallXOptions } from './x-components/plugin.options';
+import { CssInjector } from '@empathyco/x-archetype-utils'
+import { XInstaller } from '@empathyco/x-components'
+import { getInstallXOptions } from './x-components/plugin.options'
declare global {
interface Window {
- __enableVueDevtools__?: boolean;
+ __enableVueDevtools__?: boolean
wysiwyg?: {
- goToLogin: () => Promise;
- requestAuth: () => Promise;
- open: () => Promise;
- close: () => Promise;
+ goToLogin: () => Promise
+ requestAuth: () => Promise
+ open: () => Promise
+ close: () => Promise
setContext: (
newContext: Partial<{
- query: string | undefined;
- spellcheckedQuery: string | undefined;
- }>
- ) => void;
- };
+ query: string | undefined
+ spellcheckedQuery: string | undefined
+ }>,
+ ) => void
+ }
}
}
-new CssInjector(true);
-getInstallXOptions().then(installXOptions => new XInstaller(installXOptions).init());
+// eslint-disable-next-line no-new
+new CssInjector(true)
+getInstallXOptions()
+ .then(async installXOptions => new XInstaller(installXOptions).init())
+ .catch(error => {
+ console.error('Error initializing XInstaller:', error)
+ })
diff --git a/src/shims-i18n.d.ts b/src/shims-i18n.d.ts
index c1d44480..7790eeaa 100644
--- a/src/shims-i18n.d.ts
+++ b/src/shims-i18n.d.ts
@@ -1,9 +1,9 @@
// https://vuejs.org/guide/typescript/options-api.html#type-augmentation-placement
-export {};
+export {}
declare module 'vue' {
interface ComponentCustomProperties {
- $setLocale: (lang: string) => void;
- $setLocaleDevice: (device: string) => void;
+ $setLocale: (lang: string) => Promise
+ $setLocaleDevice: (device: string) => Promise
}
}
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 506bf2e5..a99cf76c 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -1,5 +1,5 @@
declare module '*.vue' {
- import { DefineComponent } from 'vue';
- const component: DefineComponent<{}, {}, any>;
- export default component;
+ import type { DefineComponent } from 'vue'
+ const component: DefineComponent
+ export default component
}
diff --git a/src/shims-x-components.d.ts b/src/shims-x-components.d.ts
index 6d9fc40a..303339ba 100644
--- a/src/shims-x-components.d.ts
+++ b/src/shims-x-components.d.ts
@@ -1,7 +1,7 @@
-import { SemanticQueriesConfig } from '@empathyco/x-components/semantic-queries';
+import type { SemanticQueriesConfig } from '@empathyco/x-components/semantic-queries'
declare module '@empathyco/x-components' {
interface XEventsTypes {
- SemanticQueriesConfigProvided: SemanticQueriesConfig;
+ SemanticQueriesConfigProvided: SemanticQueriesConfig
}
}
diff --git a/src/store/index.ts b/src/store/index.ts
index c4f7a18f..52007b97 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,9 +1,9 @@
-import { createStore } from 'vuex';
+import { createStore } from 'vuex'
export default createStore({
strict: false,
state: {},
mutations: {},
actions: {},
- modules: {}
-});
+ modules: {},
+})
diff --git a/src/tailwind/plugin-options.js b/src/tailwind/plugin-options.js
index 6455c576..c0aec89d 100644
--- a/src/tailwind/plugin-options.js
+++ b/src/tailwind/plugin-options.js
@@ -15,11 +15,11 @@ module.exports = {
textAlign: 'center',
'@screen desktop': {
paddingTop: theme('spacing.24'),
- paddingBottom: theme('spacing.24')
- }
+ paddingBottom: theme('spacing.24'),
+ },
},
'.transform-style-3d': {
- transformStyle: 'preserve-3d'
- }
- })
-};
+ transformStyle: 'preserve-3d',
+ },
+ }),
+}
diff --git a/src/x-components/plugin.options.ts b/src/x-components/plugin.options.ts
index 4e72b9e5..4534046b 100644
--- a/src/x-components/plugin.options.ts
+++ b/src/x-components/plugin.options.ts
@@ -1,31 +1,33 @@
-import { filter, InstallXOptions, SnippetConfig } from '@empathyco/x-components';
-import { cssInjector, I18n } from '@empathyco/x-archetype-utils';
-import { setSearchQuery } from '@empathyco/x-components/search';
-import { addQueryToHistoryQueries } from '@empathyco/x-components/history-queries';
-import { setUrlQuery } from '@empathyco/x-components/url';
-import { default as AppComponent } from '../App.vue';
-import * as messages from '../i18n/messages';
-import store from '../store';
-import { adapter } from '../adapter/adapter';
-import { useDevice } from '../composables/use-device.composable';
-import { mergeSemanticQueriesConfigWire } from './wiring/semantic-queries.wiring';
+/* eslint-disable node/prefer-global/process */
+import type { InstallXOptions, SnippetConfig } from '@empathyco/x-components'
+import { cssInjector, I18n } from '@empathyco/x-archetype-utils'
+import { filter } from '@empathyco/x-components'
+import { addQueryToHistoryQueries } from '@empathyco/x-components/history-queries'
+import { setSearchQuery } from '@empathyco/x-components/search'
+import { setUrlQuery } from '@empathyco/x-components/url'
+import { adapter } from '../adapter/adapter'
+import AppComponent from '../App.vue'
+import { useDevice } from '../composables/use-device.composable'
+import * as messages from '../i18n/messages'
+import store from '../store'
+import { mergeSemanticQueriesConfigWire } from './wiring/semantic-queries.wiring'
-const device = useDevice();
+const device = useDevice()
const setSearchQueryFiltered = filter(
setSearchQuery,
- ({ eventPayload }) => !eventPayload.startsWith('::')
-);
+ ({ eventPayload }) => !eventPayload.startsWith('::'),
+)
const addQueryToHistoryQueriesFiltered = filter(
addQueryToHistoryQueries,
- ({ eventPayload }) => !eventPayload.startsWith('::')
-);
+ ({ eventPayload }) => !eventPayload.startsWith('::'),
+)
const setUrlQueryFiltered = filter(
setUrlQuery,
- ({ eventPayload }) => !eventPayload.startsWith('::')
-);
+ ({ eventPayload }) => !eventPayload.startsWith('::'),
+)
/**
* Function that returns the options to install x-components.
@@ -34,22 +36,22 @@ const setUrlQueryFiltered = filter(
*/
export async function getInstallXOptions(): Promise {
if (process.env.VUE_APP_DEVELOPMENT_DOCKER) {
- const { overrideAdapter } = await import('../adapter/docker.adapter');
- overrideAdapter(adapter);
- (window.initX as SnippetConfig)!.queriesPreview = [
+ const { overrideAdapter } = await import('../adapter/docker.adapter')
+ overrideAdapter(adapter)
+ ;(window.initX as SnippetConfig).queriesPreview = [
{
query: 'short',
- title: 'Short'
+ title: 'Short',
},
{
query: 'comedy',
- title: 'Comedy'
+ title: 'Comedy',
},
{
query: 'family',
- title: 'Family'
- }
- ];
+ title: 'Family',
+ },
+ ]
}
return {
adapter,
@@ -59,81 +61,82 @@ export async function getInstallXOptions(): Promise {
xModules: {
facets: {
config: {
- filtersStrategyForRequest: 'leaves-only'
- }
+ filtersStrategyForRequest: 'leaves-only',
+ },
},
semanticQueries: {
config: {
threshold: 50,
- maxItemsToRequest: 10
+ maxItemsToRequest: 10,
},
wiring: {
SemanticQueriesConfigProvided: {
- mergeSemanticQueriesConfigWire
- }
- }
+ mergeSemanticQueriesConfigWire,
+ },
+ },
},
search: {
wiring: {
UserAcceptedAQuery: {
- setSearchQuery: setSearchQueryFiltered
- }
- }
+ setSearchQuery: setSearchQueryFiltered,
+ },
+ },
},
historyQueries: {
wiring: {
UserAcceptedAQuery: {
- addQueryToHistoryQueries: addQueryToHistoryQueriesFiltered
- }
- }
+ addQueryToHistoryQueries: addQueryToHistoryQueriesFiltered,
+ },
+ },
},
url: {
wiring: {
UserAcceptedAQuery: {
- setUrlQuery: setUrlQueryFiltered
- }
- }
- }
+ setUrlQuery: setUrlQueryFiltered,
+ },
+ },
+ },
},
async installExtraPlugins({ app, snippet }) {
const i18n = await I18n.create({
locale: snippet.uiLang,
device: (snippet.device as string) ?? device.deviceName.value,
fallbackLocale: 'en',
- messages
- });
+ messages,
+ })
- app.use(i18n);
- app.config.globalProperties.$setLocale = i18n.setLocale.bind(i18n);
- app.config.globalProperties.$setLocaleDevice = i18n.setDevice.bind(i18n);
+ app.use(i18n)
+ app.config.globalProperties.$setLocale = i18n.setLocale.bind(i18n)
+ app.config.globalProperties.$setLocaleDevice = i18n.setDevice.bind(i18n)
return {
- i18n: i18n.vueI18n
- };
- }
- };
+ i18n: i18n.vueI18n,
+ }
+ },
+ }
}
/**
* Creates a DOM element to mount the X Components app.
*
* @param snippetConfig - The snippet configuration.
+ * @param snippetConfig.isolate - Whether to isolate the DOM element using Shadow DOM.
* @returns The DOM element.
*/
function getDomElement({ isolate }: SnippetConfig): Element {
- const container = document.createElement('div');
- container.classList.add('x-root-container');
- const domElement = document.createElement('div');
+ const container = document.createElement('div')
+ container.classList.add('x-root-container')
+ const domElement = document.createElement('div')
if (isolate || process.env.NODE_ENV === 'production') {
- const shadowRoot = container.attachShadow({ mode: 'open' });
- shadowRoot.appendChild(domElement);
- cssInjector.setHost(shadowRoot);
+ const shadowRoot = container.attachShadow({ mode: 'open' })
+ shadowRoot.appendChild(domElement)
+ cssInjector.setHost(shadowRoot)
} else {
- container.appendChild(domElement);
- cssInjector.setHost(document.head);
+ container.appendChild(domElement)
+ cssInjector.setHost(document.head)
}
- document.body.appendChild(container);
- return domElement;
+ document.body.appendChild(container)
+ return domElement
}
diff --git a/src/x-components/wiring/semantic-queries.wiring.ts b/src/x-components/wiring/semantic-queries.wiring.ts
index b832f05c..15aac44f 100644
--- a/src/x-components/wiring/semantic-queries.wiring.ts
+++ b/src/x-components/wiring/semantic-queries.wiring.ts
@@ -1,7 +1,7 @@
-import { namespacedWireCommit } from '@empathyco/x-components';
+import { namespacedWireCommit } from '@empathyco/x-components'
-const moduleName = 'semanticQueries';
+const moduleName = 'semanticQueries'
-const wireCommit = namespacedWireCommit(moduleName);
+const wireCommit = namespacedWireCommit(moduleName)
-export const mergeSemanticQueriesConfigWire = wireCommit('mergeConfig');
+export const mergeSemanticQueriesConfigWire = wireCommit('mergeConfig')
diff --git a/tailwind.config.js b/tailwind.config.js
index c1edfed1..d244a0dc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,14 +1,14 @@
-const { xTailwindPlugin } = require('@empathyco/x-tailwindcss');
-const options = require('./src/tailwind/plugin-options');
+const { xTailwindPlugin } = require('@empathyco/x-tailwindcss')
+const options = require('./src/tailwind/plugin-options')
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./public/index.html',
'./src/**/*.vue',
- 'node_modules/@empathyco/x-components/**/components/**/*.js'
+ 'node_modules/@empathyco/x-components/**/components/**/*.js',
],
prefix: 'x-',
important: true,
- plugins: [xTailwindPlugin(options)]
-};
+ plugins: [xTailwindPlugin(options)],
+}
diff --git a/tests/.eslintrc.js b/tests/.eslintrc.js
index dcc70d5c..c1b1cf46 100644
--- a/tests/.eslintrc.js
+++ b/tests/.eslintrc.js
@@ -1,6 +1,6 @@
module.exports = {
parserOptions: {
tsconfigRootDir: __dirname,
- project: './tsconfig.json'
- }
-};
+ project: './tsconfig.json',
+ },
+}
diff --git a/tests/cypress.d.ts b/tests/cypress.d.ts
new file mode 100644
index 00000000..7b6e5085
--- /dev/null
+++ b/tests/cypress.d.ts
@@ -0,0 +1,7 @@
+import type { CustomCommands, CustomDualCommands } from './e2e/support/index'
+
+declare global {
+ namespace Cypress {
+ interface Chainable extends CustomCommands, CustomDualCommands {}
+ }
+}
diff --git a/tests/e2e/cucumber/banner.spec.ts b/tests/e2e/cucumber/banner.spec.ts
index 93b055a3..28b33bcc 100644
--- a/tests/e2e/cucumber/banner.spec.ts
+++ b/tests/e2e/cucumber/banner.spec.ts
@@ -1,6 +1,6 @@
-import { Then } from '@badeball/cypress-cucumber-preprocessor';
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
Then('banner is displayed', () => {
- cy.getByDataTest('banner').should('have.attr', 'href');
- cy.getByDataTest('banner').children().should('have.attr', 'src');
-});
+ cy.getByDataTest('banner').should('have.attr', 'href')
+ cy.getByDataTest('banner').children().should('have.attr', 'src')
+})
diff --git a/tests/e2e/cucumber/column-picker.spec.ts b/tests/e2e/cucumber/column-picker.spec.ts
index a5e523e3..42281c85 100644
--- a/tests/e2e/cucumber/column-picker.spec.ts
+++ b/tests/e2e/cucumber/column-picker.spec.ts
@@ -1,17 +1,17 @@
-import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
+import { Then, When } from '@badeball/cypress-cucumber-preprocessor'
Then('grid shows {int} results per row', (columns: number) => {
- cy.getByDataTest('base-grid').should('have.class', `x-base-grid--cols-${columns || 'auto'}`);
-});
+ cy.getByDataTest('base-grid').should('have.class', `x-base-grid--cols-${columns || 'auto'}`)
+})
When('value {int} from column picker list is clicked', (columns: number) => {
- cy.get(`.x-column-picker-list__button--${columns}-cols`).click({ scrollBehavior: false });
-});
+ cy.get(`.x-column-picker-list__button--${columns}-cols`).click({ scrollBehavior: false })
+})
Then('column picker list value {int} is selected', (columns: number) => {
cy.get(`.x-column-picker-list__button--${columns}-cols`).should(
'have.attr',
'aria-pressed',
- 'true'
- );
-});
+ 'true',
+ )
+})
diff --git a/tests/e2e/cucumber/common-steps.spec.ts b/tests/e2e/cucumber/common-steps.spec.ts
index 35ddc0d7..ee1bc3b8 100644
--- a/tests/e2e/cucumber/common-steps.spec.ts
+++ b/tests/e2e/cucumber/common-steps.spec.ts
@@ -1,87 +1,87 @@
-import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
-import ViewportPreset = Cypress.ViewportPreset;
+import type { XAPI } from '@empathyco/x-components'
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'
+import ViewportPreset = Cypress.ViewportPreset
Given('start page with {string} size view', (view: ViewportPreset) => {
- cy.viewport(view);
- cy.visit('/');
-});
+ cy.viewport(view)
+ cy.visit('/')
+})
Then('search bar is clicked', () => {
- cy.getByDataTest('x').should('exist');
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call
- cy.window().then(window => (window as any).InterfaceX.search());
-});
+ cy.getByDataTest('x').should('exist')
+ cy.window().then(window => (window.InterfaceX as XAPI).search())
+})
// Search
When('a {string} is typed', (query: string) => {
- cy.getByDataTest('search-input').should('exist').click();
+ cy.getByDataTest('search-input').should('exist').click()
cy.typeQuery(query).then(() => {
- cy.getByDataTest('search-input').invoke('val').as('searchedQuery');
- });
-});
+ cy.getByDataTest('search-input').invoke('val').as('searchedQuery')
+ })
+})
When('{string} is searched', (query: string) => {
- cy.getByDataTest('search-input').should('exist').click();
+ cy.getByDataTest('search-input').should('exist').click()
cy.searchQuery(query).then(() => {
- cy.getByDataTest('search-input').invoke('val').as('searchedQuery');
- });
-});
+ cy.getByDataTest('search-input').invoke('val').as('searchedQuery')
+ })
+})
Given('a {string} of queries already searched', (list: string) => {
- cy.searchQueries(...list.split(', '));
-});
+ cy.searchQueries(...list.split(', '))
+})
When('search input is cleared', () => {
- cy.clearSearchInput();
-});
+ cy.clearSearchInput()
+})
// Facets
When('facets are shown if hidden on {string}', (view: ViewportPreset) => {
if (!view.includes('macbook')) {
- cy.getByDataTest('open-modal-id').click();
+ cy.getByDataTest('open-modal-id').click()
}
-});
+})
When('facets are hidden if shown on {string}', (view: ViewportPreset) => {
if (!view.includes('macbook')) {
- cy.getByDataTest('close-modal-id').click();
+ cy.getByDataTest('close-modal-id').click()
}
-});
+})
// Navigation
When('navigating back', () => {
- cy.go('back');
-});
+ cy.go('back')
+})
// Requests
Then('a search request from {string} is done', (origin: string) => {
- cy.wait(`@interceptedResultsFrom:${origin}`);
-});
+ cy.wait(`@interceptedResultsFrom:${origin}`)
+})
// Results
Then('related results are displayed', () => {
- cy.getByDataTest('search-grid-result').eq(0).scrollIntoView();
+ cy.getByDataTest('search-grid-result').eq(0).scrollIntoView()
cy.getByDataTest('search-grid-result')
.should('be.visible')
.should('have.length.at.least', 1)
.invoke('text')
- .as('resultsList');
-});
+ .as('resultsList')
+})
Then('related results have changed', () => {
- cy.getByDataTest('search-grid-result').first().scrollIntoView();
+ cy.getByDataTest('search-grid-result').first().scrollIntoView()
cy.get('@resultsList').then(resultsList => {
cy.getByDataTest('search-grid-result')
.should('be.visible')
.should('have.length.at.least', 1)
.should(newResultsList => {
- expect(newResultsList.text()).to.be.not.equal(resultsList);
+ expect(newResultsList.text()).to.be.not.equal(resultsList)
})
.invoke('text')
- .as('resultsList');
- });
-});
+ .as('resultsList')
+ })
+})
Then('subheader is not visible', () => {
- cy.getByDataTest('sub-header').should('not.be.visible');
-});
+ cy.getByDataTest('sub-header').should('not.be.visible')
+})
diff --git a/tests/e2e/cucumber/facets.spec.ts b/tests/e2e/cucumber/facets.spec.ts
index f8578e9c..8f8a82a5 100644
--- a/tests/e2e/cucumber/facets.spec.ts
+++ b/tests/e2e/cucumber/facets.spec.ts
@@ -1,5 +1,6 @@
-import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
-import '../cucumber/global-definitions';
+import type { TestContext } from '../support'
+import { Then, When } from '@badeball/cypress-cucumber-preprocessor'
+import '../cucumber/global-definitions'
/**
* TODO https://searchbroker.atlassian.net/browse/EX-5266 .
@@ -9,16 +10,16 @@ import '../cucumber/global-definitions';
// Scenario 1
Then('facets are displayed is {boolean}', (areVisible: boolean) => {
- cy.getByDataTest('facets-facet').should(`${areVisible ? '' : 'not.'}exist`);
-});
+ cy.getByDataTest('facets-facet').should(`${areVisible ? '' : 'not.'}exist`)
+})
When('sort and filter button is clicked on {string}', () => {
- cy.getByDataTest('toggle-facets-button').click({ force: true });
-});
+ cy.getByDataTest('toggle-facets-button').click({ force: true })
+})
When('{string} is clicked to close the modal', (closeMethod: string) => {
- cy.getByDataTest(closeMethod).eq(0).click('topLeft', { force: true });
-});
+ cy.getByDataTest(closeMethod).eq(0).click('topLeft', { force: true })
+})
// Scenario 2
When('filter {int} from facet {string} is clicked', (filterNumber: number, facetName: string) => {
cy.getByDataTest(facetName)
@@ -26,28 +27,27 @@ When('filter {int} from facet {string} is clicked', (filterNumber: number, facet
.eq(filterNumber)
.click()
.invoke('text')
- .as(`clickedFilter${filterNumber}`);
-});
+ .as(`clickedFilter${filterNumber}`)
+})
Then(
'filter {int} from facet {string} is selected is {boolean}',
- function (this: any, filterNumber: number, facetName: string, isSelected: boolean) {
+ function (this: TestContext, filterNumber: number, facetName: string, isSelected: boolean) {
cy.getByDataTest(facetName)
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call
.contains(this[`clickedFilter${filterNumber}`].trim())
.should(`${isSelected ? '' : 'not.'}to.have.class`, 'x-selected')
- .should('have.attr', 'aria-checked');
- }
-);
+ .should('have.attr', 'aria-checked')
+ },
+)
When('clear filters button is clicked', () => {
- cy.getByDataTest('clear-filters').click();
-});
+ cy.getByDataTest('clear-filters').click()
+})
// Scenario 4
When('facet {string} is unfolded', (facetName: string) => {
- cy.getByDataTest(facetName).getByDataTest('toggle-panel-header').click();
-});
+ cy.getByDataTest(facetName).getByDataTest('toggle-panel-header').click()
+})
// Scenario 5
When(
@@ -61,18 +61,18 @@ When(
.eq(childFilterIndex)
.click()
.invoke('text')
- .as(`clickedChildFilter${childFilterIndex}`);
- }
-);
+ .as(`clickedChildFilter${childFilterIndex}`)
+ },
+)
Then(
'selection status of child filter {int} from parent filter {int} in facet {string} is {boolean}',
function (
- this: any,
+ this: TestContext,
childFilterIndex: number,
hierarchicalFilterIndex: number,
facetName: string,
- isSelected: boolean
+ isSelected: boolean,
) {
cy.getByDataTest(facetName)
.getByDataTest('base-filters-item')
@@ -80,12 +80,11 @@ Then(
.getByDataTest('children-filters')
.getByDataTest('filter')
.eq(childFilterIndex)
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call
.should('contain', this[`clickedChildFilter${childFilterIndex}`].replace(/[^a-z]/gi, ''))
.should(`${isSelected ? '' : 'not.'}to.have.class`, 'x-selected')
- .should('have.attr', 'aria-checked');
- }
-);
+ .should('have.attr', 'aria-checked')
+ },
+)
Then(
'selection status of filter number {int} in facet {string} is {boolean}',
@@ -94,6 +93,6 @@ Then(
.getByDataTest('base-filters-item')
.eq(hierarchicalFilterIndex)
.getByDataTest('filter')
- .should(`${isSelected ? '' : 'not.'}to.have.class`, 'x-selected');
- }
-);
+ .should(`${isSelected ? '' : 'not.'}to.have.class`, 'x-selected')
+ },
+)
diff --git a/tests/e2e/cucumber/global-definitions.ts b/tests/e2e/cucumber/global-definitions.ts
index e6e321d9..10adc429 100644
--- a/tests/e2e/cucumber/global-definitions.ts
+++ b/tests/e2e/cucumber/global-definitions.ts
@@ -1,9 +1,9 @@
-import { defineParameterType } from '@badeball/cypress-cucumber-preprocessor';
+import { defineParameterType } from '@badeball/cypress-cucumber-preprocessor'
defineParameterType({
name: 'boolean',
regexp: /true|false/,
transformer(string) {
- return string === 'true';
- }
-});
+ return string === 'true'
+ },
+})
diff --git a/tests/e2e/cucumber/mocked-responses.spec.ts b/tests/e2e/cucumber/mocked-responses.spec.ts
index 58533863..5190af2c 100644
--- a/tests/e2e/cucumber/mocked-responses.spec.ts
+++ b/tests/e2e/cucumber/mocked-responses.spec.ts
@@ -1,46 +1,46 @@
-import { Given } from '@badeball/cypress-cucumber-preprocessor';
-const mockedApiUrl = 'https://api.staging.empathy.co';
-const searchEndpoint = `${mockedApiUrl}/search/v1/query/empathy/search*`;
-const trackEndpoint = `${mockedApiUrl}/tagging/v1/track/empathy`;
+import { Given } from '@badeball/cypress-cucumber-preprocessor'
+const mockedApiUrl = 'https://api.staging.empathy.co'
+const searchEndpoint = `${mockedApiUrl}/search/v1/query/empathy/search*`
+const trackEndpoint = `${mockedApiUrl}/tagging/v1/track/empathy`
// Results
Given('an intercepted search response', () => {
- cy.intercept(searchEndpoint).as('interceptedResults');
-});
+ cy.intercept(searchEndpoint).as('interceptedResults')
+})
Given('an intercepted search response from {string}', (origin: string) => {
cy.intercept({ url: searchEndpoint, query: { origin: `*${origin}*` } }).as(
- `interceptedResultsFrom:${origin}`
- );
-});
+ `interceptedResultsFrom:${origin}`,
+ )
+})
Given('a results API with query {string}', (query: string) => {
cy.intercept({
- query: { q: query }
- }).as('interceptedResults');
-});
+ query: { q: query },
+ }).as('interceptedResults')
+})
Given('a results API with a promoted', () => {
cy.intercept(searchEndpoint, { fixture: 'search-response-with-promoted' }).as(
- 'interceptedPromoted'
- );
-});
+ 'interceptedPromoted',
+ )
+})
Given('a results API with a banner', () => {
- cy.intercept(searchEndpoint, { fixture: 'search-response-with-banner' }).as('interceptedBanner');
-});
+ cy.intercept(searchEndpoint, { fixture: 'search-response-with-banner' }).as('interceptedBanner')
+})
Given('a results API with known results', () => {
cy.intercept(searchEndpoint, { fixture: 'search-response-with-known-results' }).as(
- 'interceptedResults'
- );
-});
+ 'interceptedResults',
+ )
+})
// Tagging
Given('a query tagging API', () => {
- cy.intercept(`${trackEndpoint}/query*`).as('queryTagging');
-});
+ cy.intercept(`${trackEndpoint}/query*`).as('queryTagging')
+})
Given('an add to cart tagging API', () => {
- cy.intercept(`${trackEndpoint}/add2cart*`).as('addToCartTagging');
-});
+ cy.intercept(`${trackEndpoint}/add2cart*`).as('addToCartTagging')
+})
diff --git a/tests/e2e/cucumber/multiple-interactions.spec.ts b/tests/e2e/cucumber/multiple-interactions.spec.ts
index 5ee48a63..ea17c395 100644
--- a/tests/e2e/cucumber/multiple-interactions.spec.ts
+++ b/tests/e2e/cucumber/multiple-interactions.spec.ts
@@ -1,4 +1,4 @@
-import { When } from '@badeball/cypress-cucumber-preprocessor';
+import { When } from '@badeball/cypress-cucumber-preprocessor'
When('next query number {int} is clicked', (nextQueryItem: number) => {
cy.getByDataTest('next-query')
@@ -6,12 +6,12 @@ When('next query number {int} is clicked', (nextQueryItem: number) => {
.eq(nextQueryItem)
.click()
.invoke('text')
- .as('searchedQuery');
-});
+ .as('searchedQuery')
+})
When('scroll down for two seconds', () => {
- cy.get('#main-scroll').scrollTo(0, 1000, { duration: 2000, ensureScrollable: false });
-});
+ cy.get('#main-scroll').scrollTo(0, 1000, { duration: 2000, ensureScrollable: false })
+})
When('related tag number {int} is clicked', (relatedTagItem: number) => {
cy.getByDataTest('related-tag')
@@ -19,13 +19,13 @@ When('related tag number {int} is clicked', (relatedTagItem: number) => {
.eq(relatedTagItem)
.click()
.invoke('text')
- .as('clickedRelatedTag');
-});
+ .as('clickedRelatedTag')
+})
When('clicked related tag is clicked again', function (this: { clickedRelatedTag: string }) {
cy.getByDataTest('related-tag')
.contains(this.clickedRelatedTag)
.click()
.invoke('text')
- .as('clickedRelatedTag');
-});
+ .as('clickedRelatedTag')
+})
diff --git a/tests/e2e/cucumber/my-history.spec.ts b/tests/e2e/cucumber/my-history.spec.ts
index 821bfc2c..be557f57 100644
--- a/tests/e2e/cucumber/my-history.spec.ts
+++ b/tests/e2e/cucumber/my-history.spec.ts
@@ -1,28 +1,28 @@
-import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
+import { Then, When } from '@badeball/cypress-cucumber-preprocessor'
When('my history button is clicked', () => {
- cy.getByDataTest('my-history-button').click();
-});
+ cy.getByDataTest('my-history-button').click()
+})
Then('my history queries are displayed', () => {
- cy.getByDataTest('my-history-query').should('have.length.at.least', 1);
-});
+ cy.getByDataTest('my-history-query').should('have.length.at.least', 1)
+})
When('my history query number {int} is clicked', (position: number) => {
- cy.getByDataTest('my-history-query').eq(position).getByDataTest('history-query').click();
-});
+ cy.getByDataTest('my-history-query').eq(position).getByDataTest('history-query').click()
+})
When('my history query number {int} delete button is clicked', (position: number) => {
cy.getByDataTest('my-history-query')
.eq(position)
.getByDataTest('remove-history-query')
- .trigger('click');
-});
+ .trigger('click')
+})
Then('my history is visible', () => {
- cy.getByDataTest('my-history-queries').should('be.visible');
-});
+ cy.getByDataTest('my-history-queries').should('be.visible')
+})
Then('my history is not visible', () => {
- cy.getByDataTest('my-history-queries').should('not.be.visible');
-});
+ cy.getByDataTest('my-history-queries').should('not.be.visible')
+})
diff --git a/tests/e2e/cucumber/no-results.spec.ts b/tests/e2e/cucumber/no-results.spec.ts
index 3531564a..4cecb2f1 100644
--- a/tests/e2e/cucumber/no-results.spec.ts
+++ b/tests/e2e/cucumber/no-results.spec.ts
@@ -1,9 +1,9 @@
-import { Then } from '@badeball/cypress-cucumber-preprocessor';
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
Then('no results message is displayed', () => {
- cy.getByDataTest('no-results-message').should('exist');
-});
+ cy.getByDataTest('no-results-message').should('exist')
+})
Then('there are no results', () => {
- cy.getByDataTest('search-grid-result').should('not.exist');
-});
+ cy.getByDataTest('search-grid-result').should('not.exist')
+})
diff --git a/tests/e2e/cucumber/predictive-components.spec.ts b/tests/e2e/cucumber/predictive-components.spec.ts
index e5f2f432..8aa3dbd0 100644
--- a/tests/e2e/cucumber/predictive-components.spec.ts
+++ b/tests/e2e/cucumber/predictive-components.spec.ts
@@ -1,37 +1,37 @@
-import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
+import { Then, When } from '@badeball/cypress-cucumber-preprocessor'
Then('recommendations are displayed', () => {
- cy.getByDataTest('recommendation-item').should('have.length.at.least', 1);
-});
+ cy.getByDataTest('recommendation-item').should('have.length.at.least', 1)
+})
Then('search input is focused', () => {
- cy.getByDataTest('search-input').should('be.focused');
-});
+ cy.getByDataTest('search-input').should('be.focused')
+})
Then('popular searches are displayed', () => {
- cy.getByDataTest('popular-search').should('have.length.at.least', 1);
-});
+ cy.getByDataTest('popular-search').should('have.length.at.least', 1)
+})
Then('query suggestions are displayed', () => {
- cy.getByDataTest('query-suggestion').should('have.length.at.least', 1);
-});
+ cy.getByDataTest('query-suggestion').should('have.length.at.least', 1)
+})
When('focus is set on the search input', () => {
- cy.focusSearchInput();
-});
+ cy.focusSearchInput()
+})
Then('next queries are displayed', () => {
- cy.getByDataTest('next-query').should('have.length.at.least', 1);
-});
+ cy.getByDataTest('next-query').should('have.length.at.least', 1)
+})
Then('history queries are displayed', () => {
- cy.getByDataTest('history-query').should('have.length.at.least', 1);
-});
+ cy.getByDataTest('history-query').should('have.length.at.least', 1)
+})
// Scenario 2
Then('related tags are displayed', () => {
- cy.getByDataTest('related-tag').should('have.length.at.least', 1);
-});
+ cy.getByDataTest('related-tag').should('have.length.at.least', 1)
+})
When('related tag {int} is clicked', (relatedTagIndex: number) => {
cy.getByDataTest('related-tag')
@@ -39,8 +39,8 @@ When('related tag {int} is clicked', (relatedTagIndex: number) => {
.eq(relatedTagIndex)
.click()
.invoke('text')
- .as('clickedRelatedTag');
-});
+ .as('clickedRelatedTag')
+})
Then(
'clicked related tag is shown in position {int} as selected',
@@ -48,15 +48,15 @@ Then(
cy.getByDataTest('related-tag')
.eq(relatedTagPosition)
.should('have.text', this.clickedRelatedTag)
- .should('have.class', 'x-related-tag--is-selected');
- }
-);
+ .should('have.class', 'x-related-tag--is-selected')
+ },
+)
Then('related tag {int} is displayed as not selected', (relatedTagItem: number) => {
cy.getByDataTest('related-tag')
.eq(relatedTagItem)
- .should('not.have.class', 'x-related-tag--is-selected');
-});
+ .should('not.have.class', 'x-related-tag--is-selected')
+})
// Scenario 3
@@ -66,31 +66,31 @@ When('history query number {int} delete button is clicked', (historyQueryItem: n
.invoke('text')
.as('deletedHistoryQuery')
.then(() => {
- cy.focusSearchInput();
- cy.getByDataTest('remove-history-query').eq(historyQueryItem).click();
- });
-});
+ cy.focusSearchInput()
+ cy.getByDataTest('remove-history-query').eq(historyQueryItem).click()
+ })
+})
Then(
'the deleted history query is removed from history queries',
function (this: { deletedHistoryQuery: string }) {
cy.getByDataTest('history-query').should(historicalQueries => {
historicalQueries.each((_, historyQuery) => {
- expect(historyQuery).to.not.have.text(this.deletedHistoryQuery);
- });
- });
- }
-);
+ expect(historyQuery).to.not.have.text(this.deletedHistoryQuery)
+ })
+ })
+ },
+)
// Scenario 4
When('an empty search-box', () => {
- cy.clearSearchInput();
-});
+ cy.clearSearchInput()
+})
When('clear history queries button is clicked', () => {
- cy.getByDataTest('clear-history-queries').click();
-});
+ cy.getByDataTest('clear-history-queries').click()
+})
Then('no history queries are displayed', () => {
- cy.getByDataTest('history-queries').should('not.exist');
-});
+ cy.getByDataTest('history-queries').should('not.exist')
+})
diff --git a/tests/e2e/cucumber/promoted.spec.ts b/tests/e2e/cucumber/promoted.spec.ts
index 605ec000..0f11e119 100644
--- a/tests/e2e/cucumber/promoted.spec.ts
+++ b/tests/e2e/cucumber/promoted.spec.ts
@@ -1,5 +1,5 @@
-import { Then } from '@badeball/cypress-cucumber-preprocessor';
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
Then('promoted is displayed', () => {
- cy.getByDataTest('promoted').should('exist').children().should('have.attr', 'src');
-});
+ cy.getByDataTest('promoted').should('exist').children().should('have.attr', 'src')
+})
diff --git a/tests/e2e/cucumber/results.spec.ts b/tests/e2e/cucumber/results.spec.ts
index 8552c80b..5033bb69 100644
--- a/tests/e2e/cucumber/results.spec.ts
+++ b/tests/e2e/cucumber/results.spec.ts
@@ -1,5 +1,5 @@
-import { Then } from '@badeball/cypress-cucumber-preprocessor';
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
Then('related results are displayed and contain expected elements', () => {
- cy.getByDataTest('search-grid-result').should('have.length', 24);
-});
+ cy.getByDataTest('search-grid-result').should('have.length', 24)
+})
diff --git a/tests/e2e/cucumber/scroll.spec.ts b/tests/e2e/cucumber/scroll.spec.ts
index 7ef63f9e..9f8abdda 100644
--- a/tests/e2e/cucumber/scroll.spec.ts
+++ b/tests/e2e/cucumber/scroll.spec.ts
@@ -1,28 +1,28 @@
-import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
+import { Then, When } from '@badeball/cypress-cucumber-preprocessor'
When('scrolling down to result {string}', (resultId: string) => {
- cy.get(`[data-scroll=${resultId}]`).eq(0).scrollIntoView().should('be.visible');
-});
+ cy.get(`[data-scroll=${resultId}]`).eq(0).scrollIntoView().should('be.visible')
+})
Then('url is updated with result {string}', (resultId: string) => {
- cy.url().should('contain', `scroll=${resultId}`);
-});
+ cy.url().should('contain', `scroll=${resultId}`)
+})
When('the page is reloaded', () => {
- cy.reload();
-});
+ cy.reload()
+})
Then('result {string} is visible', (resultId: string) => {
- cy.get(`[data-scroll=${resultId}]`).getByDataTest('result-link').should('be.visible');
-});
+ cy.get(`[data-scroll=${resultId}]`).getByDataTest('result-link').should('be.visible')
+})
When('scroll to top is clicked', () => {
- cy.getByDataTest('scroll-to-top').click();
-});
+ cy.getByDataTest('scroll-to-top').click()
+})
Then('scroll position is at top', () => {
- cy.url().should('not.contain', 'scroll');
-});
+ cy.url().should('not.contain', 'scroll')
+})
/**
* In this step we have to make 2 scrolls, because in the second scenario in scroll.feature file
@@ -34,7 +34,7 @@ When('scrolling down to the bottom', () => {
cy.getByDataTest('related-prompt-item')
.should('have.length.at.least', 5)
.then(() => {
- cy.getByDataTest('base-scroll').scrollTo('center', { duration: 1000 });
- cy.getByDataTest('base-scroll').scrollTo('bottom', { duration: 500 });
- });
-});
+ cy.getByDataTest('base-scroll').scrollTo('center', { duration: 1000 })
+ cy.getByDataTest('base-scroll').scrollTo('bottom', { duration: 500 })
+ })
+})
diff --git a/tests/e2e/cucumber/sort.spec.ts b/tests/e2e/cucumber/sort.spec.ts
index 8e1dd0f9..b34fd8b9 100644
--- a/tests/e2e/cucumber/sort.spec.ts
+++ b/tests/e2e/cucumber/sort.spec.ts
@@ -1,16 +1,16 @@
-import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
+import { Then, When } from '@badeball/cypress-cucumber-preprocessor'
Then('results are ordered by {string}', (sortOrder: string) => {
- cy.getByDataTest('toggle-panel-header').should('contain', sortOrder);
-});
+ cy.getByDataTest('toggle-panel-header').should('contain', sortOrder)
+})
When('{string} order is clicked in {string}', (sortOrder: string, sortMenuName: string) => {
- cy.getByDataTest('toggle-panel-header').contains(sortMenuName).click();
- cy.getByDataTest('sort-picker-button').contains(sortOrder).should('exist').click();
-});
+ cy.getByDataTest('toggle-panel-header').contains(sortMenuName).click()
+ cy.getByDataTest('sort-picker-button').contains(sortOrder).should('exist').click()
+})
Then('search request contains the selected sort {string}', (sortURL: string) => {
cy.wait('@interceptedResults')
.its('request.url')
- .should('contain', `sort=${sortURL.replace(' ', '+')}`);
-});
+ .should('contain', `sort=${sortURL.replace(' ', '+')}`)
+})
diff --git a/tests/e2e/cucumber/spellcheck.spec.ts b/tests/e2e/cucumber/spellcheck.spec.ts
index 0c3366a5..7c09a5f2 100644
--- a/tests/e2e/cucumber/spellcheck.spec.ts
+++ b/tests/e2e/cucumber/spellcheck.spec.ts
@@ -1,9 +1,9 @@
-import { Then } from '@badeball/cypress-cucumber-preprocessor';
+import { Then } from '@badeball/cypress-cucumber-preprocessor'
Then('spellcheck message is displayed', function (this: { searchedQuery: string }) {
cy.getByDataTest('spellcheck-message')
.should('exist')
.should('contain', this.searchedQuery)
.getByDataTest('set-spellcheck')
- .should('exist');
-});
+ .should('exist')
+})
diff --git a/tests/e2e/cucumber/tagging.spec.ts b/tests/e2e/cucumber/tagging.spec.ts
index 91917ea5..a29642cf 100644
--- a/tests/e2e/cucumber/tagging.spec.ts
+++ b/tests/e2e/cucumber/tagging.spec.ts
@@ -1,33 +1,33 @@
-import { Then, When } from '@badeball/cypress-cucumber-preprocessor';
+import { Then, When } from '@badeball/cypress-cucumber-preprocessor'
When('scrolls down to next page', () => {
- cy.getByDataTest('result-link').last().scrollIntoView({ easing: 'linear', duration: 2000 });
-});
+ cy.getByDataTest('result-link').last().scrollIntoView({ easing: 'linear', duration: 2000 })
+})
Then('query tagging request should be triggered', () => {
- cy.wait('@queryTagging');
-});
+ cy.wait('@queryTagging')
+})
Then('query tagging request has been triggered', () => {
- cy.get('@queryTagging').should('exist');
-});
+ cy.get('@queryTagging').should('exist')
+})
Then('page {int} query tagging request is triggered', (pageNumber: number) => {
- cy.wait('@queryTagging').its('request.url').should('contain', `page=${pageNumber}`);
-});
+ cy.wait('@queryTagging').its('request.url').should('contain', `page=${pageNumber}`)
+})
Then('results page number {int} is loaded', (page: number) => {
- cy.getByDataTest('search-grid-result').should('have.length', 24 * page);
-});
+ cy.getByDataTest('search-grid-result').should('have.length', 24 * page)
+})
Then('add product to cart tagging request has been triggered', () => {
- cy.wait('@addToCartTagging').should('exist');
-});
+ cy.wait('@addToCartTagging').should('exist')
+})
When('pdp add to cart button is clicked', () => {
- cy.getByDataTest('search-grid-result').should('be.visible').first().as('firstVisibleResult');
+ cy.getByDataTest('search-grid-result').should('be.visible').first().as('firstVisibleResult')
cy.get('@firstVisibleResult')
.getByDataTest('result-add-to-cart')
.invoke('show')
- .click({ force: true });
-});
+ .click({ force: true })
+})
diff --git a/tests/e2e/cucumber/url.spec.ts b/tests/e2e/cucumber/url.spec.ts
index 05cfc79c..c8470908 100644
--- a/tests/e2e/cucumber/url.spec.ts
+++ b/tests/e2e/cucumber/url.spec.ts
@@ -1,11 +1,11 @@
-import { Given } from '@badeball/cypress-cucumber-preprocessor';
-import ViewportPreset = Cypress.ViewportPreset;
+import { Given } from '@badeball/cypress-cucumber-preprocessor'
+import ViewportPreset = Cypress.ViewportPreset
// Scenario 1
Given(
'a URL with query parameter {string} and {string} size view',
(query: string, view: ViewportPreset) => {
- cy.viewport(view);
- cy.visit(`/?query=${query}`);
- }
-);
+ cy.viewport(view)
+ cy.visit(`/?query=${query}`)
+ },
+)
diff --git a/tests/e2e/support/index.ts b/tests/e2e/support/index.ts
index f54d8516..a2f1feb6 100644
--- a/tests/e2e/support/index.ts
+++ b/tests/e2e/support/index.ts
@@ -1,16 +1,10 @@
-import { AnyFunction, forEach } from '@empathyco/x-utils';
+import type { AnyFunction } from '@empathyco/x-utils'
+import { forEach } from '@empathyco/x-utils'
-declare global {
- // eslint-disable-next-line @typescript-eslint/no-namespace
- namespace Cypress {
- interface Chainable extends CustomCommands, CustomDualCommands {}
- }
-}
-
-import Loggable = Cypress.Loggable;
-import Timeoutable = Cypress.Timeoutable;
-import Withinable = Cypress.Withinable;
-import Shadow = Cypress.Shadow;
+import Loggable = Cypress.Loggable
+import Shadow = Cypress.Shadow
+import Timeoutable = Cypress.Timeoutable
+import Withinable = Cypress.Withinable
/**
* When the tests are running, there is a problem with the resize observer. After
@@ -20,12 +14,13 @@ import Shadow = Cypress.Shadow;
* https://github.com/cypress-io/cypress/issues/8418.
* Https://github.com/cypress-io/cypress/issues/22129.
*/
-Cypress.on(
- 'uncaught:exception',
- err => !err.message.includes('ResizeObserver loop limit exceeded')
-);
+Cypress.on('uncaught:exception', err => !err.message.includes('ResizeObserver loop limit exceeded'))
+
+export interface TestContext {
+ [key: string]: string
+}
-interface CustomCommands {
+export interface CustomCommands {
/**
* Searches a query by typing it in the search input and pressing enter.
*
@@ -36,7 +31,7 @@ interface CustomCommands {
* @returns A Chainable object.
* @internal
*/
- searchQuery(query: string): Cypress.Chainable;
+ searchQuery: (query: string) => Cypress.Chainable
/**
* Searches multiple queries by typing it in the search input and pressing enter.
*
@@ -46,7 +41,7 @@ interface CustomCommands {
* @param queries - The query to search.
* @returns A Chainable object.
*/
- searchQueries(...queries: string[]): void;
+ searchQueries: (...queries: string[]) => void
/**
* Types a query into the search input.
*
@@ -57,7 +52,7 @@ interface CustomCommands {
* @returns A Chainable object.
* @internal
*/
- typeQuery(query: string): Cypress.Chainable;
+ typeQuery: (query: string) => Cypress.Chainable
/**
* Focus into the search input.
*
@@ -66,7 +61,7 @@ interface CustomCommands {
*
* @returns A Chainable object.
*/
- focusSearchInput(): Cypress.Chainable;
+ focusSearchInput: () => Cypress.Chainable
/**
* Clear search input.
*
@@ -75,9 +70,9 @@ interface CustomCommands {
*
* @returns A Chainable object.
*/
- clearSearchInput(): Cypress.Chainable;
+ clearSearchInput: () => Cypress.Chainable
}
-interface CustomDualCommands {
+export interface CustomDualCommands {
/**
* Gets a DOM element searching by its data-test attribute.
*
@@ -88,43 +83,43 @@ interface CustomDualCommands {
* @param options - The options passed to the Cypress command.
* @returns A Chainable object.
*/
- getByDataTest(value: string, options?: CypressCommandOptions): Cypress.Chainable;
+ getByDataTest: (value: string, options?: CypressCommandOptions) => Cypress.Chainable
}
type AddPreviousParam> = {
[Key in keyof Functions]: (
previous: unknown,
...args: Parameters
- ) => ReturnType;
-};
+ ) => ReturnType
+}
-type CypressCommandOptions = Partial;
+type CypressCommandOptions = Partial
const customCommands: CustomCommands = {
searchQuery: query => cy.typeQuery(query).type('{enter}', { force: true }),
searchQueries: (...queries) => {
queries.forEach(query => {
- cy.getByDataTest('search-input').clear({ force: true });
- cy.typeQuery(query).type('{enter}', { force: true });
- });
+ cy.getByDataTest('search-input').clear({ force: true })
+ cy.typeQuery(query).type('{enter}', { force: true })
+ })
},
typeQuery: query => cy.getByDataTest('search-input').type(query, { force: true }),
focusSearchInput: () => cy.getByDataTest('search-input').click(),
- clearSearchInput: () => cy.getByDataTest('clear-search-input').click()
-};
+ clearSearchInput: () => cy.getByDataTest('clear-search-input').click(),
+}
const customDualCommands: AddPreviousParam = {
getByDataTest: (previous, value, options?: CypressCommandOptions) => {
- const selector = `[data-test=${value}]`;
- return previous ? cy.wrap(previous).find(selector, options) : cy.get(selector, options);
- }
-};
+ const selector = `[data-test=${value}]`
+ return previous ? cy.wrap(previous).find(selector, options) : cy.get(selector, options)
+ },
+}
// Register the commands
forEach(customCommands, (name, implementation) => {
- Cypress.Commands.add(name, implementation);
-});
+ Cypress.Commands.add(name, implementation)
+})
forEach(customDualCommands, (name, implementation) => {
- Cypress.Commands.add(name, { prevSubject: 'optional' }, implementation);
-});
+ Cypress.Commands.add(name, { prevSubject: 'optional' }, implementation)
+})
diff --git a/tests/tsconfig.json b/tests/tsconfig.json
index 8da1a655..eb697991 100644
--- a/tests/tsconfig.json
+++ b/tests/tsconfig.json
@@ -1,15 +1,15 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
- "types": ["node"],
- "downlevelIteration": true,
"rootDir": "../",
"paths": {
"@badeball/cypress-cucumber-preprocessor/*": [
"./node_modules/@badeball/cypress-cucumber-preprocessor/dist/subpath-entrypoints/*"
]
- }
+ },
+ "types": ["node"],
+ "downlevelIteration": true
},
- "include": ["./**/*.ts"],
+ "include": ["./**/*.ts", "cypress.d.ts"],
"exclude": ["node_modules"]
}
diff --git a/tsconfig.json b/tsconfig.json
index f16322aa..88c94d03 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,20 +13,8 @@
"sourceMap": true,
"baseUrl": ".",
"skipLibCheck": true,
- "lib": [
- "esnext",
- "dom",
- "dom.iterable",
- "scripthost"
- ]
+ "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
- "include": [
- "src/**/*.ts",
- "src/**/*.tsx",
- "src/**/*.vue",
- "vite.config.mts"
- ],
- "exclude": [
- "node_modules"
- ]
+ "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "vite.config.mts"],
+ "exclude": ["node_modules"]
}
diff --git a/vite.config.mts b/vite.config.mts
index 9501d24d..318edc85 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -1,17 +1,17 @@
-import vue from '@vitejs/plugin-vue';
-import { defineConfig } from 'vite';
-import Inspector from 'vite-plugin-vue-inspector';
-import injectHTML from 'vite-plugin-html-inject';
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+import Inspector from 'vite-plugin-vue-inspector'
+import injectHTML from 'vite-plugin-html-inject'
export default defineConfig({
define: {
- 'process.env': {}
+ 'process.env': {},
},
plugins: [injectHTML(), vue(), Inspector()],
server: {
- port: 8080
+ port: 8080,
},
preview: {
- port: 8080
- }
-});
+ port: 8080,
+ },
+})