I am trying to integrate the cypress-axe package in my project . After installing cypress-axe and axe-core libraries . I have imported cypress-axe in cypress\support\index.js as below :
// Import commands.js using ES2015 syntax:
import '#cypress/code-coverage/support'
import './commands'
import 'cypress-axe'
Cypress.on('uncaught:exception', () => {
// returning false here prevents Cypress from
// failing the test
return false
})
Cypress.on('window:before:unload', e => {
const coverage = e.currentTarget.__coverage__;
if (coverage) {
map.merge(coverage);
}
});
In the spec file , injcted axe as below:
before(() => {
cy.visit(url);
cy.injectAxe();
});
describe('Initial state of component', () => {
it('Has no detectable a11y violations on load', () => {
// Test the page at initial load
cy.checkA11y()
})
})
But when I run cypress tests , I get error cy.injectAxe() is not a function.
Thanks
Related
I am running Vue3 with vite and can't write any tests for components that use the ElementPlus library. Something else needs to be injected apparently but I don't know how to do that.
I have the following dateControl.test.js:
import { describe, expect, test } from 'vitest';
import { ref } from 'vue';
import DateCtrl from '#/components/DateCtrl.vue';
import { mount } from "#vue/test-utils";
import ElementPlus from "element-plus";
describe("DateCtrl.vue", () => {
const messages = {
"en-US" : {
strings: {
placeholder: 'a',
label: 'b'
}
}
};
const locale = "en-US";
const data = ref ({
date: ''
});
test ("Arrange DateCtrl", async () => {
const component = mount(DateCtrl, {
props: {
vModel: data.value.date,
modelValue: data.value.date,
labelLoc: "label",
className: "w1x5",
placeholderLoc: "date"
},
global: {
plugins: [ElementPlus],
mocks: {
$t: (msg) => {
const params = msg.split('.');
return messages[locale][params[0]][params[1]];
}
}
}
});
//fails on previous lines.
expect(typeof component !== "undefined", "component created").toBeTruthy();
let h3Text = component.findAll('h3')[0].element.innerHTML;
expect(component.findAll('.form').length === 1, "form element rendered").toBeTruthy();
expect(h3Text === "d", "locale strings correct").toBeTruthy();
});
});
It doesn't even get to the "expect" tests, fails with message:
Error: Cannot find module 'C:\source\mySite\node_modules\dayjs\plugin\customParseFormat'
imported from
C:\source\mySite\node_modules\element-plus\es\components\date-picker\src\date-picker.mjs
Did you mean to import dayjs/plugin/customParseFormat.js?
This bit seems to indicate that node expects you to use .js extension and element is not doing that.
Error: Cannot find module 'C:\source\mySite\node_modules\dayjs\plugin\customParseFormat'
imported from
C:\source\mySite\node_modules\element-plus\es\components\date-picker\src\date-picker.mjs
Did you mean to import dayjs/plugin/customParseFormat.js?
I'm guessing this is because you may be running an older node version. Element requires at least node v16.
I have this problem too.
It seems that this problem is already solved in this pull request - https://github.com/element-plus/element-plus/pull/6811
Is it possible to modify vue-i18n so translation single JSON file with 2 different language inside and which come form Firebase will render text dynamically to vue template
I used mounted function with axios to get data form firebase. But I have no clue how i18n should treat this as a source file for a translation.
Basically I put my two translation source files from locales folder to the one United.json and I uploaded this to firebase, now I want to load this back to my app form there (firebase) but I see no solution there how to set locale so that it will render and translate all the {{ $t(example.locale) }} and I should be able to be bind it as this v-bind:src="$t('products.'+ index +'.options.'+ i +'.image')"
//main.js
import Vue from 'vue'
import i18n from './i18n'
import axios from 'axios'
Vue.config.productionTip = false
router.beforeEach((to, from, next) => {
let language = to.params.lang;
if (!language) {
language = 'ee'
}
i18n.locale = language
next()
});
new Vue({
router,
i18n,
render: h => h(App),
data() {
return{
localekk : ''
}
}
,
methods: {
setLocale(lang) {
Vue.$i18n.locale = lang;
}
},
mounted() {
axios.get('https://example.firebaseio.com/locales.json')
.then(response => {
this.locale = response.data;
console.log(response)
})
.catch(error => console.log(error))
}
}).$mount('#app')
//i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
function loadLocaleMessages () {
const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i) // may by to change './locales' but again - how?
const messages = {}
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)
if (matched && matched.length > 1) {
const locale = matched[1]
messages[locale] = locales(key)
}
})
return messages
}
export default new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || 'ee',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'ee',
messages: loadLocaleMessages(),
silentTranslationWarn: true,
})
I am using the JSDOM library for testing my application. Below is my code which I use to test my index.html file
import { expect } from 'chai';
import jsdom from 'jsdom';
import fs from 'fs';
describe('Our first test', () => {
it('should pass', () => {
expect(true).to.equal(true);
});
});
describe('index.html', () => {
it('should have h1 that says Users', (done) => {
const index = fs.readFileSync('./src/index.html', "utf-8");
jsdom.env(index, function (err, window) {
const h1 = window.document.getElementsByTagName('h1')[0];
expect(h1.innerHTML).to.equal("Hello World!..");
done();
window.close();
});
})
})
When I run npm test command I am getting the below error
Uncaught TypeError: window.document.getElementByTagName is not a function
could anyone please assist me
I have made an app using react and redux, I have some components plus their containers and also an action and a reducer.
I am writing a test for one of my containers using enzyme, chai and jest,
when I try to run my test it gives the following error:
Test suite failed to run
TypeError: jest_1.describe is not a function
here is my test file:
import * as React from "react";
import { shallow, mount, render } from 'enzyme';
import * as Sinon from "sinon";
import MinPriceContainer from "../../src/containers/SearchForm/containers/MinPriceContainer";
import MaxPriceContainer from "../../src/containers/SearchForm/containers/MaxPriceContainer";
import { expect } from "chai";
import { it, before, describe } from 'jest';
describe('<MinValueInput />', () => {
let minValueInput;
beforeEach(() => {
minValueInput = shallow(<MinPriceContainer />);
})
// it('renders component correctly', () => {
// expect(tabs.find('.MinPriceComponent').exists()).toBe(true);
// });
it('cannot have a non numeric value', () => {
minValueInput = shallow(<MinPriceContainer minimumPriceSelected="i am a string not a number" />);
expect(minValueInput.find('.error').text()).equal("You cannot use a non numeric value");
});
it('cannot have a value less thn zero', () => {
minValueInput = shallow(<MinPriceContainer minimumPriceSelected={-20} />);
expect(minValueInput.find('.error').text()).equal("value cannot be less than zero");
});
it('it can not have a value greater than maxValue', () => {
minValueInput = shallow(<MinPriceContainer minimumPriceSelected={99} maximumPriceSelected={80}/>);
expect(minValueInput.find('.error').text()).equal("value cannot be greater than price");
});
});
how can I fix this, is this related to my importS?
is the test written correctly?
the component that I am testing has a number value called minPrice and it can not be negative and also it should not be more than another component that is called maxPrice, also it should only accepts numbers!
I take it you're using ts-jest?
replace
import { it, before, describe } from 'jest';
with
import 'jest';
I am testing a react component that have 5 links on it. Each link becomes active based on the current route. I am using Meteor with Mantra and enzyme for testing these components.
Footer component:
import React from 'react';
class Footer extends React.Component{
render(){
let route = FlowRouter.current().route.name;
return(
<a className={route == 'hub page' ? 'some-class active' : 'some-class'}> . . . (x5)
)
}
}
Testing
describe {shallow} from 'enzyme';
import Footer from '../core/components/footer';
describe('footer',() => {
it('should have 5 links', () => {
const fooWrapper = shallow(<Footer/>);
expect(fooWrapper.find('a')).to.have.length(5);
})
})
But when I run npm test, it says that FlowRouter is not defined. How do I pass the FlowRouter context to a react component in testing? Thanks in advance
First of all, to comply with Mantra specifications, you should rewrite your Footer component like this:
import React from 'react';
const Footer = ({ route }) => (
<a className={
route == 'hub page' ? 'some-class active' : 'some-class'
}> ... (x5)
);
export default footer;
Now to test your Footer, you don't now need FlowRouter at all:
import { shallow } from 'enzyme';
import Footer from '../core/components/footer';
describe('footer', () => {
it('should have 5 links', () => {
const fooWrapper = shallow(<Footer route={'foo'}/>);
expect(fooWrapper.find('a')).to.have.length(5);
})
})
To make the footer reactively re-render as FlowRouter.current() changes, you need to create a Mantra container to wrap it in. To test the container, you can mock FlowRouter like this:
it('should do something', () => {
const FlowRouter = { current: () => ({ route: { name: 'foo' } }) };
const container = footerContainer({ FlowRouter }, otherArguments);
...
})
Since Mantra uses the mocha package directly from NPM instead of the practicalmeteor:mocha or similar Meteor package to run tests, you cannot (to my knowledge) load Meteor packages such as kadira:flow-router in your tests.