I am newbie to VueJS (and in test cases as well), apologize if this is already asked question,
I added a method in my component which checks the $route.name and returns a boolean accordingly,
BUT the issue appears in the test cases (JEST)
Have tried it with this but not working
isAbc () {
return this.$route.name === 'abc-route
}
This is my method for which I want to write test case,
const $route = {
name: 'abc-route'
}
const wrapper = shallowMount(Component, {
mocks: {
$route
}
})
I have also tried this approach
https://github.com/facebook/jest/issues/890#issuecomment-209698782
and checked if I can get this.$route.path but no luck with that as well.
Anyone can please mention what am I missing or doing wrong to get this?
In case if anyone gets stucked on it, I have solve it by changing the approach,
Instead of assigning $router, one should do the following
component.vm.$router.replace({ path: '/some/path', name: 'some-name' })
and then test it with
expect(component.vm.isAbc()).toBe(false)
Related
I am very new to playwright and i have a problem.
I am trying to implement comparing two screenshots (before and after) in one test.
this is what i want to achieve:
navigate to webpage
take screenshot (before.png)
do some stuff,state changes, etc
take screenshot (after.png)
compare before.png to after.png (if they are the same test should pass, otherwise test fails)
something like this:
test('compare screenshots', async ({ page }) => {
await page.goto('my website here');
const beforeImage = await page.screenshot({
path: `./screenshots/before.png`
})
//
// some state changes implemented here
//
const afterImage = await page.screenshot({
path: `./screenshots/after.png`
})
expect(beforeImage).toMatchSnapshot(afterImage)
});
but it does not work like this.
Any ideas/suggestions how can i achieve this?
Help would be greatly appreciated
You can do something like this:
test('compare screenshots', async ({ page }, testInfo)=>{
await page.goto(pageUrl);
const screenshotTarget = page.locator(scTarget);
await expect(screenshotTarget).toHaveScreenshot( `${testInfo.title}.png`);
//
// some state changes implemented here
//
await expect(screenshotTarget).toHaveScreenshot( `${testInfo.title}.png`);
});
I prefer to use the test titel for naming my screenshots but it should also work if you just enter the same name twice. Then if you run your tests without --update-snapshots they should fail if some visual changes happened.
The problem with Playwright's toHaveScreenshot and toMatchSnapshot is that they're a bit over-engineered and will only compare a current screenshot to a screenshot from a previous test run. If you want to compare two screenshots that you have as Buffers in memory, you can use the getComparator method that Playwright uses behind the scenes:
import { getComparator } from 'playwright-core/lib/utils';
await page.goto('my website here');
const beforeImage = await page.screenshot({
path: `./screenshots/before.png`
});
//
// some state changes implemented here
//
const afterImage = await page.screenshot({
path: `./screenshots/after.png`
});
const comparator = getComparator('image/png');
expect(comparator(beforeImage, afterImage)).toBeNull();
The advantage of using getComparator is that it fuzzy matches, and you can set the threshold of how many pixels are allowed to be different. If you just want to check that the PNGs are exactly identical, a dead simple method to check for equality between the two screenshots is:
expect(Buffer.compare(beforeImage, afterImage)).toEqual(0)
Beware though - this simpler method is flakey and sensitive to a single pixel difference in rendering (such as if any animations/transitions are not completed or if there are differences in anti-aliasing).
I'm trying to write a test to make sure a particular attribute doesn't exist in my output html, however, I'm having trouble figuring out the appropriate way.
I'm using Jest and Enzyme.
The example html that's being tested is...
Material Design
and the lines that do the testing are...
const linkProps = component.find('a').first().props();
expect( linkProps ).not.toHaveProperty('rel');
I'm not sure if the first line is the most efficient way to find the tag, but it's confirmed to be working. The second line, however, fails even though the rel attr doesn't exist in the html.
It fails with...
expect(received).not.toHaveProperty(path)
Expected path: not "rel"
Received value: undefined
When I use toHaveProperty to test that an attribute does exist, it's fine, but what's the appropriate way to test that it doesn't exist?
I've realised that one possible answer is to use prop() and toBe()
If i'm expecting the attribute to undefined, then that's what I put into the toBe function.
const linkTag = component.find('a');
expect( linkTag.prop('rel') ).toBe(undefined);
There might be better answers though, so I'm not marking this one as correct just yet.
If your test title is 'attribute "rel" should not exist', I would follow same instructions in your test, like:
test('attribute "rel" should not exist', () => {
const linkTag = component.find('a');
expect(linkTag).not.toHaveAttribute('rel');
});
Check toHaveAttribute docs here!
I am very new to testing and I'm struggling my way through all this new stuff I am learning. Today I want to write a test for a vuetify <v-text-field> component like this:
<v-text-field
v-model="user.caption"
label="Name"
:disabled="!checkPermissionFor('users.write')"
required
/>
my test should handle the following case:
an active, logged in user has a array in vuex store which has his permissions as a array of strings. exactly like this
userRights: ['dashboard', 'imprint', 'dataPrivacy']
the checkPermissionFor() function is doing nothing else then checking the array above with a arr.includes('x')
after it came out the right is not included it gives me a negotiated return which handles the disabled state on that input field.
I want to test this exact scenario.
my test at the moment looks like this:
it('user has no rights to edit other user overview data', () => {
const store = new Vuex.Store({
state: {
ActiveUser: {
userData: {
isLoggedIn: true,
isAdmin: false,
userRights: ['dashboard', 'imprint', 'dataPrivacy']
}
}
}
})
const wrapper = shallowMount(Overview, {
store,
localVue
})
const addUserPermission = wrapper.vm.checkPermissionFor('users.write')
const inputName = wrapper.find(
'HOW TO SELECT A INPUT LIKE THIS? DO I HAVE TO ADD A CLASS FOR IT?'
)
expect(addUserPermission).toBe(false)
expect(inputName.props('disabled')).toBe(false)
})
big questions now:
how can I select a input from vuetify which has no class like in my case
how can I test for "is the input disabled?"
wrapper.find method accepts a query string. You can pass a query string like this :
input[label='Name'] or if you know the exact index you can use this CSS query too : input:nth-of-type(2).
Then find method will return you another wrapper. Wrapper has a property named element which returns the underlying native element.
So you can check if input disabled like this :
const buttonWrapper = wrapper.find("input[label='Name']");
const isDisabled = buttonWrapper.element.disabled === true;
expect(isDisabled ).toBe(true)
For question 1 it's a good idea to put extra datasets into your component template that are used just for testing so you can extract that element - the most common convention is data-testid="test-id".
The reason you should do this instead of relying on the classes and ids and positional selectors or anything like that is because those selectors are likely to change in a way that shouldn't break your test - if in the future you change css frameworks or change an id for some reason, your tests will break even though your component is still working.
If you're (understandably) worried about polluting your markup with all these data-testid attributes, you can use a webpack plugin like https://github.com/emensch/vue-remove-attributes to strip them out of your dev builds. Here's how I use that with laravel mix:
const createAttributeRemover = require('vue-remove-attributes');
if (mix.inProduction()) {
mix.options({
vue: {
compilerOptions: {
modules: [
createAttributeRemover('data-testid')
]
}
}
})
}
as for your second question I don't know I was googling the same thing and I landed here!
I am trying to do some unit testing on some existing code. My controller looks something like
class DefaultController extends Controller
{
public function index() {
if (!Session::get('answers', [])) {
App::abort(403, 'Error.');
}
// Do rest of the stuff here
}
}
and my test class looks something like
class DefaultController extends extends TestCase {
public function testIndex_withoutSession() {
// Arrange
/* Nothing to arrange now */
// Act
$this->action('GET', 'DefaultController#index');
// Assert
$this->assertResponseStatus(403);
}
public function testIndex_withSession() {
// Arrange
$this->session(['answers' => array()]);
// Act
$this->action('GET', 'ParticipantController#create');
$this->assertSessionHas('answers');
// this function is giving true
// Assert
$this->assertResponseStatus(200);
$this->flushSession();
}
}
My test cases without the session is working fine but when I want to check it by mocking the session variable 'answers' it is still giving me the error. Can anyone please help me out by figuring what am I doing wrong or how can I do it properly? Without this I cannot proceed any further in checking the code.
Thanks in advance.
Other than the answer typo, the answers array needs at least one element in order to pass your falsey check in the controller. The Test Case will not assert 200.
Either add a value in the test case:
$this->session(['answers' => array('something')]);
Or change the controller:
if (!Session::has('answers')) {
You have $this->session(['answers' => array()]);
But you are looking for answer instead of answers here $this->assertSessionHas('answer');
The extra or the missing 's' in answer is the issue.
app.directive('shuffleBlocks', function($timeout){
return {
link: function(sco,ele,att){
if (itemCnt <= 1) return;
/*Trigger function*/
function triggerEvent(){
...
}
ele.bind('click', triggerEvent);
setInterval(triggerEvent, 5000);
}
}
})
here I wrote the test
var elem = '<div shuffle-blocks><div>';
elem = mockCompile(elem)(rootScope.$new());
setInterval(function(){
expect(......).toBe(....)
});
Obviously this is not the right method,
does anyone know how to test $timeout and setInterval in karma?
UPDATE: The proper method of mocking setInterval in an angular 1.2+ application is to use angular's $interval service. Using the $interval service provides a number of benefits, but the one of most use in this situation is the $interval.flush() method. When writing tests, $interval exposes a .flush() method which allows you to mock the JS clock.
app.directive('shuffleBlocks', function($timeout, $interval){
return {
link: function(sco,ele,att){
if (itemCnt <= 1) return;
/*Trigger function*/
function triggerEvent(){ ... }
ele.bind('click', triggerEvent);
$interval(triggerEvent, 5000);
}
}
});
and then in your unit test:
var elem = '<div shuffle-blocks><div>';
elem = mockCompile(elem)(rootScope.$new());
$interval.flush(5000); // flush accepts the # of ms to be flushed
expect(......).toBe(....);
Hope that's helpful to anyone who looks up this answer in the future. I'll leave my previous answer for those still using 1.1X.
Previous Answer: According the jasmine docs, you should be able to just use the jasmine.Clock.useMock() function to mock the typical javascript clock and manually work your way through the interval. Since angular is just wrapping the native setTimeout function, I'm quite positive it should allow this to work, though I haven't tested it to be sure.
The jasmine docs for version 1.3 are here. Here's the code example that demonstrates how it works.
beforeEach(function() {
timerCallback = jasmine.createSpy('timerCallback');
jasmine.Clock.useMock();
});
it("causes a timeout to be called synchronously", function() {
setTimeout(function() {
timerCallback();
}, 100);
expect(timerCallback).not.toHaveBeenCalled();
jasmine.Clock.tick(101);
expect(timerCallback).toHaveBeenCalled();
});
The only issue I see is that your triggerEvent() function is local to your link function, so I don't know how you'll be able to get to it to mock it. But hopefully that points you in the right direction. If not, sorry, I tried.
UPDATE: The syntax for mocking the clock has changed in Jasmine 2.0. If you are using 2.0, please see the updated docs here.