How to use getPluginsSourceExample method in Cypress

There is a different id shown above, perhaps you want

cy.get('[id="select2_ID-container"]').click()

You should ensure your server is running before calling cypress run using a utility like wait-on or start-server-and-test.

Cypress's check on the baseUrl is a final courtesy check just so you don't run through your whole test suite on a server that is not running.

For tips on ensuring your server is running before running Cypress, check out the Cypress docs here: https://on.cypress.io/continuous-integration#Boot-your-server

You are returning the value inside your Promise function. Promises however can't return values, they can only resolve with a value. This means you'll have to use Promises throughout your code like this:

function getText(byclassName) {
    return new Promise((resolve, reject) => {
        cy.get(byclassName).invoke('text')
            .then(campaign => {
                cy.log('campaign', campaign);
                resolve(campaign);
            });
    });
}

it('finds the role', function () {
    cy.visit(...);

    return getText('.myClass').then(elementText => {
        cy.log('campaign', elementText);

        expect(elementText).to.equal(...);
    });
})

I'm not sure about timeout in Cypress's custom commands, but you could use a workaround by passing a default param into your custom command like so:

Cypress.Commands.add("login", (waitTimer = 1000) => {
  Auth.signIn(username, password)
    .then(() => {
        cy.wait(waitTimer);
        console.log('Programmatically logged in as ' + username);
    })
    .catch(err => console.log('Error when login in: ', err));
})

Note: Beware that passing timeouts or arbitrarily waiting for an x amount of seconds is not considered good practice. You should instead check for the response's status & assert it returns a 200 status or use route aliases.

Example:

......
.then(response => {
    if (response.status !== 200) {
      cy.log('An error happened while logging in');
    }

The code below should do what you're trying to achieve. There is also an entire recipe with suggestions on how to test links that open in new tabs.

it('Advertise link should refer to Contact page', () => {
   cy.get('div.footer-nav > ul > li:nth-child(2) > a')
     .should('have.attr', 'href').and('include', 'contact')
     .then((href) => {
       cy.visit(href)
     })
})

I would also suggest reading through the Cypress document on the best ways to assign and work with variables: https://on.cypress.io/variables-and-aliases

Be aware in my js file the following was added automatically;

const { contains } = require("cypress/types/jquery");

deleting this line of code, problem solved

I'm not an expert in Cypress specifically, but all testing libraries have to play by the rules of Javascript: their "special functions" (like beforeEach/afterEach) are still just Javascript functions.

Thus, I believe that if you want to make a function that adds both a beforeEach and afterEach, it should be as simple as:

const addBoth = () => {
    beforeEach(() => {
      cy.restoreLocalStorage();
    });

    afterEach(() => {
      cy.saveLocalStorage();
    });
};

and then you just call:

addBoth();

everywhere that you want to add both. And this should be true of any JS library (testing or otherwise), unless it is doing something really clever involving function scopes behind the scenes (eg. React hooks).

Can you just wait on the filename?

cy.contains('[data-render-row-index="1"] > [data-col-index="1"]', filename, 
  { timeout: 30_000 }
)

If the reload is needed to get the correct row entry, a repeating function is a possibility

function refreshForData(filename, attempt = 0) {

  if (attempt > 30 ) {            // 30 seconds with a 1s wait below
    throw 'File did not appear'
  }

  // Synchronous check so as not to fail
  const found = Cypress.$(`[data-render-row-index="1"] > [data-col-index="1"]:contains('${filename}')`)

  if (!found) {
    cy.wait(1_000)
    cy.get('Reload button').click()
    cy.get('Spinner').should('not.be.visible')
    refreshForData(filename, ++attempt)
  }
}

refreshForData(filename)  // pass in filename, function can be globalized
                          // maybe also pass in selector?

A few changes should achieve what you are looking for. Here's a breakdown of steps taken to solve this question...

First off, instead of stubbing out MyDataTransfer, just construct a new DataTransfer object, which comes packed with the necessary properties and methods needed for drag events:

const dataTransfer = new DataTransfer;

Next, it's best to trigger native drop and drag events, as opposed to draggable and dropzone. Selenium Easy is listening for dragstart, dragend, and drop (you can see this inside of their drag-and-drop-demo.js source file). Put these inside of a helper function, to be called later inside the test:

function dndIt() {
  cy.get('#todrag span:first-of-type')
    .trigger('dragstart', { dataTransfer });

  cy.get('#mydropzone')
    .trigger('drop', { dataTransfer });

  cy.get('#todrag span:first-of-type')
    .trigger('dragend');               // <-- seleniumeasy listens for this...
}                                      // otherwise, draggables are copied.    

A beforeEach block is helpful for setting the viewport and visiting the application:

beforeEach(function() {
  cy.viewport(1000, 600);
  cy.visit('https://www.seleniumeasy.com/test/drag-and-drop-demo.html');
});

And finally, the test block calls the helper function, and asserts that the item was dragged and dropped:

it('Check whether the drag and drop of an item is working fine', function() {
  dndIt();

  cy.get('#droppedlist')
    .should(($el) => {
      expect($el.children()).to.have.lengthOf(1)
    });
});

Here's the solution in its entirety:

describe('Verify the drag and drop test', function() {
  const dataTransfer = new DataTransfer;

  function dndIt() {
    cy.get('#todrag span:first-of-type')
      .trigger('dragstart', { dataTransfer });

    cy.get('#mydropzone')
      .trigger('drop', { dataTransfer });

    cy.get('#todrag span:first-of-type')
      .trigger('dragend');               // <-- seleniumeasy listens for this...
  }                                      // if left out, draggables are copied.

  beforeEach(function() {
    cy.viewport(1000, 600);
    cy.visit('https://www.seleniumeasy.com/test/drag-and-drop-demo.html');
  });

  it('Check whether the drag and drop of an item is working fine', function() {
    dndIt();

    cy.get('#droppedlist')
      .should(($el) => {
        expect($el.children()).to.have.lengthOf(1)
      });
  });
});

The drag_n_drop_spec.js provided in the cypress-example-recipes repo was a helpful resource.