26 add tests to simulate user actions

main.js

@@ -3224,4 +3224,7 @@ var getTree = function (treeData) {
 
 module.exports = {
   readSentenceTreeData: readSentenceTreeData,
+  search: search,
+  hideAllWindows: hideAllWindows,
+  listingBtn: document.getElementById("listingBtn")
 };

main.test.js

@@ -1,38 +1,248 @@
-
-// add jquery to global scope
 global.__DEV__ = true
 global.$ = require('jquery');
+global.d3 = require('d3');
+
+const puppeteer = require('puppeteer');
 
-let main;
+describe('Opening viewTree.html', () => {
+  let browser;
+  let page;
+  beforeEach(async () => {
+    browser = await puppeteer.launch();
+    page = await browser.newPage();  
+    await page.goto("https://camel-lab.github.io/palmyra/viewtree.html"); // do this to be able to call functions in main.js, might need to direct the browser at this url
+  });
+  afterEach(() => {
+    browser.close();
+  });
+
+  // tests to be used
+  // Run a specfic test: npm test -- -t  'test_name_matcher' --verbose
+
+  test('Page title should be Palmyra v2.4', async () => {
+    await expect(page.title()).resolves.toMatch('Palmyra v2.4');
+  });
 
-beforeAll(() => {
-  // DOM doesn't load before code runs,
-  // initialize html elements used in main.js
-  // (ids found in viewtree.html)
+  test('Body should contain class viewtree', async () => {
+    await page.$eval('body.viewtree', el => el.text);
+  });
 
-  // create element, add id, then append to document body
-  document.body.appendChild(
-    Object.assign(document.createElement('input'),{id:"filename"})
-  );
-  document.body.appendChild(
-    Object.assign(document.createElement('input'),{id:"configFile"})
-  );
-
-  // include main.js
-  jest.isolateModules(() => {
-    main = require('./main');
+  test('Click on treebtn without adding a conll file', async () => {
+    const expectedMessage = "Please select a ConllU/X file, or use use the Upload button in the sentence uploader section.";
+    // attach mocked event handler
+    const dialogHandler = jest.fn(dialog => dialog.dismiss());
+    page.on('dialog', dialogHandler);
+    // simulate button click
+    await page.click('#treebtn');
+    // get the dialog message and assert
+    const [firstCall] = dialogHandler.mock.calls;
+    const [dialog] = firstCall;
+    expect(dialog.message()).toEqual(expectedMessage);
   });
-});
 
+  test('Click on treebtn without adding a conll file and with a config file', async () => {
+    const expectedMessage = "Please select a ConllU/X file, or use use the Upload button in the sentence uploader section.";
+
+    let ConfigFileUploader = await page.$('#configFile');
+    await ConfigFileUploader.uploadFile('palmyraSampleFiles/config/ud.config');
+
+    let expectedLabelsText = "Relation Labels";
+    let testingLabelsText = (await page.$eval("#labels", el => el.innerText)).trim();
+
+    let expectedPosTagsText = "POS Tags";
+    let testingPosTagsText = (await page.$eval("#postags", el => el.innerText)).trim();
+
+    // attach mocked event handler
+    const dialogHandler = jest.fn(dialog => dialog.dismiss());
+    page.on('dialog', dialogHandler);
+
+    // simulate button click
+    await page.click('#treebtn');
+
+    // get the dialog message and assert
+    const [firstCall] = dialogHandler.mock.calls;
+    const [dialog] = firstCall;
+    expect(dialog.message()).toEqual(expectedMessage);
+
+    // assert text
+    expect(testingLabelsText).toEqual(expectedLabelsText);
+    expect(testingPosTagsText).toEqual(expectedPosTagsText);
+  });
+
+  test('Click on treebtn with adding a conll file', async () => {
+    // simulate file uploads
+    let ConllFileUploader = await page.$('#inputFile');
+    await ConllFileUploader.uploadFile('palmyraSampleFiles/dataFiles/UD-English-Example.conllu');
+
+    // attach mocked event handler
+    const dialogHandler = jest.fn(dialog => dialog.dismiss());
+    page.on('dialog', dialogHandler);
+
+    // simulate button click
+    await page.click('#treebtn');
+
+    let expectedSent = "From the AP comes this story :"
+    let testingSent = (await page.$eval('#sents', el => el.innerText)).trim();
+
+    let expectedTreeCount = 3;
+    let testingTreeCount = parseInt((await page.$eval('#currentTreeNumber', el => el.innerText)).trim().split('/')[1]);
+
+    // assert that no alert is generated
+    expect(dialogHandler.mock.calls.length).toEqual(0);
+    // assert text
+    expect(testingSent).toEqual(expectedSent);
+    expect(testingTreeCount).toEqual(expectedTreeCount);
+  })
+
+  test('Click on treebtn with adding a conll file and a config file', async () => {
+    // simulate file uploads
+    let ConllFileUploader = await page.$('#inputFile');
+    await ConllFileUploader.uploadFile('palmyraSampleFiles/dataFiles/UD-English-Example.conllu');
+    let ConfigFileUploader = await page.$('#configFile');
+    await ConfigFileUploader.uploadFile('palmyraSampleFiles/config/ud.config');
+
+    // attach mocked event handler
+    const dialogHandler = jest.fn(dialog => dialog.dismiss());
+    page.on('dialog', dialogHandler);
+
+    // simulate button click
+    await page.click('#treebtn');
+
+    let expectedSent = "From the AP comes this story :"
+    let testingSent = (await page.$eval('#sents', el => el.innerText)).trim();
+
+    let expectedTreeCount = 3;
+    let testingTreeCount = parseInt((await page.$eval('#currentTreeNumber', el => el.innerText)).trim().split('/')[1]);
+
+    let expectedLabelsText = "apposdislocatedexpliobjnsubjnmodnummodobjoblvocativeadvclaclcsubjccompxcompadvmodamoddiscourseauxcopclfcasedetmarkconjcccompoundfixedflatlistparataxisgoeswithorphanreparandumdeppunctroot";
+    let testingLabelsText = (await page.$eval("#labels", el => el.innerText)).trim().split(' ');
+    testingLabelsText = testingLabelsText[testingLabelsText.length-1];
+
+    let expectedPosTagsText = "ADJADVINTJNOUNPROPNVERBADPAUXCCONJDETNUMPARTPRONSCONJPUNCTSYMX"
+    let testingPosTagsText = (await page.$eval("#postags", el => el.innerText)).trim().split(' ');
+    testingPosTagsText = testingPosTagsText[testingPosTagsText.length-1];
+
+    // assert that no alert is generated
+    expect(dialogHandler.mock.calls.length).toEqual(0);
+    // assert text
+    expect(testingSent).toEqual(expectedSent);
+    expect(testingTreeCount).toEqual(expectedTreeCount);
+    expect(testingLabelsText).toEqual(expectedLabelsText);
+    expect(testingPosTagsText).toEqual(expectedPosTagsText);
+  })
+
+  test('Click on treebtn2 with sentence data entered and config file uploaded', async () => {
+    let ConfigFileUploader = await page.$('#configFile');
+    await ConfigFileUploader.uploadFile('palmyraSampleFiles/config/ud.config');
+    // attach mocked event handler
+    const dialogHandler = jest.fn(dialog => dialog.dismiss());
+    page.on('dialog', dialogHandler);
+    await page.$eval('#treedata2', el => el.value = "this is a sentence\nthis is another sentence");
+
+    // simulate the click
+    await page.$eval('#treebtn2', el => el.click());
+
+    let expectedSent = "this is a sentence";
+    let testingSent = (await page.$eval('#sents', el => el.innerText)).trim();
+
+    let expectedTreeCount = 2;
+    let testingTreeCount = parseInt((await page.$eval('#currentTreeNumber', el => el.innerText)).trim().split('/')[1]);
+
+    let expectedLabelsText = "apposdislocatedexpliobjnsubjnmodnummodobjoblvocativeadvclaclcsubjccompxcompadvmodamoddiscourseauxcopclfcasedetmarkconjcccompoundfixedflatlistparataxisgoeswithorphanreparandumdeppunctroot"
+    let testingLabelsText = (await page.$eval("#labels", el => el.innerText)).trim().split(' ');
+    testingLabelsText = testingLabelsText[testingLabelsText.length-1];
+
+    let expectedPosTagsText = "ADJADVINTJNOUNPROPNVERBADPAUXCCONJDETNUMPARTPRONSCONJPUNCTSYMX"
+    let testingPosTagsText = (await page.$eval("#postags", el => el.innerText)).trim().split(' ');
+    testingPosTagsText = testingPosTagsText[testingPosTagsText.length-1];
+
+    // assert that no alert is generated
+    expect(dialogHandler.mock.calls.length).toEqual(0);
+    // assert text
+    expect(testingSent).toEqual(expectedSent);
+    expect(testingTreeCount).toEqual(expectedTreeCount);
+    expect(testingLabelsText).toEqual(expectedLabelsText);
+    expect(testingPosTagsText).toEqual(expectedPosTagsText);
+  })  
+
+  test('Click on treebtn2 with sentence data entered and config file is not uploaded', async () => {
+    await page.$eval('#treedata2', el => el.value = "this is a sentence\nthis is another sentence");
+
+    // simulate the click
+    await page.$eval('#treebtn2', el => el.click());
+
+    let expectedSent = "this is a sentence";
+    let testingSent = (await page.$eval('#sents', el => el.innerText)).trim();
+
+    let expectedTreeCount = 2;
+    let testingTreeCount = parseInt((await page.$eval('#currentTreeNumber', el => el.innerText)).trim().split('/')[1]);
+
+    let expectedLabelsText = "Relation Labels";
+    let testingLabelsText = (await page.$eval("#labels", el => el.innerText)).trim();
+
+    let expectedPosTagsText = "POS Tags";
+    let testingPosTagsText = (await page.$eval("#postags", el => el.innerText)).trim();
+
+    // assert text
+    expect(testingSent).toEqual(expectedSent);   
+    expect(testingTreeCount).toEqual(expectedTreeCount); 
+    expect(testingLabelsText).toEqual(expectedLabelsText);
+    expect(testingPosTagsText).toEqual(expectedPosTagsText);
+  })
+
+  test('Click on treebtn2 without entering sentence data and config file is uploaded', async () => {
+    let ConfigFileUploader = await page.$('#configFile');
+    await ConfigFileUploader.uploadFile('palmyraSampleFiles/config/ud.config');
+
+    // simulate the click
+    await page.$eval('#treebtn2', el => el.click());
+
+    let expectedSent = "";
+    let testingSent = (await page.$eval('#sents', el => el.innerText)).trim();
+
+    let expectedLabelsText = "apposdislocatedexpliobjnsubjnmodnummodobjoblvocativeadvclaclcsubjccompxcompadvmodamoddiscourseauxcopclfcasedetmarkconjcccompoundfixedflatlistparataxisgoeswithorphanreparandumdeppunctroot"
+    let testingLabelsText = (await page.$eval("#labels", el => el.innerText)).trim().split(' ');
+    testingLabelsText = testingLabelsText[testingLabelsText.length-1];
+
+    let expectedPosTagsText = "ADJADVINTJNOUNPROPNVERBADPAUXCCONJDETNUMPARTPRONSCONJPUNCTSYMX"
+    let testingPosTagsText = (await page.$eval("#postags", el => el.innerText)).trim().split(' ');
+    testingPosTagsText = testingPosTagsText[testingPosTagsText.length-1];
+
+    // assert text
+    expect(testingSent).toEqual(expectedSent);
+    expect(testingLabelsText).toEqual(expectedLabelsText);
+    expect(testingPosTagsText).toEqual(expectedPosTagsText);
+  })
+
+  test('Click on treebtn2 without entering sentence data and config file is not uploaded', async () => {
+    // simulate the click
+    await page.$eval('#treebtn2', el => el.click());
+
+    let expectedSent = "";
+    let testingSent = (await page.$eval('#sents', el => el.innerText)).trim();
+
+    let expectedLabelsText = "Relation Labels";
+    let testingLabelsText = (await page.$eval("#labels", el => el.innerText)).trim();
+
+    let expectedPosTagsText = "POS Tags";
+    let testingPosTagsText = (await page.$eval("#postags", el => el.innerText)).trim();
+
+    // assert text
+    expect(testingSent).toEqual(expectedSent);
+    expect(testingLabelsText).toEqual(expectedLabelsText);
+    expect(testingPosTagsText).toEqual(expectedPosTagsText);
+  })
+});
 
-expectedVal = [{"children": [{"children": [{"collapsed": false, "duplicate": true, "id": 2, "link": "", "name": "this", "pid": 1, "pos": "NOM"}], "collapsed": false, "deps": "_", "duplicate": false, "feats": {"_": "_"}, "id": 1, "lemma": "_", "link": "---", "misc": "_", "name": "this", "pid": 0, "pos": "NOM", "xpos": "_"}, {"children": [{"collapsed": false, "duplicate": true, "id": 4, "link": "", "name": "is", "pid": 3, "pos": "NOM"}], "collapsed": false, "deps": "_", "duplicate": false, "feats": {"_": "_"}, "id": 3, "lemma": "_", "link": "---", "misc": "_", "name": "is", "pid": 0, "pos": "NOM", "xpos": "_"}, {"children": [{"collapsed": false, "duplicate": true, "id": 6, "link": "", "name": "a", "pid": 5, "pos": "NOM"}], "collapsed": false, "deps": "_", "duplicate": false, "feats": {"_": "_"}, "id": 5, "lemma": "_", "link": "---", "misc": "_", "name": "a", "pid": 0, "pos": "NOM", "xpos": "_"}, {"children": [{"collapsed": false, "duplicate": true, "id": 8, "link": "", "name": "sentence", "pid": 7, "pos": "NOM"}], "collapsed": false, "deps": "_", "duplicate": false, "feats": {"_": "_"}, "id": 7, "lemma": "_", "link": "---", "misc": "_", "name": "sentence", "pid": 0, "pos": "NOM", "xpos": "_"}], "collapsed": false, "id": 0, "meta": {"sentenceText": "this is a sentence"}, "name": "*"}, {"children": [{"children": [{"collapsed": false, "duplicate": true, "id": 2, "link": "", "name": "this", "pid": 1, "pos": "NOM"}], "collapsed": false, "deps": "_", "duplicate": false, "feats": {"_": "_"}, "id": 1, "lemma": "_", "link": "---", "misc": "_", "name": "this", "pid": 0, "pos": "NOM", "xpos": "_"}, {"children": [{"collapsed": false, "duplicate": true, "id": 4, "link": "", "name": "is", "pid": 3, "pos": "NOM"}], "collapsed": false, "deps": "_", "duplicate": false, "feats": {"_": "_"}, "id": 3, "lemma": "_", "link": "---", "misc": "_", "name": "is", "pid": 0, "pos": "NOM", "xpos": "_"}, {"children": [{"collapsed": false, "duplicate": true, "id": 6, "link": "", "name": "another", "pid": 5, "pos": "NOM"}], "collapsed": false, "deps": "_", "duplicate": false, "feats": {"_": "_"}, "id": 5, "lemma": "_", "link": "---", "misc": "_", "name": "another", "pid": 0, "pos": "NOM", "xpos": "_"}, {"children": [{"collapsed": false, "duplicate": true, "id": 8, "link": "", "name": "sentence", "pid": 7, "pos": "NOM"}], "collapsed": false, "deps": "_", "duplicate": false, "feats": {"_": "_"}, "id": 7, "lemma": "_", "link": "---", "misc": "_", "name": "sentence", "pid": 0, "pos": "NOM", "xpos": "_"}], "collapsed": false, "id": 0, "meta": {"sentenceText": "this is another sentence"}, "name": "*"}]
+/*
+tests for editing tree functionality
 
-test("set #treedata2 to text then call setSentenceTreeData", () => {
-  // sampleText = "this is a sentence";
-  document.body.innerHTML = `
-    <textarea id="treedata2">this is a sentence\nthis is another sentence</textarea>
-  `;
+test("click on Listing button to show the sentences box", async () => {
+  const expectedNotDisplayValue = 'block';
+  const listingBtn = await page.$("input[type='button'][value='listing']");
+  await listingBtn.click();
+  const sentencesBoxDisplayValue = await page.$eval('#listing', el =>  getComputedStyle(el).getPropertyValue('display'));
+  expect(sentencesBoxDisplayValue).toEqual(expectedDisplayValue);
+})
 
-  ret = main.readSentenceTreeData();
-  expect(ret).toStrictEqual(expectedVal);
-});
+*/

package.json

@@ -19,8 +19,10 @@
   },
   "homepage": "https://github.com/CAMeL-Lab/palmyra#readme",
   "devDependencies": {
+    "d3": "^3.5.6",
     "jest": "^29.0.3",
     "jest-environment-jsdom": "^29.1.2",
+    "jest-puppeteer": "^6.1.1",
     "parcel": "^2.7.0"
   },
   "jest": {

viewtree.html

@@ -50,7 +50,7 @@
                 <input type="button" tabindex="-1" value="download" onClick="downloadToggle()"/>
                 <input type="button" tabindex="-1" value="direction" onClick="directionToggle()"/>
                 <input type="button" tabindex="-1" value="tags" onClick="tagsToggle()" />
-                <input type="button" tabindex="-1" value="listing" onClick="search()" />
+                <input type="button" tabindex="-1" value="listing" onClick="search()" id = "listingBtn"/>
             </div>
         </div>