I am trying to create a test, that checks wether a component draws correctly or not. But when i try to run the test i get this error message:
TypeError: Cannot read property 'searchForGames' of undefined
I have tried adding som mock data in searchForGames, but i cant get it to work:(
Here is my code:
search.tsx
import * as React from "react";
import { Component } from "react-simplified";
import { CardGroup, GameCard, Container, NavBar, SubHeader, Alert } from "./widgets";
import { igdbService, Game } from "./services";
export class Search extends Component<{
match: { params: { searchString: string } };
}> {
games: Game[] = [];
render() {
return (
<Container>
{this.games.length !== 0 ? (
<CardGroup>
{this.games.map((game) => {
return (
<div key={game.id} className="col">
<NavBar.Link to={"/games/" + game.id}>
<GameCard
name={game.name}
url={game.cover ? game.cover.url.replace("thumb", "cover_big") : ""}
/>
</NavBar.Link>
</div>
);
})}
</CardGroup>
) : (
<div className="d-flex flex-column justify-content-center">
<h4 className="mx-auto">The game you are looking for could not be found in the IGDB database..</h4>
<img className="w-40 mx-auto" alt="Sadge" src="https://c.tenor.com/kZ0XPsvtqw8AAAAi/cat-farsi-sad.gif"/>
</div>
)}
</Container>
);
}
mounted() {
this.getGames();
}
getGames() {
igdbService
.searchForGames(this.props.match.params.searchString)
.then((response) => (this.games = response))
}
}
search.test.tsx
import {Search} from "../src/Search"
import * as React from "react";
import { shallow } from 'enzyme';
import { NavBar, GameCard } from "../src/widgets";
jest.mock("../src/services", () => {
class Service {
searchForGames(string: searchString) {
return Promise.resolve(
[
{
id:143755,
cover: {
id:1311803,
url: '//images.igdb.com/igdb/image/upload/t_thumb/co2tp7.jpg'
},
name: "Terrorist Killer",
}
]
)
}
getGames() {
return Promise.resolve();
}
}
return new Service();
})
test("Search draws correctly", (done) => {
const wrapper = shallow (<Search match={{params: {searchString: "Terrorist"} }}/>)
setTimeout(() => {
expect(
wrapper.containsAllMatchingElements([
<div>
<NavBar.Link to="/games/143755">
<GameCard
name="Terrorist Killer"
url="//images.igdb.com/igdb/image/upload/t_thumb/co2tp7.jpg"
/>
</NavBar.Link>
</div>
])
).toEqual(true);
done();
})
})
So I added a calendar to react which changes the workout data to a specific date. When I change the date the data does change correctly. If I refresh the react web pages I get the updated data. I'm just a little confused on how to have node js initiate the data update in react. After changing the data I have node emitting to this socket...
import { format } from 'date-fns'
import ScrapeExperienceLevel from './ScrapeExperienceLevel'
export default (websockets, queue, timer, workouts, scrapeExperienceLevel) => {
websockets.on('connection', socket => {
socket.on('joinRoom', roomName => {
socket.join(roomName)
})
socket.on('leaveRoom', roomName => {
socket.leave(roomName)
})
setInterval(function(){
socket.emit('GetCheckedInMemebers', queue.dump());
}, 3000);
socket.on('initScreen', screen => {
const screenWorkouts = workouts.current.filter(workout => workout.station == screen)
socket.emit('screenInfo', screenWorkouts)
socket.emit('queueInfo', queue.screen(screen - 1))
socket.emit('timer', { time: timer.formatTime().formattedTime })
})
// code in question
socket.on('GetWorkoutDate', async function (date) {
await workouts.getNewWorkouts(date.date)
const screenWorkouts = workouts.current.filter(workout => workout.station == 1)
socket.emit('UpdateWorkouts', screenWorkouts)
})
socket.on('initAdmin', () => {
socket.emit('queue', queue.dump())
socket.emit('timer', { time: timer.formatTime().formattedTime })
})
socket.on('initOverview', () => {
socket.emit('workouts', workouts.current)
socket.emit('queue', queue.dump())
socket.emit('timer', { time: timer.formatTime().formattedTime })
})
socket.on('addUser', async (person) => {
if(typeof person.member_id == 'undefined')
person.member_id = ''
else{
person.experiencelevel = await scrapeExperienceLevel.getExperienceLevel(person.member_id)
person.firstname = person.firstname + ' '
}
queue.add(person, timer)
websockets.emit('queue', queue.dump())
})
socket.on('removeUser', ({ group, person, list }) => {
queue.remove(group, person, list)
websockets.emit('queue', queue.dump())
})
socket.on('reorder', waiting => {
queue.reorder(waiting)
websockets.emit('queue', queue.dump())
})
socket.on('toggleTimer', () => {
if (timer.isRunning()) {
timer.pause()
} else {
timer.start()
}
})
})
}
Here's my Screen page's react...
import React, { Component } from 'react'
import { defaultTo } from 'ramda'
import './styles.css'
class Screen extends Component {
state = {
time: '',
rest: false,
workout: [],
queue: [],
}
UpdateTimer = ({ time, rest }) => {
this.setState({ time, rest })
}
UpdateScreenInfo = ({ data }) => {
this.setState({ workout: defaultTo({}, data[0]) })
}
UpdateQueueInfo = ({ data }) => {
this.setState({ queue: defaultTo({}, data) })
}
UpdateQueue = ({ queue, screenNumber }) => {
this.setState({ queue: defaultTo({}, queue[screenNumber - 1]) })
}
componentDidMount() {
const screenNumber = this.props.match.params.id
const { socket } = this.props
socket.on('connect', () => {
socket.emit('joinRoom', 'screens')
socket.emit('initScreen', screenNumber)
})
socket.on('timer', ({ time, rest }) => this.UpdateTimer({ time, rest }))
socket.on('screenInfo', data => this.UpdateScreenInfo({ data }))
socket.on('queueInfo', data => this.UpdateQueueInfo({ data }))
socket.on('queue', ({ queue }) => this.UpdateQueue({ queue, screenNumber }))
//socket.on('UpdateWorkouts', (updatedData) => this.UpdateWorkoutsData(updatedData))
}
componentWillUnmount() {
const { socket } = this.props
socket.off('timer', this.UpdateTimer)
socket.off('screenInfo', this.UpdateScreenInfo)
socket.off('queueInfo', this.UpdateQueueInfo)
socket.off('queue', this.UpdateQueue)
}
renderMovement = (movement, equipment) => {
if (!movement) return <noscript />
return (
<div className="screenMove">
{equipment && `${equipment.title} `}
{movement.title}
</div>
)
}
render() {
const { time, rest, queue } = this.state
const { workout } = this.props
const variation = defaultTo({}, workout.variation)
const person1 = defaultTo({}, queue[0])
const person2 = defaultTo({}, queue[1])
return (
<main className="screenWrapper">
<div className="screenHeader">
<span className="screenFirstUser">
{(() => {
if (person1.experiencelevel === 'novice') {
// light purple
return (
<div style={{color:'#BF5FFF', fontWeight: 'bold', display: 'inline-block'}}>{person1.firstname}</div>
)
} else if (person1.experiencelevel === 'beginner') {
// light blue
return (
<div style={{color:'#87CEFA', fontWeight: 'bold', display: 'inline-block'}}>{person1.firstname}</div>
)
} else if (person1.experiencelevel === 'intermediate') {
return (
<div style={{color:'orange', fontWeight: 'bold', display: 'inline-block'}}>{person1.firstname}</div>
)
} else if (person1.experiencelevel === 'advanced') {
// gym green
return (
<div style={{color:'#93C90E', fontWeight: 'bold', display: 'inline-block'}}>{person1.firstname}</div>
)
}else if (person1.experiencelevel === 'expert') {
return (
<div style={{color:'red', fontWeight: 'bold', display: 'inline-block'}}>{person1.firstname}</div>
)
}
})()}
</span>
<span className={`screenTimer alt ${rest ? 'rest' : ''}`}>{time ? time : '0:00'}</span>
<span className="screenSecondUser">
{(() => {
if (person2.experiencelevel === 'novice') {
// light purple
return (
<div style={{color:'#BF5FFF', fontWeight: 'bold', display: 'inline-block'}}>{person2.firstname}</div>
)
} else if (person2.experiencelevel === 'beginner') {
// light blue
return (
<div style={{color:'#87CEFA', fontWeight: 'bold', display: 'inline-block'}}>{person2.firstname}</div>
)
} else if (person2.experiencelevel === 'intermediate') {
return (
<div style={{color:'orange', fontWeight: 'bold', display: 'inline-block'}}>{person2.firstname}</div>
)
} else if (person2.experiencelevel === 'advanced') {
// gym green
return (
<div style={{color:'#93C90E', fontWeight: 'bold', display: 'inline-block'}}>{person2.firstname}</div>
)
}else if (person2.experiencelevel === 'expert') {
return (
<div style={{color:'red', fontWeight: 'bold', display: 'inline-block'}}>{person2.firstname}</div>
)
}
})()}
</span>
</div>
<p className="screenVariation">{variation.title}</p>
<div className="screenMoves">
{this.renderMovement(workout.movementOne, workout.equipmentOne)}
{this.renderMovement(workout.movementTwo, workout.equipmentTwo)}
{this.renderMovement(workout.movementThree, workout.equipmentThree)}
</div>
</main>
)
}
}
export default Screen
Also found the parent component Daniele enlightened me about. Now I'm sharing 1 socket connection throughout all the components.
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { path } from 'ramda'
import { connect, Provider } from 'react-redux'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'
import openSocket from 'socket.io-client'
import { defaultTo } from 'ramda'
import './index.css'
import 'semantic-ui-css/semantic.min.css'
import store from './redux/store'
import Admin from './screens/Admin'
import Screens from './screens/Screens'
import Auth from './screens/Auth'
import BackScreen from './screens/Screens/Back'
import FrontScreen from './screens/Screens/Front'
const socket = openSocket(`http://${window.location.hostname}:${process.env.REACT_APP_WEBSOCKET_PORT}`)
function mapState(state) {
return {
loggedIn: path(['conf', 'loggedIn'], state),
}
}
class App extends Component {
state = {
workout: []
}
static propTypes = {
loggedIn: PropTypes.bool,
}
componentDidMount() {
socket.on('UpdateWorkouts', (workout) => { console.log(workout[0]); this.setState({ workout: defaultTo({}, workout[0]) }) })
}
render() {
const { loggedIn } = this.props
const workout = this.state
return (
<BrowserRouter>
<Switch>
{!loggedIn && <Route path="/" component={(props) => <Auth socket={socket} {...props} /> }/> }
<Route exact path="/admin" component={(props) => <Admin socket={socket} {...props} /> } />
<Route path="/s/back" component={(props) => <BackScreen socket={socket} {...props} /> } />
<Route path="/s/front" component={(props) => <FrontScreen socket={socket} {...props} /> } />
<Route path="/s/:id" component={(props) => <Screens {...props} socket={socket} workout={workout} /> } />
<Redirect to={'/s/1'} />
</Switch>
</BrowserRouter>
)
}
}
const ConnectedApp = connect(mapState)(App)
const rootEl = document.getElementById('root')
ReactDOM.render(
<Provider store={store}>
<ConnectedApp />
</Provider>,
rootEl,
)
Here's my Admin page.
import React, { Component, Fragment } from 'react'
import { Button, Grid, Header, Dimmer, Loader } from 'semantic-ui-react'
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { defaultTo } from 'ramda'
import './styles.css'
import WaitingList from './WaitingList'
import Stations from './Stations'
import AddUserModal from './AddUserModal'
class Admin extends Component {
state = {
loading: false,
time: '',
rest: false,
data: {
waiting: [],
queue: [],
},
startDate: new Date(),
showAddUserModal: false,
}
handleChange = date => {
const { socket } = this.props
this.setState({
startDate: date
})
socket.emit('GetWorkoutDate', { date })
}
UpdateTimer = ({ time, rest }) => {
this.setState({ time, rest })
}
UpdateQueue = ({ data }) => {
this.setState({ queue: defaultTo({}, data) })
}
GetCheckedInMemebers = ({ data }) => {
this.setState({ data })
}
componentDidMount() {
const { socket } = this.props
socket.on('connect', () => {
socket.emit('initAdmin')
})
socket.on('timer', ({ time, rest }) => this.UpdateTimer({ time, rest }))
socket.on('queue', data => this.UpdateQueue({ data }))
socket.on('GetCheckedInMemebers', data => this.GetCheckedInMemebers({ data }))
}
componentWillUnmount() {
const { socket } = this.props
socket.off('timer', this.UpdateTimer)
socket.off('queue', this.UpdateQueue)
socket.off('GetCheckedInMemebers', this.GetCheckedInMemebers)
}
addPersonToWaitingList = person => {
const { socket } = this.props
socket.emit('addUser', person)
}
removePersonFromList = (groupIndex, personIndex, list) => {
const { socket } = this.props
socket.emit('removeUser', { group: groupIndex, person: personIndex, list: list })
}
reorderWaitingList = waiting => {
const { data } = this.state
const { socket } = this.props
this.setState({ data: { ...data, waiting } })
socket.emit('reorder', waiting)
}
toggleTimer = () => {
const { socket } = this.props
socket.emit('toggleTimer')
}
render() {
const { loading, rest, time, data, showAddUserModal } = this.state
return (
<Fragment>
change workout date <DatePicker
dateFormat="M/d/yy"
selected={this.state.startDate}
onChange={this.handleChange}
/>
<Grid container columns={2} divided id="adminWrapper">
<Grid.Row className="fGrow">
<Grid.Column className="listWrapper">
<Header size="huge" textAlign="center">
Queue
<Button positive floated="right" onClick={() => this.setState({ showAddUserModal: true })}>
Add
</Button>
</Header>
<WaitingList
className="adminList"
waiting={data.waiting}
reorder={this.reorderWaitingList}
removeFromList={this.removePersonFromList}
/>
</Grid.Column>
<Grid.Column className="listWrapper">
<Header size="huge" textAlign="center">
Stations
</Header>
<Stations className="adminList" queue={data.queue}
removeFromList={this.removePersonFromList}
/>
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Button fluid color={rest ? 'red' : 'blue'} onClick={this.toggleTimer}>
<span>{time ? time : '0:00'}</span>
</Button>
</Grid.Row>
</Grid>
<AddUserModal
show={showAddUserModal}
handleClose={() => this.setState({ showAddUserModal: false })}
addUser={this.addPersonToWaitingList}
setLoading={isLoading => this.setState({ loading: isLoading })}
loading={loading}
/>
<Dimmer active={loading} page>
<Loader />
</Dimmer>
</Fragment>
)
}
}
export default Admin
New to node and react. Appreciate the guidance!
Edit: The calendar (date picker) is on another react page. GetWorkoutDate is being called. However, react never gets the data from the emit socket.emit('UpdateWorkouts', screenWorkouts). I verified the everything works correctly except getting the new data to update the react state.
Final Edit:
So for some reason I was not able to send the workout through props for the Screen page. Although, it is the correct way for react there just must be something going on with my environment. Here's what I did get working for me. When Screen page loads it loads the workout. Then I just added settimeout to repeat getting the workout every 5 secs.
socket.on('initScreen', async screen => {
setInterval(async function(){
const screenWorkouts = await workouts.current.filter(workout => workout.station == screen)
socket.emit('screenInfo', screenWorkouts)
}, 5000)
socket.emit('queueInfo', queue.screen(screen - 1))
socket.emit('timer', { time: timer.formatTime().formattedTime })
})
What's weird is after sending the workout to screens between 3 and 8 times correctly eventually it sends an empty array. So to prevent the workout from updating when it's empty I check it for length before I try and update the state.
UpdateScreenInfo = ({ data }) => {
if(data.length !== 0)
this.setState({ workout: defaultTo({}, data[0]) })
I'm awarding Daniele the points since they are about to expire and Daniele helped so much!
The problem is that each time you call openSocket you open a new connection to the server. Looking at your server code it seems that your 'GetWorkoutDate' message handler replies with 'UpdateWorkouts' message on the same socket connection; the problem is that 'UpdateWorkouts' is received by the react component sending the 'GetWorkoutDate' message and not by other react components due they open a new connection each.
The proper way to handle with WebSockets in a react app where more components needs to access the WebSocket is to open it only in the root component and passing it to child components as a property. Something like:
MainComponent extends React.Component {
componentDidMount() {
// Open the socket only in the main component
this.socket = openSocket(...);
}
componentWillUnmount() {
this.socket.close();
}
render() {
return (
<div>
{/* pass the socket as property to child components;
this can be repeated with all nested sub-component */}
<ChildComponent socket={this.socket}>
</div>
)
}
}
ChildComponent extends React.Component {
componentDidMount() {
const { socket } = this.props;
// create the required handlers and store them
this.handler = data => { /* do what you need with data */ };
// add the handlers to the socket
socket.on("message", this.handler);
}
componentWillUnmount() {
const { socket } = this.props;
// remove the handlers from the socket
socket.off("message", this.handler);
}
}
By this way you open a single connection and you share it between all components, now you can send messages to the server from a component and handle the response message on any other component.
Edit after last question update:
Two things:
the parent component is the root App component ok, but I can't still understand which is the component which emits the 'GetWorkoutDate' message (I was thinking it was the Screen 's parent component, but it seems I'm wrong); probably to find final solution we need to clarify this;
you are passing the socket (as a property) to the Route component, not to the Screen component: you need to change your routes as follows
<Route path="/s/:id" component={() => <Screens socket={socket} />} />
I checked better last version of your Screen component: you can't do this in componentDidMount method:
socket.on('timer', ({ time, rest }) => this.setState({ time, rest }))
you need to store the reference of the handler function in order to remove it later in componentWillUnmount method.
You can't do this in componentWillUnmount method:
socket.close();
now you have only one connection shared between all components of your app, if you close it once, you close it forever.
The strategy is: in componentDidMount method:
for each message (or more on general for each event), to create a handler function and store its reference
attache the referenced handler function to the desired message (or more in general, to the desired event)
then, in componentWillUnmount method:
to detach the handler function (throug the reference we still have) from the message (or more in general from the event),
by this way each time the component is mounted it starts listening on the desired messages/events, each time the component is unmounted it stops doing it and no actions will be performed on it while not mounted be the message/event handlers.
Edit:
Having circular import dependency is a bad idea: it's better to remove any var App = require('./index') (or similar) from child component files
But moreover, if the purpose of handleChange is only to emit something on the ws you don't need a so complicated design pattern: you can access the socket from Admin Component.
Probably what you need is
class App extends Component {
componentDidMount() {
// App component will never unmount: the reference for unmounting is not required
socket.on('UpdateWorkouts', ([workout]) => this.setState({ workout }));
}
render() {
const { workout } = this.state;
return (
...
<Route path="/s/:id" component={props => <Screens {...props, socket, workout} />} />
...
);
}
}
class Screen extends Component {
render() {
const { time, rest, queue } = this.state;
const { workout } = this.props;
...
}
}
You are calling componentDidMount function when socket emits UpdateWorkouts which is causing the loop. You should not call componentDidMount function of a react component, react handles the lifecycles methods itself. You can have another method to handle updates as following.
handleUpdateWorkouts = (updatedData) => {
//Update your workout, queue etc. whatever you update
this.setState({updatedData})
}
And assign this function as callback to on "UpdateWorkouts" events.
this.socket.on('UpdateWorkouts', (updatedData) => this.handleUpdateWorkouts(updatedData));
Make sure you are emitting GetWorkoutDate properly upon the calendar onChange.
this.socket.on('GetWorkoutDate', date); //something like this
If getNewWorkouts function is an async, then use await
socket.on('GetWorkoutDate', async function (date) {
await workouts.getNewWorkouts(date.date) //<----- here
const screenWorkouts = workouts.current.filter(workout => workout.station == 1)
console.log(screenWorkouts[0])
socket.emit('UpdateWorkouts', screenWorkouts)
})
I do have one solution at architect level which is, Return synchronous actions from the nodeJs sockets. So the moment client receive it, just dispatch the action received via socket and then automatically update it.
For eg: if socket returns
{
type: 'actionName',
data
}
then dispatching it directly would result in auto update of subscribed components.
I am trying to test a fetch call in componentDidMount. trying different solutions but always hit a dead end. currently i have
component
import React, { Component } from 'react';
import Seatmap from 'react-seatmap';
import '../../style/main.scss';
import seats from '../../seatData';
import Ticket from '../Ticket';
class Booking extends Component {
constructor(props){
super(props);
this.state = {
row: null,
number: null,
data: [],
selected: null,
isLoaded: false
}
this.addSeatCallback = this.addSeatCallback.bind(this);
this.removeSeatCallback = this.removeSeatCallback.bind(this);
}
controller = new AbortController();
async fetchData() {
await fetch(window.location.protocol + window.location.hostname,{
signal: this.controller.signal
})
.then(res => seats)
.then(
(result) => {
this.setState({
isLoaded: true,
data: this.formatSeatData(result)
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
);
}
async componentDidMount(){
await this.fetchData();
}
componentWillUnmount() {
this.controller.abort();
}
getIndexFromLetter(letter) {
return letter.charCodeAt(0) - 65;
}
formatSeatData(seats){
const rows = [];
seats.seats.map( (seat,i) => {
const arr = seat.seatNumber.split(/([0-9]+)/).filter(Boolean);
seat.number = arr[0];
seat.isReserved = !seat.available;
const index = this.getIndexFromLetter(arr[1]);
if(typeof rows[index] === 'undefined') {
rows[index] = [];
}
rows[index].push(seat);
return true;
});
return rows;
}
addSeatCallback(row, number) {
const { data } = this.state;
const index = this.getIndexFromLetter(row);
this.setState({ row, number, selected: data[index][number-1] });
}
removeSeatCallback(row, number) {
this.setState({row: null, number: null, selected: null});
}
render() {
const { data, selected } = this.state;
if(Object.keys(data).length>0){
return (
<div className="container-fluid text-center">
<div className="" style={{float:'left', padding: '10px', marginTop:'10px'}}>
<Seatmap rows={data} maxReservableSeats={1} alpha addSeatCallback={this.addSeatCallback} removeSeatCallback={this.removeSeatCallback} />
</div>
<div className="" style={{float:'left', padding: '10px'}}>
<Ticket selected={selected} />
</div>
</div>
);
}
return null;
}
}
export default Booking;
test
import React from 'react';
import ReactDOM from 'react-dom';
import Booking from '../../src/components/Booking';
import seats from '../../src/seatData';
import { shallow } from 'enzyme';
describe('Booking', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<Booking />, div);
ReactDOM.unmountComponentAtNode(div);
});
let wrapper;
beforeEach(() => {
wrapper = shallow(<Booking />, { disableLifecycleMethods: true });
});
afterEach(() => {
wrapper.unmount();
});
it("must render a loading span before api call success", () => {
// expect(wrapper.find("span.loading").length).toBe(1);
});
it("componentDidMount", (done) => {
const spyDidMount = jest.spyOn(Booking.prototype,"componentDidMount");
fetch.mockImplementation(() => {
return Promise.resolve({
status: 200,
json: () => {
return Promise.resolve({
seats:{}
});
}
});
});
const didMount = wrapper.instance().componentDidMount();
expect(spyDidMount).toHaveBeenCalled();
didMount.then(() => {
wrapper.update();
expect(wrapper.find("div.seatmap_container"));
expect(wrapper.find("spans.loading").length).toBe(0);
spyDidMount.mockRestore();
fetch.mockClear();
done();
});
});
});
here is my repo https://github.com/shorif2000/elucidat-javascript-test
error
PASS test/components/Booking.test.js
Booking
✓ renders without crashing (29ms)
✓ must render a loading span before api call success (1ms)
✓ componentDidMount (14ms)
console.error node_modules/react-dom/cjs/react-dom.development.js:545
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in Booking
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 2.145s
Ran all test suites matching /test\/components\/Booking.test.js/i.
I'm trying to trigger the "input" event of a Vuetify v-autocomplete component inside of a unit test. From what I can tell, the unit test is quite similar to the one the Vuetify guys are using, but for some reason the mock method is never called.
The factory method simply returns a component instance made via mount and adds a local store, vue, and vueLoading instance.
Would love a bit of insight here, already lost several hours to this and I'm starting to go a bit mad...
Vuetify version: 1.4.3
Component
<template>
<v-autocomplete
:items="options"
:value="selectedId"
:label="label || $t('user.filter')"
:dark="dark"
:class="fieldClass"
:menu-props="{ contentClass }"
:loading="$loading.isLoading('fetch users')"
item-text="email"
item-value="id"
name="search_by_user"
hide-details
single-line
clearable
#input="updateValue($event)"
#click.native="fetchUsers"
/>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
props: {
value: {
type: String,
required: false,
default: null
},
label: {
type: String,
required: false,
default: null
},
dark: {
type: Boolean,
required: false,
default: true
},
fieldClass: {
type: String,
required: false,
default: 'select-user-search'
},
contentClass: {
type: String,
required: false,
default: 'user-search'
},
blankItem: {
type: Object,
required: false,
default: null
}
},
data () {
return {
selectedId: this.value
}
},
computed: {
...mapGetters(['users']),
options () { return this.blankItem ? [this.blankItem].concat(this.users) : this.users }
},
created () {
if (this.value) this.fetchUsers()
},
methods: {
fetchUsers () {
if (this.users.length) return
this.$store.dispatch('FETCH_USERS', {
fields: ['id', 'email'],
filter: { active: 'true' }
})
},
updateValue (value) {
this.selectedId = value
this.$emit('input', value)
}
}
}
</script>
<style>
.select-user-search {
overflow: hidden;
padding-bottom: 1px;
}
.select-user-search .v-select__selections {
overflow: hidden;
}
.select-user-search .v-select__selection {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
Unit Test
import { mount, shallowMount, createLocalVue } from '#vue/test-utils'
import Vuex from 'vuex'
import VueLoading from 'vuex-loading'
import Vuetify from 'vuetify'
import UserSearch from 'manager/components/user/search.vue'
const factory = (values, shallow = true) => {
if (!shallow) {
return mount(UserSearch, { ...values })
}
return shallowMount(UserSearch, { ...values })
}
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(VueLoading)
localVue.use(Vuetify)
describe('UserSearch', () => {
let actions, getters, store, vueLoading
beforeEach(() => {
actions = {
FETCH_USERS: jest.fn()
}
getters = {
users: () => []
}
vueLoading = new VueLoading({ useVuex: true })
store = new Vuex.Store({
actions,
getters
})
})
it('calls "updateValue" method when input triggered', async () => {
const methods = {
updateValue: jest.fn()
}
const wrapper = factory({ methods, store, localVue, vueLoading }, false)
const input = wrapper.find('input')
input.element.value = 'value'
input.trigger('input')
await wrapper.vm.$nextTick()
expect(methods['updateValue']).toBeCalledWith('value')
})
})
I use the following variant
Component
<template>
<span> <!-- span (or the other HTML element) around <v-autocomplete> is important -->
<v-autocomplete
:items="options"
:value="selectedId"
:label="$t('user.filter')"
:menu-props="{ contentClass }"
:loading="false"
item-text="email"
item-value="id"
name="search_by_user"
hide-details
single-line
clearable
#input="updateValue($event)"
#click.native="fetchUsers"
/>
</span>
</template>
<script lang="ts">
import { Component } from 'vue-property-decorator';
import Vue from 'vue';
#Component
export default class AppAutocomplete extends Vue {
private options: any[] = [{email: 'box1#gmail.com', id: 1}];
private selectedId: string|undefined = undefined;
private contentClass = 'user-search';
private fetchUsers() {
}
public updateValue(event: any) {
}
}
</script>
Unit test
import { Wrapper, createLocalVue, mount } from '#vue/test-utils';
import Vue from 'vue';
import Vuetify from 'vuetify';
// #ts-ignore
import AppAutocomplete from '#/components/AppAutocomplete.vue';
describe('AppAutocomplete', () => {
Vue.use(Vuetify);
let wrapper: Wrapper<Vue>;
let vm: any;
beforeEach(() => {
wrapper = mount(AppAutocomplete, {
localVue: createLocalVue(),
vuetify: new Vuetify({
mocks: { $vuetify: { lang: { t: (val: string) => val } } },
}),
mocks: { $t: () => { /** */ } },
});
vm = wrapper.vm;
});
afterEach(() => wrapper.destroy());
it(`calls "updateValue" method when input triggered`, () => {
jest.spyOn(vm, 'updateValue');
const autocompleteElem = wrapper.find('.v-autocomplete');
autocompleteElem.vm.$emit('input', 'box1');
expect(vm.updateValue).toBeCalledTimes(1);
expect(vm.updateValue).toHaveBeenCalledWith('box1');
});
});
To surround v-autocomplete by some other HTML element is important. Without it a test fails.
Vuetify version: 2.1.12
I'm trying to figure out why my code isn't working but I'm still not understanding why I'm getting this type error.
import React, { Component } from 'react';
import axios from 'axios'
class List extends Component {
state = {
title: '',
description: ''
}
componentDidMount(){
const initialState = {
_id: this.props.list._id,
title: this.props.list.title,
description: this.props.list.description
}
this.setState(initialState)
}
handleChange = (event) => {
const { value, name } = event.target
this.setState({[name]: value})
}
handleDelete = () => {
axios.delete(`/api/lists/${this.state._id}`).then(() => {
this.props.getAllLists()
})
}
handleUpdate = () => {
axios.patch(`/api/lists/${this.state._id}`, this.state).then(() => {
console.log("Updated List")
})
}
render() {
return (
<div>
<input onBlur={this.handleUpdate}
onChange={this.handleChange}
type="text" name="title"
value={this.state.title}
/>
<textarea onBlur={this.handleUpdate}
onChange={this.handleChange}
name="description" value={this.state.description}
/>
<button onClick={this.handleDelete}>X</button>
</div>
)
}
}
export default List
This is the Error msg at this link
Added the other part
import React, { Component } from 'react';
import axios from 'axios'
import List from './List';
class ListPage extends Component {
state = {
user: {},
lists: []
}
componentDidMount() {
this.getAllLists()
}
getAllLists = () => {
// make an api call to get one single user
// On the server URL is '/api/users/:userId'
const userId = this.props.match.params.userId
axios.get(`/api/users/${userId}`).then(res => {
this.setState({
user: res.data,
lists: res.data.lists
})
})
}
handleCreateNewList = () => {
const userId = this.props.match.params.userId
const payload = {
title: 'List Title',
description: 'List Description'
}
axios.post(`/api/users/${userId}/lists`, payload).then(res => {
const newList = res.data
const newStateLists = [...this.state.lists, newList]
this.setState({ lists: newStateLists })
})
}
render() {
return (
<div>
<h1>{this.state.user.username}'s List Page</h1>
onClick={this.handleCreateNewList}
New Idea
{this.state.lists.map(list => (
<List getAllLists={this.getAllLists} key={list._id} list={list}/>
))}
</div>
)
}
}
export default ListPage;
Sorry I can't comment yet. The error is because no 'list' prop is being passed to the component. Are you using the component like this:
<List list={{_id: 'someId', title: 'someTitle', description: 'someDesc'}} />
Also, why are you overwriting the state when the component mounts instead of setting the initial state?
I think you should first check if "this.state.lists" is empty or not, before passing the props.