Skip to content

End to end sortby tests #515

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 13, 2021
Merged

End to end sortby tests #515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9abcff2
add sortBy example in playground
bidoubiwa Sep 7, 2021
cc755cc
Add tests
bidoubiwa Sep 8, 2021
8d95ca0
Add persistent demo URL
bidoubiwa Sep 13, 2021
6ff6ed9
Remove temporary meilisearch pkg link
bidoubiwa Sep 13, 2021
2bc2a13
Add recommendation count in playgrounds
bidoubiwa Sep 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions cypress/integration/search-ui.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,20 @@ describe(`${playground} playground test`, () => {
cy.get(HIT_ITEM_CLASS).eq(0).contains('9.99 $')
})

it('Sort by recommendationCound ascending', () => {
const select = `.ais-SortBy-select`
cy.get(select).select('steam-video-games:recommendationCount:asc')
cy.wait(1000)
cy.get(HIT_ITEM_CLASS).eq(0).contains('Rag Doll Kung Fu')
})

it('Sort by default relevancy', () => {
const select = `.ais-SortBy-select`
cy.get(select).select('steam-video-games')
cy.wait(1000)
cy.get(HIT_ITEM_CLASS).eq(0).contains('Counter-Strike')
})

it('click on facets', () => {
const checkbox = `.ais-RefinementList-list .ais-RefinementList-checkbox`
cy.get(checkbox).eq(1).click()
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"test:e2e:all": "sh scripts/e2e.sh",
"test:e2e:watch": "concurrently --kill-others -s first \"NODE_ENV=test yarn playground:javascript\" \"cypress open --env playground=javascript\"",
"test:all": "yarn test:e2e:all && yarn test && test:build",
"cy:open": "cypress open",
"playground:vue": "yarn --cwd ./playgrounds/vue && yarn --cwd ./playgrounds/vue serve",
"playground:react": "yarn --cwd ./playgrounds/react && yarn --cwd ./playgrounds/react start",
"playground:javascript": "yarn --cwd ./playgrounds/javascript && yarn --cwd ./playgrounds/javascript start",
Expand Down
18 changes: 16 additions & 2 deletions playgrounds/angular/src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,19 @@ <h1 class="header-title">MeiliSearch + Angular InstantSearch</h1>
<div class="search-panel">
<div class="search-panel__filters">
<ais-clear-refinements></ais-clear-refinements>
<ais-sort-by
[items]="[
{ value: 'steam-video-games', label: 'Relevant' },
{
value: 'steam-video-games:recommendationCount:desc',
label: 'Most Recommended'
},
{
value: 'steam-video-games:recommendationCount:asc',
label: 'Least Recommended'
}
]"
></ais-sort-by>
<ais-configure [searchParameters]="{ hitsPerPage: 6 }"></ais-configure>
<h2>Genres</h2>
<ais-refinement-list attribute="genres" ></ais-refinement-list>
Expand Down Expand Up @@ -40,8 +53,9 @@ <h2>Misc</h2>
<div class="hit-description">
<ais-highlight attribute="description" [hit]="hit"></ais-highlight>
</div>
<div class="hit-info">${{hit.price}}</div>
<div class="hit-info">{{hit.releaseDate}}</div>
<div class="hit-info">price: ${{hit.price}}</div>
<div class="hit-info">Release date: {{hit.releaseDate}}</div>
<div class="hit-info">Recommendation: {{hit.recommendationCount}}</div>
</li>
</ol>
</ng-template>
Expand Down
4 changes: 2 additions & 2 deletions playgrounds/angular/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { Component } from '@angular/core'
import { instantMeiliSearch } from '../../../../src'

const searchClient = instantMeiliSearch(
'https://ms-9060336c1f95-106.saas.meili.dev',
'5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66'
'https://demo-steam.meilisearch.com/',
'90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c'
)

@Component({
Expand Down
6 changes: 3 additions & 3 deletions playgrounds/html/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@
const search = instantsearch({
indexName: "steam-video-games",
searchClient: instantMeiliSearch(
'https://ms-9060336c1f95-106.saas.meili.dev',
'5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66',
'https://demo-steam.meilisearch.com',
'90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c',
)
});
});
search.addWidgets([
instantsearch.widgets.searchBox({
container: "#searchbox",
Expand Down
2 changes: 1 addition & 1 deletion playgrounds/javascript/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h2>Search in Steam video games 🎮</h2>

<div class="left-panel">
<div id="clear-refinements"></div>

<div id="sort-by"></div>
<h2>Genres</h2>
<div id="genres-list"></div>
<h2>Players</h2>
Expand Down
20 changes: 18 additions & 2 deletions playgrounds/javascript/src/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,29 @@ import { instantMeiliSearch } from '../../../src/index'
const search = instantsearch({
indexName: 'steam-video-games',
searchClient: instantMeiliSearch(
'https://ms-9060336c1f95-106.saas.meili.dev',
'5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66',
'https://demo-steam.meilisearch.com',
'90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c',
{
limitPerRequest: 30,
}
),
})

search.addWidgets([
instantsearch.widgets.sortBy({
container: '#sort-by',
items: [
{ value: 'steam-video-games', label: 'Relevant' },
{
value: 'steam-video-games:recommendationCount:desc',
label: 'Most Recommended',
},
{
value: 'steam-video-games:recommendationCount:asc',
label: 'Least Recommended',
},
],
}),
instantsearch.widgets.searchBox({
container: '#searchbox',
}),
Expand All @@ -32,6 +46,7 @@ search.addWidgets([
}),
instantsearch.widgets.configure({
hitsPerPage: 6,
attributesToSnippet: ['description:150'],
}),
instantsearch.widgets.refinementList({
container: '#misc-list',
Expand All @@ -51,6 +66,7 @@ search.addWidgets([
</div>
<div class="hit-info">price: {{price}}</div>
<div class="hit-info">release date: {{releaseDate}}</div>
<div class="hit-info">Recommendation: {{recommendationCount}}</div>
</div>
`,
},
Expand Down
60 changes: 45 additions & 15 deletions playgrounds/react/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,16 @@ import {
ClearRefinements,
RefinementList,
Configure,
SortBy,
Snippet,
} from 'react-instantsearch-dom'

import './App.css'
import { instantMeiliSearch } from '../../../src/index'

const searchClient = instantMeiliSearch(
'https://ms-9060336c1f95-106.saas.meili.dev',
'5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66',
'https://demo-steam.meilisearch.com/',
'90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c',
{
paginationTotalHits: 60,
primaryKey: 'id',
Expand All @@ -39,6 +42,20 @@ const App = () => (
<Stats />
<div className="left-panel">
<ClearRefinements />
<SortBy
defaultRefinement="steam-video-games"
items={[
{ value: 'steam-video-games', label: 'Relevant' },
{
value: 'steam-video-games:recommendationCount:desc',
label: 'Most Recommended',
},
{
value: 'steam-video-games:recommendationCount:asc',
label: 'Least Recommended',
},
]}
/>
<h2>Genres</h2>
<RefinementList attribute="genres" />
<h2>Players</h2>
Expand All @@ -47,7 +64,11 @@ const App = () => (
<RefinementList attribute="platforms" />
<h2>Misc</h2>
<RefinementList attribute="misc" />
<Configure hitsPerPage={6} />
<Configure
hitsPerPage={6}
attributesToSnippet={['description:50']}
snippetEllipsisText={'...'}
/>
</div>
<div className="right-panel">
<SearchBox />
Expand All @@ -57,18 +78,27 @@ const App = () => (
</div>
)

const Hit = ({ hit }) => (
<div key={hit.id}>
<div className="hit-name">
<Highlight attribute="name" hit={hit} />
</div>
<img src={hit.image} align="left" alt={hit.name} />
<div className="hit-name">
<Highlight attribute="description" hit={hit} />
const Hit = ({ hit }) => {
return (
<div key={hit.id}>
<div className="hit-name">
<Highlight attribute="name" hit={hit} />
</div>
<img src={hit.image} align="left" alt={hit.name} />
<div className="hit-name">
<Snippet attribute="description" hit={hit} />
</div>
<div className="hit-info">
<b>price:</b> {hit.price}
</div>
<div className="hit-info">
<b>release date:</b> {hit.releaseDate}
</div>
<div className="hit-info">
<b>Recommended:</b> {hit.recommendationCount}
</div>
</div>
<div className="hit-info">price: {hit.price}</div>
<div className="hit-info">release date: {hit.releaseDate}</div>
</div>
)
)
}

export default App
33 changes: 29 additions & 4 deletions playgrounds/vue/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,19 @@
<ais-clear-refinements>
<span slot="resetLabel">Clear all filters</span>
</ais-clear-refinements>
<ais-sort-by
:items="[
{ value: 'steam-video-games', label: 'Relevant' },
{
value: 'steam-video-games:recommendationCount:desc',
label: 'Most Recommended',
},
{
value: 'steam-video-games:recommendationCount:asc',
label: 'Least Recommended',
},
]"
/>
<h2>Genres</h2>
<ais-refinement-list attribute="genres" />
<h2>Players</h2>
Expand All @@ -40,8 +53,11 @@
<div class="hit-description">
<ais-snippet :hit="item" attribute="description" />
</div>
<div class="hit-info">price: {{ item.price }}</div>
<div class="hit-info">release date: {{ item.releaseDate }}</div>
<div class="hit-info">Price: {{ item.price }}</div>
<div class="hit-info">Release date: {{ item.releaseDate }}</div>
<div class="hit-info">
Recommended: {{ item.recommendationCount }}
</div>
</div>
</template>
</ais-hits>
Expand All @@ -66,12 +82,21 @@ import { instantMeiliSearch } from '../../../src/index'
export default {
data() {
return {
recommendation: '',
searchClient: instantMeiliSearch(
'https://ms-9060336c1f95-106.saas.meili.dev',
'5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66'
'https://demo-steam.meilisearch.com',
'90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c'
),
}
},
methods: {
order: function (event, searchParameters, refine) {
refine({
...searchParameters,
sort: this.recommendation,
})
},
},
}
</script>

Expand Down