Skip to content
This repository has been archived by the owner on Nov 1, 2020. It is now read-only.

Brackets Smoke Tests

Jump to bottom
Narciso Jaramillo edited this page Sep 10, 2013 · 76 revisions

Brackets has a pretty good automated test suite that you can run from Debug > Run Tests, but that doesn't always cover issues with the overall UI and intetegrated functionality, or visual/layout issues that are only obvious if you're actually looking at the product. This is a set of manual tests intended to make sure we haven't broken the basic overall workflows of the product. The intention is to keep it quick--if it takes more than 5 minutes on a given platform it's too long.

There are also Brackets server smoke tests.

If you have trouble running through it or something is unclear, please post to the brackets-dev mailing list.

Setup

  1. Make sure your git status is clean and your user extensions folder and src/extensions/dev folders are both empty (git status will not tell you about these folders).
  2. Quit and relaunch Chrome if it's open (so it's not in remote debugger mode).
  3. If you've run the smokes previously, revert any changes you might have made in brackets/test/smokes/citrus completed.
  4. Delete your cache folder (Mac: ~/Library/Application\ Support/Brackets/cef_data, Win: %appdata%\Brackets\cef_data).
  5. Disable any 3rd party extensions you've installed extension folder (Mac: ~/Library/Application\ Support/Brackets/extensions/user, Win: %appdata%\Brackets\extensions\user)

Smoke test steps

  1. Launch Brackets. Verify that the Brackets "Getting Started" folder is visible in the project panel and its index.html file is opened automatically.
  2. File > Open Folder and browse to the Brackets source folder.
  3. Click on the double-triangle next to the project name. The dropdown should show the "Getting Started" folder and an "Open Folder..." option
  4. Switch back to the "Getting Started" folder using the project dropdown, verifying that it switches back to the previous project and shows its index.html.
  5. Switch back to the "brackets" folder using the project dropdown.
  6. Expand some folders in the brackets project, enough that it has to scroll.
  7. Scroll around in the folder area. Verify that the shadows look right (appears at top when not scrolled all the way to the top) and there are no visual glitches.
  8. From the Finder/Explorer window, drag the brackets/test/smokes/citrus completed folder onto Brackets (note that there's a space in the name; this is intentional). In the Project panel, verify that the folder opened and it contains "css" and "images" folders and an "index.html" file.
  9. From the Finder/Explorer window, drag the brackets/test/smokes/citrus completed/index.html file onto Brackets. Verify that the file is opened, selected, and added to the working set.
  10. File > New
  11. File > Save, name the file temp.js in the current project. Verify that the name in the working set and title bar changes to temp.js and the mode in the status bar changes to "JavaScript".
  12. Type the following code
var foo = "", bar = function(){};
foo.
  1. Verify String method code hints on foo
  2. Insert a new line 2 foo = bar;
  3. On line 3, verify Function method code hints on foo
  4. In the project tree, right-click on temp.js and choose "Rename". Rename the file to temp.txt. Verify that the name in the working set and title bar changes, the code coloring disappears and the mode changes to "Text".
  5. In the project tree, right click on temp.txt and choose delete (when prompted discard changes)
  6. Open the OS Trash/Recycle Bin and confirm temp.txt was deleted
  7. Verify that index.html is now current file. Move mouse over the name of the source of an <img> tag (e.g. "images/events.jpg" on line 33). Verify that Hover Preview of the image is displayed properly with the width and height.
  8. Set the cursor in the <body> tag immediately before the >.
  9. Enter a space. Verify that a list of attribute hints pops up and you can navigate the list with up/down arrow key.
  10. Hit Esc key to dismiss the code hints list, then delete the space so the cursor is after the "y" of "body".
  11. Hit Cmd/Ctrl-E. Verify that it shows a single body rule and that everything is laid out properly.
  12. In the native shell menu, choose View > Increase Font Size. Verify both the host and inline editors font size increases. The inline editor should not show a vertical scrollbar.
  13. Click the lightning bolt in the upper right. If you trashed prefs, you'll get an info dialog explaining how live preview works. Hit OK.
  14. You should see the page load in Chrome.
  15. On Mac, you should get a dialog saying you need to relaunch Chrome. Click "Relaunch". Chrome should relaunch and open the page.
  16. Back in Brackets, on line 26, put the cursor after "A new" and type and totally <em>AWESOME</em> local; let the <em> tag autocomplete (you can arrow or click select after the </em> to type local). Verify that everything appears as you type, except that nothing updates while you type <em, and verify that AWESOME is italicized (and nothing else is).
  17. Undo the file back to a clean state. Verify that as you undo, the HTML preview continues to match the current state of the document, and ends up looking the same as when you first opened the file.
  18. Edit the background color for the tag in the inline editor (#D90 is a nice color). Verify that the color changes in Chrome as you type. Also verify that the CSS file is added to the working set with the dirty bit set.
  19. Hit Cmd/Ctrl-E. Verify that the inline editor closes.
  20. Put the cursor after the <a in one of the navbar items and hit Cmd/Ctrl-E to open another inline editor.
  21. Scroll up and down in the outer editor. Verify that the inline editor scrolls properly with the editor.
  22. Resize the window. Verify that the rule list moves properly and there are no visual glitches.
  23. Hit Esc to close the inline editor.
  24. File > Extension Manager, Install from URL..., and install the Emmet extension using the GitHub URL https://github.com/emmetio/brackets-emmet
  25. Verify the Emmet menu was added
  26. Quit the app. Verify that you get a "save changes" dialog for any CSS files you edited through the inline editor, and choose to discard the changes.
  27. Restart the app. Verify that the "citrus completed" project shows in the sidebar, and that the working set and current editor are showing the same files as when you quit. Also verify that the changes you had previously made were reverted (git status in the smokes folder should show clean).
Clone this wiki locally