Testing Link Style Changes

Testing link style changes

This asynchrony in the CSS update seems like something that protractor/webdriver should be able to wait for. Is your app doing anything unusual to implement the CSS update on hover? Is it specifying an animation or update delay somehow?

That said, I think there can be times when protractor cannot know that an update may take some time, so I think you can write the test with a different approach. Instead of expecting the value to be what you want (and racing with the change in the browser), can you re-phrase the test as "wait-until-value-I-want-shows-up"? (The failure case is a little slower and uglier, but hopefully that is rare.)

Checking for the text-decoration to move to 'underline' seems simpler (and presumably both will change "at once", so you only need to wait for one and can then check the other?)

So remove:

expect(scope.page.forgotPassword.getCssValue("text-decoration")).toEqual("underline");

and use something like this untested code:

browser.wait(function() { 
 return scope.page.forgotPassword.getCssValue("text-decoration")).then(function(value) {
   return value === 'underline';
 });

(Or use the Expected Conditions infrastructure for this ?)

You should be able to hide some of the ugliness in a function:

function waitForValue(valPromise, expectedVal) {
   return browser.wait(function() {
      return valPromise.then(function(value) {
         return value === expectedValue;
      });
   });
}

// Now your test can contain:
waitForValue(scope.page.forgotPassword.getCssValue("text-decoration"), 'underline');

How to test styling using Jest

I agree with Dominik. Jest is good for testing properties of your rendered HTML. Unless the styling is within the HTML (inline styling), Jest will not see it (as you have pointed out). The deepest you could test without in-lining the styles is to verify that it has a proper class name.

Maybe a test framework that runs in a browser like Cypress? Have a read of visual testing with Cypress.

React testing library: Test styles (specifically background image)

getByText won't find the image or its CSS. What it does is to look for a DOM node with the text you specified.

In your case, I would add a data-testid parameter to your background (<div data-testid="background">) and find the component using getByTestId.

After that you can test like this:

expect(getByTestId('background')).toHaveStyle(`background-image: url(${props.image})`)

Make sure you install @testing-library/jest-dom in order to have toHaveStyle.

Testing Style on React component

To test style of dom elements:

1. You should mount the component (using mount), instead of just creating it (using shallow).

2. Since you're changing the style of dom element directly, You should test the style of the dom element (component.getDOMNode().style.display), instead of testing the react style property (component.prop.style).

example:

import $ from "jquery";
it("should create a div and changes its color to red", () => {
  const wrap = mount(
      <div id="red_el"></div>
  );
  const el = wrap.find("#red_el").getDOMNode()
  $(el).css("color", "red");
  expect(el.style.color).toEqual("red");
});

In your case:

it("should open modal", () => {
  const wrapper = mount(
    <div>
      <div id="overlay" style={{ display: "none" }}>
        <div id="modal" style={{ display: "none" }}>
          overlay
        </div>
      </div>
    </div>
  );
  const overlay = wrapper.find("#overlay").getDOMNode();
  const modal = wrapper.find("#modal").getDOMNode();
  ReactHelpers.open_modal(overlay, modal);
  expect(overlay.style.display).toEqual("block");
  expect(modal.style.display).toEqual("block");
});

See it live on codesandbox (switch to the tests tab to run the tests .)

using a hyperlink to change style.display

You're so close! In the HTML 5 spec, a <button> inside of a form has a default type of submit Your javascript runs, and the page imediately "submits" to load the next page. Simply adding type="button" will prevent this and stop submitting the form.

function testfun() {  var voip = document.getElementById("voipLines").value;  if (voip < 1) { //voiplines verification     return document.getElementById("clickerTest").innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";  } else if (voip > 1000) {    return document.getElementById("clickerTest").innerHTML = "<div><p>Make Sure VoIP Lines is within the range of 1 to 1000</p></div>";  } else { // Trying to move the button within the form element    document.getElementById("clickerTest").innerHTML = '<h2 id="testT">Clicker Successful!!!</h2><p>Please click the link below to start <b>' + voip + ' test</b></p><p id="reset">To change the amount of tests to run <a href= "">Click Here</a></p>';  }}

<div class="preT" id="preT">  <form>    <label for="voipLines">VoIP Lines</label>    <input type="number" id="voipLines" name="voipLines" required min="1" max="1000" value="1">    <button class="button" type="button" onclick="testfun()">Test Clicker</button>  </form>  <div class="voipbutton" id="voipbutton">  </div></div><div id="duringT">  <p Id="clickerTest"></p>  <div Id="prBar" data-label=""></div>  <div id="canvascon"></div></div>

Testing a click event with Jasmine that appends a style sheet to the head

I think the chosen answer (even though it's by the OP!) is misleading and incorrect. I'm not sure why it would be "poor form" to test the effect that a piece of JavaScript has on some targeted HTML. Often that's the only output that you can use to verify whether a method works.

The test that's used as an example doesn't actually prove anything: of course click was triggered, you just triggered it! What you want to do is prove something that follows from that click, e.g. a change in a DOM or other data structure, which was the original (IMO correct) instinct.

What you want is to use an asynchronous test to wait for a change in the DOM and then give up, similar to the way the Ruby library Capybara works:

it('loads themes switcher link in head', function() {
  $('.theme-picker').trigger('click');

  waitsFor(function() {
    return $('head').contains('theme_switcher');
  }, 'theme switcher never loaded', 10000);
});

---

Related Topics