Getting audio players to play their respective streams out of their element

As an example, we can easily add a test script called Jasmine to the buttons, using code like:

describe("Button A", function() {
  var app;
  beforeEach(function() {
    app = button_a;
  });
  it("has an init function", function() {
    expect(app.init).toBeDefined();
  });
});

We can then check if it switches play to pause when clicking on the button.

  var buttonSelector = ".playButtona";
  var button;
  beforeEach(function() {
    button = document.querySelector(buttonSelector);
  });
  it("switches play/pause images when the button is clicked", function() {
    expect(button.querySelector(".playa").classList.contains("hidea")).toBe(false);
    expect(button.querySelector(".pausea").classList.contains("hidea")).toBe(true);
    button.click();
    expect(button.querySelector(".playa").classList.contains("hidea")).toBe(true);
    expect(button.querySelector(".pausea").classList.contains("hidea")).toBe(false);
    button.click();
  });

And then we can test if the audio is paused or playing when we click the button.

  it("plays audio when the button is clicked", function () {
    var audio = document.querySelector("audio");
    expect(audio.paused).toBe(true);
    button.click();
    expect(audio.paused).toBe(false);
    button.click();
    expect(audio.paused).toBe(true);
  });

The nice thing about these tests is that if anything changes with the code that prevents any of those tests from working, the test runner (shown below the buttons) shows exactly what’s broken and why, which helps you to keep the code in a running state when making other improvements to the code.

2 Likes

If I want to work on this code, but I want to disable the image, and just see the links, what would I change in the javascript?

2nd question:

If I want to put initial at the top:

Above links, what would I need to change in the javascript to do that?

Web console isn’t telling me anything.

I tried changing things in the javascript, but I don’t know what I’m doing.

Working code with links at the top:

.initiale {
  overflow: hidden;
  position: relative;
  width:260px;
  height: 168px;
  background: url("https://i.imgur.com/BBYxKcf.jpg");
  border: 3px solid #0059dd;
  font-family: Tahoma;
  font-weight: bold;
  font-size: 30px;
  color: #0059dd;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
}

.initiale::before,
.initiale::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.initiale::after {
  left: 177px;
}


.linkse {
  width: 266px;
  height: 174px;
}

What did the unit tests show?

2 Likes

What’s a unit test?

#1226 and #1227

That part of the javascript is fine, this deals with other stuff.

or, I have idea what I’m talking about.

A unit test can be for different languages. Basically they are small amounts of code that do one thing. (i.e. a “unit”)

For example, if you expect a click to do something, you can use a test framework like Jasmine that Paul referred to earlier.

https://jasmine.github.io/

describe("A suite is just a function", function() {
  var a;

  it("and so is a spec", function() {
    a = true;

    expect(a).toBe(true);
  });
}); 

For the trivial example, any time “a” is not true, when the test is run it will display something like

A suite is just a function - and so is a spec - FAIL

This lets you know the code has a problem with it somewhere. Conversely, if it doesn’t fail you will know that changes did not break your code.

Once you set up the tests for the code you can run the tests any time you make changes to code to make sure they are still working as you expect them to. Many programmers actually write the tests before they write any code. Unfortunately it is also true that many programmers do not write any tests at all, which makes debugging their code all that much more difficult.

1 Like

And doubly so when they’ve no real idea what it’s supposed to do in the first place.

Isn’t the image already being disabled when you click on it?

From what I can see in the HTML code, it already is at the top above the links.

If I wanted it to load on this, removing the image completely:

first thing you see:

Now click on the player:

nothing.

The javascript stuff would need to change around.

Remove the HTML element called initial?

I did that, but now the playbutton isn’t showing:

or this one:

I’ll be able to look further into this in about 7 hours from now.

We’ll start with this one, remove things piece by piece till the initial image is not showing.

So it starts up like this.

Something in the javascript needs to be adjusted

Just removing this:
<div class="initiale">Links</div>

Doesn’t do it.

[quote=“asasass, post:1243, topic:282569, full:true”]
We’ll start with this one, and you’ll tell me what I should remove first, and we’ll go from there.[/quote]

Will I?

1 Like

You said in 7 hours.

You’ll look further into it.

That’s right, I’ll be able to look further into it at that time.