Client - display records on Dashboard (wip)
This commit is contained in:
Sam
parent
064ca22b85
commit
45438f547e
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<div>User records</div>
|
||||
</template>
|
||||
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="records-card">
|
||||
<Card :without-title="false">
|
||||
<template #title>
|
||||
<div>
|
||||
<img
|
||||
class="sport-img"
|
||||
:alt="`${sportLabel} logo`"
|
||||
:src="records.img"
|
||||
/>
|
||||
</div>
|
||||
{{ sportLabel }}
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="record" v-for="record in records.records" :key="record.id">
|
||||
<span class="record-type">{{
|
||||
t(`workouts.RECORD_${record.record_type}`)
|
||||
}}</span>
|
||||
<span class="record-value">{{ record.value }}</span>
|
||||
<span class="record-date">{{ record.workout_date }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { PropType, defineComponent } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
import { IRecord } from '@/types/workouts'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RecordsCard',
|
||||
components: {
|
||||
Card,
|
||||
},
|
||||
props: {
|
||||
records: {
|
||||
type: Object as PropType<IRecord[]>,
|
||||
required: true,
|
||||
},
|
||||
sportLabel: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const { t } = useI18n()
|
||||
return { t }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base';
|
||||
|
||||
.records-card {
|
||||
padding: 0;
|
||||
width: 50%;
|
||||
@media screen and (max-width: $small-limit) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep(.card) {
|
||||
font-size: 0.9em;
|
||||
.card-title {
|
||||
display: flex;
|
||||
font-size: 0.9em;
|
||||
.sport-img {
|
||||
padding-right: $default-padding;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
.card-content {
|
||||
font-size: 0.9em;
|
||||
padding: $default-padding;
|
||||
.record {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.record-type {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.record-value {
|
||||
font-weight: bold;
|
||||
padding-right: $default-padding * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="user-records">
|
||||
<Card v-if="Object.keys(recordsBySport).length === 0" class="no-records">
|
||||
<template #content>{{ t('workouts.NO_RECORDS') }}</template>
|
||||
</Card>
|
||||
<RecordsCard
|
||||
v-for="sportLabel in Object.keys(recordsBySport).sort()"
|
||||
:sportLabel="sportLabel"
|
||||
:records="recordsBySport[sportLabel]"
|
||||
:key="sportLabel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
import RecordsCard from '@/components/Dashboard/UserRecords/RecordsCard.vue'
|
||||
import { SPORTS_STORE } from '@/store/constants'
|
||||
import { IAuthUserProfile } from '@/types/user'
|
||||
import { useStore } from '@/use/useStore'
|
||||
import { getRecordsBySports } from '@/utils/records'
|
||||
import { translateSports } from '@/utils/sports'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'UserRecords',
|
||||
components: {
|
||||
Card,
|
||||
RecordsCard,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const store = useStore()
|
||||
const { t } = useI18n()
|
||||
const recordsBySport = computed(() =>
|
||||
getRecordsBySports(
|
||||
props.user.records,
|
||||
translateSports(store.getters[SPORTS_STORE.GETTERS.SPORTS], t),
|
||||
props.user.timezone
|
||||
)
|
||||
)
|
||||
return { recordsBySport, t }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base';
|
||||
|
||||
.user-records {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.no-records {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,6 +3,7 @@
|
||||
"DISTANCE": "distance",
|
||||
"DURATION": "duration",
|
||||
"KM": "km",
|
||||
"NO_RECORDS": "No records.",
|
||||
"NO_WORKOUTS": "No workouts.",
|
||||
"RECORD_AS": "Ave. speed",
|
||||
"RECORD_FD": "Farest distance",
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
"DISTANCE": "distance",
|
||||
"DURATION": "durée",
|
||||
"KM": "km",
|
||||
"NO_RECORDS": "Pas de records.",
|
||||
"NO_WORKOUTS": "Pas de séances.",
|
||||
"RECORD_AS": "Vitesse moy.",
|
||||
"RECORD_FD": "Distance la + longue",
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import { IRecord } from '@/types/workouts'
|
||||
|
||||
export interface IAuthUserProfile {
|
||||
admin: boolean
|
||||
bio: string | null
|
||||
@ -11,6 +13,7 @@ export interface IAuthUserProfile {
|
||||
nb_sports: number
|
||||
nb_workouts: number
|
||||
picture: string | boolean
|
||||
records: IRecord[]
|
||||
sports_list: number[]
|
||||
timezone: string
|
||||
total_distance: number
|
||||
|
||||
@ -18,11 +18,21 @@ export interface IRecord {
|
||||
record_type: string
|
||||
sport_id: number
|
||||
user: string
|
||||
value: number
|
||||
value: number | string
|
||||
workout_date: string
|
||||
workout_id: string
|
||||
}
|
||||
|
||||
export interface IRecordsBySport {
|
||||
[key: string]: string | Record<string, string | number>[]
|
||||
img: string
|
||||
records: Record<string, string | number>[]
|
||||
}
|
||||
|
||||
export interface IRecordsBySports {
|
||||
[key: string]: IRecordsBySport
|
||||
}
|
||||
|
||||
export interface IWeather {
|
||||
humidity: number
|
||||
icon: string
|
||||
|
||||
@ -4,6 +4,7 @@ import {
|
||||
addYears,
|
||||
endOfMonth,
|
||||
endOfWeek,
|
||||
format,
|
||||
startOfMonth,
|
||||
startOfWeek,
|
||||
startOfYear,
|
||||
@ -60,3 +61,20 @@ export const getCalendarStartAndEnd = (
|
||||
end: endOfWeek(monthEnd),
|
||||
}
|
||||
}
|
||||
|
||||
export const formatWorkoutDate = (
|
||||
dateTime: Date,
|
||||
dateFormat: string | null = null,
|
||||
timeFormat: string | null = null
|
||||
): Record<string, string> => {
|
||||
if (!dateFormat) {
|
||||
dateFormat = 'yyyy/MM/dd'
|
||||
}
|
||||
if (!timeFormat) {
|
||||
timeFormat = 'HH:mm'
|
||||
}
|
||||
return {
|
||||
workout_date: format(dateTime, dateFormat),
|
||||
workout_time: format(dateTime, timeFormat),
|
||||
}
|
||||
}
|
||||
|
||||
53
fittrackee_client/src/utils/records.ts
Normal file
53
fittrackee_client/src/utils/records.ts
Normal file
@ -0,0 +1,53 @@
|
||||
import { ISport } from '@/types/sports'
|
||||
import { IRecord, IRecordsBySports } from '@/types/workouts'
|
||||
import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
|
||||
|
||||
export const formatRecord = (
|
||||
record: IRecord,
|
||||
tz: string
|
||||
): Record<string, string | number> => {
|
||||
let value
|
||||
switch (record.record_type) {
|
||||
case 'AS':
|
||||
case 'MS':
|
||||
value = `${record.value} km/h`
|
||||
break
|
||||
case 'FD':
|
||||
value = `${record.value} km`
|
||||
break
|
||||
case 'LD':
|
||||
value = record.value
|
||||
break
|
||||
default:
|
||||
throw new Error(
|
||||
`Invalid record type, expected: "AS", "FD", "LD", "MD", got: "${record.record_type}"`
|
||||
)
|
||||
}
|
||||
return {
|
||||
workout_date: formatWorkoutDate(getDateWithTZ(record.workout_date, tz))
|
||||
.workout_date,
|
||||
workout_id: record.workout_id,
|
||||
id: record.id,
|
||||
record_type: record.record_type,
|
||||
value: value,
|
||||
}
|
||||
}
|
||||
|
||||
export const getRecordsBySports = (
|
||||
records: IRecord[],
|
||||
sports: ISport[],
|
||||
tz: string
|
||||
): IRecordsBySports =>
|
||||
records.reduce((sportList: IRecordsBySports, record) => {
|
||||
const sport = sports.find((s) => s.id === record.sport_id)
|
||||
if (sport && sport.label) {
|
||||
if (sportList[sport.label] === void 0) {
|
||||
sportList[sport.label] = {
|
||||
img: sport.img,
|
||||
records: [],
|
||||
}
|
||||
}
|
||||
sportList[sport.label].records.push(formatRecord(record, tz))
|
||||
}
|
||||
return sportList
|
||||
}, {})
|
||||
@ -1,3 +1,5 @@
|
||||
import { ISport } from '@/types/sports'
|
||||
|
||||
export const sportColors: Record<string, string> = {
|
||||
'Cycling (Sport)': '#55A8A3',
|
||||
'Cycling (Transport)': '#98C3A9',
|
||||
@ -6,3 +8,22 @@ export const sportColors: Record<string, string> = {
|
||||
Running: '#926692',
|
||||
Walking: '#929292',
|
||||
}
|
||||
|
||||
const sortSports = (a: ISport, b: ISport): number => {
|
||||
const sportALabel = a.label.toLowerCase()
|
||||
const sportBLabel = b.label.toLowerCase()
|
||||
return sportALabel > sportBLabel ? 1 : sportALabel < sportBLabel ? -1 : 0
|
||||
}
|
||||
|
||||
export const translateSports = (
|
||||
sports: ISport[],
|
||||
t: CallableFunction,
|
||||
onlyActive = false
|
||||
): ISport[] =>
|
||||
sports
|
||||
.filter((sport) => (onlyActive ? sport.is_active : true))
|
||||
.map((sport) => ({
|
||||
...sport,
|
||||
label: t(`sports.${sport.label}.LABEL`),
|
||||
}))
|
||||
.sort(sortSports)
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="left-container dashboard-sub-container">
|
||||
<UserCalendar :user="authUser" />
|
||||
<UserMonthStats :user="authUser" />
|
||||
<!-- <UserRecords />-->
|
||||
<UserRecords :user="authUser" />
|
||||
</div>
|
||||
<div class="right-container dashboard-sub-container">
|
||||
<Timeline :user="authUser" />
|
||||
@ -22,7 +22,7 @@
|
||||
import Timeline from '@/components/Dashboard/Timeline/index.vue'
|
||||
import UserCalendar from '@/components/Dashboard/UserCalendar/index.vue'
|
||||
import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue'
|
||||
// import UserRecords from '@/components/Dashboard/UserRecords.vue'
|
||||
import UserRecords from '@/components/Dashboard/UserRecords/index.vue'
|
||||
import UserStatsCards from '@/components/Dashboard/UserStartsCards/index.vue'
|
||||
import { USER_STORE } from '@/store/constants'
|
||||
import { IAuthUserProfile } from '@/types/user'
|
||||
@ -34,7 +34,7 @@
|
||||
Timeline,
|
||||
UserCalendar,
|
||||
UserMonthStats,
|
||||
// UserRecords,
|
||||
UserRecords,
|
||||
UserStatsCards,
|
||||
},
|
||||
setup() {
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
import { assert, expect } from 'chai'
|
||||
|
||||
import { getCalendarStartAndEnd, incrementDate, startDate } from '@/utils/dates'
|
||||
import {
|
||||
getCalendarStartAndEnd,
|
||||
incrementDate,
|
||||
startDate,
|
||||
formatWorkoutDate,
|
||||
} from '@/utils/dates'
|
||||
|
||||
describe('startDate (week starting Sunday)', () => {
|
||||
const testsParams = [
|
||||
@ -155,3 +160,68 @@ describe('getCalendarStartAndEnd', () => {
|
||||
})
|
||||
)
|
||||
})
|
||||
|
||||
describe('formatWorkoutDate', () => {
|
||||
const testsParams = [
|
||||
{
|
||||
description: 'returns date and time with default format',
|
||||
inputParams: {
|
||||
date: new Date('August 21, 2021 20:00:00'),
|
||||
dateFormat: null,
|
||||
timeFormat: null,
|
||||
},
|
||||
expected: {
|
||||
workout_date: '2021/08/21',
|
||||
workout_time: '20:00',
|
||||
},
|
||||
},
|
||||
{
|
||||
description: 'returns date and time with provided date format',
|
||||
inputParams: {
|
||||
date: new Date('August 21, 2021 20:00:00'),
|
||||
dateFormat: 'dd MM yyyy',
|
||||
timeFormat: null,
|
||||
},
|
||||
expected: {
|
||||
workout_date: '21 08 2021',
|
||||
workout_time: '20:00',
|
||||
},
|
||||
},
|
||||
{
|
||||
description: 'returns date and time with provided time format',
|
||||
inputParams: {
|
||||
date: new Date('August 21, 2021 20:00:00'),
|
||||
dateFormat: null,
|
||||
timeFormat: 'HH:mm:ss',
|
||||
},
|
||||
expected: {
|
||||
workout_date: '2021/08/21',
|
||||
workout_time: '20:00:00',
|
||||
},
|
||||
},
|
||||
{
|
||||
description: 'returns date and time with provided date and time formats',
|
||||
inputParams: {
|
||||
date: new Date('August 21, 2021 20:00:00'),
|
||||
dateFormat: 'dd-MM-yyyy',
|
||||
timeFormat: 'HH:mm:ss',
|
||||
},
|
||||
expected: {
|
||||
workout_date: '21-08-2021',
|
||||
workout_time: '20:00:00',
|
||||
},
|
||||
},
|
||||
]
|
||||
testsParams.map((testParams) => {
|
||||
it(testParams.description, () => {
|
||||
assert.deepEqual(
|
||||
formatWorkoutDate(
|
||||
testParams.inputParams.date,
|
||||
testParams.inputParams.dateFormat,
|
||||
testParams.inputParams.timeFormat
|
||||
),
|
||||
testParams.expected
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
256
fittrackee_client/tests/unit/utils/records.spec.ts
Normal file
256
fittrackee_client/tests/unit/utils/records.spec.ts
Normal file
@ -0,0 +1,256 @@
|
||||
import { assert, expect } from 'chai'
|
||||
|
||||
import { sports } from './constants'
|
||||
|
||||
import { formatRecord, getRecordsBySports } from '@/utils/records'
|
||||
|
||||
describe('formatRecord', () => {
|
||||
const testsParams = [
|
||||
{
|
||||
description: "return formatted record for 'Average speed'",
|
||||
inputParams: {
|
||||
record: {
|
||||
id: 9,
|
||||
record_type: 'AS',
|
||||
sport_id: 1,
|
||||
user: 'admin',
|
||||
value: 18,
|
||||
workout_date: 'Sun, 07 Jul 2019 08:00:00 GMT',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
timezone: 'Europe/Paris',
|
||||
},
|
||||
expected: {
|
||||
id: 9,
|
||||
record_type: 'AS',
|
||||
value: '18 km/h',
|
||||
workout_date: '2019/07/07',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
},
|
||||
{
|
||||
description: "return formatted record for 'Farest distance'",
|
||||
inputParams: {
|
||||
record: {
|
||||
id: 10,
|
||||
record_type: 'FD',
|
||||
sport_id: 1,
|
||||
user: 'admin',
|
||||
value: 18,
|
||||
workout_date: 'Sun, 07 Jul 2019 22:00:00 GMT',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
timezone: 'Europe/Paris',
|
||||
},
|
||||
expected: {
|
||||
id: 10,
|
||||
record_type: 'FD',
|
||||
value: '18 km',
|
||||
workout_date: '2019/07/08',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
},
|
||||
{
|
||||
description: "return formatted record for 'Longest duration'",
|
||||
inputParams: {
|
||||
record: {
|
||||
id: 11,
|
||||
record_type: 'LD',
|
||||
sport_id: 1,
|
||||
user: 'admin',
|
||||
value: '1:01:00',
|
||||
workout_date: 'Sun, 07 Jul 2019 08:00:00 GMT',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
timezone: 'Europe/Paris',
|
||||
},
|
||||
expected: {
|
||||
id: 11,
|
||||
record_type: 'LD',
|
||||
value: '1:01:00',
|
||||
workout_date: '2019/07/07',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
},
|
||||
{
|
||||
description: "return formatted record for 'Max. speed'",
|
||||
inputParams: {
|
||||
record: {
|
||||
id: 12,
|
||||
record_type: 'MS',
|
||||
sport_id: 1,
|
||||
user: 'admin',
|
||||
value: 18,
|
||||
workout_date: 'Sun, 07 Jul 2019 22:00:00 GMT',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
timezone: 'Europe/Paris',
|
||||
},
|
||||
expected: {
|
||||
id: 12,
|
||||
record_type: 'MS',
|
||||
value: '18 km/h',
|
||||
workout_date: '2019/07/08',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
},
|
||||
]
|
||||
testsParams.map((testParams) => {
|
||||
it(testParams.description, () => {
|
||||
assert.deepEqual(
|
||||
formatRecord(
|
||||
testParams.inputParams.record,
|
||||
testParams.inputParams.timezone
|
||||
),
|
||||
testParams.expected
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('formatRecord (invalid record type)', () => {
|
||||
it('it throws an error if record type is invalid', () => {
|
||||
expect(() =>
|
||||
formatRecord(
|
||||
{
|
||||
id: 12,
|
||||
record_type: 'M',
|
||||
sport_id: 1,
|
||||
user: 'admin',
|
||||
value: 18,
|
||||
workout_date: 'Sun, 07 Jul 2019 22:00:00 GMT',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
'Europe/Paris'
|
||||
)
|
||||
).to.throw(
|
||||
'Invalid record type, expected: "AS", "FD", "LD", "MD", got: "M"'
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('getRecordsBySports', () => {
|
||||
const testsParams = [
|
||||
{
|
||||
description: 'returns empty object if no records',
|
||||
input: {
|
||||
records: [],
|
||||
tz: 'Europe/Paris',
|
||||
},
|
||||
expected: {},
|
||||
},
|
||||
{
|
||||
description: 'returns record grouped by Sport',
|
||||
input: {
|
||||
records: [
|
||||
{
|
||||
id: 9,
|
||||
record_type: 'AS',
|
||||
sport_id: 1,
|
||||
user: 'admin',
|
||||
value: 18,
|
||||
workout_date: 'Sun, 07 Jul 2019 08:00:00 GMT',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
],
|
||||
tz: 'Europe/Paris',
|
||||
},
|
||||
expected: {
|
||||
'Cycling (Sport)': {
|
||||
img: '/img/sports/cycling-sport.png',
|
||||
records: [
|
||||
{
|
||||
id: 9,
|
||||
record_type: 'AS',
|
||||
value: '18 km/h',
|
||||
workout_date: '2019/07/07',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
description: 'returns record grouped by Sport',
|
||||
input: {
|
||||
records: [
|
||||
{
|
||||
id: 9,
|
||||
record_type: 'AS',
|
||||
sport_id: 1,
|
||||
user: 'admin',
|
||||
value: 18,
|
||||
workout_date: 'Sun, 07 Jul 2019 08:00:00 GMT',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
record_type: 'FD',
|
||||
sport_id: 2,
|
||||
user: 'admin',
|
||||
value: 18,
|
||||
workout_date: 'Sun, 07 Jul 2019 22:00:00 GMT',
|
||||
workout_id: 'n6JcLPQt3QtZWFfiSnYm4C',
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
record_type: 'MS',
|
||||
sport_id: 1,
|
||||
user: 'admin',
|
||||
value: 18,
|
||||
workout_date: 'Sun, 07 Jul 2019 08:00:00 GMT',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
],
|
||||
tz: 'Europe/Paris',
|
||||
},
|
||||
expected: {
|
||||
'Cycling (Sport)': {
|
||||
img: '/img/sports/cycling-sport.png',
|
||||
records: [
|
||||
{
|
||||
id: 9,
|
||||
record_type: 'AS',
|
||||
value: '18 km/h',
|
||||
workout_date: '2019/07/07',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
record_type: 'MS',
|
||||
value: '18 km/h',
|
||||
workout_date: '2019/07/07',
|
||||
workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
|
||||
},
|
||||
],
|
||||
},
|
||||
'Cycling (Transport)': {
|
||||
img: '/img/sports/cycling-transport.png',
|
||||
records: [
|
||||
{
|
||||
id: 10,
|
||||
record_type: 'FD',
|
||||
value: '18 km',
|
||||
workout_date: '2019/07/08',
|
||||
workout_id: 'n6JcLPQt3QtZWFfiSnYm4C',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
testsParams.map((testParams) =>
|
||||
it(testParams.description, () => {
|
||||
assert.deepEqual(
|
||||
getRecordsBySports(
|
||||
testParams.input.records,
|
||||
sports,
|
||||
testParams.input.tz
|
||||
),
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
testParams.expected
|
||||
)
|
||||
})
|
||||
)
|
||||
})
|
||||
134
fittrackee_client/tests/unit/utils/sports.spec.ts
Normal file
134
fittrackee_client/tests/unit/utils/sports.spec.ts
Normal file
@ -0,0 +1,134 @@
|
||||
import { assert } from 'chai'
|
||||
|
||||
import { sports } from './constants'
|
||||
|
||||
import createI18n from '@/i18n'
|
||||
import { translateSports } from '@/utils/sports'
|
||||
|
||||
const { t, locale } = createI18n.global
|
||||
|
||||
describe('sortSports', () => {
|
||||
const testsParams = [
|
||||
{
|
||||
description: "returns sorted all translated sports (with 'en' locale)",
|
||||
inputParams: {
|
||||
sports,
|
||||
locale: 'en',
|
||||
onlyActive: false,
|
||||
},
|
||||
expected: sports,
|
||||
},
|
||||
{
|
||||
description:
|
||||
"returns sorted only active translated sports (with 'en' locales)",
|
||||
inputParams: {
|
||||
sports,
|
||||
locale: 'en',
|
||||
onlyActive: true,
|
||||
},
|
||||
expected: [
|
||||
{
|
||||
has_workouts: false,
|
||||
id: 1,
|
||||
img: '/img/sports/cycling-sport.png',
|
||||
is_active: true,
|
||||
label: 'Cycling (Sport)',
|
||||
},
|
||||
{
|
||||
has_workouts: true,
|
||||
id: 3,
|
||||
img: '/img/sports/hiking.png',
|
||||
is_active: true,
|
||||
label: 'Hiking',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
description: "returns empty array (with 'en' locale)",
|
||||
inputParams: {
|
||||
sports: [],
|
||||
locale: 'en',
|
||||
onlyActive: false,
|
||||
},
|
||||
expected: [],
|
||||
},
|
||||
{
|
||||
description: "returns sorted all translated sports (with 'fr' locale)",
|
||||
inputParams: {
|
||||
sports,
|
||||
locale: 'fr',
|
||||
onlyActive: false,
|
||||
},
|
||||
expected: [
|
||||
{
|
||||
has_workouts: true,
|
||||
id: 3,
|
||||
img: '/img/sports/hiking.png',
|
||||
is_active: true,
|
||||
label: 'Randonnée',
|
||||
},
|
||||
{
|
||||
has_workouts: false,
|
||||
id: 1,
|
||||
img: '/img/sports/cycling-sport.png',
|
||||
is_active: true,
|
||||
label: 'Vélo (Sport)',
|
||||
},
|
||||
{
|
||||
has_workouts: false,
|
||||
id: 2,
|
||||
img: '/img/sports/cycling-transport.png',
|
||||
is_active: false,
|
||||
label: 'Vélo (Transport)',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
description:
|
||||
"returns sorted only active translated sports (with 'fr' locales)",
|
||||
inputParams: {
|
||||
sports,
|
||||
locale: 'fr',
|
||||
onlyActive: true,
|
||||
},
|
||||
expected: [
|
||||
{
|
||||
has_workouts: true,
|
||||
id: 3,
|
||||
img: '/img/sports/hiking.png',
|
||||
is_active: true,
|
||||
label: 'Randonnée',
|
||||
},
|
||||
{
|
||||
has_workouts: false,
|
||||
id: 1,
|
||||
img: '/img/sports/cycling-sport.png',
|
||||
is_active: true,
|
||||
label: 'Vélo (Sport)',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
description: "returns empty array (with 'fr' locale)",
|
||||
inputParams: {
|
||||
sports: [],
|
||||
locale: 'fr',
|
||||
onlyActive: false,
|
||||
},
|
||||
expected: [],
|
||||
},
|
||||
]
|
||||
testsParams.map((testParams) => {
|
||||
it(testParams.description, () => {
|
||||
locale.value = testParams.inputParams.locale
|
||||
assert.deepEqual(
|
||||
translateSports(
|
||||
testParams.inputParams.sports,
|
||||
t,
|
||||
testParams.inputParams.onlyActive
|
||||
),
|
||||
testParams.expected
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user