The website frontend for autograder.io, implemented using Vue and Typescript. For information about contributing to Autograder.io, see our contributing guide.
Follow the dev stack setup tutorial for the autograder-full-stack repo.
To run the unit tests (with coverage):
npm test
In addition to the items listed here, all source code must follow our Typescript/Vue coding standards.
Run npm run build
to check for some style issues using TSLint. All code must be free of TSLint errors. This command should also be treated as the single source of truth for type checking, as different editor plugins have various shortcomings.
- HTML/CSS
- Prefer classes to id's unless you can guarantee that only one element
with the id will exist at a time.
- Prefer using nested or otherwise more specific CSS class selectors when you need to override some imported style.
- Use skewer-case for class and id names.
- Avoid adding a class or id solely for the purpose of being able to
select an element in test cases. Prefer to use a
data-testid=xxx
attribute andwrapper.find('[data-testid=xxx]')
for this purpose. Use snake_case fordata-testid
values.
- Prefer classes to id's unless you can guarantee that only one element
with the id will exist at a time.
- Copying objects in components
- If a component needs to modify the members of an object passed as input
via
@Prop
, make a deep copy of that object and modify the copy. - Similarly, if a component does NOT need to modify members of an
@Prop
input, do NOT copy the object. - When receiving a new or updated object from an observer
update_
function, make a deep copy of the object. - Use the
deep_copy
function insrc/utils.ts
to make deep copies of class instances that have a constructor and/or member functions. For other objects,JSON.parse(JSON.stringify(...))
is the preferred approach.
- If a component needs to modify the members of an object passed as input
via