I have a class like this:
export default class {
static myConnection = GHD.initConnection();
static getCards = () => this.myConnection.getCards();
}
And I call it as:
import connector from '../path.js';
connector.getCards();
I would like to convert this class with static items to module basically I don't want to use class.
Is this possible?
I tried something like:
module.exports {
myConnection: GHD.initConnection();
getCards: () => this.myConnection.getCards();
}
but this doesn't work.
Update with real code values requested in comments:
export default class {
static firebaseReference = RNFirebase.initializeApp();
static getDatabase = () => this.firebaseReference.database();
static getUser = () => this.firebaseReference.auth().currentUser;
}
You're probably looking for
export const myConnection = GHD.initConnection();
export const getCards = () => myConnection.getCards();
then
import * as connector from '../path.js';
connector.getCards();
or
import { getCards } from '../path.js';
getCards();
If you must keep compatibility with the default import syntax, you can use
export const myConnection = GHD.initConnection();
export const getCards = () => myConnection.getCards();
/** #deprecated */
export default { myConnection, getCards };
Related
import axios from 'axios'
const baseUrl = 'http://localhost:3001/persons';
const getAll = () => {
return axios.get(baseUrl);
}
const create = (newObject) => {
return axios.post(baseUrl,newObject);
}
export default {
getAll:getAll,
create:create
}
Using axios to fetch data from server(in reactjs from json server), everything works fine but console shows this warning:
Line 13:1: Assign object to a variable before exporting as module default.
How to remove this warning??
You need to assign the object to a variable before exporting it as default.
const exportedObject = {
getAll,
create,
};
export default exportedObject;
You can also export the function individually to get rid of the warning:
import axios from 'axios';
const baseUrl = 'http://localhost:3001/persons';
export const getAll = () => { return axios.get(baseUrl); }
export const create = (newObject) => { return axios.post(baseUrl, newObject); }
You can remove this warning by just adding the comment "// eslint-disable-next-line" before export.
import axios from 'axios'
const baseUrl = 'http://localhost:3001/persons';
const getAll = () => {
return axios.get(baseUrl);
}
const create = (newObject) => {
return axios.post(baseUrl,newObject);
}
// eslint-disable-next-line
export default {
getAll:getAll,
create:create
}
I have a types.ts in which the types of a Redux action are defined, a Screen.tsx in which a component which uses the action and a Actions.ts in which the action is defined. I want to be able to define the type of an action once and use it in both the Actions and Screen files for consistency and reducing redundancy. How do I do it?
types.ts:
export type ConfigActionType = {
fetchUiConfig: (channelUiConfigUrl: string, callback: () => void) => void
};
Screen.tsx:
import {ConfigActionType} from '../types';
interface SplashProps extends ConfigActionType { channelUIConfigURL: string }
const SplashScreen: React.FC<SplashProps> = ({channelUIConfigURL, fetchUiConfig}) = {};
Actions.ts:
export const fetchUiConfig = (channelUiConfigUrl, callback) => dispatch => {}
Like in this example, fetchUiConfig type would be once in the types file and used in both Actions and Screens. How do I do this?
You could declare and export it separately from ConfigActionType:
export type FetchUiConfigType = (channelUiConfigUrl: string, callback: () => void) => void;
export type ConfigActionType = {
fetchUiConfig: FetchUiConfigType
};
Then in Screen.tsx:
import {ConfigActionType} from '../types';
interface SplashProps extends ConfigActionType { channelUIConfigURL: string }
const SplashScreen: React.FC<SplashProps> = ({channelUIConfigURL, fetchUiConfig}) = {};
and Actions.ts:
export const fetchUiConfig: FetchUiConfigType = (channelUiConfigUrl, callback) => dispatch => {};
Another option is to extract it from ConfigActionType where you need it via ConfigActionType["fetchUiConfig"]:
export const fetchUiConfig: ConfigActionType["fetchUiConfig"] = (channelUiConfigUrl, callback) => dispatch => {}
...but it's probably harder to read.
I am struggling to put best practises into action, converting an existing file for Cypress testing into a more appropriate format for exporting and importing.
Currently:
support-file.js
export const1 = () => cy.get('#someId1');
export const2 = () => cy.get('#someId2');
export const3 = () => cy.get('#someId3');
export function myFunct1() {
// Do something
}
export function myFunct2() {
// Do something
}
export function myFunct3() {
// Do something
}
file-where-used.js
import {
const1, const2, const3,
myFunct1, myFunct2, myFunct3
}
// usage of the consts/functs below
I have experimented with trying to get them into a format such that I do not have to import each separately, but I cannot figure it out... I thought, perhaps wrapping all as a class and exporting that, which does work but only when using a require rather than import... And I also found difficulty in exporting my const variables...
attempt
export const1 = () => cy.get('#someId1');
export const2 = () => cy.get('#someId2');
export const3 = () => cy.get('#someId3');
class myClass {
myFunct1() {
// Do something
}
myFunct2() {
// Do something
}
myFunct3() {
// Do something
}
}
module.exports = new myClass();
You can cut your issues up in several steps.
Custom Commands/functions
Firstly you are creating custom commands like this one:
export function() {
// Do something
}
By putting that function in the file cypress/support/commands.js you don't have to import it in the integration files, but you do have to rewrite is like this:
Cypress.Commands.add('myFunct1', function () {
// Do something
})
What you end up in the integration file is this:
cy.myFunct1()
Global variables
You are assigning global variables like this:
export const1 = () => cy.get('#someId1');
export const2 = () => cy.get('#someId2');
export const3 = () => cy.get('#someId3');
Start with rewriting them to be a constant:
const const1 = () => cy.get('#someId1');
const const2 = () => cy.get('#someId2');
const const3 = () => cy.get('#someId3');
You'll always need to import them one by one, but you can combine them as long as they are in one file. You could do so by importing them into the testfile like this:
import {const1, const2, const3} from '<FILE_DIRECTORY>'
Now they are available trough the whole testfile.
I am writing a client to talk to a server API in JavaScript. I have an OOP background but am trying to embrace modern EcmaScript.
So I started with this:
customerApi.js:
const baseUrl = "http://myapi";
export const getCustomers = () => { /* get customer code */ }
export const addCustomer = cust => {}
export const deleteCustomer = id => {}
All the functions use baseUrl.
Now I want to refactor so that the code that uses customerApi.js sets/passes in the baseUrl, and the only ways I have come up with are -
make it a class:
export default class customerApi {
constructor(baseUrl) {
this._baseUrl baseUrl;
}
}
Pass it into every method:
export const getCustomers = (baseUrl) => { /* get customer code */ }
export const addCustomer = (baseUrl,cust) => {}
export const deleteCustomer = (baseUrl,id) => {}
Wrap in a function:
const moduleFn = baseUrl => (
return {
getCustomers: () => { /* get customer code */ }
addCustomer: (cust) => {}
deleteCustomer: (id) => {}
}
)
export default moduleFn;
These are just examples.
What is the most common pattern to implement a "settable" variable on a module?
I would go with the function approach
export default function(baseUrl){
return Object.freeze({
getCustomers: () => { /* get customer code */ }
addCustomer: (cust) => {}
deleteCustomer: (id) => {}
})
}
This is because all the functions have closure on the baseUrl and no extra work is required.
Client code can simply
import yourmodule from 'yourmodule';
var derp = yourmodule('www.derp.com')
Page model-
import { Selector } from 'testcafe';
export default class Page {
constructor () {
this.nameInput = Selector('#developer-name');
}
}
Page model2-
import { Selector } from 'testcafe';
export default class Page2 {
constructor () {
this.nameInput2 = Selector('#tester-name');
}
}
common spec to instantiate the above-
import Page from './page-model';
import Page2 from './page-model2';
const page = new Page();
const page2 = new Page2();
can we have a single file\spec to instantiate above two Pages and then access all Selectors across Pages from a single reference variable?
If you don't want to create new instances of page models in each test, you can export them directly in model.js:
test.js
import { pageOne, pageTwo } from './model';
fixture `fixture 1`
.page `http://example.com`;
test(`test`, async t => {
await t
.click(pageOne.el1)
//...navigation to page two
.click(pageTwo.el2);
});
model.js
import { Selector } from 'testcafe';
class PageOne {
constructor () {
this.el1 = Selector('#el1');
//....
}
}
class PageTwo {
constructor () {
this.el2 = Selector('#el2');
//....
}
}
export const pageOne = new PageOne();
export const pageTwo = new PageTwo();
UPDATE
Also you can organize all selectors in a separate module as follows:
test.js
import selectors from './selectors';
fixture `fixture 1`
.page `http://example.com`;
test(`test`, async t => {
await t
.click(selectors.el1)
.click(selectors.el2);
});
selectors.js
import { Selector } from 'testcafe';
export default {
el1: Selector('#el1'),
el2: Selector('#el2'),
//....
}