Skip to content

Commit bf9c0bb

Browse files
Robdel12Robdel12
committed
🎉 Initial project setup
0 parents  commit bf9c0bb

File tree

20 files changed

+4348
-0
lines changed

20 files changed

+4348
-0
lines changed

‎.bundle/config‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
BUNDLE_PATH: "vendor/bundle"

‎.github/workflows/test.yml‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: Tests
2+
on: push
3+
jobs:
4+
build:
5+
runs-on: ubuntu-latest
6+
steps:
7+
- uses: actions/checkout@v2
8+
- uses: ruby/setup-ruby@v1
9+
with:
10+
ruby-version: 2.6
11+
bundler-cache: true
12+
- uses: actions/cache@v2
13+
with:
14+
path: "./vendor/bundle"
15+
key: v1/${{ runner.os }}/ruby-2.6/${{ hashFiles('**/Gemfile.lock') }}
16+
restore-keys: v1/${{ runner.os }}/ruby-2.6/
17+
- uses: actions/setup-node@v1
18+
with:
19+
node-version: 12
20+
- uses: actions/cache@v2
21+
with:
22+
path: ~/.npm
23+
key: v1/${{ runner.os }}/node-12/${{ hashFiles('**/package-lock.lock') }}
24+
restore-keys: v1/${{ runner.os }}/node-12/
25+
- run: make test
26+
env:
27+
PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.venv
2+
node_modules
3+
vendor/bundle
4+
*.log

‎Gemfile‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# frozen_string_literal: true
2+
3+
source "https://rubygems.org"
4+
5+
git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
6+
7+
# gem "rails"
8+
gem 'selenium-webdriver', '~> 4.0.0.beta3'
9+
gem 'percy-selenium', '~> 1.0.0.pre.0'

‎Gemfile.lock‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
GEM
2+
remote: https://rubygems.org/
3+
specs:
4+
childprocess (4.0.0)
5+
percy-selenium (1.0.0.pre.0)
6+
selenium-webdriver (>= 4.0.0.beta1)
7+
rexml (3.2.5)
8+
rubyzip (2.3.0)
9+
selenium-webdriver (4.0.0.beta3)
10+
childprocess (>= 0.5, < 5.0)
11+
rexml (~> 3.2)
12+
rubyzip (>= 1.2.2)
13+
websocket (~> 1.0)
14+
websocket (1.2.9)
15+
16+
PLATFORMS
17+
ruby
18+
19+
DEPENDENCIES
20+
percy-selenium (~> 1.0.0.pre.0)
21+
selenium-webdriver (~> 4.0.0.beta3)
22+
23+
BUNDLED WITH
24+
1.17.2

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 Perceptual Inc.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎Makefile‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
NPM=node_modules/.bin
2+
NPMDEPS=$(node_modules)
3+
VENDOR=vendor/bundle/ruby
4+
5+
.PHONY: npm bundle install clean serve test
6+
7+
8+
$(NPM): $(NPMDEPS)
9+
npm install
10+
11+
$(VENDOR):
12+
bundle install
13+
14+
bundle: $(VENDOR)
15+
16+
npm: $(NPM)
17+
18+
install: npm bundle
19+
20+
clean:
21+
rm -rf $$(cat .gitignore)
22+
23+
serve:
24+
ruby -rwebrick -e'WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd).start'
25+
26+
test: install
27+
$(NPM)/percy exec -- ruby tests/todo.rb

‎README.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
# Selenium Ruby Example
2+
![Tests](https://github.com/percy/example-percy-ruby-selenium/workflows/Tests/badge.svg)
3+
[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/percy/example-percy-ruby-selenium)
4+
5+
Example app showing integration of [Percy](https://percy.io/) visual testing
6+
into Ruby Selenium tests.
7+
8+
Based on the [TodoMVC](https://github.com/tastejs/todomvc) [VanillaJS](https://github.com/tastejs/todomvc/tree/master/examples/vanillajs)
9+
app, forked at commit [4e301c7014093505dcf6678c8f97a5e8dee2d250](https://github.com/tastejs/todomvc/tree/4e301c7014093505dcf6678c8f97a5e8dee2d250).
10+
11+
## Selenium Ruby Tutorial
12+
13+
This tutorial assumes that you're already familiar with Ruby & Selenium and focuses on using them
14+
with Percy. You'll still be able to follow along if you're not familiar with Ruby & Selenium, but
15+
we won't spend time introducing concepts.
16+
17+
This tutorial also assumes you have Ruby, Node, Make, and git installed.
18+
19+
### Step 1
20+
21+
Clone the example application and install dependencies:
22+
23+
``` shell
24+
$ git clone https://github.com/percy/example-percy-ruby-selenium.git
25+
$ cd example-percy-ruby-selenium
26+
$ make install
27+
```
28+
29+
The example app and it's tests will now be ready to go. You can explore the app by running `make
30+
serve` and then opening `localhost:8000` in a browser.
31+
32+
### Step 2
33+
34+
Sign in to Percy and create a new project. You can name the project "todo" if you'd like. After
35+
you've created the project, you'll be shown a token environment variable.
36+
37+
### Step 3
38+
39+
In the shell window you're working in, export the token environment variable:
40+
41+
**Unix**
42+
43+
``` shell
44+
$ export PERCY_TOKEN="<your token here>"
45+
```
46+
47+
**Windows**
48+
49+
``` shell
50+
$ set PERCY_TOKEN="<your token here>"
51+
52+
# PowerShell
53+
$ $Env:PERCY_TOKEN="<your token here>"
54+
```
55+
56+
Note: Usually this would only be set up in your CI environment, but to keep things simple we'll
57+
configure it in your shell so that Percy is enabled in your local environment.
58+
59+
### Step 4
60+
61+
Check out a new branch for your work in this tutorial (we'll call this branch
62+
`tutorial-example`), then run tests & take snapshots:
63+
64+
``` shell
65+
$ git checkout -b tutorial-example
66+
$ make test
67+
```
68+
69+
This will run the app's Selenium tests, which contain calls to create Percy snapshots. The snapshots
70+
will then be uploaded to Percy for comparison. Percy will use the Percy token you used in **Step 2**
71+
to know which organization and project to upload the snapshots to.
72+
73+
You can view the screenshots in Percy now if you want, but there will be no visual comparisons
74+
yet. You'll see that Percy shows you that these snapshots come from your `tutorial-example` branch.
75+
76+
### Step 5
77+
78+
Use your text editor to edit `index.html` and introduce some visual changes. For example, you can
79+
add inline CSS to bold the "Clear completed" button on line 32. After the change, that line looks
80+
like this:
81+
82+
``` html
83+
<button class="clear-completed" style="font-weight:bold">Clear completed</button>
84+
```
85+
86+
### Step 6
87+
88+
Commit the change:
89+
90+
``` shell
91+
$ git commit -am "Emphasize 'Clear completed' button"
92+
```
93+
94+
### Step 7
95+
96+
Run the tests with snapshots again:
97+
98+
``` shell
99+
$ make test
100+
```
101+
102+
This will run the tests again and take new snapshots of our modified application. The new snapshots
103+
will be uploaded to Percy and compared with the previous snapshots, showing any visual diffs.
104+
105+
At the end of the test run output, you will see logs from Percy confirming that the snapshots were
106+
successfully uploaded and giving you a direct URL to check out any visual diffs.
107+
108+
### Step 8
109+
110+
Visit your project in Percy and you'll see a new build with the visual comparisons between the two
111+
runs. Click anywhere on the Build 2 row. You can see the original snapshots on the left, and the new
112+
snapshots on the right.
113+
114+
Percy has highlighted what's changed visually in the app! Snapshots with the largest changes are
115+
shown first You can click on the highlight to reveal the underlying screenshot.
116+
117+
If you scroll down, you'll see that no other test cases were impacted by our changes to the 'Clear
118+
completed' button. The unchanged snapshots appear grouped together at the bottom of the list.
119+
120+
### Finished! 😀
121+
122+
From here, you can try making your own changes to the app and tests, if you like. If you do, re-run
123+
the tests and you'll see any visual changes reflected in Percy.

‎index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!doctype html>
2+
<html lang="en" data-framework="javascript">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>VanillaJS • TodoMVC</title>
6+
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
7+
</head>
8+
<body>
9+
<section class="todoapp">
10+
<header class="header">
11+
<h1>todos</h1>
12+
<input class="new-todo" placeholder="What needs to be done?" autofocus>
13+
</header>
14+
<section class="main">
15+
<input id="toggle-all" class="toggle-all" type="checkbox">
16+
<label for="toggle-all">Mark all as complete</label>
17+
<ul class="todo-list"></ul>
18+
</section>
19+
<footer class="footer">
20+
<span class="todo-count"></span>
21+
<ul class="filters">
22+
<li>
23+
<a href="#/" class="selected">All</a>
24+
</li>
25+
<li>
26+
<a href="#/active">Active</a>
27+
</li>
28+
<li>
29+
<a href="#/completed">Completed</a>
30+
</li>
31+
</ul>
32+
<button class="clear-completed">Clear completed</button>
33+
</footer>
34+
</section>
35+
<footer class="info">
36+
<p>Double-click to edit a todo</p>
37+
<p>Created by <a href="http://twitter.com/oscargodson">Oscar Godson</a></p>
38+
<p>Refactored by <a href="https://github.com/cburgmer">Christoph Burgmer</a></p>
39+
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
40+
</footer>
41+
<script src="js/helpers.js"></script>
42+
<script src="js/store.js"></script>
43+
<script src="js/model.js"></script>
44+
<script src="js/template.js"></script>
45+
<script src="js/view.js"></script>
46+
<script src="js/controller.js"></script>
47+
<script src="js/app.js"></script>
48+
</body>
49+
</html>

‎js/app.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/*global app, $on */
2+
(function () {
3+
'use strict';
4+
5+
/**
6+
* Sets up a brand new Todo list.
7+
*
8+
* @param {string} name The name of your new to do list.
9+
*/
10+
function Todo(name) {
11+
this.storage = new app.Store(name);
12+
this.model = new app.Model(this.storage);
13+
this.template = new app.Template();
14+
this.view = new app.View(this.template);
15+
this.controller = new app.Controller(this.model, this.view);
16+
}
17+
18+
var todo = new Todo('todos-vanillajs');
19+
20+
function setView() {
21+
todo.controller.setView(document.location.hash);
22+
}
23+
$on(window, 'load', setView);
24+
$on(window, 'hashchange', setView);
25+
})();

0 commit comments

Comments
 (0)