I'm trying to add chai-colors plugin to Cypress, from How to install the plugin "Chai Sorted" #2441
Chris Breiding gives
import chaiSorted from "chai-sorted"
chai.use(chaiSorted)
so for chai-colors
import chaiColors from 'chai-colors'
chai.use(chaiColors)
cy.visit(...)
cy.get(selector)
.should('be.colored', '#000000')
but this gives the error "Timed out retrying after 4000ms: actual.equals is not a function"
To use chai-colors inside a .should() you need to pass in the color code itself (not the element)
import chaiColors from 'chai-colors'
chai.use(chaiColors)
cy.visit(...)
cy.get(selector)
.then($el => $el.css('color')) // get color value
.should('be.colored', '#000000')
But note, this fails
import chaiColors from 'chai-colors'
chai.use(chaiColors)
cy.visit(...)
cy.get(selector)
.then($el => $el.css('backgroundcolor')) // get color value
.should('be.colored', '#000000')
expected #000000 to be the same color as #000000
because $el.css('backgroundcolor') returns rgba() instead of rgb().
You would be better off importing onecolor which chai-colors uses internally.
Then use the converter any way you want (plus documentation is way better).
import color from 'onecolor'
cy.visit(...)
cy.get(selector)
.then($el => $el.css('backgroundcolor')) // get color value
.should(colorValue => {
expect(color(colorValue).hex()).to.eq('#000000')
})
Related
I am having an error which is showing
TypeError: undefined is not an object (evaluating 'Navigation.navigate')
i were tried to fix this error but didnt work, I also search the error on network but i am getting other content steps
There My Codes:
export const App = ({ Navigation }) => {
/*My Codes*/
<TouchableOpacity onPress={() => Navigation.navigate("DetailsPage2")>
/*My Object*/
</TouchableOpacity>
I wanted To Switch Pages By clicking on the object using onPress and use arrow function but it shows the error, I tried These Steps to resolve it but it also didnt work These are The steps below which i used to fix the error
onPress={() => Navigation.getParam("DetailsPage2") and
onPress={() => Navigation.push("DetailsPage2")
I imported all the imports which i need Like
import React, { useState, useRef, useEffect, createRef, useCallback, } from "react"; import { View, Text, Image, ScrollView, TextInput, StyleSheet, Switch, Animated, Dimensions, Vibration, Alert, KeyboardAvoidingView, Platform, TouchableWithoutFeedback, TouchableOpacity, SafeAreaView, } from "react-native"; import { Svg, Path, Defs, RadialGradient, LinearGradient, Stop, Ellipse, Rect, } from "react-native-svg";
Sorry I Cannot Show My Main Code, If I Show It.
It Could Be Stolen
This error is occurring because the 'Navigation' object is not defined in the App component. It is not being imported correctly.
Make sure that the navigation object is being passed in as a prop to the App component and that it is being imported correctly.
Replace Navigation with navigation:
export const App = ({ navigation }) => {
/*My Codes*/
<TouchableOpacity
onPress={() => navigation.navigate("DetailsPage2")>
/*My Object*/
</TouchableOpacity>
}
Here is the official doc related to this issue reference link.
& React Navigation official website for explore more Link.
I am trying to use react-spring values to animate uniforms in my custom shader built using the react-three/drei shaderMaterial.
This is my basic setup:
const { speed } = useSpring({
speed: animate ? 1 : 0,
});
return (
<mesh>
<planeBufferGeometry args={[1,1]}/>
<animated.customMaterial uSpeed={speed} />
</mesh>
)
When I prepend animated, I get the following message:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Without adding animated I get no result in the shader at all.
Any help would be greatly appreciated.
I would like to compare the two following base64 strings to ensure that a photo is uploaded as expected. How would I do that? This my code below, I currently get the error message:
You attempted to make a chai-jQuery assertion on an object that is neither a DOM object or a jQuery object.
The chai-jQuery assertion you used was:
> text
This is my code:
it('should allow the user to select a navbar component and replace a logo', () => {
cy.getIframeBody('builder-showcase').find('[data-cy="navbar-component"]').eq(0).click();
cy.getIframeBody('builder-showcase').find('[data-cy="navbar-logo-image"]').eq(0).click();
cy.get('[data-cy="builder-sidebar-menu-select-image-navbar"]').eq(0).click();
const navbarLogoImage = 'navbar-logo-image.png';
cy.fixture(navbarLogoImage).then(originalLogoImage => {
cy.get('[data-cy="image-file-input"]').attachFile(navbarLogoImage);
cy.get('[data-cy="image-alt-text"]')
.clear()
.type('Twitter logo image');
cy.get('.source-image').invoke('attr', 'src')
.then(uploadedLogoImage => {
expect(uploadedLogoImage).to.have.text(originalLogoImage);
})
});
});
The chai chainer to.have.text verifies that an element (DOM or JQuery) contains the expected text. Your uploadedLogoImage is a string. You should then use a chainer that will work with a string like:
expect(uploadedLogoImage).to.eq(originalLogoImage);
or
expect(uploadedLogoImage).to.contain(originalLogoImage);
or with should(), you can query the element directly:
cy.get('.source-image').should('have.attr', 'src', originalLogoImage);
Hint: instead of using eq(0), you may also use first() which gives a better readability.
In my webpack config:
resolve: {
alias: {
'three': path.resolve('node_modules', 'three/build/three.js'),
'OrbitControls': path.resolve('node_modules', 'three/examples/js/controls/OrbitControls.js'),
'OBJLoader': path.resolve('node_modules', 'three/examples/js/loaders/OBJLoader.js')
}
In my module:
import * as THREE from 'three' // if I do import THREE from 'three' it fails with three being undefined
import OrbitControls from 'OrbitControls'
import OBJLoader from 'OBJLoader'
If I use import * THREE from 'three' all is well and I can get THREE to be defined and complete the cube tutorial without hassle. If I change to import * as THREE from 'three' three.js is loaded - so that's not the problem?
How do I get the OrbitControls and the OBJLoader to load? When I try to get them to load, I get Uncaught ReferenceError: THREE is not defined(…) within OrbitControls.js: THREE.OrbitControls = function ( object, domElement ) { THREE is undefined.
So there's a problem with the packaging of the modules? I installed this from https://www.npmjs.com/package/three
So what gives? Is it a problem how Three.js is packaged on npm or is it a misconfiguration in my webpack.config? Is there a way to tell webpack "let's package the root three.js file, and then package the OrbitControls.js file"?
I needed to install the three-orbit-controls and the three-obj-loader via npm.
Then in my module, it was simply requiring them:
var OBJLoader = require('three-obj-loader')(THREE)
var OrbitControls = require('three-orbit-controls')(THREE)
All set!
I am writing a test for a React component that uses react-router. I am using Mocha with Chai and Chai-jQuery.
My tests work fine, until I import a component from react-router into a component (e.g. Link). At this point, I get the following error:
ReferenceError: navigator is not defined
at Object.supportsHistory (/Users/nico/google-drive/code/agathos/client/node_modules/history/lib/DOMUtils.js:61:12)
I used to get a similar error with react-bootstrap until I updated to react-bootstrap v0.29.3. I have the most recent version of react-router v2.4.0 (and history v2.1.1). But the problem persists.
The only solution I have found is to change node_modules/history/lib/DOMUtils: navigator into window.navigator. This is a hack though, and not a good solution.
I think the problem is with react-router, but I don't have a solution.
Just in case, here is my test-helper.js.
import jquery from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import jsdom from 'jsdom';
import chai, { expect } from 'chai';
import chaiJquery from 'chai-jquery';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
// set up a testing environment to run like a browser in the command line
// create a fake browser and html doc
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = global.document.defaultView;
// prevent jquery defaulting to the dom by giving it access to the global.window
const $ = jquery(window);
// build renderComponent function that should render a React class
function renderComponent(ComponentClass, props = {}, appState = {}) {
const componentInstance = TestUtils.renderIntoDocument(
<Provider store={createStore(reducers, appState)}>
<ComponentClass {...props} />
</Provider>
);
// produces html
return $(ReactDOM.findDOMNode(componentInstance));
}
//build a helper for simulating events
// $.fn allows you to add a custom function to your jquery library
$.fn.simulate = function(eventName, value) {
if (value) {
// `this` allows you to access the object appended to
// `val()` is a jquery function that sets the value of selected html element
this.val(value);
}
// the [] are object method selectors, which allow you to access e.g. Simulate.change
TestUtils.Simulate[eventName](this[0]);
};
// set up chai jquery
chaiJquery(chai, chai.util, $);
export {renderComponent, expect};
It seems that react-router assumes navigator is in the global scope.
To resolve this error, you should add navigator to the global scope in your test setup phase:
global.navigator = {
userAgent: 'node.js'
};