-
๐ I write things at https://davecooper.dev
-
๐ซ You can reach me at [email protected]
grug / data-mocks Goto Github PK
View Code? Open in Web Editor NEWLibrary to mock local data requests using Fetch or XHR
License: MIT License
Library to mock local data requests using Fetch or XHR
License: MIT License
๐ I write things at https://davecooper.dev
๐ซ You can reach me at [email protected]
Is your feature request related to a problem? Please describe.
Would like to disable fetch-mock warnings in console
Describe the solution you'd like
const mockConfig = {
allowXHRPassthrough: true,
allowFetchPassthrough: true,
warnOnFallback: false,
}
injectMocks(scenarios, 'default', mockConfig);
Describe alternatives you've considered
Probably this API can be set directly on FetchMock, which is not that convenient
import * as FetchMock from 'fetch-mock';
FetchMock.config.warnOnFallback = false;
Currently, we only support mocking if users are using Fetch API. However, to really bring value to the users, we want to also provide the same mocking capabilities to those who use XmlHttpRequest
Hi,
First of all i love the idea of the library. Great Job guys!!!. I wanted to include the the library in
my project, but i don't want to mock every request so i set MockConfig allowXHRPassthrough and allowFetchPassthrough to true. And the problem is every request
is passing even when there is matching route and when there is response then data-mocks
replace the response. Is that intended behaviour and can the requests be intercept when they match before sending(cause for example i want to mock and endpoint before is created)?
To Reproduce
Just create angular project the cli and add data-mock.
Set the allowXHRPassthrough and allowFetchPassthrough to true
Create some scenario(example:
{
url: /users/,
method: 'GET',
response: { some: 'good response' },
responseCode: 200
})
Make a http call to that scenario(example: ''http://localhost:3000/api/users')
During npm install
there's a deprecation warning thrown by babel-preset-es2015
. The suggestion in the warning is to use babel-preset-env
with more info here.
npm WARN deprecated [email protected]: ๐ Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
There is a new major version of fetch-mock which we should upgrade to.
Describe the bug
Not sure if this goes here, but I figured I'd give it a shot and see what you think of the issue (since your documentation does mention Angular compatibility).
In the last version of Angular, the (default) compile-target is es2018.
Angular uses zone.js to hook into all asyncronous events (setTimeout
, XMLHttpRequest
, Promise
) etc, but zone cannot do this with async
or await
because they are language constructs. With compile target es2018, async
and await
no longer get transpiled to Promise
, and as a result a warning occurs during build, and change-detection in Angular may fail to be triggered when data changes.
One of the data-mocks dependencies (fetch-mock
) uses native async
and await
, which no longer gets transpiled with es2018, and can therefor cause change-detection issues (as well as trigger a warning during build).
To Reproduce
Steps to reproduce the behavior:
Expected behavior
No warning in terminal
Desktop (please complete the following information):
Additional context
tsconfig:
{
"compileOnSave": false,
"compilerOptions": {
"module": "es2020",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"target": "es2018",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}
I realize this is not strictly speaking an issue in data-mocks, but would love a solution to this problem. Would it be possible for data-mocks to import from fetch-mocks/dist/es5/client-bundle
instead? I think that would resolve the issue.
The project is way behind with the fetch-mock version, which limits how we can test data-mocks and also means we are missing out on some general quality of life improvements
Current mocks.js
file that is published is not minified
Currently, we have no concept of scenarios. It is not easy to add multiple version of the same response.
Ideally, we would have similar functionality as the scenarios in https://github.com/wongatech/angular-multimocks however, it might not be the best to do it through the URL.
Describe the bug
This library doesn't work with IE11 at all. This is due to the right polyfills not existing.
To Reproduce
Expected behavior
That this library works as intended with IE11
Additional context
There will need to be a fair few polyfills added for this :(
Is your feature request related to a problem? Please describe.
I want to have a fallback for all URL's to they return a statuscode 404 unless they are specifiek in the scenario.
Describe the solution you'd like
An example on how to do this.
Describe alternatives you've considered
I've tried a wildcard regex:
const scenarios: Scenarios = {
default: [
{
url: /(.*?)/,
method: 'GET',
response: {},
responseCode: 404
}
]
}
injectMocks(scenarios);
A circle pipeline to run tests/lint against PR's/master would be great
There have been some issues with data-mocks and Android, which has led to the question of whether the library works properly in IE11. It hasn't been tested yet on IE11 so let's do that :)
When I start my app using data-mocks for mocking e.g. my login service and I try to upload a file to my backend which is not mocked / passed-through, I got a 400 error telling me the request param is not been delivered to the backend. The request param is not available to Spring at all.
It seems like multipart file-streams are not being passed-through by data-mocks.
Downloading has same issue (which shouldnt come as. a surprise ;))
Using the same code without using data-mocks it works like a charm.
At the moment, all dependencies are in the dependencies
object in package.json
but they don't need to be. It would be good if someone could move the dev dependencies into devDependencies
.
It'd be nice to have a section in the readme that describes how you could add this to your project if you were using either a React or Angular project.
As title suggests, using the latest xhr-mock is ideal
This article describes using angular-in-memory-web-api. Potentially extending it with faker.js
If my app is an angular app, what use case makes sense to use data-mocks instead of angular-in-memory-web-api?
thanks
Christian
When used with Create React App it fails to bundle/ startup the dev server because of the following error.
Module not found: Can't resolve 'core-js/modules/es6.array.copy-within' in '/xxxxxx/my_project/node_modules/fetch-mock/es5'
Okay looks like this is an issue in [email protected]
There is an issue describing a similar but not identical error here wheresrhys/fetch-mock#419
I frequently run into the need to use multiple scenarios at once and it would be amazing if it was possible to chain multiple scenarios in the url instead of having to tweak the mock-server file.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.