diff --git a/.github/workflows/screenshot-comparison.yml b/.github/workflows/screenshot-comparison.yml index e41ebba..ef569dd 100644 --- a/.github/workflows/screenshot-comparison.yml +++ b/.github/workflows/screenshot-comparison.yml @@ -1,49 +1,57 @@ -name: screenshot comparison +name: Screenshot comparison on: push: branches: - - '*' + - "*" pull_request: branches: - - '*' + - "*" jobs: check-screenshot: name: Check Screenshot runs-on: ubuntu-latest steps: - - name: Checkout - uses: actions/checkout@v4 - - name: Install node - uses: actions/setup-node@v4 - with: - node-version: '21.x' - - name: Install Python - uses: actions/setup-python@v5 - with: - python-version: '3.11' - architecture: 'x64' - - name: Install dependencies - run: - pip install --upgrade pip - pip install --upgrade jupyterlab - pip install --upgrade voila - pip install --upgrade voila-osscar-template - pip install -e . + - name: Checkout + uses: actions/checkout@v4 + - name: Install node + uses: actions/setup-node@v4 + with: + node-version: "21.x" + - name: Install Python + uses: actions/setup-python@v5 + with: + python-version: "3.11" + architecture: "x64" + - name: Install dependencies + run: | + pip install --upgrade pip + pip install --upgrade jupyterlab + pip install --upgrade voila + pip install --upgrade voila-osscar-template + pip install -e . + pip install --upgrade selenium + pip install --upgrade Pillow - - name: Run the voila server - run: | - voila --template=osscar --enable_nbextensions=True example/ --port 8383 --no-browser & - pip install --upgrade pytest - pip install --upgrade selenium - pip install --upgrade Pillow + - name: Run the voila server + run: | + voila --template=osscar --enable_nbextensions=True example/ --port 8383 --no-browser & - - uses: nanasess/setup-chromedriver@master - - run: | - export DISPLAY=:99 - chromedriver --url-base=/wd/hub & - sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 & # optional - python3 $GITHUB_WORKSPACE/test/test.py - python3 $GITHUB_WORKSPACE/test/test_figures.py + - uses: nanasess/setup-chromedriver@master + - name: Generate the screenshots + run: | + export DISPLAY=:99 + chromedriver --url-base=/wd/hub & + sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 & # optional + python3 $GITHUB_WORKSPACE/test/test.py + - name: Upload screenshots + uses: actions/upload-artifact@v4 + with: + name: artifact + path: "./*.png" + + - name: Compare the screenshots to the reference one + run: | + python3 $GITHUB_WORKSPACE/test/test_figures.py diff --git a/.github/workflows/widget-test.yml b/.github/workflows/widget-test.yml deleted file mode 100644 index a5fcdda..0000000 --- a/.github/workflows/widget-test.yml +++ /dev/null @@ -1,54 +0,0 @@ -name: widget test - -on: - push: - branches: - - '*' - pull_request: - branches: - - '*' - -jobs: - check-elements: - name: Check Element - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v4 - - name: Install node - uses: actions/setup-node@v4 - with: - node-version: '21.x' - - name: Install Python - uses: actions/setup-python@v5 - with: - python-version: '3.11' - architecture: 'x64' - - name: Install dependencies - run: - pip install --upgrade pip - pip install --upgrade jupyterlab - pip install --upgrade voila - pip install --upgrade voila-osscar-template - pip install --upgrade anywidget - pip install -e . - - - name: Run the voila server - run: | - voila --template=osscar --enable_nbextensions=True example/ --port 8383 --no-browser & - pip install --upgrade pytest - pip install --upgrade selenium - pip install --upgrade Pillow - - - uses: nanasess/setup-chromedriver@master - - run: | - export DISPLAY=:99 - chromedriver --url-base=/wd/hub & - sudo Xvfb -ac :99 -screen 0 1280x1024x24 > /dev/null 2>&1 & # optional - python3 $GITHUB_WORKSPACE/test/test.py - - - uses: actions/upload-artifact@v4 - with: - name: artifact - path: './*.png' - diff --git a/README.md b/README.md index 5139ed5..1caacd4 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,6 @@ [![PyPI version](https://badge.fury.io/py/widget-bandsplot.svg)](https://badge.fury.io/py/widget-bandsplot) [![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/osscar-org/widget-bandsplot/main?labpath=%2Fexample%2Fexample.ipynb) -[![widget test](https://github.com/osscar-org/widget-bandsplot/actions/workflows/widget-test.yml/badge.svg)](https://github.com/osscar-org/widget-bandsplot/actions/workflows/widget-test.yml) [![screenshot comparison](https://github.com/osscar-org/widget-bandsplot/actions/workflows/screenshot-comparison.yml/badge.svg)](https://github.com/osscar-org/widget-bandsplot/actions/workflows/screenshot-comparison.yml) A Jupyter widget to plot band structures and density of states. The widget is using the [mc-react-bands](https://github.com/materialscloud-org/mc-react-bands) Javascript package and is turned into a Jupyter widget with [anywidget](https://anywidget.dev/). @@ -97,16 +96,11 @@ This will ### Github workflow testing -[![widget test](https://github.com/osscar-org/widget-bandsplot/actions/workflows/widget-test.yml/badge.svg)](https://github.com/osscar-org/widget-bandsplot/actions/workflows/widget-test.yml) - -If the `widget test` fails, it indicates there is something wrong with the code, and the widget is NOT -being displayed correctly in the test. - [![screenshot comparison](https://github.com/osscar-org/widget-bandsplot/actions/workflows/screenshot-comparison.yml/badge.svg)](https://github.com/osscar-org/widget-bandsplot/actions/workflows/screenshot-comparison.yml) -If the `widget test` passes but the `screenshot comparison` fails, it indicates the appearance of the widget -is different from the previous version. In this case, you'll need to manually download the artifact from -the `widget test` and use it to replace the `widget-sample.png` figure in the `test` folder. +The `screenshot comparison` test will generate images of the widget using `selenium` and `chrome-driver`, and compares them to the reference image in `test/widget-sample.png`. + +To update the reference image: download the generated image from the Github Workflow step called "Upload screenshots" and replace `test/widget-sample.png`. ## Acknowledgements