diff options
Diffstat (limited to 'spec/frontend/search')
| -rw-r--r-- | spec/frontend/search/index_spec.js | 2 | ||||
| -rw-r--r-- | spec/frontend/search/mock_data.js | 23 | ||||
| -rw-r--r-- | spec/frontend/search/store/actions_spec.js | 83 | ||||
| -rw-r--r-- | spec/frontend/search/store/mutations_spec.js | 28 | ||||
| -rw-r--r-- | spec/frontend/search/topbar/components/group_filter_spec.js | 121 | ||||
| -rw-r--r-- | spec/frontend/search/topbar/components/project_filter_spec.js | 134 | ||||
| -rw-r--r-- | spec/frontend/search/topbar/components/searchable_dropdown_spec.js (renamed from spec/frontend/search/group_filter/components/group_filter_spec.js) | 91 |
7 files changed, 407 insertions, 75 deletions
diff --git a/spec/frontend/search/index_spec.js b/spec/frontend/search/index_spec.js index 8a86cc4c52a..31b5aa3686b 100644 --- a/spec/frontend/search/index_spec.js +++ b/spec/frontend/search/index_spec.js @@ -2,8 +2,8 @@ import { initSearchApp } from '~/search'; import createStore from '~/search/store'; jest.mock('~/search/store'); +jest.mock('~/search/topbar'); jest.mock('~/search/sidebar'); -jest.mock('~/search/group_filter'); describe('initSearchApp', () => { let defaultLocation; diff --git a/spec/frontend/search/mock_data.js b/spec/frontend/search/mock_data.js index 68fc432881a..ee509eaad8d 100644 --- a/spec/frontend/search/mock_data.js +++ b/spec/frontend/search/mock_data.js @@ -2,6 +2,7 @@ export const MOCK_QUERY = { scope: 'issues', state: 'all', confidential: null, + group_id: 'test_1', }; export const MOCK_GROUP = { @@ -22,3 +23,25 @@ export const MOCK_GROUPS = [ id: 'test_2', }, ]; + +export const MOCK_PROJECT = { + name: 'test project', + namespace_id: MOCK_GROUP.id, + nameWithNamespace: 'test group test project', + id: 'test_1', +}; + +export const MOCK_PROJECTS = [ + { + name: 'test project', + namespace_id: MOCK_GROUP.id, + name_with_namespace: 'test group test project', + id: 'test_1', + }, + { + name: 'test project 2', + namespace_id: MOCK_GROUP.id, + name_with_namespace: 'test group test project 2', + id: 'test_2', + }, +]; diff --git a/spec/frontend/search/store/actions_spec.js b/spec/frontend/search/store/actions_spec.js index c8ea6167399..e4536a3e136 100644 --- a/spec/frontend/search/store/actions_spec.js +++ b/spec/frontend/search/store/actions_spec.js @@ -1,22 +1,24 @@ import MockAdapter from 'axios-mock-adapter'; import testAction from 'helpers/vuex_action_helper'; +import Api from '~/api'; import * as actions from '~/search/store/actions'; import * as types from '~/search/store/mutation_types'; -import { setUrlParams, visitUrl } from '~/lib/utils/url_utility'; -import state from '~/search/store/state'; +import * as urlUtils from '~/lib/utils/url_utility'; +import createState from '~/search/store/state'; import axios from '~/lib/utils/axios_utils'; import createFlash from '~/flash'; -import { MOCK_GROUPS } from '../mock_data'; +import { MOCK_QUERY, MOCK_GROUPS, MOCK_PROJECT, MOCK_PROJECTS } from '../mock_data'; jest.mock('~/flash'); jest.mock('~/lib/utils/url_utility', () => ({ setUrlParams: jest.fn(), + joinPaths: jest.fn().mockReturnValue(''), visitUrl: jest.fn(), - joinPaths: jest.fn(), // For the axios specs })); describe('Global Search Store Actions', () => { let mock; + let state; const noCallback = () => {}; const flashCallback = () => { @@ -25,66 +27,97 @@ describe('Global Search Store Actions', () => { }; beforeEach(() => { + state = createState({ query: MOCK_QUERY }); mock = new MockAdapter(axios); }); afterEach(() => { + state = null; mock.restore(); }); describe.each` - action | axiosMock | type | mutationCalls | callback - ${actions.fetchGroups} | ${{ method: 'onGet', code: 200, res: MOCK_GROUPS }} | ${'success'} | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_SUCCESS, payload: MOCK_GROUPS }]} | ${noCallback} - ${actions.fetchGroups} | ${{ method: 'onGet', code: 500, res: null }} | ${'error'} | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_ERROR }]} | ${flashCallback} - `(`axios calls`, ({ action, axiosMock, type, mutationCalls, callback }) => { + action | axiosMock | type | expectedMutations | callback + ${actions.fetchGroups} | ${{ method: 'onGet', code: 200, res: MOCK_GROUPS }} | ${'success'} | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_SUCCESS, payload: MOCK_GROUPS }]} | ${noCallback} + ${actions.fetchGroups} | ${{ method: 'onGet', code: 500, res: null }} | ${'error'} | ${[{ type: types.REQUEST_GROUPS }, { type: types.RECEIVE_GROUPS_ERROR }]} | ${flashCallback} + ${actions.fetchProjects} | ${{ method: 'onGet', code: 200, res: MOCK_PROJECTS }} | ${'success'} | ${[{ type: types.REQUEST_PROJECTS }, { type: types.RECEIVE_PROJECTS_SUCCESS, payload: MOCK_PROJECTS }]} | ${noCallback} + ${actions.fetchProjects} | ${{ method: 'onGet', code: 500, res: null }} | ${'error'} | ${[{ type: types.REQUEST_PROJECTS }, { type: types.RECEIVE_PROJECTS_ERROR }]} | ${flashCallback} + `(`axios calls`, ({ action, axiosMock, type, expectedMutations, callback }) => { describe(action.name, () => { describe(`on ${type}`, () => { beforeEach(() => { mock[axiosMock.method]().replyOnce(axiosMock.code, axiosMock.res); }); it(`should dispatch the correct mutations`, () => { - return testAction(action, null, state, mutationCalls, []).then(() => callback()); + return testAction({ action, state, expectedMutations }).then(() => callback()); }); }); }); }); + describe('getProjectsData', () => { + const mockCommit = () => {}; + beforeEach(() => { + jest.spyOn(Api, 'groupProjects').mockResolvedValue(MOCK_PROJECTS); + jest.spyOn(Api, 'projects').mockResolvedValue(MOCK_PROJECT); + }); + + describe('when groupId is set', () => { + it('calls Api.groupProjects', () => { + actions.fetchProjects({ commit: mockCommit, state }); + + expect(Api.groupProjects).toHaveBeenCalled(); + expect(Api.projects).not.toHaveBeenCalled(); + }); + }); + + describe('when groupId is not set', () => { + beforeEach(() => { + state = createState({ query: { group_id: null } }); + }); + + it('calls Api.projects', () => { + actions.fetchProjects({ commit: mockCommit, state }); + + expect(Api.groupProjects).not.toHaveBeenCalled(); + expect(Api.projects).toHaveBeenCalled(); + }); + }); + }); + describe('setQuery', () => { const payload = { key: 'key1', value: 'value1' }; - it('calls the SET_QUERY mutation', done => { - testAction(actions.setQuery, payload, state, [{ type: types.SET_QUERY, payload }], [], done); + it('calls the SET_QUERY mutation', () => { + return testAction({ + action: actions.setQuery, + payload, + state, + expectedMutations: [{ type: types.SET_QUERY, payload }], + }); }); }); describe('applyQuery', () => { it('calls visitUrl and setParams with the state.query', () => { - testAction(actions.applyQuery, null, state, [], [], () => { - expect(setUrlParams).toHaveBeenCalledWith({ ...state.query, page: null }); - expect(visitUrl).toHaveBeenCalled(); + return testAction(actions.applyQuery, null, state, [], [], () => { + expect(urlUtils.setUrlParams).toHaveBeenCalledWith({ ...state.query, page: null }); + expect(urlUtils.visitUrl).toHaveBeenCalled(); }); }); }); describe('resetQuery', () => { it('calls visitUrl and setParams with empty values', () => { - testAction(actions.resetQuery, null, state, [], [], () => { - expect(setUrlParams).toHaveBeenCalledWith({ + return testAction(actions.resetQuery, null, state, [], [], () => { + expect(urlUtils.setUrlParams).toHaveBeenCalledWith({ ...state.query, page: null, state: null, confidential: null, }); - expect(visitUrl).toHaveBeenCalled(); + expect(urlUtils.visitUrl).toHaveBeenCalled(); }); }); }); }); - -describe('setQuery', () => { - const payload = { key: 'key1', value: 'value1' }; - - it('calls the SET_QUERY mutation', done => { - testAction(actions.setQuery, payload, state, [{ type: types.SET_QUERY, payload }], [], done); - }); -}); diff --git a/spec/frontend/search/store/mutations_spec.js b/spec/frontend/search/store/mutations_spec.js index 28d9646b97e..560ed66263b 100644 --- a/spec/frontend/search/store/mutations_spec.js +++ b/spec/frontend/search/store/mutations_spec.js @@ -1,7 +1,7 @@ import mutations from '~/search/store/mutations'; import createState from '~/search/store/state'; import * as types from '~/search/store/mutation_types'; -import { MOCK_QUERY, MOCK_GROUPS } from '../mock_data'; +import { MOCK_QUERY, MOCK_GROUPS, MOCK_PROJECTS } from '../mock_data'; describe('Global Search Store Mutations', () => { let state; @@ -36,6 +36,32 @@ describe('Global Search Store Mutations', () => { }); }); + describe('REQUEST_PROJECTS', () => { + it('sets fetchingProjects to true', () => { + mutations[types.REQUEST_PROJECTS](state); + + expect(state.fetchingProjects).toBe(true); + }); + }); + + describe('RECEIVE_PROJECTS_SUCCESS', () => { + it('sets fetchingProjects to false and sets projects', () => { + mutations[types.RECEIVE_PROJECTS_SUCCESS](state, MOCK_PROJECTS); + + expect(state.fetchingProjects).toBe(false); + expect(state.projects).toBe(MOCK_PROJECTS); + }); + }); + + describe('RECEIVE_PROJECTS_ERROR', () => { + it('sets fetchingProjects to false and clears projects', () => { + mutations[types.RECEIVE_PROJECTS_ERROR](state); + + expect(state.fetchingProjects).toBe(false); + expect(state.projects).toEqual([]); + }); + }); + describe('SET_QUERY', () => { const payload = { key: 'key1', value: 'value1' }; diff --git a/spec/frontend/search/topbar/components/group_filter_spec.js b/spec/frontend/search/topbar/components/group_filter_spec.js new file mode 100644 index 00000000000..017808d576e --- /dev/null +++ b/spec/frontend/search/topbar/components/group_filter_spec.js @@ -0,0 +1,121 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { MOCK_GROUP, MOCK_QUERY } from 'jest/search/mock_data'; +import { visitUrl, setUrlParams } from '~/lib/utils/url_utility'; +import GroupFilter from '~/search/topbar/components/group_filter.vue'; +import SearchableDropdown from '~/search/topbar/components/searchable_dropdown.vue'; +import { ANY_OPTION, GROUP_DATA, PROJECT_DATA } from '~/search/topbar/constants'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +jest.mock('~/lib/utils/url_utility', () => ({ + visitUrl: jest.fn(), + setUrlParams: jest.fn(), +})); + +describe('GroupFilter', () => { + let wrapper; + + const actionSpies = { + fetchGroups: jest.fn(), + }; + + const defaultProps = { + initialData: null, + }; + + const createComponent = (initialState, props) => { + const store = new Vuex.Store({ + state: { + query: MOCK_QUERY, + ...initialState, + }, + actions: actionSpies, + }); + + wrapper = shallowMount(GroupFilter, { + localVue, + store, + propsData: { + ...defaultProps, + ...props, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const findSearchableDropdown = () => wrapper.find(SearchableDropdown); + + describe('template', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders SearchableDropdown always', () => { + expect(findSearchableDropdown().exists()).toBe(true); + }); + }); + + describe('events', () => { + describe('when @search is emitted', () => { + const search = 'test'; + + beforeEach(() => { + createComponent(); + + findSearchableDropdown().vm.$emit('search', search); + }); + + it('calls fetchGroups with the search paramter', () => { + expect(actionSpies.fetchGroups).toHaveBeenCalledTimes(1); + expect(actionSpies.fetchGroups).toHaveBeenCalledWith(expect.any(Object), search); + }); + }); + + describe('when @change is emitted', () => { + beforeEach(() => { + createComponent(); + + findSearchableDropdown().vm.$emit('change', MOCK_GROUP); + }); + + it('calls calls setUrlParams with group id, project id null, and visitUrl', () => { + expect(setUrlParams).toHaveBeenCalledWith({ + [GROUP_DATA.queryParam]: MOCK_GROUP.id, + [PROJECT_DATA.queryParam]: null, + }); + + expect(visitUrl).toHaveBeenCalled(); + }); + }); + }); + + describe('computed', () => { + describe('selectedGroup', () => { + describe('when initialData is null', () => { + beforeEach(() => { + createComponent(); + }); + + it('sets selectedGroup to ANY_OPTION', () => { + expect(wrapper.vm.selectedGroup).toBe(ANY_OPTION); + }); + }); + + describe('when initialData is set', () => { + beforeEach(() => { + createComponent({}, { initialData: MOCK_GROUP }); + }); + + it('sets selectedGroup to ANY_OPTION', () => { + expect(wrapper.vm.selectedGroup).toBe(MOCK_GROUP); + }); + }); + }); + }); +}); diff --git a/spec/frontend/search/topbar/components/project_filter_spec.js b/spec/frontend/search/topbar/components/project_filter_spec.js new file mode 100644 index 00000000000..c1fc61d7e89 --- /dev/null +++ b/spec/frontend/search/topbar/components/project_filter_spec.js @@ -0,0 +1,134 @@ +import Vuex from 'vuex'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import { MOCK_PROJECT, MOCK_QUERY } from 'jest/search/mock_data'; +import { visitUrl, setUrlParams } from '~/lib/utils/url_utility'; +import ProjectFilter from '~/search/topbar/components/project_filter.vue'; +import SearchableDropdown from '~/search/topbar/components/searchable_dropdown.vue'; +import { ANY_OPTION, GROUP_DATA, PROJECT_DATA } from '~/search/topbar/constants'; + +const localVue = createLocalVue(); +localVue.use(Vuex); + +jest.mock('~/lib/utils/url_utility', () => ({ + visitUrl: jest.fn(), + setUrlParams: jest.fn(), +})); + +describe('ProjectFilter', () => { + let wrapper; + + const actionSpies = { + fetchProjects: jest.fn(), + }; + + const defaultProps = { + initialData: null, + }; + + const createComponent = (initialState, props) => { + const store = new Vuex.Store({ + state: { + query: MOCK_QUERY, + ...initialState, + }, + actions: actionSpies, + }); + + wrapper = shallowMount(ProjectFilter, { + localVue, + store, + propsData: { + ...defaultProps, + ...props, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const findSearchableDropdown = () => wrapper.find(SearchableDropdown); + + describe('template', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders SearchableDropdown always', () => { + expect(findSearchableDropdown().exists()).toBe(true); + }); + }); + + describe('events', () => { + beforeEach(() => { + createComponent(); + }); + + describe('when @search is emitted', () => { + const search = 'test'; + + beforeEach(() => { + findSearchableDropdown().vm.$emit('search', search); + }); + + it('calls fetchProjects with the search paramter', () => { + expect(actionSpies.fetchProjects).toHaveBeenCalledWith(expect.any(Object), search); + }); + }); + + describe('when @change is emitted', () => { + describe('with Any', () => { + beforeEach(() => { + findSearchableDropdown().vm.$emit('change', ANY_OPTION); + }); + + it('calls setUrlParams with project id, not group id, then calls visitUrl', () => { + expect(setUrlParams).toHaveBeenCalledWith({ + [PROJECT_DATA.queryParam]: ANY_OPTION.id, + }); + expect(visitUrl).toHaveBeenCalled(); + }); + }); + + describe('with a Project', () => { + beforeEach(() => { + findSearchableDropdown().vm.$emit('change', MOCK_PROJECT); + }); + + it('calls setUrlParams with project id, group id, then calls visitUrl', () => { + expect(setUrlParams).toHaveBeenCalledWith({ + [GROUP_DATA.queryParam]: MOCK_PROJECT.namespace_id, + [PROJECT_DATA.queryParam]: MOCK_PROJECT.id, + }); + expect(visitUrl).toHaveBeenCalled(); + }); + }); + }); + }); + + describe('computed', () => { + describe('selectedProject', () => { + describe('when initialData is null', () => { + beforeEach(() => { + createComponent(); + }); + + it('sets selectedProject to ANY_OPTION', () => { + expect(wrapper.vm.selectedProject).toBe(ANY_OPTION); + }); + }); + + describe('when initialData is set', () => { + beforeEach(() => { + createComponent({}, { initialData: MOCK_PROJECT }); + }); + + it('sets selectedProject to the initialData', () => { + expect(wrapper.vm.selectedProject).toBe(MOCK_PROJECT); + }); + }); + }); + }); +}); diff --git a/spec/frontend/search/group_filter/components/group_filter_spec.js b/spec/frontend/search/topbar/components/searchable_dropdown_spec.js index fd3a4449f41..c4ebaabbf96 100644 --- a/spec/frontend/search/group_filter/components/group_filter_spec.js +++ b/spec/frontend/search/topbar/components/searchable_dropdown_spec.js @@ -1,41 +1,34 @@ import Vuex from 'vuex'; import { createLocalVue, shallowMount, mount } from '@vue/test-utils'; import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlSkeletonLoader } from '@gitlab/ui'; -import * as urlUtils from '~/lib/utils/url_utility'; -import GroupFilter from '~/search/group_filter/components/group_filter.vue'; -import { GROUP_QUERY_PARAM, PROJECT_QUERY_PARAM, ANY_GROUP } from '~/search/group_filter/constants'; -import { MOCK_GROUPS, MOCK_GROUP, MOCK_QUERY } from '../../mock_data'; +import { MOCK_GROUPS, MOCK_GROUP, MOCK_QUERY } from 'jest/search/mock_data'; +import SearchableDropdown from '~/search/topbar/components/searchable_dropdown.vue'; +import { ANY_OPTION, GROUP_DATA } from '~/search/topbar/constants'; const localVue = createLocalVue(); localVue.use(Vuex); -jest.mock('~/flash'); -jest.mock('~/lib/utils/url_utility', () => ({ - visitUrl: jest.fn(), - setUrlParams: jest.fn(), -})); - -describe('Global Search Group Filter', () => { +describe('Global Search Searchable Dropdown', () => { let wrapper; - const actionSpies = { - fetchGroups: jest.fn(), - }; - const defaultProps = { - initialGroup: null, + headerText: GROUP_DATA.headerText, + selectedDisplayValue: GROUP_DATA.selectedDisplayValue, + itemsDisplayValue: GROUP_DATA.itemsDisplayValue, + loading: false, + selectedItem: ANY_OPTION, + items: [], }; - const createComponent = (initialState, props = {}, mountFn = shallowMount) => { + const createComponent = (initialState, props, mountFn = shallowMount) => { const store = new Vuex.Store({ state: { query: MOCK_QUERY, ...initialState, }, - actions: actionSpies, }); - wrapper = mountFn(GroupFilter, { + wrapper = mountFn(SearchableDropdown, { localVue, store, propsData: { @@ -78,22 +71,22 @@ describe('Global Search Group Filter', () => { }); describe('onSearch', () => { - const groupSearch = 'test search'; + const search = 'test search'; beforeEach(() => { - findGlDropdownSearch().vm.$emit('input', groupSearch); + findGlDropdownSearch().vm.$emit('input', search); }); - it('calls fetchGroups when input event is fired from GlSearchBoxByType', () => { - expect(actionSpies.fetchGroups).toHaveBeenCalledWith(expect.any(Object), groupSearch); + it('$emits @search when input event is fired from GlSearchBoxByType', () => { + expect(wrapper.emitted('search')[0]).toEqual([search]); }); }); }); describe('findDropdownItems', () => { - describe('when fetchingGroups is false', () => { + describe('when loading is false', () => { beforeEach(() => { - createComponent({ groups: MOCK_GROUPS }); + createComponent({}, { items: MOCK_GROUPS }); }); it('does not render loader', () => { @@ -101,14 +94,14 @@ describe('Global Search Group Filter', () => { }); it('renders an instance for each namespace', () => { - const groupsIncludingAny = ['Any'].concat(MOCK_GROUPS.map(n => n.full_name)); - expect(findDropdownItemsText()).toStrictEqual(groupsIncludingAny); + const resultsIncludeAny = ['Any'].concat(MOCK_GROUPS.map(n => n.full_name)); + expect(findDropdownItemsText()).toStrictEqual(resultsIncludeAny); }); }); - describe('when fetchingGroups is true', () => { + describe('when loading is true', () => { beforeEach(() => { - createComponent({ fetchingGroups: true, groups: MOCK_GROUPS }); + createComponent({}, { loading: true, items: MOCK_GROUPS }); }); it('does render loader', () => { @@ -119,26 +112,36 @@ describe('Global Search Group Filter', () => { expect(findDropdownItemsText()).toStrictEqual(['Any']); }); }); + + describe('when item is selected', () => { + beforeEach(() => { + createComponent({}, { items: MOCK_GROUPS, selectedItem: MOCK_GROUPS[0] }); + }); + + it('marks the dropdown as checked', () => { + expect(findFirstGroupDropdownItem().attributes('ischecked')).toBe('true'); + }); + }); }); describe('Dropdown Text', () => { - describe('when initialGroup is null', () => { + describe('when selectedItem is any', () => { beforeEach(() => { createComponent({}, {}, mount); }); it('sets dropdown text to Any', () => { - expect(findDropdownText().text()).toBe(ANY_GROUP.name); + expect(findDropdownText().text()).toBe(ANY_OPTION.name); }); }); - describe('initialGroup is set', () => { + describe('selectedItem is set', () => { beforeEach(() => { - createComponent({}, { initialGroup: MOCK_GROUP }, mount); + createComponent({}, { selectedItem: MOCK_GROUP }, mount); }); - it('sets dropdown text to group name', () => { - expect(findDropdownText().text()).toBe(MOCK_GROUP.name); + it('sets dropdown text to the selectedItem selectedDisplayValue', () => { + expect(findDropdownText().text()).toBe(MOCK_GROUP[GROUP_DATA.selectedDisplayValue]); }); }); }); @@ -146,27 +149,19 @@ describe('Global Search Group Filter', () => { describe('actions', () => { beforeEach(() => { - createComponent({ groups: MOCK_GROUPS }); + createComponent({}, { items: MOCK_GROUPS }); }); - it('clicking "Any" dropdown item calls setUrlParams with group id null, project id null,and visitUrl', () => { + it('clicking "Any" dropdown item $emits @change with ANY_OPTION', () => { findAnyDropdownItem().vm.$emit('click'); - expect(urlUtils.setUrlParams).toHaveBeenCalledWith({ - [GROUP_QUERY_PARAM]: ANY_GROUP.id, - [PROJECT_QUERY_PARAM]: null, - }); - expect(urlUtils.visitUrl).toHaveBeenCalled(); + expect(wrapper.emitted('change')[0]).toEqual([ANY_OPTION]); }); - it('clicking group dropdown item calls setUrlParams with group id, project id null, and visitUrl', () => { + it('clicking result dropdown item $emits @change with result', () => { findFirstGroupDropdownItem().vm.$emit('click'); - expect(urlUtils.setUrlParams).toHaveBeenCalledWith({ - [GROUP_QUERY_PARAM]: MOCK_GROUPS[0].id, - [PROJECT_QUERY_PARAM]: null, - }); - expect(urlUtils.visitUrl).toHaveBeenCalled(); + expect(wrapper.emitted('change')[0]).toEqual([MOCK_GROUPS[0]]); }); }); }); |