Are there any tools for unit testing VodaPay Mini-Programs? - vodapay-miniprogram

What are, if any, the testing tools used for test automation when you develop mini-programs on the VodaPay Mini-Program platform? I'm looking specifically to do Unit and E2E testing.

The mini program development platform does not support testing tools directly out of the box. Unit and Integration testing can be incorporated into the platform via a test suite such as Jest or Mocha.
Automated E2E Testing is unsupported since it requires you to run them in a headless browser, which you don't have access to since it compiles to a JavaScript bundle that can only be consumed by a super-app.

As a tester for mini programs. I am currently trying out TestProject which seems to be working well. Still early on and haven't picked up any issues with it yet. Runs the expected journey on the mobile device as well as performing checks on validations messages and text comparisons as instructed during the test case.

In my experience Jest works quite well when writing unit tests for Vodapay mini-programs. You just need to add a file to mock the JSAPI calls, here is a sample of how I have done this in the past.
/* istanbul ignore file */
let page, app, component;
global.App = (obj) => {
app = obj;
};
global.Page = (obj) => {
page = {
data: {},
...obj,
setData(data) {
this.data = { ...this.data, ...data };
}
};
};
global.Component = (obj) => {
component = obj;
};
global.my = {
alert: (obj) => {
return obj;
},
request: (obj) => {
return obj;
},
redirectTo: (obj) => {
return obj;
},
navigateTo: (obj) => {
return obj;
// Do Nothing
},
setStorage: (obj) => {
// Do Nothing
},
getStorageSync: (obj) => {
// Do Nothing
}
};
export { app, page, component };
You can use Jest's setup files to have this included before each of your test files.
In your test files, you can import the page, app, or component that you are testing and you will have access to the object that you use as an argument.

Related

Cypress: Using same fixture file in multiple test

I need to pass the url and other variable in multiple tests[it-function]. For 1st test code run successfully but for 2nd test it showing error. Is there any workaround or solution? My code is as follows
describe('Document Upload', function()
{
before(function () {
cy.fixture('Credential').then(function (testdata) {
this.testdata = testdata
})
})
//1st test
it('Login as manager',function()
{
const login = new loginPage()
cy.visit(this.testdata.baseUrl);
login.getUserName().type(this.testdata.userDocumentM)
login.getPassword().type(this.testdata.passwordDocumentM)
login.getLoginButton().click()
//Logout
login.getUser().click()
login.getLogout().click()
})
//2nd test
it('Create Documents',function()
{
const login = new loginPage()
cy.visit(this.testdata.baseUrl);
login.getUserName().type(this.testdata.userDocumentM)
})
})
The error is
I have tried with above and also using before function again but same error
before(function () {
cy.fixture('Credential').then(function (testdata) {
this.testdata = testdata
})
})
//2nd test
it('Create Documents',function()
{
const login = new loginPage()
cy.visit(this.testdata.baseUrl);
login.getUserName().type(this.testdata.userDocumentM)
})
Starting with Cypress version 12 Test Isolation was introduced. This now means the Mocha context (aka this) is completely cleaned between tests.
Mocha context
It used to be (undocumented) that the Mocha context could be used to preserve variables across tests, for example
before(function () {
cy.fixture("example.json").as('testdata') // preserved on "this"
})
it("check testdata 1", function () {
expect(this.testdata).to.not.be.undefined // passes
})
it("check testdata 2", function () {
expect(this.testdata).to.not.be.undefined // fails in Cypress v12
})
but now that does not work.
The use of Mocha context is a bit arbitrary anyway, and requires explicit use of function-style functions which is easy to forget, particularly in places like array method callbacks Array.forEach(() => {}).
You can still use the Cypress context to store data
before(function () {
cy.fixture("example").then(function (testdata) {
Cypress.testdata = testdata;
})
})
it("check testdata 1", function () {
expect(Cypress.testdata).to.not.be.undefined // passes
})
it("check testdata 2", function () {
expect(Cypress.testdata).to.not.be.undefined // passes
})
Note this is also undocumented and may change in the future.
Caching methods
Technically, the way to do this is to set the alias with beforeEach().
The cy.fixture() command caches it's value, so you do not get the read overhead for each test (see Fixture returns outdated/false data #4716)
There is also cy.session() for more complicated scenarios, which would be officially supported.
beforeEach(() => {
cy.session('testdata', () => {
cy.fixture("example").then(testdata => {
sessionStorage.setItem("testdata", testdata)
})
})
})
it("check testdata 1", function () {
expect(sessionStorage.getItem("testdata")).to.not.be.undefined
})
it("check testdata 2", function () {
expect(sessionStorage.getItem("testdata")).to.not.be.undefined
})
Lastly, cypress-data-session which fills a gap
From the docs
Feature
cy.session
cy.dataSession
Command is
official ✅
community 🎁
Can cache
the browser session state
anything
Stability
experimental !!! not in v12
production
Cache across specs
yes
yes
Access to the cached data
no ???
yes
Custom validation
no
yes
Custom restore
no
yes
Dependent caching
no
yes
Static utility methods
limited
all
GUI integration
yes
no
Should you use it?
maybe
yes
Cypress version support
newer versions
all
Cypress.env()
This is another way that is officially supported,
before(() => {
cy.fixture("example").then(testdata => {
Cypress.env("testdata", testdata)
})
})
it("log my fixture 1", function () {
expect(Cypress.env("testdata")).to.not.be.undefined // passes
})
it("log my fixture 2", function () {
expect(Cypress.env("testdata")).to.not.be.undefined // passes
})
but there are still certain tests scenarios that reset the browser completely where this may not work.

How to run the single test with different data set in parallel by using cypress on single machine

I just have the below Test.json file in the fixture folder:
[
{
"searchKeyword":"cypress"
},
{
"searchKeyword":"QA automation"
},
{
"searchKeyword":"stackoverflow"
}
]
The above file contains three different dataset.
I just have the below spec file and It contains one It (Test case) and It will run multiple times based on the above input.
Test.spec.js file:
describe("Run the test parallel based on the input data",() =>{
const baseUrl = "https://www.google.com/";
before("Login to consumer account", () => {
cy.fixture('Test').then(function (data) {
this.data = data;
})
});
it("Search the keyword", function () {
this.data.forEach((testData) =>{
cy.visit(baseUrl);
cy.xpath("//input[#name='q']").type(testData.searchKeyword);
cy.xpath("//input[#value='Google Search']").click();
cy.get("//ul/li[2]").should("be.visible");
});
});
});
The above code is working as expected. But I just want to run the above single test parallelly by using different dataset.
Example: Three browser instance open and it should pick three different data from the Test.json file and run the single test which is available in the Test.spec.js file.
I just need logic to implement for one of my project, But I'm not able to share the code which is more complex that's reason just create some dummy test data and test script to achieve my logic.
Can someone please share yours thoughts to achieve this.
One way to run multiple instances of Cypress in parallel is via the Module API, which is basically using a Node script to start up the multiple instances.
Node script
// run-parallel.js
const cypress = require('cypress')
const fixtures = require('./cypress/fixtures/Test.json')
fixture.forEach(fixture => {
cypress.run({
env: {
fixture
},
})
})
Test
describe("Run the test for given env data",() =>{
const testData = Cypress.env('fixture')
...
it("Search the keyword", function () {
cy.visit(baseUrl);
cy.xpath("//input[#name='q']").type(testData.searchKeyword);
...
});
});
Awaiting results
cypress.run() returns a promise, so you can collate the results as follows
Videos and screenshots are troublesome, since it tries to save all under the same name, but you can specify a folder for each fixture
const promises = fixtures.map(fixture => {
return cypress.run({
config: {
video: true,
videosFolder: `cypress/videos/${fixture.searchKeyword}`,
screenshotsFolder: `cypress/screenshots/${fixture.searchKeyword}`,
},
env: {
fixture
},
spec: './cypress/integration/dummy.spec.js',
})
})
Promise.all(promises).then((results) => {
console.log(results.map(result => `${result.config.env.fixture.searchKeyword}: ${result.status}`));
});

Can I add cypress screenshot in mocha awesome html report

Im able to generate mocha awesome html report everything fine, but I want to add screenshots in html report im taking cypress screenshot but want to add in html report. Is there any way I can add them?
Consider mochawesome addContext. This will inject about any value into the report. I'm fairly sure that the html report that is generated will display the image given its path. This may require some further reading on addContext.
const { expect } = require('chai');
const addContext = require('mochawesome/addContext');
describe('Cypress tests.', function () {
before(function () {
// Perform Cypress things.
// Take screenshots.
};
after(function () {
const title = 'Screenshot of thing.';
const value = 'path/to/screenshot.png';
addContext(this, {
title,
value,
};
it('Foo should equal batz.', function () {
// Expect some things.
};
};
I use the following code to add screenshots automatically to any (and only) failed tests:
import addContext from 'mochawesome/addContext'
Cypress.on('test:after:run', (test, runnable) => {
if (test.state === 'failed') {
addContext({ test }, {title: 'Screenshot', value: `<path/to/screenshots/folder>/${Cypress.spec.name}/${runnable.parent.title.replace(':', '')} -- ${test.title} (failed).png`})
addContext({ test }, {title: 'Video', value: `<path/to/videos/folder>/${Cypress.spec.name}.mp4`})
}
});
Put it in support/index.js as this file is loaded before any test.
Make sure to update the <path/to/.../folder> above to wherever you save screenshots/videos. The path is relative to the generated html report.

Testing an Async function using Jest / Enzyme

Trying run a test case for the following:
async getParents() {
const { user, services, FirmId } = this.props;
let types = await Models.getAccounts({ user, services, firmId: FirmId });
let temp = types.map((type) => {
if(this.state.Parent_UID && this.state.Parent_UID.value === type.Account_UID) {
this.setState({Parent_UID: {label: type.AccountName, value: type.Account_UID}})
}
return {
label: type.AccountName,
value: type.Account_UID,
}
})
this.setState({ParentOptions: temp});
}
here is what i have so far for my test:
beforeEach(() => wrapper = mount(<MemoryRouter keyLength={0}><AccountForm {...baseProps} /></MemoryRouter>));
it('Test getParents function ',async() => {
wrapper.setProps({
user:{},
services:[],
FirmId:{},
})
wrapper.find('AccountForm').setState({
SourceOptions:[[]],
Parent_UID: [{
label:[],
value:[],
}],
});
wrapper.update();
await
expect(wrapper.find('AccountForm').instance().getParents()).toBeDefined()
});
If i try to make this ToEqual() it expects a promise and not anobject, what else could I add into this test to work properly.
Goal: Make sure the functions gets called correctly. The test is passing at the moment and has a slight increase on test coverage.
Using Jest and Enzyme for React Js
you can put the await before the async method, like:
await wrapper.find('AccountForm').instance().getParents()
and compare if the state was changed.
In another way, if can mock your API request, because this is a test, then you do not need the correct API, but know if the function calls the API correctly and if the return handling is correct.
And, you cand spy the function like:
const spy = jest.spyOn(wrapper.find('AccountForm').instance(), 'getParents');
and campare if the function was called if they are triggered by some action:
expect(spy).toBeCalled()

Skipping a test in Qunit

I just found qHint, a method to integrate jsHint testing into Qunit... but it doesn't work locally (I don't mean localhost) except in Firefox.
So I wanted to add a "warning" or "notice", NOT a test failure, showing that the test was skipped:
// do unit test if not local or local and running Firefox
t = QUnit.isLocal;
if (!t || (t && /Firefox/.test(navigator.userAgent))) {
jsHintTest('JSHint core check', 'js/myplugin.js');
} else {
test('JSHint core check (skipped)', function(){
ok( true, 'check not done locally' );
});
}
I would just like to make it more obvious that a test was skipped, is this possible?
Update: Thanks to Odi for the answer!, but I had to make a slight modification to make the code work in QUnit v1.11.0pre:
QUnit.testSkip = function( testName, callback ) {
QUnit.test(testName + ' (SKIPPED)', function() {
if (typeof callback === "function") {
callback();
}
var li = document.getElementById(QUnit.config.current.id);
QUnit.done(function() {
li.style.background = '#FFFF99';
});
});
};
testSkip = QUnit.testSkip;
I had the same requirement and I simply defined a new kind of test() that I called testSkip().
This test method simply replaces your test function and changes the name to <test name> (SKIPPED). After that the test is considered passed by QUnit.
To further indicate that this is a skipped test, I added a callback function to QUnit.done for each skipped test to change the color of the test in the HTML output to yellow. These callbacks are executed when the test suite is done. Setting the value directly does not work, because QUnit applies the styles for passed/failed tests at the end of the run.
QUnit.testSkip = function() {
QUnit.test(arguments[0] + ' (SKIPPED)', function() {
QUnit.expect(0);//dont expect any tests
var li = document.getElementById(QUnit.config.current.id);
QUnit.done(function() {
li.style.background = '#FFFF99';
});
});
};
testSkip = QUnit.testSkip;
Then you can use testSkip() instead of test() for skipped tests.
For my test suite the result looks like that:
For anyone who may have glazed over the comments, Mottie's comment on the question points out that Qunit now has a skip() function. Just replace any call to test() with skip() to skip that test.

Resources