wptest

An online web application to reduce web issues directly to webplatform tests.

THIS REPO IS NOW ARCHIVED. IF YOU WOULD LIKE TO PARTICIPATE IN THIS PROJECT,

PLEASE GO TO THE NEW LOCATION Editor.

See it live

Visit wptest.center to get started!

Features

1. Protoyping HTML, CSS, and Javascript code. See sample code rendered on page.
2. Examine CSS properties of rendered elements. Inspect elements similar to the developer tools avaliable in your browser.
3. Add expected values for properties to test against. Useful to test how elements render on various browsers.
4. Save prototype tests with your Github account to load later. Or search and load tests made by others.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

Requirements

You will need node.js with npm and MongoDB installed.

Run npm i -g typescript (in terminal) to install typescript on your machine.

Project Setup

1. Run npm i (in terminal while inside the project) to install the required packages.
2. If using a version of MongoDB different from 3.6, update the file mongo.cmd at line C:\Program Files\MongoDB\Server\3.6\bin\mongod.exe to the version of MongoDB installed. (3.6 to your version)
3. Create a path uploads/db from the root of the project. Local MongoDB data will be saved here.
4. Run mongo.cmd command first. (double-click cmd file from the file explorer or run ./mongo.cmd from terminal)
5. Run complie.cmd on any changes made.
6. Run start.cmd to start running locally at http://localhost:3000

Getting Started

This project was completed in Typescript. For more information on developing in Typescript here.

wptest-vm.tsx contains the model of the data that the view is in sync with and displays.

wptest.tsx contains the elements and the logic of the view. View elements are written using the React and JSX syntax, but under the hood use mithril as base for a custom framework. Essentially each Tag represent a DOM element, and can define (bound) attributes which you can use to pass data into it. Additionally, you can define helper functions within the scope of the element, and use local state where appropriate.

This project uses the Monaco (Visual Studio Code Online Editor) as its editor. You can find its definition in monaco.d.ts

Run compile.cmd on any changes made to compile the Typescript into Javascript to use.

Submitting Contributions

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repositories using our CLA.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Contact

Issues

Any issues related to the project can be found here. Feel free to submit more for any feature requests or bugs.

Reporting Security Issues

Security issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at secure@microsoft.com. You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Further information, including the MSRC PGP key, can be found in the Security TechCenter.

License

This project is under MIT license described in detail here.