Test the Web Forward Tokyo
This is an english post ;-)
Today, I joined Test the Web Forward Tokyo that is a hackathon event for implementing tests of the specification of W3C held in Google Japan Office.
I’ve never wrote a test for the specification of W3C. I learned the flow to implement the test in the hackathon today. So I’d like to summarize the flow that is the steps to implement the test for the specification.
1. Forking the repository of W3C test cases
First, I forked the repository of W3C test cases on GitHub. If you don’t have a GitHub account, sign up first.
2. Cloning the forked repository
Next, I cloned my forked repository of test cases. From here, I’ll be described in example using my forked repository.
$ git clone [email protected]:summerwind/web-platform-tests.git
I initialized git submodules after cloning.
$ cd web-platform-tests
$ git submodule init
$ git submodule update
3. Starting an HTTP server
Test cases are implemented by HTML, CSS and JavaScript. To execute the tests, need an HTTP server and a browser. In order to start an HTTP server on my Mac, I entered the following command.
$ python -m SimpleHTTPServer
4. Understanding specifications
I choose to implement a test for the Shadow DOM specification. Need to understand the spec before writing a test, so I read the spec and found the part that possible me to write a test.
5. Implementing test cases
I decided to try to implement the test case for the inheritance of contentEditable attribute because I couldn’t find such test case in the existing test case. Before writing a test, I created a working branch named ‘submission/summerwind’.
$ git checkout -b submission/summerwind
After create a working branch, I started implementing the test case for the inheritance of contentEditable attribute.
$ vim shadow-dom/user-interaction/editing/inheritance-of-content-editable-001.html
Many test cases of W3C is used the ‘testharnes.js’ that is a common framework for test case. If you don’t know how to use this framework, let’s read the following post.
6. Asking for review
Some experts of Shadow DOM was also participating in the Hackathon as mentor. so I was able to ask questions and asked to review test my case to them. They said “The contentEditable attribute of Shadow DOM is related to the spec of HTML Living Standard. Please re-implement your test case based on HTML Living Standard.”. After that, I changed my test case based on contentEditable attribute of HTML Living Standard.
7. Commit
I’ve commited the test case to my repository when finished implementing my test case.
$ git add shadow-dom/user-interaction/editing/inheritance-of-content-editable-001.html
$ git commit
Then I’ve pushed my working branch to remote branch.
$ git push origin submission/summerwind
8. Pull Request
After pushing my working branch to remote branch, I created a Pull Request (PR) from my repository to W3C repository. The following is a PR that I’ve actually created.
If received comments from reviewer, you may be required to answer or modify test case.
9. Complete!
After the pull request is merged, the implementation of the test case is complete! By members of today’s hackathon, 609 test cases has been created. That’s great!
Looking back Hackathon
Recently, I’ve been spending time to write a backend code as Ruby on Rails or Node.js. So I really enjoyed to write HTML, CSS, and JavaScript and was feel that “We are making the next web” by implementing test case today.
After hackathon, I joined W3C Developer Meetup in Tokyo too. I met a friend for the first time in a long time, we enjoyed talking about the Old Semantic Web :-)
