Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[test] Run snapshot tests on the a11y tree #20019

Merged
merged 6 commits into from
Mar 7, 2020
Merged

[test] Run snapshot tests on the a11y tree #20019

merged 6 commits into from
Mar 7, 2020

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Mar 7, 2020

The actual logic is done in https://github.com/eps1lon/mui-scripts-incubator/tree/master/lib/a11y-snapshot.

It saves a snapshot of the a11y tree for https://material-ui.netlify.com/ and https://material-ui.netlify.com/components/select and checks these against new pushes on master as well as PRs.

example snapshot
<WebArea>
  "Material-UI: A popular React UI framework"
  <link>
    "Skip to content"
  </link>
  <button>
    "Open main navigation"
  </button>
  <combobox autocomplete="list" haspopup="listbox">
    "Search"
  </combobox>
  <combobox description="Change language" haspopup="menu">
    "Change language"
  </combobox>
  <link description="Edit website colors">
    "Edit website colors"
  </link>
  <button description="Toggle light/dark theme">
    "Toggle light/dark theme"
  </button>
  <button description="Toggle right-to-left/left-to-right">
    "Toggle right-to-left/left-to-right"
  </button>
  <combobox description="Toggle notifications panel" haspopup="menu">
    "Toggle notifications panel"
  </combobox>
  <link description="GitHub repository">
    "GitHub repository"
  </link>
  <main>
    ""
    <heading level="1">
      "MATERIAL-UI"
    </heading>
    <heading level="2">
      "React components for faster and easier web development. Build your own
      design system, or start with Material Design."
    </heading>
    <link>
      "GET STARTED"
    </link>
    <link>
      "Star"
    </link>
    <Iframe>
      "Twitter Follow Button"
    </Iframe>
    <link>
      "Get Professional Support"
    </link>
    <text>
      "A quick word from our sponsors:"
    </text>
    <link>
      "a random quick word"
    </link>
    <heading level="3">
      "Installation"
    </heading>
    <text>
      "Install Material-UI's source files via npm. We take care of
      injecting the CSS needed.$ npm install @material-ui/core"
    </text>
    <link>
      "or use a CDN."
    </link>
    <text>
      "Load the default Roboto
      font.<linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/>"
    </text>
    <link>
      "READ INSTALLATION DOCS"
    </link>
    <heading level="3">
      "Usage"
    </heading>
    <text>
      "Material-UI components work without any additional setup, and don't
      pollute the global
      scope.importReactfrom'react';importButtonfrom'@material-ui/core/Button';constApp=()=>(<Buttonvariant="contained"color="primary">Hello
      World</Button>);"
    </text>
    <link>
      "EXPLORE THE DOCS"
    </link>
    <heading level="2">
      "Premium themes"
    </heading>
    <text>
      "Take your project to the next level with premium themes from our store –
      all built on Material-UI."
    </text>
    <link>
      "Browse themes"
    </link>
    <link>
      "BROWSE THEMES"
    </link>
    <heading level="2">
      "Material-UI's sponsors"
    </heading>
    <text>
      "The continued development and maintenance of Material-UI is made possible
      by these generous sponsors:"
    </text>
    <heading level="3">
      "Diamond 💎"
    </heading>
    <text>
      "3/3 slots available"
    </text>
    <heading level="3">
      "Gold 🏆"
    </heading>
    <link>
      "tidelift"
    </link>
    <link>
      "bitsrc"
    </link>
    <link>
      "call-em-all"
    </link>
    <heading level="3">
      "There are more!"
    </heading>
    <text>
      "See the full list of"
    </text>
    <link>
      "our sponsors"
    </link>
    <text>
      ", and learn how you can contribute to the future of Material-UI."
    </text>
    <heading level="2">
      "Praise for Material-UI"
    </heading>
    <text>
      "a random quote about Material-UI"
    </text>
    <link>
      "a random quote about Material-UI"
    </link>
    <link>
      "a random quote about Material-UI"
    </link>
    <link>
      "a random quote about Material-UI"
    </link>
    <heading level="2">
      "a random quote about Material-UI"
    </heading>
    <text>
      "Join these and other great organisations!"
    </text>
    <img>
      "NASA"
    </img>
    <img>
      "Walmart Labs"
    </img>
    <img>
      "Capgemini"
    </img>
    <img>
      "Uniqlo"
    </img>
    <img>
      "Bethesda"
    </img>
    <img>
      "J.P. Morgan"
    </img>
    <img>
      "Shutterstock"
    </img>
    <img>
      "Netflix"
    </img>
    <img>
      "Coursera"
    </img>
    <img>
      "Amazon"
    </img>
    <img>
      "Unity"
    </img>
    <text>
      "Are you using Material-UI?"
    </text>
    <link>
      "LET US KNOW!"
    </link>
  </main>
  <link>
    "Material-UI"
  </link>
  <heading level="2">
    "Community"
  </heading>
  <link>
    "GitHub"
  </link>
  <link>
    "Twitter"
  </link>
  <link>
    "StackOverflow"
  </link>
  <link>
    "Team"
  </link>
  <heading level="2">
    "Resources"
  </heading>
  <link>
    "Support"
  </link>
  <link>
    "Blog"
  </link>
  <link>
    "Material Icons"
  </link>
  <heading level="2">
    "Company"
  </heading>
  <link>
    "About"
  </link>
  <link>
    "Contact Us"
  </link>
  <link>
    "Jobs"
  </link>
  <text>
    "Currently"
  </text>
  <link>
    "v4.9.5. View versions page."
  </link>
  <text>
    ". Released under the"
  </text>
  <link>
    "MIT License"
  </link>
  <text>
    ".Copyright ©2020Material-UI."
  </text>
</WebArea>

Since it's not clear how useful that information is I moved the logic into a separate behavior. This means that the PR workflow in this repository is unaffected. We don't want to burden contributors with experimental workflows and false alarms (see argos and test_browser).

@mui-pr-bot
Copy link

mui-pr-bot commented Mar 7, 2020

No bundle size changes comparing 440a68f...789ef79

Generated by 🚫 dangerJS against 789ef79

@eps1lon eps1lon added the on hold There is a blocker, we need to wait label Mar 7, 2020
on: status
jobs:
build:
if: github.event.state == 'success' && github.event.sender.login == 'netlify[bot]' && github.event.description == 'Deploy preview ready!'
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@eps1lon
Copy link
Member Author

eps1lon commented Mar 7, 2020

Communication is working: https://github.com/eps1lon/mui-scripts-incubator/actions/runs/51451071

We just need to move the trigger so that the message is sent after a successful deploy not right after the push. Need to push this to master in order to get a workflow run on status.

@eps1lon eps1lon removed the on hold There is a blocker, we need to wait label Mar 7, 2020
@eps1lon eps1lon merged commit 230aff6 into master Mar 7, 2020
@eps1lon eps1lon deleted the ci/a11y-snapshot branch March 7, 2020 21:50
EsoterikStare pushed a commit to EsoterikStare/material-ui that referenced this pull request Mar 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants