I am using webpack, babel, typescript, newest React version. Could not see placeholder and could not set value when I am using Input component. This is very simple code.
When I look at Chrome debugger, I don't see placeholder there. Something with my environment but I could not figure out what could be the issue.
I actually created couple new environment and it worked there. I also cut everything out from my current enviroment - all libraries that are not used, all code and all styles. Just left one module with that simple code.
import * as React from "react";
import { Input } from 'semantic-ui-react';
const LotcheckApp = () => {
return (
<>
<Input placeholder='Search...' size='large' />
</>
);
};
export default LotcheckApp;
There is no error messages - just could not see placeholder and could not set value.
Related
The concept of testing Vue/Js is new to me,so bear with me. Normally if there are errors related to the Vue component I can see them in the browser console.
for example if I have a Vue component:
<template>
<div>
{{ number }}
</div>
</template>
<script>
export default {}
</script>
I will see an error like this:
[Vue warn]: Property or method "number" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Now when I want to test a specific component using test tools, how can I check for these kind of errors, I want to make sure that the component is loaded without these errors.
Today I tried using Jset to test this, and I ended up with this:
import { mount } from '#vue/test-utils'
import Component from '../Components/Example.vue'
test('it renders without errors', () => {
const wrapper = mount(Component)
expect(wrapper.isVueInstance()).toBe(true);
})
but, that doesn't do it since it will always return true even though 'number' is not defined. How can I check if the component has loaded without console errors.
This is not an error but warning, this is the reason why the component renders.
A proper testing strategy is to test the behaviour because that the framework doesn't cause warnings doesn't mean that a unit works correctly. A suite with full code coverage won't cause such warnings without a fail.
console.error calls can be additionally spied to strengthen the test but in this case this is entirely redundant:
spyOn(console, 'error');
const wrapper = mount(Component);
expect(wrapper.find('div').text()).toContain('123456'); // easier to do with a snapshot
expect(console.error).not.toHaveBeenCalled();
Notice that console and some other built-in methods should be spied and mocked with care because they interfere with testing framework's error reporting.
In my app, I'm storing state in a global object (similar to, but not Redux). When users navigate around the site, I want this state to persist. Gatsby intelligently tries to prefetch page content for links it finds on the page, but sometimes when navigating to a particular route, the page is fetched from the server, the window reloads, and I lose my state.
A little more context: I'm already using the Gatsby Link component for every link in the app, and if needing to change routes programmatically, I'm using the Gatsby navigate function. I've tried storing state in location.state, but this is also wiped if the page is not prefetched.
Is there any way to force Gatsby to prefetch routes so I don't lose my app state?
UPDATE:
Adding code snippet from my gatsby-ssr.js in case that might be related:
// gatsby-ssr.js
import React from "react";
import wrapWithState from "#state/wrapWithState"; <-- this is a React context provider
import { SearchConfig } from "#modules/search/index";
import { DefaultLayout, HeaderWrap, Lang } from "#layout";
export const wrapRootElement = wrapWithState;
export const wrapPageElement = ({ element, props }) => {
const { location } = props;
return (
<>
<Lang currentPath={location.href} />
<SearchConfig />
<HeaderWrap currentPath={location.href} />
<DefaultLayout {...props}>{element}</DefaultLayout>
</>
);
};
It's simple really. If a link is not generated using Link component it will behave just like a regular anchor and the browser will perform a page load (resetting your state). First identify which links act like regular links and see why Link component is not used there.
I'm testing my Vue components for the first time using Mocha and Webpack and set everything up according to the docs.
However, in many of my components, I use a global event bus to communicate and emit events between components. For example, the following snippet is in the created hook of one of my single file components.
created() {
Event.$on("activate-edit-modal", (listing) => {
this.isModalActive = true; // show delete modal
this.listing = listing; // set listing as the emitted listing
});
},
Unfortunately, when I run the following test code in my test file (npm run test), I get the following error.
import { mount } from '#vue/test-utils';
import editModal from '../../../src/components/admin/editModal.vue';
const wrapper = mount(editModal);
console.log(wrapper);
Error Msg: I'm aware the error msg is referring to the created hook (in the code snippet above) and highlighting that "Event.$on" in that created hook is not a function.
WEBPACK Compiled successfully in 2331ms
MOCHA Testing...
[Vue warn]: Error in config.errorHandler: "TypeError: Event.$on is not
a function" TypeError: Event.$on is not a function
at VueComponent.created ...
How should I test my components that use a global event bus? Note that I am not interested in testing the event bus itself; however, I'm unaware on how I can proceed to test other aspects of the component with this error.
The global event bus "Event" that I use in all my components is declared in /src/main.js as shown below
import Vue from 'vue';
import App from './App.vue';
import router from "./router";
import store from "./store";
window.Event = new Vue();
let app = new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
You're trying to reference a local event bus called Event. You should call the bus you registered on the window object, like this: window.Event.$on("activate-edit-modal"....
After you've ensured that your component is calling the bus registered on the window object as shown above, make sure you also add the following before you mount your component in the test file like so:
import Vue from 'vue';
window.Event = new Vue();
const wrapper = mount(adminResults);
Your global event bus "Event": where is it defined? I can't see it being imported anywhere into the component with the error. I suspect this is your problem.
Beware global event bus is a top five antipattern, according to one of the presentations at the recent vue conf. I much prefer a plain global javascript object as a global state store.
You can mock your event bus and assert that methods are called on it with correct parameters.
For instance, in the above scenario try window.Event = { $on: sinon.spy() }.
After mounting you should be able to assert that $on was called with correct parameters.
Here's documentation on Mocha and spies. https://github.com/mochajs/mocha/wiki/Spies
I'm not as familiar with mocha so I'm not exactly sure I've got the details correct.
I'm having the hardest time getting typescript and ember to work together. I got all the definition files in definitely typed and I went through the ToDo walk throughs on Ember guide on the site. I'm trying to convert the js to typescript and see what the best way to go about setting up the project was, but I guess I'm not understanding the typescript definition very well.
If I do:
/// <reference path="typings/ember.d.ts" />
var App = Ember.Application.create();
App is a type of '{}' and I can't access 'Routers' to do the next line of the guide
App.Router.map( ... )
The best thing I found online was this which doesn't work with the current typing.
I've seen the typescript ember-app-kit but it doesn't really help since it barely includes any typescript and their setup is barely like the ember guides. I just need to be pointed in the right direction. Thanks guys.
I'm not familiar with Ember, but from inspecting ember.d.ts, I can see that create() is defined as a static generic function on object:
static create<T extends {}>(arguments?: {}): T;
So then you should be able to get better type information by passing an actual type:
var App = Ember.Application.create<Ember.Application>();
However, I see also that the ember typedef doesn't include a "Router" member in the application class, and even if it did, the Router class does not define map(). I was able to get it to work by creating an extended type definition:
// ./EmberExt.d.ts
/// <reference path="typedef/ember/ember.d.ts" />
declare class RouterExt extends Ember.Router {
map: ItemIndexEnumerableCallbackTarget;
}
declare class ApplicationExt extends Ember.Application {
Router: RouterExt;
}
And then referencing that from my combined router/application file:
/// <reference path="typedef/ember/ember.d.ts" />
/// <reference path="./EmberExt.d.ts" />
var App = Ember.Application.create<ApplicationExt>();
App.Router.map(function () {
this.resource('todos', { path: '/' });
});
After doing this, it compiles and loads without error, though it doesn't actually do anything (which I believe is ok for this phase of the walkthrough)
Full and mostly-accurate type definitions for Ember.js are now available to install from npm at #types/ember, #types/ember-data, and so on, currently all via the Definitely Typed project.
Ember CLI integration is available through the ember-cli-typescript addon. The easieset way to configure a Ember.js project with TypeScript is to run ember install ember-cli-typescript in the root of your Ember.js project. Doing so will automatically generate a tsconfig.json which handles Ember’s conventional project layout correctly (for apps, addons, and in-repo addons). It will also install the type definitions for all the core Ember projects automatically.
Here's the fiddle. Here's the gist with the contents of my local file.
As you can see, the HTML and JavaScript are identical, and I'm loading identical versions of the jQuery, Handlebars.js, and Ember.js libraries. It works as expected locally, but does not render the application template on jsFiddle.net.
I see the following error in the Web Console:
[19:44:18.202] Error: assertion failed: You must pass at least an object and event name to Ember.addListener # https://github.com/downloads/emberjs/ember.js/ember-latest.js:51
BTW-To test the gist as a local HTML file, make sure to run it behind a web server or your browser won't download the JavaScript libs. If you have thin installed (ruby webserver), go to the directory it's in and run thin -A file start, then navigate to localhost:3000/jsfiddle-problem.html in your browser.
If you set the "Code Wrap" configuration on your fiddle to one of the options other than "onLoad" your application will work. Here is an example.
The reason for this is Ember initializes an application when the jQuery ready event fires (assuming you have not set Ember.Application.autoinit to false). With the jsFiddle "Code Wrap" configuration set to "onLoad" your application is introduced to the document after the jQuery ready event has fired, and consequently after Ember auto-initializes.
See the snippet below from ember-latest, taken on the day of this writing, which documents Ember auto-initialization being performed in a handler function passed to $().ready.
if (this.autoinit) {
var self = this;
this.$().ready(function() {
if (self.isDestroyed || self.isInitialized) return;
self.initialize();
});
}
This was strange - I couldn't get your fiddle working, specifically your {{controller.foo}} call until I disabled autoinit. I am guessing when using jsfiddle the application initialize kicks off before seeing your router. I also noticed with your fiddle the router was not logging any output even when you had enableLogging set to true.
I updated your fiddle to not use autoinit, http://jsfiddle.net/zS5uu/4/. I know a new version of ember-latest was released today, I wonder if anything about initialization changed.