Repository: mermaid-js/mermaid
File: cypress/integration/other/configuration.spec.js (JavaScript)

Code before:
      cy.viewport(1440, 1024);
      cy.visit(url);

      cy.get('svg');
      cy.matchImageSnapshot(
        'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
      );
    });
  });

  describe('suppressErrorRendering', () => {
    it('should not render error diagram if suppressErrorRendering is set', () => {
      const url = 'http://localhost:9000/suppressError.html?suppressErrorRendering=true';
      cy.viewport(1440, 1024);
      cy.visit(url);
      cy.get('#test');
      cy.matchImageSnapshot(
        'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
      );
    });

    it('should render error diagram if suppressErrorRendering is not set', () => {
      const url = 'http://localhost:9000/suppressError.html';
      cy.viewport(1440, 1024);
      cy.visit(url);
      cy.get('#test');
      cy.matchImageSnapshot(
        'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
      );
    });
  });
});


Review comment (suggestion):
I'm getting a race-condition when running the E2E test. The following seems to fix it:

```suggestion
      cy.get('#test').find("svg").should(($svg) => {
        expect($svg).to.have.length(5); // all five diagrams should be rendered!
        $svg.each((_index, svg) => {
          expect(cy.$$(svg)).to.be.visible;
        });

        // some of the diagrams should be error diagrams
        expect($svg).to.contain("Syntax error");
      });
```

### Screenshot of before and after

![configuration spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set diff](https://github.com/mermaid-js/mermaid/assets/19716675/01215341-150d-4b5e-a60e-874fa2c84ecb)


Code after:
      cy.visit(url);

      cy.get('svg');
      cy.matchImageSnapshot(
        'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
      );
    });
  });

  describe('suppressErrorRendering', () => {
    beforeEach(() => {
      cy.on('uncaught:exception', (err, runnable) => {
        return !err.message.includes('Parse error on line');
      });
    });

    it('should not render error diagram if suppressErrorRendering is set', () => {
      const url = 'http://localhost:9000/suppressError.html?suppressErrorRendering=true';
      cy.visit(url);
      cy.window().should('have.property', 'rendered', true);
      cy.get('#test')
        .find('svg')
        .should(($svg) => {
          // all failing diagrams should not appear!
          expect($svg).to.have.length(2);
          // none of the diagrams should be error diagrams
          expect($svg).to.not.contain('Syntax error');
        });
      cy.matchImageSnapshot(
        'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
      );
    });

    it('should render error diagram if suppressErrorRendering is not set', () => {
      const url = 'http://localhost:9000/suppressError.html';
      cy.visit(url);
      cy.window().should('have.property', 'rendered', true);
      cy.get('#test')
        .find('svg')
        .should(($svg) => {
          // all five diagrams should be rendered
          expect($svg).to.have.length(5);
          // some of the diagrams should be error diagrams
          expect($svg).to.contain('Syntax error');
        });
      cy.matchImageSnapshot(
        'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
      );
    });
  });
});