Develop Reference

Cypress unable to select multiselect with loop

I am writing a React application that I'm testing with Cypress. In my integration tests I've written a cypress command that takes an array of strings, in order to select items in a multi-value select box.
The code I'm using looks roughly like this:
Cypress.Commands.add("command", (options) => {
options.forEach((option) => {
cy.get("div[data-g-portal-id='1']") // this is the container for the select box dropdown
.find("div[role='menubar']")
.contains(option)
.click({ force: true });
});
}
I've tried various iterations of this, including things like cy.wrap and .each. Whatever I do, when the array contains more than one item, it clicks one item, the item is marked as selected successfully, then it clicks the other item, marks it as selected, but the first item loses its selection state. Its as if the internal state of the component never really got the initial change.
I've confirmed this is not a bug in my application; when testing it manually, the multi-select works fine. But Cypress just doesn't want to know. Any help would be much appreciated.

The v2.grommet.io/select uses a "portal" to display the dropdown options.
The portal is just a div that's appended to body when the dropdown opened and removed again when an option is clicked.
Problem is, there isn't a property to connect the dropdown and portal containing the options. There may be other portals present e.g the Layer component uses a portal.
The options portal we need to target will always be the last portal on the page (since we just opened the dropdown). In the custom command, applying the .last() command will select the options portal.
Cypress.Commands.add("multiselect", (options) => {
options.forEach((option) => {
cy.get(`[data-g-portal-id]`)
.last() // just opened the dropdown so option are in the last portal
.find("div[role='menubar']")
.contains(option)
.click();
});
});
cy.get('input[name="my-select"]')
.click(); // open dropdown
.multiselect(['First', 'Third']);
cy.get('input[name="my-select"]')
.click(); // close dropdown
cy.get('input[name="my-select"]')
.should('have.value', 'multiple')
The test ends with dropdown displaying the text "multiple".
Configuration of the Select,
<Select
multiple // allow multiple selected options
closeOnChange={false} // do not close the dropdown between selections
name="my-select"
options={myOptions}
...
/>

Showing a Wordpress Database custom table row column value from the database on button click

I have added a custom table to the WordPress database. In addition to this, I have created a shortcode to be able to attach this to specific pages on my WordPress website. Table has two columns, ID and coupon_code.
The custom table is used to store coupon codes, and I need to be able to display the first row column value (coupon_code = INSERT NUMBER) from this table on a click event of a button.
function coupon_codes() {
?>
<button class="reveal_coupon" onclick="reveal_coupon()">CLICK TO REVEAL
COUPON CODE</button>
<div class="coupon"></div>
<?php
global $wpdb;
$result = $wpdb->get_results ( "SELECT * FROM coupon_codes LIMIT 1"
);
foreach ( $result as $print ) {
echo $print->coupon_code;
}
}
add_shortcode( 'coupon_codes' , 'coupon_codes' );
I do understand that in order to achieve this, I need to move the PHP code into a separate PHP file, because this code is only run server-side and this can be achieved only if I run the file on a click event. That part I understand.
I cannot display the row value unless called with a click event. Which is why I think JS / jQuery would work for this case, but I am unable to figure out the script accurately to make it work.

You seem to have a misunderstanding of how the PHP and HTML/JS/CSS interact.
If you can't display the row value until a button click (which I'm assuming you have your <button class="reveal_coupon"... element for), you're almost on the right track here. Under the assumption that your <div class="coupon"></div> coupon is specifically to hold the coupon data output from your PHP script, there's a few observations I'll make:
You're echoing your data outside of your coupon div, so whatever you output won't necessarily be subject to the CSS styling and JS logic you've implented for this element. Move the PHP code between the <div class="coupon"> and </div>.
In order to achieve your desired functionality, you'll need to add your relevant JavaScript and CSS styles. The most maintainable way would be to break out your JS and CSS into separate files and utilize the wp_enqueue_script and wp_enqueue_style functions in a new function/enqueue hooking pair to insert references to these files in the DOM at the appropriate times:
add_action ( 'wp_enqueue_scripts', 'coupon_enqueue_scripts' );
function coupon_enqueue_scripts() {
wp_enqueue_script("coupon", "coupon.js");
}
add_action ( 'wp_enqueue_styles', 'coupon_enqueue_styles' );
function coupon_enqueue_styles() {
wp_enqueue_style("coupon", "coupon.css");
}
Within these files, you'd want to add (a) Javascript logic to implement the reveal_coupon() function referenced in your current HTML output, and (b) CSS styling to initially hide the coupon codes.

Pass information to bootstrap modal from Angular.js controller

Simplified problem
I have a store. For a product to be included in the store there needs to be a shelf for it. So, to add a new product to the store the workflow is:
Add a shelf
Add product to that shelf
(The workflow can not be changed)
Realization
The shelf is realized by a row in a table, which in turn is controlled by an Angular.js controller (each shelf is an object in an array). To add an product the user selects "create product" in a drop-down menu that is present on each row. This will show an bootstrap modal where I have from a controller added a tab for each product that is possible to add (since each product needs configuration :) ) , then when the user presses a "create" button in the modal a JavaScript method is called interfacing a REST interface to add the product (the UI is updated by a Socket.io event send from the server when the product has been added successfully.
Problem
The JavaScript method (CreateProduct) needs to now what row (R) was affected as well as what tab (T) was selected so that the "onclick" method for the button is CreateProduct(R, T);
My current solution is pretty ugly imho, I have two global variables for R and T, then I use jQuery to capture show event and tab event from the modal, the link in the dropdown has a field "data-row-id" that is identifying the row
HTML (Jade) snippet from dropdown menu:
a(data-toggle="modal", href="#createProduct", data-row-id="{{row.RowID}}") Create Product
JavaScript:
var R = null;
$('#productModal').on('show.bs.modal', function(e) {
R = $(e.relatedTarget).data('row-id');
});
var T = null;
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
T = e.target.text;
});
I hope there is a better solution to this, I probably am just thinking a bit upsidedown due to inexperience with Angular.js , perhaps there is a way to pass these through the model? Perhaps add these to the modal controller, but then, how to pass the row? My dream would be something like this on the button code
button(type="button", class="btn btn-default", data-dismiss="modal", ng-click="storeCtrl.CreateProduct({{modalCtrl.shelf, modalCtrl.Product)") Create Product

I found a better way (at least I don't need to use jQuery) using ModalService
I created a CreateProductModalController having a variable selectedProduct, this is set on a ng-click event in the tab
ul(class="nav nav-pills", id="tabContent")
li(ng-repeat="prod in products", ng-class="{active: $index == 0}", ng-click="activateTab(prod.name)")
a(href="#{{prod.name}}", data-toggle="tab") {{prod.name}}
The ModalService is called with the rowID that was clicked.
The only problem I have now is that all must be in $scope, I want it to be more encapsulated

Javascript: Using a function with rows

I have a table of data being produced with JavaScript. At the end of each row is an image, which is clickable. When clicked, a popup appears containing information based on the row.
I am using the second example on here: http://www.abidibo.net/projects/js/moopopup/demo
Basically, how I have it setup now is this:
The function;
function popup() {
var mp_instance = new moopopup({
overlay: true,
title: 'Copy server address',
html_node: 'mynode',
});
mp_instance.display();
}
make the popup, appear, using a div which is initially hidden
<div id="mynode" style="display:none">Content.</div>
The image then uses onclick to make the popup run.
onclick='popup();'
Now this works with static data, however each row has different content I want to put in to the popup. So i'm confused about how I would make each popup individual to the row, without creating loads of functions with an ID on the end, which basically all do the same thing.
http://www2.lethal-zone.eu/servers/tf2-servers
The image at the end of each row; when clicked shows some extra content...

You generally would want to pass some information to the one function as parameters and then use those parameters to choose the content. For example, pass some ID to the function:
onclick="popup(1);"
function popup(id) {
// do something with id to choose the content
// snip...
}

How to make Collapsible comment box like Stackoverflow

I am building a site and I have a list of status updates and I want to allow the users to write comments for each of of the items in the list
However I am trying to implement a UI similar to the way stack overflow works
specifically the collapsible comment form / list where a user clicks on add comment on the specific status update in the list, and below that item in the list the comment entry form shows up along with the specific comments already posted.
How do I accomplish this using Jquery?
Note: looking also for the markup example another words a working sample. Thanks
And yes if you could show Async postback that would be nice too

To load the content you can just hook up a click event to populate a div using the load method.
For example in the view you could have something like:-
<%= Html.ActionLink("Comments", "CommentList", "Questions", new { Id = this.ViewData.Model.Id }, new { id = "commentLink" })%>
<div id="commentContainer" style="display:none;">
Loading...
</div>
while the javascript to hook everything up would be:-
$(function() {
$("#commentLink").click(function() {
$("#commentContainer").toggle();
if ($("#commentContainer").is(":visible")) {
$("#commentContainer").load($(this).attr("href"));
} else {
$("#commentContainer").html("Loading..."); //Or just leave it as is...
}
return false; //Prevent default action
});
});

The quick approach (for just showing / hiding the comment area) would resemble something like this:
$(function(){
$('#id_of_element_to_use_for_click').click(function(){
$('#id_of_comment_area').slideToggle();
});
});
The jQuery site will provide you with doco on different approaches such as fades, slides or other combined animations.
Your "Comment Area" I've used in the example here would likely be a <div> tag that contains your existing comments, plus whatever textarea or text input box you wanted users to type their answers into.
Do you need to do an asynchronous postback?