Develop Reference

Error is being thrown claiming that a method created in an axios class is not a function

In my react application, I'm defining an Axios class with a bunch of methods, but the methods are not being recognized as functions and throwing an error. Showing is easier than explaining so... I have 3 files involved...
http-common.js has this:
import axios from 'axios';
export default axios.create({
baseURL: "http://localhost:5000/api/v1/tours",
headers: {
"Content-type": "application/json"
}
});
tours.js has this:
import http from "../http-common";
class ToursDataService {
getAll(page = 0) {
return http.get(`?page=${page}`);
}
}
export default ToursDataService
tours-list.js has this... which calls the function "getAll" in retrieveTours.
import React, { useState, useEffect } from "react";
import ToursDataService from "../services/tours";
const ToursList = props => {
const [tours, setTours] = useState([]);
useEffect(() => {
retrieveTours();
}, []);
const retrieveTours = () => {
ToursDataService.getAll()
.then(response => {
setTours(response.data.tours)
})
.catch( e => {
console.log(e);
});
}
The console claims that getAll is not a function. Why? Can anyone explain?
scheduler.development.js:173 Uncaught TypeError: _services_tours__WEBPACK_IMPORTED_MODULE_1__.default.getAll is not a function
at retrieveTours (tour-list.js:12:1)

getAll() is not a static method so you'd need to create an instance of ToursDataService...
const svc = new ToursDataService(); // create an instance
// ...
svc.getAll() // call the method on the instance
.then(...)
or make the method static
class ToursDataService {
static getAll(page = 0) {
return http.get("", { params: { page } });
}
}
Alternately, don't use classes at all since you don't appear to be encapsulating anything. You might as well just export the getAll function on its own
// tours.js
export const getAll = (page = 0) => http.get("", { params: { page } });
and
import { getAll } from "../services/tours";

Use exported value in setup of Vue Composition API

In a plain js file the code looks like
export default async function exportData() {
const { data } = await store
.dispatch('fetchData')
const { bookings } = data
const booking = bookings.length ? bookings[0]._id : ''
const event = {
bookingID: booking
}
// other methods and variables
return {
.....
}
}
inside the vue file
import exportData from './exportData'
export default {
setup() {
const {
fetchEvents,
isEventActive,
} = exportData()
fetchEvents()
}
}
the problem is in vue components the values from exportData gets undefined, gets error fetchEvents is not a function when the export is asynchronous. works well if not asynchronous. what is the workaround here??

You can try to declare fetchEvents,isEventActive methods in plan js file without wrapping it inside any function
const fetchEvents = () => {
//body
};
const isEventActive = () => {
//body
};
and export them as
export {fetchEvents, isEventActive};
now use them
import {fetchEvents,isEventActive} from 'path-to-js-file'
export default {
setup() {
fetchEvents()
isEventActive()
}
}

Failed to feed selector to a ClientFunction

Please take a look at the structure below.
Is there any way to get 'Example 1' working? The idea is to avoid storing a 'css selector string' in a 'test' class.
MyAccount.js
import { Selector} from "testcafe";
export class MyAccount {
constructor() {
this.box = {
item_1: Selector("#item01");
item_2: Selector("#item02");
}
}
}
clientFunctions.js
import { ClientFunction } from 'testcafe';
export const scrollInto = ClientFunction((selector) => {
var element = window.document.querySelector(selector);
element.scrollIntoView();
});
EXAMPLE 1. (FAILED)
import { MyAccount } from "../MyAccount";
import { scrollInto } from "../clientFunctions";
const myAccount = new MyAccount();
fixture("Feature A").page(process.env.url);
test("Test 01", async t => {
await scrollInto(myAccount.box.item_1);
});
EXAMPLE 2. (PASSED)
import { MyAccount } from "../MyAccount";
import { scrollInto } from "../clientFunctions";
const myAccount = new MyAccount();
fixture("Feature A").page(process.env.url);
test("Test 01", async t => {
await scrollInto("#item01");
});

The problem is that the browser's querySelector method doesn't work with the TestCafe Selector API. Please change the MyAccount class in the following way to make your example work:
export class MyAccount {
constructor() {
this.box = {
item_1: "#item01",
item_2: "#item02"
}
}
}

You can pass a Selector into a ClientFunction through the dependencies option and override it later by calling with method.

Declare an arrow function as return in TypeScript

I want to write a TypeScript Declaration for ReactMeteorData.jsx which exports:
export default function connect(options) {
let expandedOptions = options;
if (typeof options === 'function') {
expandedOptions = {
getMeteorData: options,
};
}
const { getMeteorData, pure = true } = expandedOptions;
const BaseComponent = pure ? ReactPureComponent : ReactComponent;
return (WrappedComponent) => (
class ReactMeteorDataComponent extends BaseComponent {
...
}
);
}
Which is repacked as withTracker by react-meteor-data.jsx:
export { default as withTracker } from './ReactMeteorData.jsx';
I can simply declare the return value as Function:
declare module 'meteor/react-meteor-data' {
import * as React from 'react';
export function withTracker(func: () => {}): Function;
...
}
How can I declare what arguments and returns the Function creates without the need to change something in the origin package? So I would like to do something like:
export function withTracker(func: () => {}): (React.Component) => { React.Component };
Usage of the code is like this:
import * as React from 'react';
import { withTracker } from 'meteor/react-meteor-data';
class Header extends React.Component<any,any> {
render() {
return "test";
}
}
export default withTracker(() => {
return { user: 1 };
})(Header);
Thank you!

The type you describe could be written like this:
(c: React.Component) => React.Component
In the section declare module:
export function withTracker(func: () => {}): (c: React.Component) => React.Component;

proxyquire TypeError when not replacing every function in a module

I'm trying to use proxyquire to unit test my Redux reducers. I need to replace the functionality of one function in my test but keep the original functionality of the other, which is possible according to proxyquire's docs.
formsReducer.test.js:
import { expect } from 'chai';
import * as types from '../constants/actionTypes';
import testData from '../data/TestData';
import proxyquire from 'proxyquire';
describe('Forms Reducer', () => {
describe('types.UPDATE_PRODUCT', () => {
it('should get new form blueprints when the product changes', () => {
//arrange
const initialState = {
blueprints: [ testData.ipsBlueprint ],
instances: [ testData.basicFormInstance ]
};
//use proxyquire to stub call to formsHelper.getFormsByProductId
const formsReducerProxy = proxyquire.noCallThru().load('./formsReducer', {
'../utils/FormsHelper': {
getFormsByProductId: () => { return initialState.blueprints; }
}
}).default;
const action = {
type: types.UPDATE_PRODUCT,
stateOfResidence: testData.alabamaObject,
product: testData.basicProduct
};
//act
const newState = formsReducerProxy(initialState, action);
//assert
expect(newState.blueprints).to.be.an('array');
expect(newState.blueprints).to.equal(initialState.blueprints);
});
});
});
formsReducer.js:
import * as types from '../constants/actionTypes';
import objectAssign from 'object-assign';
import initialState from './initialState';
import formsHelper from '../utils/FormsHelper';
export default function formsReducer(state = initialState.forms, action) {
switch (action.type) {
case types.UPDATE_PRODUCT: {
let formBlueprints = formsHelper.getFormsByProductId(action.product.id);
formBlueprints = formsHelper.addOrRemoveMnDisclosure(formBlueprints, action.stateOfResidence.id);
return objectAssign({}, state, {blueprints: formBlueprints, instances: []});
}
}
I need to replace the functionality of formsHelper.getFormsByProductId() but keep the original functionality of formsHelper.addOrRemoveMnDisclosure() - as you can see in the proxyquire block I'm only replacing the getFormsByProductId() function. However, when I do this get the following error: TypeError: _FormsHelper2.default.addOrRemoveMnDisclosure is not a function. Looks to be a problem either with babel or with my export default for FormHelper.
The export for the FormsHelper looks like this:
export default class FormsHelper { ...methods and whatnot }.
How can I fix this problem?