How to implement Ext JS project files/classes to Test?

Get help with testing, discuss unit testing strategies etc.


Post Reply
User avatar
nuridesengin
Posts: 57
Joined: Fri Dec 01, 2017 1:41 pm

How to implement Ext JS project files/classes to Test?

Post by nuridesengin »

Hello again, after a long time...

Hopefully I'm getting much better to set a robust Test Structure with inherited classes, test-automation, code-coverage repots.. and I keep improve current Test structure. I'll have 2 questions;

1.
First question is; We have a `singleton` class name of `MyVariables` within `ExtJS` project [MyApp naming for `/app` folder]; of course I can easily get any variable within OOP usage: `MyApp.MyVariables.myFooValue`.

How to connect Ext JS project with Siesta `harness` (new brand `project`) to be able using same OOP method to get most iterative variables which are already storing in project?

2.
As well.. We've developed multi language feature for our application through Mastering Ext JS book. In the book we locate translations files under `/app/resources` path with a single `object` file;

Code: Select all

//translation.js
translations = {
    foo: 'Foo Value',
    bar: 'Bar Value',
    zet: 'Zet Value',

//and it's usage
Ext.define('MyApp.FooButton' {
  text: translations.foo
});

So I've tried to use same `translations` object for test spec but it's not working!

Code: Select all

describe(translations.testingListScreen, function (t) {
    t.it(translations.openGrid, function (t) {
        t.chain(
            {
                navigation: ['Foo', 'Bar']
            }
        )
    });

//and the error when I run `TestSpec`
Test threw an exception
TypeError: run is not a function
    at line 15018, character 30, of http://localhost:1841/myapp/test/Siesta/resources/js/siesta-all.js
    at line 16, character 79, of <anonymous>
The `TestSpec` is already located inside `/app` folder, so it should be able to reach `translations`.
Besides I've tried to load `translations.js` within Siesta `index.html` and used `preload` config on `harness` but I couldn't over come issue!? (BTW: Files loads successfully on Dev-Tools!)

How can I be able to use project files within test cases?

User avatar
nickolay
Core Developer
Core Developer
Posts: 3450
Joined: Mon May 16, 2011 10:48 am

Re: How to implement Ext JS project files/classes to Test?

Post by nickolay »

Hi,

1. If I'm correct, you want to use the `MyApp.MyVariables` singleton in your Siesta project file. This can be done by requiring it, using plain "Ext.require":

Code: Select all

Ext.require('MyApp.MyVariables', function () {
    var project         = new Siesta.Project.Browser.ExtJS()
    
    ...
})
Note however, that the version of ExtJS used by Siesta for its UI is 6.0.1.

2. My guess is that `translations.testingListScreen` is `null`, can you double check that? Placing "transalations.js" in index.html is not correct, as it will be available in the project file only, not in the test files. Correct is to place it in the `preload` config.
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
nuridesengin
Posts: 57
Joined: Fri Dec 01, 2017 1:41 pm

Re: How to implement Ext JS project files/classes to Test?

Post by nuridesengin »

Dear @nickolay thanks for quick answer;

Actually two questions are related to each other. So firstly I'll draw our file-directory;

Code: Select all

- /myapp
-- /app //All ExtJS based classes
--- /globals //Folder for base classes
---- MyVariables.js //Mentioned class.
---- MyFooVar.js //I'll need to get this file as well.
---- MyBarVar.js //and this and several else...
--- app.js
--- /classic
---- /view
----- MyTestSpec.js
---- Application.js
-- /resources
--- /locale
---- translations.js //Mentioned language file.
-- /test
--- /Siesta
---- index.html //The TestRunner
---- index.js //harness file (new brand `project`)
1. If I'm doing correct implementation, I've refactored `index.js` with `Ext.Requier()` but gives error below. However I've too load several different classes to get their variables. So I need a more flex option to use, even fetching all classes will be the best!

Code: Select all

myapp/test/Siesta/MyApp/globals/MyVariables.js 404 Not Found

Code: Select all

//Implementation
Ext.require('MyApp.globals.MyVariables', function () {
    let project = new Siesta.Project.Browser();

    project.configure({
        title: 'MyApp Test Runner',
        viewDOM: true,
        enableCodeCoverage: true,
        coverageUnit: 'file',
        waitForTimeout: 20000,
        isReadyTimeout: 20000,
        runCore: 'sequential',
        separateContext: true,
        //preload : [
        //    "../../resources/locale/en.js",
        ]
    });

    project.start(
        {
            group: 'Application Tests',
            testClass: Siesta.Test.MonkeyClass,
            items: [
                // Some more `RunTestCase` functions...: This Test specs w/out `translations` object runs fine 
                RunTestCase('MyTestSpec') // This one opens app but doesn't do any click!
            ]
        },
2.
- Load through index.html: I can reach `translations` object on console but doesn't effect Test spec.
- Load through `preload`: As you'll notice above; I've already stated `preload` config to load `translations` files in `project.configure()` but even I can see the file loaded on `DevTools/Network` tab, I can not reach variables on console. [usage for w/out `Ext.Requier()` statement and commented `script` tag on index.html]

User avatar
nickolay
Core Developer
Core Developer
Posts: 3450
Joined: Mon May 16, 2011 10:48 am

Re: How to implement Ext JS project files/classes to Test?

Post by nickolay »

1. You probably just need to set the correct Ext.Loader path before using `Ext.require`

Code: Select all

Ext.Loader.setConfig({
    enabled     : true,
    paths       : {
        MyApp : '../../app'
    }
})

Ext.require('MyApp.MyVariables', function () {
    var project         = new Siesta.Project.Browser.ExtJS()

    ...
})
2. Can you post the content of the file that creates "translations" object?
We offer training in both Ext JS and our products, read more here.
Read the API documentation

User avatar
nuridesengin
Posts: 57
Joined: Fri Dec 01, 2017 1:41 pm

Re: How to implement Ext JS project files/classes to Test?

Post by nuridesengin »

Unfortunately `Ext.Loader.setConfig` did not work either. But i've overcome translations issue within using through Joose class system. For now i'll keep going with this adjustment.

Thanks for help.

Post Reply